Skip to content

N
nexpie-grafana-theme
Commit c97dbf39 by Torkel Ödegaard
Options

ux(): fixed invite box

parent 008a0314
Showing with 95 additions and 81 deletions
public/app/features/org/partials/invite.html
......@@ -4,56 +4,44 @@
<i class="fa fa-remove"></i>
</a>
<h1>
Invite Users
</h1>
<div class="modal-tagline">
Send invite or add existing Grafana users to the organization
<span class="highlight-word">{{contextSrv.user.orgName}}</span>
</div>
<br>
<br>
<div class="p-a-2">
<h1>
Invite Users
</h1>
<div class="modal-tagline">
Send invite or add existing Grafana users to the organization
<span class="highlight-word">{{contextSrv.user.orgName}}</span>
</div>
<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>
<br>
<br>
<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']">
</select>
</li>
<li class="norm-form-item last" ng-show="$index > 0">
<a class="pointer" tabindex="1" ng-click="removeInvite(invite)">
<i class="fa fa-remove"></i>
</a>
</li>
<div class="clearfix"></div>
</ul>
<form name="inviteForm">
<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>
</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 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>
</form>
</div>
</div>
public/sass/_grafana.scss
......@@ -20,6 +20,7 @@
@import "utils/utils";
@import "utils/validation";
@import "utils/angular";
@import "utils/spacings";
// LAYOUTS
@import "layout/page";
......
public/sass/_variables.dark.scss
......@@ -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%);
......
public/sass/_variables.light.scss
......@@ -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;
......
public/sass/_variables.scss
......@@ -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;
public/sass/components/_dropdown.scss
......@@ -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
......@@ -239,5 +239,5 @@
// ---------
.typeahead {
z-index: 1051;
margin-top: 2px; // give it some space to breathe
margin-top: 2px; // give it some space to breathe
}
public/sass/components/_modals.scss
......@@ -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));
......
public/sass/components/_popovers.scss
......@@ -7,7 +7,7 @@
position: absolute;
top: 0;
left: 0;
z-index: $zindexPopover;
z-index: $zindex-popover;
display: none;
max-width: 480px;
padding: 1px;
......
public/sass/components/_tooltip.scss
......@@ -6,7 +6,7 @@
// Base class
.tooltip {
position: absolute;
z-index: $zindexTooltip;
z-index: $zindex-tooltip;
display: block;
visibility: visible;
font-size: 11px;
......@@ -26,7 +26,7 @@
color: $tooltipColor;
text-align: center;
text-decoration: none;
background-color: $tooltipBackground;
background-color: $tooltipBackground;
}
// Arrows
......
public/sass/utils/_spacings.scss 0 → 100644
// 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;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment