IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Torkel Ödegaard
2015-07-16 10:44:55 +02:00
parent e1345337ac
commit 57c78bc603
16 changed files with 152 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
public/app/features/admin/partials/edit_user.html
View File

@@ -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">

15
public/app/features/dashboard/unsavedChangesSrv.js
View File

@@ -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');
});
};

9
public/app/features/org/orgUsersCtrl.js
View File

@@ -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();
});

79
public/app/features/org/partials/orgUsers.html
View File

@@ -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>

4
public/app/features/profile/partials/profile.html
View File

@@ -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">

2
public/app/partials/confirm_modal.html
View File

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

55
public/app/partials/invite_users.html Normal file
View File

@@ -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>

2
public/app/services/alertSrv.js
View File

@@ -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

1
public/app/services/utilSrv.js
View File

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

2
public/css/less/bootswatch.dark.less
View File

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

13
public/css/less/bootswatch.light.less
View File

@@ -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);

8
public/css/less/gfbox.less
View File

@@ -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 {

24
public/css/less/grafana.less
View File

@@ -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;
}

6
public/css/less/variables.dark.less
View File

@@ -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;

19
public/css/less/variables.light.less
View File

@@ -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
// -------------------------

6
public/vendor/bootstrap/less/type.less vendored
View File

@@ -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