ux(): worked on new modal design #4191

public/app/features/dashboard/partials/shareModal.html

@@ -1,18 +1,21 @@
-<div class="modal-body gf-box gf-box-no-margin" ng-controller="ShareModalCtrl" ng-init="init()">
-	<div class="gf-box-header">
-		<div class="gf-box-title">
-			<i class="fa fa-share"></i>
+<div class="modal-body" ng-controller="ShareModalCtrl" ng-init="init()">
+
+	<div class="modal-header">
+		<h2 class="modal-header-title">
 			{{modalTitle}}
-		</div>
+		</h2>
 
-		<div ng-model="editor.index" bs-tabs>
-			<div ng-repeat="tab in tabs" data-title="{{tab.title}}">
-			</div>
-		</div>
+		<ul class="gf-tabs">
+			<li class="gf-tabs-item" ng-repeat="tab in tabs">
+				<a class="gf-tabs-link" ng-click="editor.index = $index" ng-class="{active: editor.index === $index}">
+					{{::tab.title}}
+				</a>
+			</li>
+		</ul>
 
-		<button class="gf-box-header-close-btn" ng-click="dismiss();">
+		<a class="modal-header-close" ng-click="dismiss();">
 			<i class="fa fa-remove"></i>
-		</button>
+		</a>
 	</div>
 
 	<div class="gf-box-body" ng-repeat="tab in tabs" ng-if="editor.index == $index">
@@ -50,13 +53,15 @@
 <script type="text/ng-template" id="shareLinkOptions.html">
 	<div class="gf-form-group position-center">
 		<div class="gf-form">
+			<span class="gf-form-label width-5">Include</span>
 			<editor-checkbox text="Current time range" model="options.forCurrent" change="updated()"></editor-checkbox>
 		</div>
 		<div class="gf-form">
-			<editor-checkbox text="Include template variables" model="options.includeTemplateVars" change="updated()"></editor-checkbox>
+			<span class="gf-form-label width-5">Include</span>
+			<editor-checkbox text="Template variables" model="options.includeTemplateVars" change="updated()"></editor-checkbox>
 		</div>
 		<div class="gf-form">
-			<span class="gf-form-label">Theme</span>
+			<span class="gf-form-label width-5">Theme</span>
 			<div class="gf-form-select-wrapper max-width-10">
 				<select class="gf-form-input" ng-model="options.theme" ng-options="f as f for f in ['current', 'dark', 'light']" ng-change="buildUrl()"></select>
 			</div>

public/app/features/org/org_users_ctrl.ts

@@ -75,7 +75,7 @@ export class OrgUsersCtrl {
 
     this.$scope.appEvent('show-modal', {
       src: 'public/app/features/org/partials/invite.html',
-      modalClass: 'modal-no-header invite-modal',
+      modalClass: 'invite-modal',
       scope: modalScope
     });
   }

public/app/features/org/partials/invite.html

@@ -1,55 +1,62 @@
 <div class="modal-body" ng-controller="UserInviteCtrl" ng-init="init()">
 
-	<a class="modal-close" ng-click="dismiss();">
-		<i class="fa fa-remove"></i>
-	</a>
+	<div class="modal-header">
+		<h2 class="modal-header-title">
+			Invite Users
+		</h2>
+		<a class="modal-header-close" ng-click="dismiss();">
+			<i class="fa fa-remove"></i>
+		</a>
+	</div>
 
 	<div class="p-a-2">
-		<h1>
-			Invite Users
-		</h1>
 
-		<div class="modal-tagline">
+		<div class="modal-tagline p-b-2">
 			Send invite or add existing Grafana users to the organization
 			<span class="highlight-word">{{contextSrv.user.orgName}}</span>
 		</div>
 
-		<br>
-		<br>
-
 		<form name="inviteForm">
-			<div class="gf-form-inline" ng-repeat="invite in invites">
-				<div class="gf-form max-width-21">
-					<span class="gf-form-label">Email or Username</span>
-					<input type="text" ng-model="invite.loginOrEmail" required class="gf-form-input" placeholder="email@test.com">
-				</div>
-				<div class="gf-form max-width-14">
-					<span class="gf-form-label">Name</span>
-					<input type="text" ng-model="invite.name" class="gf-form-input" placeholder="name (optional)">
-				</div>
-				<div class="gf-form max-width-10">
-					<span class="gf-form-label">Role</span>
-					<select ng-model="invite.role" class="gf-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']">
-					</select>
-				</div>
-				<div class="gf-form gf-size-auto">
-					<a class="gf-form-label pointer" tabindex="1" ng-click="removeInvite(invite)">
-						<i class="fa fa-remove"></i>
-					</a>
+			<div class="gf-form-group">
+				<div class="gf-form-inline" ng-repeat="invite in invites">
+					<div class="gf-form max-width-21">
+						<span class="gf-form-label">Email or Username</span>
+						<input type="text" ng-model="invite.loginOrEmail" required class="gf-form-input" placeholder="email@test.com">
+					</div>
+					<div class="gf-form max-width-14">
+						<span class="gf-form-label">Name</span>
+						<input type="text" ng-model="invite.name" class="gf-form-input" placeholder="name (optional)">
+					</div>
+					<div class="gf-form max-width-10">
+						<span class="gf-form-label">Role</span>
+						<select ng-model="invite.role" class="gf-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']">
+						</select>
+					</div>
+					<div class="gf-form gf-size-auto">
+						<a class="gf-form-label pointer" tabindex="1" ng-click="removeInvite(invite)">
+							<i class="fa fa-remove"></i>
+						</a>
+					</div>
 				</div>
 			</div>
 
-			<div style="margin-top: 20px; text-align: left;">
-				<a class="btn btn-inverse" ng-click="addInvite()">+ Invite another</a>
-				<div class="gf-form" style="margin-top: 20px">
+			<div class="gf-form-inline gf-form-group">
+				<div class="gf-form">
+					<a class="btn btn-secondary gf-form-btn" ng-click="addInvite()">
+						<i class="fa fa-plus"></i>
+						Invite another
+					</a>
+				</div>
+				<div class="gf-form">
 					<editor-checkbox text="Skip sending invite email" model="options.skipEmails" change="targetBlur()"></editor-checkbox>
 				</div>
 			</div>
 
-			<div class="" style="margin-top: 30px; margin-bottom: 20px;">
+			<div class="gf-form-button-row">
 				<button type="submit" class="btn btn-success" ng-click="sendInvites();">Invite Users</button>
 				<a class="btn-text" ng-click="dismiss()">Cancel</a>
 			</div>
+			<div class="clearfix"></div>
 		</form>
 	</div>
 </div>

public/sass/_variables.scss

@@ -225,3 +225,8 @@ $side-menu-width:  14rem;
 $panel-margin: 0.4rem;
 $dashboard-padding: ($panel-margin * 2) $panel-margin $panel-margin $panel-margin;
 
+// tabs
+$tabs-padding-top: 0.6rem;
+$tabs-padding-bottom: 0.4rem;
+$tabs-top-margin: 0.5rem;
+

public/sass/components/_modals.scss

@@ -37,8 +37,26 @@
 }
 
 .modal-header {
-  padding: 9px 15px;
-	border-bottom: 1px solid $panel-bg;
+  background-color: $body-bg;
+	@include brand-bottom-border();
+	@include clearfix();
+
+  .gf-tabs-link.active {
+    background-color: $panel-bg;
+  }
+}
+
+.modal-header-title {
+  font-style: italic;
+  font-size: $font-size-h3;
+  float: left;
+  padding-top: $spacer * 0.75;
+  margin: 0 $spacer*3 0 $spacer*1.5;
+}
+
+.modal-header-close {
+  float: right;
+  padding: ($tabs-padding-top + $tabs-top-margin/2) $spacer $tabs-padding-bottom;
 }
 
 // Body (where all modal content resides)

public/sass/components/_tabbed_view.scss

@@ -28,7 +28,7 @@
   float: left;
   font-style: italic;
   padding-top: 0.5rem;
-  margin: 0 $spacer*1.5 0 $spacer*1.5;
+  margin: 0 $spacer*3 0 $spacer*1.5;
 }
 
 .tabbed-view-close-btn {
@@ -37,7 +37,7 @@
   margin: 0;
   background-color: transparent;
   border: none;
-  padding: $spacer * 0.8;
+  padding: ($tabs-padding-top + $tabs-top-margin) $spacer $tabs-padding-bottom;
   i {
     font-size: 120%;
   }

public/sass/components/_tabs.scss

@@ -35,7 +35,7 @@
 .gf-tabs {
   @include clearfix();
   float: left;
-  margin: 0.4rem 0 0 0;
+  margin: $tabs-top-margin 0 0 0;
 }
 
 .gf-tabs-item {
@@ -44,7 +44,7 @@
 }
 
 .gf-tabs-link {
-  padding: 0.60rem 1rem 0.50rem 1rem;
+  padding: $tabs-padding-top $spacer $tabs-padding-bottom $spacer;
   margin-right: $spacer/2;
   border: 1px solid transparent;
   position: relative;