From a685e46fb62de6d1de4e05c62259826c96bbedf1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 20 Feb 2016 11:05:06 +0100 Subject: [PATCH 1/8] ux(): minor tweaks --- .../dashboard/timepicker/dropdown.html | 4 +--- .../features/datasources/partials/edit.html | 2 +- public/app/features/styleguide/styleguide.html | 18 ++++++------------ public/app/features/styleguide/styleguide.ts | 3 +++ public/app/partials/dashboard.html | 2 +- public/sass/_variables.dark.scss | 16 ++++++++-------- public/sass/_variables.light.scss | 10 +++++----- public/sass/components/_buttons.scss | 12 ++++++------ public/sass/layout/_page.scss | 4 +++- public/sass/pages/_styleguide.scss | 1 + 10 files changed, 35 insertions(+), 37 deletions(-) diff --git a/public/app/features/dashboard/timepicker/dropdown.html b/public/app/features/dashboard/timepicker/dropdown.html index a9fdf1ff404..c13271cb0a3 100644 --- a/public/app/features/dashboard/timepicker/dropdown.html +++ b/public/app/features/dashboard/timepicker/dropdown.html @@ -35,15 +35,13 @@ - -
- +
diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html index 5c8a6492bb1..349ac0c18b6 100644 --- a/public/app/features/datasources/partials/edit.html +++ b/public/app/features/datasources/partials/edit.html @@ -41,7 +41,7 @@
- Cancel diff --git a/public/app/features/styleguide/styleguide.html b/public/app/features/styleguide/styleguide.html index 9a0aaa313dc..8695bcc0e91 100644 --- a/public/app/features/styleguide/styleguide.html +++ b/public/app/features/styleguide/styleguide.html @@ -26,20 +26,14 @@ -
- - - - - - +
+
+ +
- -
- - -
diff --git a/public/app/features/styleguide/styleguide.ts b/public/app/features/styleguide/styleguide.ts index f44ddc5970d..31c0424ee6d 100644 --- a/public/app/features/styleguide/styleguide.ts +++ b/public/app/features/styleguide/styleguide.ts @@ -6,6 +6,9 @@ import _ from 'lodash'; class StyleGuideCtrl { colors: any = []; theme: string; + buttonNames = ['primary', 'secondary', 'inverse', 'success', 'warning', 'danger']; + buttonSizes = ['btn-small', '', 'btn-large']; + buttonVariants = ['-', '-outline-']; /** @ngInject **/ constructor($http) { diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html index 685429d5e84..dbb84aa375d 100644 --- a/public/app/partials/dashboard.html +++ b/public/app/partials/dashboard.html @@ -100,7 +100,7 @@
- + ADD ROW
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index f94cab08b43..6967249dbd6 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -92,8 +92,8 @@ $modal-background: $black; $code-tag-bg: #444; // Lists -$grafanaListBackground: $dark-3; -$grafanaListAccent: lighten($dark-2, 2%); +$grafanaListBackground: $dark-3; +$grafanaListAccent: lighten($dark-2, 2%); $grafanaListBorderTop: $dark-3; $grafanaListBorderBottom: $black; $grafanaListHighlight: #333; @@ -117,20 +117,20 @@ $table-border: $dark-3; // table and cell border $btn-primary-bg: $brand-primary; $btn-primary-bg-hl: lighten($brand-primary, 8%); -$btn-info-bg: lighten($purple, 3%); -$btn-info-bg-hl: darken($purple, 3%); +$btn-secondary-bg: $blue-dark; +$btn-secondary-bg-hl: lighten($blue-dark, 3%); -$btn-success-bg-hl: darken($green, 3%); +$btn-success-bg-hl: darken($green, 3%); $btn-success-bg: lighten($green, 3%); $btn-warning-bg: $brand-warning; -$btn-warning-bg-hl: lighten($brand-warning, 8%); +$btn-warning-bg-hl: lighten($brand-warning, 8%); $btn-danger-bg: lighten($red, 3%); $btn-danger-bg-hl: darken($red, 3%); $btn-inverse-bg: $dark-3; -$btn-inverse-bg-hl: lighten($dark-3, 1%); +$btn-inverse-bg-hl: lighten($dark-3, 1%); $btn-inverse-text-color: $link-color; $btn-link-color: $gray-3; @@ -226,7 +226,7 @@ $successText: #468847; $successBackground: $btn-success-bg; $infoText: $blue-dark; -$infoBackground: $btn-info-bg; +$infoBackground: $blue-dark; // Tooltips and popovers // ------------------------- diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index e2c8fb06c8a..8d29c1571eb 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -31,7 +31,7 @@ $white: #fff; // Accent colors // ------------------------- $blue: #2AB2E4; -$blue-dark: #75CAEB; +$blue-dark: #3CAAD6; $green: #28B62C; $red: #FF4136; $yellow: #FF851B; @@ -125,8 +125,8 @@ $scrollbarBorder: $gray-4; $btn-primary-bg: $brand-primary; $btn-primary-bg-hl: lighten($brand-primary, 8%); -$btn-info-bg: lighten($purple, 3%); -$btn-info-bg-hl: darken($purple, 3%); +$btn-secondary-bg: $blue-dark; +$btn-secondary-bg-hl: lighten($blue-dark, 4%); $btn-success-bg: lighten($green, 3%); $btn-success-bg-hl: darken($green, 3%); @@ -250,8 +250,8 @@ $successText: lighten($green, 10%); $successBackground: $green; $successBorder: transparent; -$infoText: lighten($purple,10%); -$infoBackground: $purple; +$infoText: $blue; +$infoBackground: $blue-dark; $infoBorder: transparent; diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss index 4f71e2075bb..19494a75b53 100644 --- a/public/sass/components/_buttons.scss +++ b/public/sass/components/_buttons.scss @@ -65,7 +65,7 @@ } .btn-link { - color: $btn-link-color; + color: $btn-link-color; } // Set the backgrounds @@ -86,8 +86,8 @@ @include buttonBackground($btn-success-bg, $btn-success-bg-hl); } // Info appears as a neutral blue -.btn-info { - @include buttonBackground($btn-info-bg, $btn-info-bg-hl); +.btn-secondary { + @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl); } // Inverse appears as dark gray .btn-inverse { @@ -100,10 +100,10 @@ @include button-outline-variant($btn-primary-bg); } .btn-outline-secondary { - @include button-outline-variant($btn-inverse-bg); + @include button-outline-variant($btn-secondary-bg); } -.btn-outline-info { - @include button-outline-variant($btn-info-bg); +.btn-outline-inverse { + @include button-outline-variant($btn-inverse-bg); } .btn-outline-success { @include button-outline-variant($btn-success-bg); diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index 48c4e33b5df..e4a20793ccf 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -18,6 +18,7 @@ } } +$color-page-hero-bg: #2e2e2e; .page-container { background-color: $page-bg; position: relative; @@ -26,6 +27,7 @@ margin-left: 0; min-height: calc(100% - 54px); padding-bottom: $spacer * 5; + background-image: linear-gradient(60deg, rgba(0, 0, 0, 0) 0%, lighten($page-bg, 5%) 98%); } .page-header { @@ -40,7 +42,7 @@ border-top: 0; border-right: 0; border-left: 0; - border-bottom: 4px solid transparent; + border-bottom: 2px solid transparent; h1 { font-style: italic; diff --git a/public/sass/pages/_styleguide.scss b/public/sass/pages/_styleguide.scss index dd8c0775c8b..55aabb01f01 100644 --- a/public/sass/pages/_styleguide.scss +++ b/public/sass/pages/_styleguide.scss @@ -16,6 +16,7 @@ .style-guide-button-list { padding: $spacer; button { + display: block; margin: 0 $spacer $spacer 0; } } From 57e6e0092de6583cb4260c05a8c0ee7258ce3ac4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 20 Feb 2016 11:32:50 +0100 Subject: [PATCH 2/8] ux(): more work on style guide --- public/app/core/routes/routes.ts | 2 +- .../app/features/styleguide/styleguide.html | 45 ++++++++++--------- public/app/features/styleguide/styleguide.ts | 21 +++++++-- public/sass/components/_gf-form.scss | 2 +- 4 files changed, 45 insertions(+), 25 deletions(-) diff --git a/public/app/core/routes/routes.ts b/public/app/core/routes/routes.ts index 71e21f19ae0..604dc9f9876 100644 --- a/public/app/core/routes/routes.ts +++ b/public/app/core/routes/routes.ts @@ -186,7 +186,7 @@ function setupAngularRoutes($routeProvider, $locationProvider) { .when('/global-alerts', { templateUrl: 'public/app/features/dashboard/partials/globalAlerts.html', }) - .when('/styleguide', { + .when('/styleguide/:page?', { controller: 'StyleGuideCtrl', controllerAs: 'ctrl', templateUrl: 'public/app/features/styleguide/styleguide.html', diff --git a/public/app/features/styleguide/styleguide.html b/public/app/features/styleguide/styleguide.html index 8695bcc0e91..fc0f4a4eba1 100644 --- a/public/app/features/styleguide/styleguide.html +++ b/public/app/features/styleguide/styleguide.html @@ -15,29 +15,34 @@
- - -
    -
  • - ${{color.name}} - {{color.value}} -
    • -
- - + -
-
- -
+
+
    +
  • + ${{color.name}} + {{color.value}} +
    • +
+
+ +
+
+
+
+
+
- - - - +
+ forms +
diff --git a/public/app/features/styleguide/styleguide.ts b/public/app/features/styleguide/styleguide.ts index 31c0424ee6d..1a195c19ed2 100644 --- a/public/app/features/styleguide/styleguide.ts +++ b/public/app/features/styleguide/styleguide.ts @@ -9,12 +9,27 @@ class StyleGuideCtrl { buttonNames = ['primary', 'secondary', 'inverse', 'success', 'warning', 'danger']; buttonSizes = ['btn-small', '', 'btn-large']; buttonVariants = ['-', '-outline-']; + page: any; + pages = ['colors', 'buttons', 'forms', 'dashboard', 'query-editors']; /** @ngInject **/ - constructor($http) { + constructor(private $http, $routeParams) { this.theme = config.bootData.user.lightTheme ? 'light': 'dark'; + this.page = {}; - $http.get('public/sass/styleguide.json').then(res => { + if ($routeParams.page) { + this.page[$routeParams.page] = 1; + } else { + this.page.colors = true; + } + + if (this.page.colors) { + this.loadColors(); + } + } + + loadColors() { + this.$http.get('public/sass/styleguide.json').then(res => { this.colors = _.map(res.data[this.theme], (value, key) => { return {name: key, value: value}; }); @@ -23,7 +38,7 @@ class StyleGuideCtrl { switchTheme() { var other = this.theme === 'dark' ? 'light' : 'dark'; - window.location.href = config.appSubUrl + '/styleguide?theme=' + other; + window.location.href = window.location.href + '?theme=' + other; } } diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index d3ab196dd30..6a43c961c70 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -1,4 +1,4 @@ -$gf-form-margin: 0.4rem; +$gf-form-margin: 0.2rem; .gf-form { margin-bottom: $gf-form-margin; From eb787adccd8be90bdea989d1dbd36547f040ba3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 20 Feb 2016 11:35:10 +0100 Subject: [PATCH 3/8] ux(): added style guide to admin page --- public/app/features/admin/partials/admin_home.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/public/app/features/admin/partials/admin_home.html b/public/app/features/admin/partials/admin_home.html index aa667ddd2d0..eed8f503ed8 100644 --- a/public/app/features/admin/partials/admin_home.html +++ b/public/app/features/admin/partials/admin_home.html @@ -24,5 +24,9 @@ View Server Stats + + Style guide + +
From 995f17493e6c1789e5a45e6d72410dbbc3b2be76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 20 Feb 2016 12:55:44 +0100 Subject: [PATCH 4/8] ux(): updated influxdb datasource edit forms --- .../datasource/influxdb/partials/config.html | 71 +++++++------------ 1 file changed, 26 insertions(+), 45 deletions(-) diff --git a/public/app/plugins/datasource/influxdb/partials/config.html b/public/app/plugins/datasource/influxdb/partials/config.html index b6f604e08a5..6d9329af554 100644 --- a/public/app/plugins/datasource/influxdb/partials/config.html +++ b/public/app/plugins/datasource/influxdb/partials/config.html @@ -1,52 +1,33 @@ -

InfluxDB Details

+

InfluxDB Details

-
-
    -
  • - Database -
    • -
  • - -
    • -
-
-
-
-
    -
  • - User -
    • -
  • - -
    • -
  • - Password -
    • -
  • - -
    • -
-
+
+
+
+ Database + +
+
+ +
+
+ User + +
+
+ Password + +
+
- -
-

Default query settings

-
-
    -
  • - Group by time interval -
    • -
  • - -
    • -
  • - -
    • -
-
+
+
+ Default group by time + + +
From 701a2fdcf3bdb4dfc83d27ff5f14ddd8a8b2c873 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 20 Feb 2016 14:21:39 +0100 Subject: [PATCH 5/8] ux(): tweaks and polish, and also simpifying width classes, gf-size-xxx and gf-size-max-xx are now width-(1-30), and max-width-(1-30) --- public/app/features/datasources/partials/edit.html | 4 ++-- .../datasources/partials/http_settings.html | 10 +++++----- public/app/features/org/partials/orgDetails.html | 12 ++++++------ .../app/features/playlist/partials/playlist.html | 4 ++-- public/app/features/profile/partials/profile.html | 8 ++++---- public/app/partials/login.html | 6 +++--- public/app/partials/panelgeneral.html | 6 +++--- public/app/partials/signup_invited.html | 8 ++++---- .../datasource/influxdb/partials/config.html | 12 ++++++------ public/sass/_variables.dark.scss | 14 +++++++------- public/sass/_variables.light.scss | 6 +++--- public/sass/_variables.scss | 1 + public/sass/utils/_spacings.scss | 14 ++++++++++++++ 13 files changed, 60 insertions(+), 45 deletions(-) diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html index 349ac0c18b6..71d6e2a5173 100644 --- a/public/app/features/datasources/partials/edit.html +++ b/public/app/features/datasources/partials/edit.html @@ -13,13 +13,13 @@
- Name + Name
- Type + Type
diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html index 37b1d3241ca..ad7ade41ebd 100644 --- a/public/app/features/datasources/partials/http_settings.html +++ b/public/app/features/datasources/partials/http_settings.html @@ -4,19 +4,19 @@

Http settings

- Url + Url
- + Access Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request
- + Http Auth @@ -24,14 +24,14 @@
- + User
- + Passord diff --git a/public/app/features/org/partials/orgDetails.html b/public/app/features/org/partials/orgDetails.html index 3691c9025f5..e0363a49b87 100644 --- a/public/app/features/org/partials/orgDetails.html +++ b/public/app/features/org/partials/orgDetails.html @@ -25,33 +25,33 @@
- Address1 + Address1
- Address2 + Address2
- City + City
- Postal code + Postal code
- State + State
- Country + Country
diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html index 98c5098824d..b562227ec26 100644 --- a/public/app/features/playlist/partials/playlist.html +++ b/public/app/features/playlist/partials/playlist.html @@ -9,11 +9,11 @@
- Name + Name
- Interval + Interval
diff --git a/public/app/features/profile/partials/profile.html b/public/app/features/profile/partials/profile.html index bdca386ce46..0dac7edcc14 100644 --- a/public/app/features/profile/partials/profile.html +++ b/public/app/features/profile/partials/profile.html @@ -10,19 +10,19 @@

Preferences

- Name + Name
- Email + Email
- Username + Username
- UI Theme + UI Theme
diff --git a/public/app/partials/login.html b/public/app/partials/login.html index 6f437a02824..6d0d6ccf5b8 100644 --- a/public/app/partials/login.html +++ b/public/app/partials/login.html @@ -19,16 +19,16 @@
- User + User
- Password + Password
- Email + Email
diff --git a/public/app/partials/panelgeneral.html b/public/app/partials/panelgeneral.html index 7beb6d54911..23fdd01f2fc 100644 --- a/public/app/partials/panelgeneral.html +++ b/public/app/partials/panelgeneral.html @@ -1,7 +1,7 @@
- Title + Title
@@ -9,7 +9,7 @@
- Height + Height
@@ -17,7 +17,7 @@
- Repeat Panel + Repeat Panel diff --git a/public/app/partials/signup_invited.html b/public/app/partials/signup_invited.html index 9eadd6218d3..07700f023b4 100644 --- a/public/app/partials/signup_invited.html +++ b/public/app/partials/signup_invited.html @@ -21,19 +21,19 @@
- Email + Email
- Name + Name
- Username + Username
- Password + Password
diff --git a/public/app/plugins/datasource/influxdb/partials/config.html b/public/app/plugins/datasource/influxdb/partials/config.html index 6d9329af554..f0a1081d3d4 100644 --- a/public/app/plugins/datasource/influxdb/partials/config.html +++ b/public/app/plugins/datasource/influxdb/partials/config.html @@ -5,19 +5,19 @@
-
- Database +
+ Database
-
- User +
+ User
-
- Password +
+ Password
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 6967249dbd6..ccb2c66767b 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -8,17 +8,17 @@ $black: #000; // ------------------------- $black: #000; -$dark-1: #141414; // (body) -$dark-2: #1f1d1d; // ($gray-darker) -$dark-3: #262626; // ($gray-dark) +$dark-1: #141414; +$dark-2: #1f1d1d; +$dark-3: #262626; $dark-4: #333333; $dark-5: #444444; $gray-1: #555555; -$gray-2: #6e7580; +$gray-2: #7B7B7B; $gray-3: #b3b3b3; -$gray-4: #cfd4d9; -$gray-5: #e8edf0; -$gray-6: #f7f9fa; +$gray-4: #D8D9DA; +$gray-5: #ECECEC; +$gray-6: #f4f5f8; $gray-7: #fbfbfb; $white: #fff; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 8d29c1571eb..0ea879c4114 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -13,9 +13,9 @@ $black: #000; // ------------------------- $black: #000; -$dark-1: #141414; // (body) -$dark-2: #1f1d1d; // ($gray-darker) -$dark-3: #262626; // ($gray-dark) +$dark-1: #141414; +$dark-2: #1f1d1d; +$dark-3: #262626; $dark-4: #333333; $dark-5: #444444; $gray-1: #555555; diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 85e97fda5c6..d94ee9bffb0 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -185,6 +185,7 @@ $input-height-lg: (($font-size-lg * $line-height-lg) + ($input-pa $input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default; $form-group-margin-bottom: $spacer-y !default; +$gf-form-margin: 0.2rem; $cursor-disabled: not-allowed !default; diff --git a/public/sass/utils/_spacings.scss b/public/sass/utils/_spacings.scss index cd543c8c90b..81e60d8fb58 100644 --- a/public/sass/utils/_spacings.scss +++ b/public/sass/utils/_spacings.scss @@ -28,6 +28,20 @@ } } +// widths +@for $i from 1 through 30 { + .width-#{$i} { + width: ($spacer * $i) - $gf-form-margin; + } +} + +@for $i from 1 through 30 { + .max-width-#{$i} { + max-width: ($spacer * $i) - $gf-form-margin; + flex-grow: 1; + } +} + // Positioning .pos-f-t { From 52241b8e0b6d2a5b8c14048bfd6ea184c04f2ca4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 20 Feb 2016 14:48:10 +0100 Subject: [PATCH 6/8] ux(): completed gf-size class rename --- .../dashboard/timepicker/dropdown.html | 6 +++--- .../features/datasources/partials/edit.html | 2 +- .../datasources/partials/http_settings.html | 6 +++--- public/app/features/org/partials/invite.html | 6 +++--- .../app/features/org/partials/orgApiKeys.html | 4 ++-- .../app/features/org/partials/orgDetails.html | 16 +++++++-------- .../app/features/org/partials/orgUsers.html | 2 +- .../features/playlist/partials/playlist.html | 6 +++--- .../features/profile/partials/password.html | 12 +++++------ .../features/profile/partials/profile.html | 6 +++--- public/app/partials/login.html | 6 +++--- public/app/partials/panelgeneral.html | 18 ++++++++--------- public/app/partials/signup_invited.html | 8 ++++---- public/app/partials/signup_step2.html | 20 +++++++++---------- .../elasticsearch/partials/config.html | 16 +++++++-------- .../datasource/influxdb/partials/config.html | 4 ++-- public/sass/_grafana.scss | 1 + public/sass/_variables.scss | 11 ---------- public/sass/components/_gf-form.scss | 12 ----------- public/sass/utils/_spacings.scss | 13 ------------ public/sass/utils/_widths.scss | 19 ++++++++++++++++++ 21 files changed, 89 insertions(+), 105 deletions(-) create mode 100644 public/sass/utils/_widths.scss diff --git a/public/app/features/dashboard/timepicker/dropdown.html b/public/app/features/dashboard/timepicker/dropdown.html index c13271cb0a3..8b6d0c24a0c 100644 --- a/public/app/features/dashboard/timepicker/dropdown.html +++ b/public/app/features/dashboard/timepicker/dropdown.html @@ -4,7 +4,7 @@
-
+
@@ -21,7 +21,7 @@
-
+
@@ -37,7 +37,7 @@
-
+
diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html index 71d6e2a5173..8c362ab7e6b 100644 --- a/public/app/features/datasources/partials/edit.html +++ b/public/app/features/datasources/partials/edit.html @@ -14,7 +14,7 @@
Name - +
diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html index ad7ade41ebd..2874e157767 100644 --- a/public/app/features/datasources/partials/http_settings.html +++ b/public/app/features/datasources/partials/http_settings.html @@ -5,7 +5,7 @@
Url - +
@@ -27,14 +27,14 @@ User - +
Passord - +
diff --git a/public/app/features/org/partials/invite.html b/public/app/features/org/partials/invite.html index 30a92fe80cb..9fe84f4a17f 100644 --- a/public/app/features/org/partials/invite.html +++ b/public/app/features/org/partials/invite.html @@ -19,15 +19,15 @@
-
+
Email or Username
-
+
Name
-
+
Role diff --git a/public/app/features/org/partials/orgApiKeys.html b/public/app/features/org/partials/orgApiKeys.html index e2480ce2e18..daa9801c468 100644 --- a/public/app/features/org/partials/orgApiKeys.html +++ b/public/app/features/org/partials/orgApiKeys.html @@ -1,4 +1,4 @@ - +
@@ -9,7 +9,7 @@

Add new

-
+
Add a key
diff --git a/public/app/features/org/partials/orgDetails.html b/public/app/features/org/partials/orgDetails.html index e0363a49b87..e332fc1a2cf 100644 --- a/public/app/features/org/partials/orgDetails.html +++ b/public/app/features/org/partials/orgDetails.html @@ -9,8 +9,8 @@

General

-
- Name +
+ Name
@@ -24,33 +24,33 @@
-
+
Address1
-
+
Address2
-
+
City
-
+
Postal code
-
+
State
-
+
Country
diff --git a/public/app/features/org/partials/orgUsers.html b/public/app/features/org/partials/orgUsers.html index e2f88613e8d..481873af489 100644 --- a/public/app/features/org/partials/orgUsers.html +++ b/public/app/features/org/partials/orgUsers.html @@ -1,4 +1,4 @@ - +
diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html index b562227ec26..b62d2a22f54 100644 --- a/public/app/features/playlist/partials/playlist.html +++ b/public/app/features/playlist/partials/playlist.html @@ -10,16 +10,16 @@
Name - +
Interval - +
-
+
Add dashboards
diff --git a/public/app/features/profile/partials/password.html b/public/app/features/profile/partials/password.html index f2dca0b7015..624730c1ce6 100644 --- a/public/app/features/profile/partials/password.html +++ b/public/app/features/profile/partials/password.html @@ -8,18 +8,18 @@
- Old Password - + Old Password +
- New Password - + New Password +
- Confirm Password - + Confirm Password +
diff --git a/public/app/features/profile/partials/profile.html b/public/app/features/profile/partials/profile.html index 0dac7edcc14..00ae3b5e163 100644 --- a/public/app/features/profile/partials/profile.html +++ b/public/app/features/profile/partials/profile.html @@ -11,15 +11,15 @@
Name - +
Email - +
Username - +
UI Theme diff --git a/public/app/partials/login.html b/public/app/partials/login.html index 6d0d6ccf5b8..82d4990873e 100644 --- a/public/app/partials/login.html +++ b/public/app/partials/login.html @@ -20,16 +20,16 @@
User - +
Password - +
Email - +
diff --git a/public/app/partials/panelgeneral.html b/public/app/partials/panelgeneral.html index 23fdd01f2fc..2fbe85dfa30 100644 --- a/public/app/partials/panelgeneral.html +++ b/public/app/partials/panelgeneral.html @@ -1,29 +1,29 @@
-
- Title +
+ Title
- Span + Span
-
- Height - +
+ Height +
-
- Repeat Panel +
+ Repeat Panel
- Min span + Min span diff --git a/public/app/partials/signup_invited.html b/public/app/partials/signup_invited.html index 07700f023b4..7a8dd459ff6 100644 --- a/public/app/partials/signup_invited.html +++ b/public/app/partials/signup_invited.html @@ -22,19 +22,19 @@
Email - +
Name - +
Username - +
Password - +
diff --git a/public/app/partials/signup_step2.html b/public/app/partials/signup_step2.html index fc0de0a92e8..7b72c2357b9 100644 --- a/public/app/partials/signup_step2.html +++ b/public/app/partials/signup_step2.html @@ -31,28 +31,28 @@
- + Email codeEmail verification code (sent to your email) - +
- Org. name - + Org. name +
- Your name - + Your name +
- Username - + Username +
- Password - + Password +
diff --git a/public/app/plugins/datasource/elasticsearch/partials/config.html b/public/app/plugins/datasource/elasticsearch/partials/config.html index e5a0e6f2e0c..f34cf7fc782 100644 --- a/public/app/plugins/datasource/elasticsearch/partials/config.html +++ b/public/app/plugins/datasource/elasticsearch/partials/config.html @@ -5,24 +5,24 @@
-
- Index name +
+ Index name
-
- Pattern +
+ Pattern
-
- Time field name +
+ Time field name
- Version + Version
@@ -32,6 +32,6 @@
Group by time interval - +
diff --git a/public/app/plugins/datasource/influxdb/partials/config.html b/public/app/plugins/datasource/influxdb/partials/config.html index f0a1081d3d4..9a1d326ca64 100644 --- a/public/app/plugins/datasource/influxdb/partials/config.html +++ b/public/app/plugins/datasource/influxdb/partials/config.html @@ -24,9 +24,9 @@
-
+
Default group by time -
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 9bc924ec79d..c39f71f5561 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -22,6 +22,7 @@ @import "utils/validation"; @import "utils/angular"; @import "utils/spacings"; +@import "utils/widths"; // LAYOUTS @import "layout/page"; diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index d94ee9bffb0..d493dfdb5ee 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -77,17 +77,6 @@ $grid-gutter-width: 30px !default; $enable-flex: false; -$form-sizes: ( - xs: 5.7rem, - sm: 7rem, - md: 8.5rem, - lg: 10rem, - xl: 14rem, - xxl: 21rem, - xxxl: 28rem -) !default; - - // Typography // ------------------------- diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 6a43c961c70..6b74063b5b3 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -57,18 +57,6 @@ $gf-form-margin: 0.2rem; flex-shrink: 0; } -@each $size, $value in $form-sizes { - .gf-size-#{$size} { width: $value; } - - .gf-size-max-#{$size} { - flex-grow: 1; - max-width: $value; - } -} - -.gf-size-max { width: 100%; } -.gf-size-auto { width: auto; } - .gf-form-input { display: block; width: 100%; diff --git a/public/sass/utils/_spacings.scss b/public/sass/utils/_spacings.scss index 81e60d8fb58..f106c0d826a 100644 --- a/public/sass/utils/_spacings.scss +++ b/public/sass/utils/_spacings.scss @@ -28,19 +28,6 @@ } } -// widths -@for $i from 1 through 30 { - .width-#{$i} { - width: ($spacer * $i) - $gf-form-margin; - } -} - -@for $i from 1 through 30 { - .max-width-#{$i} { - max-width: ($spacer * $i) - $gf-form-margin; - flex-grow: 1; - } -} // Positioning diff --git a/public/sass/utils/_widths.scss b/public/sass/utils/_widths.scss new file mode 100644 index 00000000000..bd6fc78ef90 --- /dev/null +++ b/public/sass/utils/_widths.scss @@ -0,0 +1,19 @@ + + +.max-width { width: 100%; } +.width-auto { width: auto; } + +// widths +@for $i from 1 through 30 { + .width-#{$i} { + width: ($spacer * $i) - $gf-form-margin; + } +} + +@for $i from 1 through 30 { + .max-width-#{$i} { + max-width: ($spacer * $i) - $gf-form-margin; + flex-grow: 1; + } +} + From 9ed45ba761fdb002d7018cf54677479b6987cd5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 20 Feb 2016 15:36:52 +0100 Subject: [PATCH 7/8] ux(): clean / simplify markup and css for navbar button --- public/app/core/components/navbar/navbar.html | 25 +++-- public/app/core/components/navbar/navbar.ts | 23 ----- .../features/dashboard/dashnav/dashnav.html | 12 +-- public/sass/_old_responsive.scss | 6 +- public/sass/_variables.scss | 2 +- public/sass/components/_dashboard.scss | 2 +- public/sass/components/_navbar.scss | 97 ++++++------------- public/sass/components/_sidemenu.scss | 16 ++- 8 files changed, 58 insertions(+), 125 deletions(-) diff --git a/public/app/core/components/navbar/navbar.html b/public/app/core/components/navbar/navbar.html index 41757d54cc1..37a4f2a448e 100644 --- a/public/app/core/components/navbar/navbar.html +++ b/public/app/core/components/navbar/navbar.html @@ -1,19 +1,16 @@
-
- - - - - - - -
+ + + + + + + - -
- - -
+ + + {{::ctrl.title}} +
diff --git a/public/app/core/components/navbar/navbar.ts b/public/app/core/components/navbar/navbar.ts index 9332f43542c..3bccddb652b 100644 --- a/public/app/core/components/navbar/navbar.ts +++ b/public/app/core/components/navbar/navbar.ts @@ -30,28 +30,5 @@ export function navbarDirective() { }; } -var navButtonTemplate = ` -
- - - {{::title}} - -
-`; - -function navButton() { - return { - restrict: 'E', - template: navButtonTemplate, - scope: { - title: "@", - titleUrl: "@", - }, - link: function(scope, elem, attrs, ctrl) { - scope.icon = attrs.icon; - } - }; -} - coreModule.directive('navbar', navbarDirective); coreModule.directive('navButton', navButton); diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html index 971bb39a09c..9f8fcb99333 100644 --- a/public/app/features/dashboard/dashnav/dashnav.html +++ b/public/app/features/dashboard/dashnav/dashnav.html @@ -1,12 +1,10 @@ -
- - - {{dashboard.title}} - - -
+ + + {{dashboard.title}} + +
diff --git a/public/sass/_old_responsive.scss b/public/sass/_old_responsive.scss index 71bc420c4f5..899a785c19b 100644 --- a/public/sass/_old_responsive.scss +++ b/public/sass/_old_responsive.scss @@ -17,7 +17,7 @@ body { padding: 0; } - .dashnav-dashboards-btn a { + .page-dashboard .navbar-page-btn { max-width: 200px; } .gf-timepicker-nav-btn { @@ -34,7 +34,7 @@ // form styles @include media-breakpoint-up(md) { - .dashnav-dashboards-btn a { + .page-dashboard .navbar-page-btn { max-width: 180px; } .gf-timepicker-nav-btn { @@ -51,7 +51,7 @@ } @include media-breakpoint-up(lg) { - .dashnav-dashboards-btn a { + .page-dashboard .navbar-page-btn { max-width: 290px; } .gf-timepicker-nav-btn { diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index d493dfdb5ee..b4ed999beb9 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -211,4 +211,4 @@ $btn-padding-y-lg: .75rem !default; $btn-border-radius: 3px; // sidemenu -$side-menu-width: 15rem; +$side-menu-width: 14rem; diff --git a/public/sass/components/_dashboard.scss b/public/sass/components/_dashboard.scss index 9b23484bdb4..d550cd38b1e 100644 --- a/public/sass/components/_dashboard.scss +++ b/public/sass/components/_dashboard.scss @@ -58,7 +58,7 @@ .row-open { margin-top: 5px; - left: -28px; + left: -30px; position: absolute; z-index: 100; transition: .10s left; diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 44faa9d9112..2e0388eae07 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -56,52 +56,30 @@ background-color: $navbarLinkBackgroundActive; } - -.fa.top-nav-breadcrumb-icon { - margin: 18px 0 6px 5px; - float: left; - font-size: 120%; - color: $text-color; -} - -.top-nav-btn { +.navbar-brand-btn { display: block; position: relative; float: left; margin: 0; - font-size: 1.4em; border-right: 1px solid $tight-form-border; + background-color: $navbarButtonBackground; + padding: 0.6rem 1.0rem 0.5rem 1rem; .fa-caret-down { - font-size: 55%; - position: absolute; - right: 8px; - top: 23px; - margin-right: 2px; + font-size: 70%; } - a { - color: darken($link-color, 5%); - background-color: $navbarButtonBackground; - display: inline-block; - &:hover { - background: $navbarButtonBackgroundHighlight; - color: $link-color; - // border-bottom: 1px solid $blue; - } + &:hover { + background: $navbarButtonBackgroundHighlight; } -} -.top-nav-menu-btn { - a { - padding: 7px 20px 6px 13px; - } img { width: 30px; position: relative; top: -2px; } - .top-nav-logo-background { + + .navbar-brand-btn-background { display: inline-block; border: 1px solid $body-bg; padding: 4px; @@ -110,6 +88,7 @@ width: 40px; height: 40px; } + .icon-gf-grafana_wordmark { font-size: 21px; position: relative; @@ -119,13 +98,28 @@ } } -.dashnav-dashboards-btn { - a { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - display: block; - padding: 11px 17px 12px 13px; +.navbar-page-btn { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + float: left; + display: block; + margin: 0; + font-size: 1.4em; + border-right: 1px solid $tight-form-border; + color: darken($link-color, 5%); + background-color: $navbarButtonBackground; + font-size: $font-size-lg; + padding: 1rem 0.8rem; + + &:hover { + background: $navbarButtonBackgroundHighlight; + color: $link-color; + } + + .fa-caret-down { + font-size: 60%; + padding-left: 0.2rem; } .fa-th-large { @@ -141,32 +135,3 @@ } } -.dashboard-title { - padding: 0 0.4rem 0 0.5rem; - font-size: $font-size-lg; -} - -.top-nav-icon { - margin: 5px 0px 0 11px; - line-height: 41px; - float: left; -} - -.top-nav-section { - display: block; - float: left; - padding: 19px 9px 8px 0; - font-weight: bold; - i { - padding-left: 8px; - } -} - -.top-nav-title { - display: block; - float: left; - font-size: 17px; - padding: 18px 10px 10px 13px; - color: $link-color; -} - diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index 8063bbaa2c9..5a4138a1c9f 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -30,16 +30,15 @@ min-height: calc(100% - 54px); } .dashboard-container { - padding-left: $side-menu-width; + padding-left: $side-menu-width + 0.2rem; } .page-container { margin-left: $side-menu-width; } - .top-nav-menu-btn { - a { - background-color: $page-bg; - width: $side-menu-width; - } + .navbar-brand-btn { + background-color: $page-bg; + width: $side-menu-width; + .icon-gf-grafana_wordmark { display: inline-block; } @@ -47,9 +46,6 @@ display: none; } } - .sidemenu-org { - box-shadow: none; - } .search-container { left: auto; } @@ -176,7 +172,7 @@ .sidemenu .fa-caret-right { position: absolute; top: 38%; - right: 25px; + right: 6px; font-size: 14px; color: $link-color; } From d42bfc25704cf5ea0d5e27586c0206b91dafcb51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 20 Feb 2016 15:48:42 +0100 Subject: [PATCH 8/8] ux(): fixed compile issue with last commit --- public/app/core/components/navbar/navbar.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/public/app/core/components/navbar/navbar.ts b/public/app/core/components/navbar/navbar.ts index 3bccddb652b..baca7721fe8 100644 --- a/public/app/core/components/navbar/navbar.ts +++ b/public/app/core/components/navbar/navbar.ts @@ -31,4 +31,3 @@ export function navbarDirective() { } coreModule.directive('navbar', navbarDirective); -coreModule.directive('navButton', navButton);