feat(invite): began work on invite users dialog, #2353

public/app/features/admin/partials/edit_user.html

@@ -9,7 +9,7 @@
 <div class="page-container">
 	<div class="page">
 		<h2>
-			User details
+			Edit User
 		</h2>
 
 		<form name="userForm">
@@ -17,7 +17,7 @@
 				<div class="tight-form">
 					<ul class="tight-form-list">
 						<li class="tight-form-item" style="width: 100px">
-							<strong>Name</strong>
+							Name
 						</li>
 						<li>
 							<input type="text" required ng-model="user.name" class="input-xxlarge tight-form-input last" >
@@ -28,7 +28,7 @@
 				<div class="tight-form">
 					<ul class="tight-form-list">
 						<li class="tight-form-item" style="width: 100px">
-							<strong>Email</strong>
+							Email
 						</li>
 						<li>
 							<input type="email" ng-model="user.email" class="input-xxlarge tight-form-input last" >
@@ -39,7 +39,7 @@
 				<div class="tight-form">
 					<ul class="tight-form-list">
 						<li class="tight-form-item" style="width: 100px">
-							<strong>Username</strong>
+							Username
 						</li>
 						<li>
 							<input type="text" ng-model="user.login" class="input-xxlarge tight-form-input last" >
@@ -53,16 +53,16 @@
 			<button type="submit" class="pull-right btn btn-success" ng-click="update()" ng-show="!createMode">Update</button>
 		</form>
 
-		<h2>
+		<h3>
 			Change password
-		</h2>
+		</h3>
 
 		<form name="passwordForm">
 			<div>
 				<div class="tight-form">
 					<ul class="tight-form-list">
 						<li class="tight-form-item" style="width: 100px">
-							<strong>New password</strong>
+							New password
 						</li>
 						<li>
 							<input type="password" required ng-minlength="4" ng-model="password" class="input-xxlarge tight-form-input last">
@@ -76,9 +76,9 @@
 			<button type="submit" class="pull-right btn btn-success" ng-click="setPassword()">Update</button>
 		</form>
 
-		<h2>
+		<h3>
 			Permissions
-		</h2>
+		</h3>
 
 		<div>
 			<div class="tight-form last">
@@ -97,9 +97,9 @@
 			<br>
 		</div>
 
-		<h2>
+		<h3>
 			Organizations
-		</h2>
+		</h3>
 
 		<form name="addOrgForm">
 			<div class="tight-form">

public/app/features/dashboard/unsavedChangesSrv.js

@@ -7,7 +7,7 @@ function(angular, _) {
 
   var module = angular.module('grafana.services');
 
-  module.service('unsavedChangesSrv', function($modal, $q, $location, $timeout, contextSrv, $window) {
+  module.service('unsavedChangesSrv', function($rootScope, $q, $location, $timeout, contextSrv, $window) {
 
     function Tracker(dashboard, scope) {
       var self = this;
@@ -139,17 +139,10 @@ function(angular, _) {
         tracker.scope.$emit('save-dashboard');
       };
 
-      var confirmModal = $modal({
-        template: './app/partials/unsaved-changes.html',
-        modalClass: 'confirm-modal',
-        persist: false,
-        show: false,
+      $rootScope.appEvent('show-modal', {
+        src: './app/partials/unsaved-changes.html',
+        modalClass: 'modal-no-header confirm-modal',
         scope: modalScope,
-        keyboard: false
-      });
-
-      $q.when(confirmModal).then(function(modalEl) {
-        modalEl.modal('show');
       });
     };
 

public/app/features/org/orgUsersCtrl.js

@@ -15,6 +15,7 @@ function (angular) {
 
     $scope.init = function() {
       $scope.get();
+      $scope.editor = { index: 0 };
     };
 
     $scope.get = function() {
@@ -36,6 +37,14 @@ function (angular) {
       backendSrv.post('/api/org/users', $scope.user).then($scope.get);
     };
 
+    $scope.openInviteModal = function() {
+      $scope.appEvent('show-modal', {
+        src: './app/partials/invite_users.html',
+        modalClass: 'modal-no-header invite-modal',
+        scope: $scope.$new()
+      });
+    };
+
     $scope.init();
 
   });

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

@@ -9,54 +9,45 @@
 
 		<h2>Organization users</h2>
 
-		<form name="form">
-			<div class="tight-form">
-				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 127px">
-						<strong>Username or Email</strong>
-					</li>
-					<li>
-						<input type="text" ng-model="user.loginOrEmail" required class="input-xlarge tight-form-input" placeholder="user@email.com or username">
-					</li>
-					<li class="tight-form-item">
-						role
-					</li>
-					<li>
-						<select type="text" ng-model="user.role" class="input-medium tight-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']">
-						</select>
-					</li>
-					<li>
-						<button class="btn btn-success tight-form-btn" ng-click="addUser()">Add</button>
-					</li>
-					<div class="clearfix"></div>
-				</ul>
-			</div>
-		</form>
+		<button class="btn btn-success pull-right" ng-click="openInviteModal()">
+			Invite Users
+		</button>
 
 		<br>
 
-		<table class="grafana-options-table form-inline">
-			<tr>
-				<th>Login</th>
-				<th>Email</th>
-				<th>Role</th>
-				<th></th>
-			</tr>
-			<tr ng-repeat="user in users">
-				<td>{{user.login}}</td>
-				<td>{{user.email}}</td>
-				<td>
-					<select type="text" ng-model="user.role" class="input-medium" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']" ng-change="updateOrgUser(user)">
-					</select>
-				</td>
-				<td style="width: 1%">
-					<a ng-click="removeUser(user)" class="btn btn-danger btn-mini">
-						<i class="fa fa-remove"></i>
-					</a>
-				</td>
-			</tr>
-		</table>
+		<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
+			<div ng-repeat="tab in ['Users', 'Pending Invitations']" data-title="{{tab}}">
+			</div>
+		</div>
+
+		<div ng-if="editor.index == 0">
+			<table class="grafana-options-table form-inline">
+				<tr>
+					<th>Login</th>
+					<th>Email</th>
+					<th>Role</th>
+					<th></th>
+				</tr>
+				<tr ng-repeat="user in users">
+					<td>{{user.login}}</td>
+					<td>{{user.email}}</td>
+					<td>
+						<select type="text" ng-model="user.role" class="input-medium" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']" ng-change="updateOrgUser(user)">
+						</select>
+					</td>
+					<td style="width: 1%">
+						<a ng-click="removeUser(user)" class="btn btn-danger btn-mini">
+							<i class="fa fa-remove"></i>
+						</a>
+					</td>
+				</tr>
+			</table>
+
+		</div>
 
+		<div ng-if="editor.index == 1">
+			Pending invitaitons
+		</div>
 	</div>
 </div>
 

public/app/features/profile/partials/profile.html

@@ -8,7 +8,7 @@
 <div class="page-container">
 	<div class="page">
 
-		<h2>Profile details</h2>
+		<h2>Profile</h2>
 
 		<form name="userForm">
 			<div>
@@ -64,7 +64,7 @@
 			<button type="submit" class="pull-right btn btn-success" ng-click="update()">Update</button>
 		</form>
 
-		<h2>Organizations</h2>
+		<h3>Organizations</h3>
 
 		<table class="grafana-options-table">
 			<tr ng-repeat="org in orgs">

public/app/partials/confirm_modal.html

@@ -12,7 +12,7 @@
 		{{title}}
 	</div>
 
-	<div class="confirm-modal-text">
+	<div class="modal-tagline">
 		{{text}}
 	</div>
 

public/app/partials/invite_users.html

@@ -0,0 +1,55 @@
+<div class="modal-body">
+
+	<a class="modal-close" ng-click="dismiss();">
+		<i class="fa fa-remove"></i>
+	</a>
+
+	<h3>
+		Invite Users
+	</h3>
+
+	<div class="modal-tagline">
+		Invite new or existing Grafana users to the organization
+		<span class="highlight-word">{{contextSrv.user.orgName}}</span>
+	</div>
+
+	<br>
+	<br>
+
+	<form name="addOrgForm" style="display: inline-block;">
+		<div class="tight-form">
+			<ul class="tight-form-list">
+				<li class="tight-form-item">
+					Email
+				</li>
+				<li>
+					<input type="text" ng-model="newOrg.name" bs-typeahead="searchOrgs"
+					required class="input-large tight-form-input" placeholder="email@test.com">
+				</li>
+				<li class="tight-form-item">
+					Name
+				</li>
+				<li>
+					<input type="text" ng-model="newOrg.name" bs-typeahead="searchOrgs"
+					required class="input-large tight-form-input" placeholder="name (optional)">
+				</li>
+
+				<li class="tight-form-item">
+					Role
+				</li>
+				<li>
+					<select type="text" ng-model="newOrg.role" class="input-small tight-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']">
+					</select>
+				</li>
+				<div class="clearfix"></div>
+			</ul>
+		</div>
+	</form>
+
+	<div class="" style="margin-top: 30px; margin-bottom: 20px;">
+		<button type="button" class="btn btn-inverse" ng-click="dismiss()">Cancel</button>
+		<button type="button" class="btn btn-success" ng-click="onConfirm();dismiss();">Invite Users</button>
+	</div>
+
+</div>
+

public/app/services/alertSrv.js

@@ -71,7 +71,7 @@ function (angular, _) {
       var confirmModal = $modal({
         template: './app/partials/confirm_modal.html',
         persist: false,
-        modalClass: 'confirm-modal',
+        modalClass: 'modal-no-header confirm-modal',
         show: false,
         scope: scope,
         keyboard: false

public/app/services/utilSrv.js

@@ -14,6 +14,7 @@ function (angular) {
 
     this.showModal = function(e, options) {
       var modal = $modal({
+        modalClass: options.modalClass,
         template: options.src,
         persist: false,
         show: false,

public/css/less/bootswatch.dark.less

@@ -547,8 +547,6 @@ a:hover {
 }
 
 .modal {
- 	.border-radius(1px);
-	border-top: solid 1px lighten(@grayDark, 5%);
 	background-color: @grafanaPanelBackground;
 }
 

public/css/less/bootswatch.light.less

@@ -531,19 +531,6 @@ a.thumbnail {
 	.border-radius(0);
 }
 
-.modal {
-	.border-radius(0);
-	background-color: @bodyBackground;
-	&-header {
-		border-bottom: none;
-	}
-
-	&-footer {
-		border-top: none;
-		background-color: transparent;
-	}
-}
-
 .popover {
 	.border-radius(0);
 

public/css/less/gfbox.less

@@ -65,14 +65,8 @@
   margin: 15px;
   background: @grafanaPanelBackground;
   position: relative;
-  border: 1px solid @grayDark;
+  border: 1px solid @pageContainerBorderColor;
   padding: 20px 20px 60px 49px;
-
-  h2 {
-    color: @textColor;
-    font-weight: normal;
-    font-size: 22px;
-  }
 }
 
 .page {

public/css/less/grafana.less

@@ -257,18 +257,28 @@
   td:first-child { text-align: right; }
 }
 
-.confirm-modal {
+.modal-no-header {
   border: 1px solid @grafanaTargetFuncBackground;
-  max-width: 500px;
-  background-color: @grafanaPanelBackground;
   text-align: center;
 
+  h3 {
+    margin-top: 30px;
+  }
+
   .modal-close {
     float: right;
     font-size: 140%;
     padding: 10px;
   }
 
+  .modal-tagline {
+    font-size: 16px;
+  }
+}
+
+.confirm-modal {
+  max-width: 500px;
+
   .confirm-modal-icon {
     padding-top: 41px;
     font-size: 280%;
@@ -282,10 +292,6 @@
     margin-bottom: 15px;
   }
 
-  .confirm-modal-text {
-    font-size: 16px;
-  }
-
   .confirm-modal-buttons {
     margin-top: 35px;
     margin-bottom: 35px;
@@ -354,5 +360,7 @@
   color: @orange;
 }
 
-
+.highlight-word {
+  color: @orange;
+}
 

public/css/less/variables.dark.less

@@ -69,8 +69,8 @@
 @altFontFamily:         @serifFontFamily;
 
 @headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
-@headingsFontWeight:    bold;    // instead of browser default, bold
-@headingsColor:         @textColor; // empty to use BS default, @textColor
+@headingsFontWeight:    normal;    // instead of browser default, bold
+@headingsColor:         darken(@white,11%); // empty to use BS default, @textColor
 @inputText:             @black;
 
 
@@ -98,6 +98,8 @@
 @grafanaListHighlight:      #333;
 @grafanaListMainLinkColor: @textColor;
 
+@pageContainerBorderColor: @grayDark;
+
 // Scrollbars
 @scrollbarBackground: #3a3a3a;
 @scrollbarBackground2: #3a3a3a;

public/css/less/variables.light.less

@@ -33,9 +33,9 @@
 
 // grafana Variables
 // -------------------------
-@grafanaPanelBackground: 	@white;
-@grafanaPanelBorder: 		  solid 1px #ddd;
-@grafanaTriggerBorder:		solid 1px @grayLighter;
+@grafanaPanelBackground: 	@grayLighter;
+@grafanaPanelBorder: 	  	solid 1px #ddd;
+@grafanaTriggerBorder:		solid 1px @grayLight;
 
 // Submenu
 @submenuBackground:     rgb(218, 217, 217);
@@ -58,16 +58,14 @@
 
 // Scaffolding
 // -------------------------
-@bodyBackground:        #EAEAEA;
+@bodyBackground:        #EFEFEF;
 @textColor:             @gray;
 
-
 // Links
 // -------------------------
 @linkColor:             @gray;
 @linkColorDisabled:     lighten(@linkColor,30%);
-@linkColorHover:        @grayDarker;
-
+@linkColorHover:        darken(@linkColor, 20%);
 
 // Typography
 // -------------------------
@@ -76,14 +74,14 @@
 @monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
 
 @baseFontSize:          14px;
-@baseFontWeight:		400;
+@baseFontWeight:		    400;
 @baseFontFamily:        @sansFontFamily;
 @baseLineHeight:        20px;
 @altFontFamily:         @serifFontFamily;
 
 @headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
-@headingsFontWeight:    bold;    // instead of browser default, bold
-@headingsColor:         @grayDarker; // empty to use BS default, @textColor
+@headingsFontWeight:    normal;    // instead of browser default, bold
+@headingsColor:         @textColor; // empty to use BS default, @textColor
 
 
 // Component sizing
@@ -111,6 +109,7 @@
 @grafanaListHighlightContrast: #ddd;
 @grafanaListMainLinkColor:     @textColor;
 
+@pageContainerBorderColor: darken(@grafanaTargetBackground, 5%);
 
 // Tables
 // -------------------------

public/vendor/bootstrap/less/type.less

@@ -74,9 +74,9 @@ h1,
 h2,
 h3 { line-height: @baseLineHeight * 2; }
 
-h1 { font-size: @baseFontSize * 2.75; } // ~38px
-h2 { font-size: @baseFontSize * 2.25; } // ~32px
-h3 { font-size: @baseFontSize * 1.75; } // ~24px
+h1 { font-size: @baseFontSize * 2.00; } // ~38px
+h2 { font-size: @baseFontSize * 1.75; } // ~32px
+h3 { font-size: @baseFontSize * 1.50; } // ~24px
 h4 { font-size: @baseFontSize * 1.25; } // ~18px
 h5 { font-size: @baseFontSize; }
 h6 { font-size: @baseFontSize * 0.85; } // ~12px