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

ux(): fixed invite box

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-02-16 14:39:45 +01:00
parent 008a031493
commit c97dbf390e
10 changed files with 94 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
public/app/features/org/partials/invite.html
View File

@ -4,6 +4,7 @@
<i class="fa fa-remove"></i>
</a>
<div class="p-a-2">
<h1>
Invite Users
</h1>
@ -17,43 +18,30 @@
<br>
<form name="inviteForm">
<div style="display: inline-block">
<div class="norm-form-container">
<div class="norm-form" ng-repeat="invite in invites">
<ul class="norm-form-list">
<li class="norm-form-item">
Email or Username
</li>
<li>
<input type="text" ng-model="invite.loginOrEmail" required class="input-large norm-form-input" placeholder="email@test.com">
</li>
<li class="norm-form-item">
Name
</li>
<li>
<input type="text" ng-model="invite.name" class="input-large norm-form-input" placeholder="name (optional)">
</li>
<li class="norm-form-item">
Role
</li>
<li>
<select ng-model="invite.role" class="input-small norm-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']">
<div class="gf-form-inline" ng-repeat="invite in invites">
<div class="gf-form gf-size-max-xxl">
<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 gf-size-max-xl">
<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 gf-size-max-lg">
<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>
</li>
<li class="norm-form-item last" ng-show="$index > 0">
<a class="pointer" tabindex="1" ng-click="removeInvite(invite)">
</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>
</li>
<div class="clearfix"></div>
</ul>
</div>
</div>
<div style="margin-top: 20px; text-align: left;">
<a class="btn btn-inverse" ng-click="addInvite()">+ Invite another</a>
<div class="form-inline" style="margin-top: 20px">
<div class="gf-form" style="margin-top: 20px">
<editor-checkbox text="Skip sending invite email" model="options.skipEmails" change="targetBlur()"></editor-checkbox>
</div>
</div>
@ -61,10 +49,7 @@
<div class="" style="margin-top: 30px; margin-bottom: 20px;">
<button type="submit" class="btn btn-success" ng-click="sendInvites();">Invite Users</button>
<a class="btn-text" ng-click="dismiss()">Cancel</a>
</div>
</div>
</form>
</div>
</div>

1
public/sass/_grafana.scss
View File

@ -20,6 +20,7 @@
@import "utils/utils";
@import "utils/validation";
@import "utils/angular";
@import "utils/spacings";
// LAYOUTS
@import "layout/page";

12
public/sass/_variables.dark.scss
View File

@ -172,18 +172,6 @@ $dropdownLinkBackgroundHover: $blue-dark;
// COMPONENT VARIABLES
// --------------------------------------------------
// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
$zindexDropdown: 1000;
$zindexPopover: 1010;
$zindexTooltip: 1020;
$zindexFixedNavbar: 1030;
$zindexModalBackdrop: 1040;
$zindexModal: 1050;
// -------------------------
$placeholderText: darken($text-color, 25%);

12
public/sass/_variables.light.scss
View File

@ -193,18 +193,6 @@ $dropdownLinkBackgroundHover: $blue;
// --------------------------------------------------
// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
$zindexDropdown: 1000;
$zindexPopover: 1010;
$zindexTooltip: 1030;
$zindexFixedNavbar: 1030;
$zindexModalBackdrop: 1040;
$zindexModal: 1050;
// Input placeholder text color
// -------------------------
$placeholderText: $gray-light;

15
public/sass/_variables.scss
View File

@ -171,7 +171,7 @@ $table-sm-cell-padding: .3rem !default;
// Forms
$input-padding-x: .75rem !default;
$input-padding-y: .5rem !default;
$input-padding-y: .6rem !default;
$input-line-height: 1.25rem !default;
$input-border-radius: $border-radius !default;
@ -196,3 +196,16 @@ $cursor-disabled: not-allowed !default;
$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default;
$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default;
$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default;
// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
$zindex-dropdown: 1000;
$zindex-popover: 1010;
$zindex-tooltip: 1020;
$zindex-navbar-fixed: 1030;
$zindex-modal-backdrop: 1040;
$zindex-modal: 1050;

4
public/sass/components/_dropdown.scss
View File

@ -42,7 +42,7 @@
position: absolute;
top: 100%;
left: 0;
z-index: $zindexDropdown;
z-index: $zindex-dropdown;
display: none; // none by default, but block on "open" of the menu
float: left;
min-width: 140px;
@ -139,7 +139,7 @@
right: 0;
bottom: 0;
top: 0;
z-index: $zindexDropdown - 10;
z-index: $zindex-dropdown - 10;
}
// Right aligned dropdowns

4
public/sass/components/_modals.scss
View File

@ -9,7 +9,7 @@
right: 0;
bottom: 0;
left: 0;
z-index: $zindexModalBackdrop;
z-index: $zindex-modal-backdrop;
background-color: $black;
}
@ -21,7 +21,7 @@
// Base modal
.modal {
position: fixed;
z-index: $zindexModal;
z-index: $zindex-modal;
width: 100%;
background-color: $panel-bg;
@include box-shadow(0 3px 7px rgba(0,0,0,0.3));

2
public/sass/components/_popovers.scss
View File

@ -7,7 +7,7 @@
position: absolute;
top: 0;
left: 0;
z-index: $zindexPopover;
z-index: $zindex-popover;
display: none;
max-width: 480px;
padding: 1px;

2
public/sass/components/_tooltip.scss
View File

@ -6,7 +6,7 @@
// Base class
.tooltip {
position: absolute;
z-index: $zindexTooltip;
z-index: $zindex-tooltip;
display: block;
visibility: visible;
font-size: 11px;

39
public/sass/utils/_spacings.scss Normal file
View File

@ -0,0 +1,39 @@
// Margin and Padding
.m-x-auto {
margin-right: auto !important;
margin-left: auto !important;
}
@each $prop, $abbrev in (margin: m, padding: p) {
@each $size, $lengths in $spacers {
$length-x: map-get($lengths, x);
$length-y: map-get($lengths, y);
.#{$abbrev}-a-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides
.#{$abbrev}-t-#{$size} { #{$prop}-top: $length-y !important; }
.#{$abbrev}-r-#{$size} { #{$prop}-right: $length-x !important; }
.#{$abbrev}-b-#{$size} { #{$prop}-bottom: $length-y !important; }
.#{$abbrev}-l-#{$size} { #{$prop}-left: $length-x !important; }
// Axes
.#{$abbrev}-x-#{$size} {
#{$prop}-right: $length-x !important;
#{$prop}-left: $length-x !important;
}
.#{$abbrev}-y-#{$size} {
#{$prop}-top: $length-y !important;
#{$prop}-bottom: $length-y !important;
}
}
}
// Positioning
.pos-f-t {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: $zindex-navbar-fixed;
}