From c97dbf390e2e3bfc775035e2ce1ff1272650bedf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 16 Feb 2016 14:39:45 +0100 Subject: [PATCH] ux(): fixed invite box --- public/app/features/org/partials/invite.html | 79 ++++++++------------ public/sass/_grafana.scss | 1 + public/sass/_variables.dark.scss | 12 --- public/sass/_variables.light.scss | 12 --- public/sass/_variables.scss | 15 +++- public/sass/components/_dropdown.scss | 6 +- public/sass/components/_modals.scss | 4 +- public/sass/components/_popovers.scss | 2 +- public/sass/components/_tooltip.scss | 4 +- public/sass/utils/_spacings.scss | 39 ++++++++++ 10 files changed, 94 insertions(+), 80 deletions(-) create mode 100644 public/sass/utils/_spacings.scss diff --git a/public/app/features/org/partials/invite.html b/public/app/features/org/partials/invite.html index 6b3c1afffaf..30a92fe80cb 100644 --- a/public/app/features/org/partials/invite.html +++ b/public/app/features/org/partials/invite.html @@ -4,56 +4,44 @@ -

- Invite Users -

+
+

+ Invite Users +

-
- Send invite or add existing Grafana users to the organization - {{contextSrv.user.orgName}} -
+
+ Send invite or add existing Grafana users to the organization + {{contextSrv.user.orgName}} +
-
-
+
+
-
-
-
-
-
    -
  • - Email or Username -
    • -
  • - -
    • -
  • - Name -
    • -
  • - -
    • - -
  • - Role -
    • -
  • - -
    • -
  • - - - -
    • -
    -
+ +
+
+ Email or Username + +
+
+ Name + +
+
+ Role + +
+
+ + +
+ Invite another -
+
@@ -61,10 +49,7 @@
Cancel -
-
- + +
- - diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 7af990353bf..0a635ede623 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -20,6 +20,7 @@ @import "utils/utils"; @import "utils/validation"; @import "utils/angular"; +@import "utils/spacings"; // LAYOUTS @import "layout/page"; diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index c2557fc9a65..505945c1a68 100644 --- a/public/sass/_variables.dark.scss +++ b/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%); diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 1898f06fd39..a1cbaf63798 100644 --- a/public/sass/_variables.light.scss +++ b/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; diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 6a18034273f..ae954d40c0a 100644 --- a/public/sass/_variables.scss +++ b/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; + + diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss index 546f8b1c168..af2888be739 100644 --- a/public/sass/components/_dropdown.scss +++ b/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 } diff --git a/public/sass/components/_modals.scss b/public/sass/components/_modals.scss index 435e46f9634..6a13a3df164 100644 --- a/public/sass/components/_modals.scss +++ b/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)); diff --git a/public/sass/components/_popovers.scss b/public/sass/components/_popovers.scss index cf9ea93b80b..b426450d118 100644 --- a/public/sass/components/_popovers.scss +++ b/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; diff --git a/public/sass/components/_tooltip.scss b/public/sass/components/_tooltip.scss index 7b0349bc7cb..e70e1010bf1 100644 --- a/public/sass/components/_tooltip.scss +++ b/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 diff --git a/public/sass/utils/_spacings.scss b/public/sass/utils/_spacings.scss new file mode 100644 index 00000000000..cd543c8c90b --- /dev/null +++ b/public/sass/utils/_spacings.scss @@ -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; +}