From fbe9f759ad71b1c13f017d026f620ae29e2bfcc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 8 Dec 2017 18:15:24 +0100 Subject: [PATCH] ux: work on dashboard settings views --- .../features/annotations/partials/editor.html | 214 +++++++++--------- .../features/dashboard/dashnav/dashnav.html | 9 +- .../app/features/dashboard/dashnav/dashnav.ts | 2 +- .../features/dashboard/partials/settings.html | 2 +- .../features/dashboard/settings/settings.html | 38 ++-- .../features/dashboard/settings/settings.ts | 5 +- public/sass/_grafana.scss | 1 - public/sass/_variables.dark.scss | 6 +- .../sass/components/_dashboard_settings.scss | 45 +++- public/sass/components/_navbar.scss | 39 +++- public/sass/components/_sidenav.scss | 15 -- public/sass/components/_view_states.scss | 2 +- 12 files changed, 215 insertions(+), 163 deletions(-) delete mode 100644 public/sass/components/_sidenav.scss diff --git a/public/app/features/annotations/partials/editor.html b/public/app/features/annotations/partials/editor.html index 4c0b8f7b127..1cdf106ee01 100644 --- a/public/app/features/annotations/partials/editor.html +++ b/public/app/features/annotations/partials/editor.html @@ -1,57 +1,59 @@ +

Annotations

+
-
-

- Annotations -

- + + + + + + + + + + + + + + - -
- -
- -
-
-
What are Annotations?
-

- Annotations provide a way to integrate event data into your graphs. They are visualized as vertical lines and icons - on all graph panels. When you hover over an annotation icon you can get title, tags, and text information for the event. - In the Queries tab you can add queries that return annotation events. -

-

- You can add annotations directly from grafana by holding CTRL or CMD + click on graph (or drag region). These will be stored in Grafana's annotation database. -

- Checkout the Annotations documentation for more information. -
-
- -
+
No annotation queries defined
+
@@ -79,67 +81,67 @@
-
+
  New
-
-
-
-
General
-
-
- Name - -
-
- Data source -
- -
-
-
-
- -
-
- - - - -
- - - - -
-
-
-
- -
Query
- - - - - -
-
- - -
-
-
-
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html index ca629e247e9..5c01e2099c6 100644 --- a/public/app/features/dashboard/dashnav/dashnav.html +++ b/public/app/features/dashboard/dashnav/dashnav.html @@ -43,13 +43,20 @@ -
+
+ +
+
diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts index 9d8c0e149cc..c87d533d192 100644 --- a/public/app/features/dashboard/dashnav/dashnav.ts +++ b/public/app/features/dashboard/dashnav/dashnav.ts @@ -32,7 +32,7 @@ export class DashNavCtrl { } } - openSettings() { + toggleSettings() { let search = this.$location.search(); if (search.editview) { delete search.editview; diff --git a/public/app/features/dashboard/partials/settings.html b/public/app/features/dashboard/partials/settings.html index 6d141e1319a..8823b369440 100644 --- a/public/app/features/dashboard/partials/settings.html +++ b/public/app/features/dashboard/partials/settings.html @@ -1,4 +1,4 @@ -

General

+

General

diff --git a/public/app/features/dashboard/settings/settings.html b/public/app/features/dashboard/settings/settings.html index ba30a1697cc..058a6279015 100644 --- a/public/app/features/dashboard/settings/settings.html +++ b/public/app/features/dashboard/settings/settings.html @@ -1,28 +1,20 @@ -
- -
-
- -
-
- -
- annotations -
+
+
+
+
+ annotationus +
diff --git a/public/app/features/dashboard/settings/settings.ts b/public/app/features/dashboard/settings/settings.ts index 179e14f464e..fe4a3efaef5 100644 --- a/public/app/features/dashboard/settings/settings.ts +++ b/public/app/features/dashboard/settings/settings.ts @@ -1,4 +1,4 @@ -import {coreModule, appEvents} from 'app/core/core'; +import {coreModule} from 'app/core/core'; import {DashboardModel} from '../dashboard_model'; import $ from 'jquery'; import _ from 'lodash'; @@ -17,6 +17,9 @@ export class SettingsCtrl { /** @ngInject */ constructor($scope, private $location, private $rootScope) { + // temp hack + $scope.dashboard = this.dashboard; + const params = this.$location.search(); const url = $location.path(); diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 83c05db0da0..2cbf193bdc6 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -88,7 +88,6 @@ @import "components/page_header"; @import "components/dashboard_settings"; @import "components/empty_list_cta"; -@import "components/sidenav"; // PAGES diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index c0d1757dae7..6a9d492b4c5 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -189,7 +189,7 @@ $input-label-border-color: $gray-blue; $input-invalid-border-color: lighten($red, 5%); // Search -$search-shadow: 0 0 35px 0 $body-bg; +$search-shadow: 0 0 30px 0 $black; $search-filter-box-bg: $gray-blue; // Dropdowns @@ -226,10 +226,10 @@ $horizontalComponentOffset: 180px; // ------------------------- $wellBackground: #131517; -$navbarHeight: 52px; +$navbarHeight: 55px; $navbarBackgroundHighlight: $dark-3; $navbarBackground: $panel-bg; -$navbarBorder: 1px solid $body-bg; +$navbarBorder: 1px solid $dark-3; $navbarShadow: 0 0 20px black; $navbarText: $gray-4; diff --git a/public/sass/components/_dashboard_settings.scss b/public/sass/components/_dashboard_settings.scss index 3e1e2b53291..bb2b5a30920 100644 --- a/public/sass/components/_dashboard_settings.scss +++ b/public/sass/components/_dashboard_settings.scss @@ -1,7 +1,8 @@ .dashboard-settings { opacity: 0; - display: block; - padding: $spacer*2; + height: 100%; + display: flex; + flex-direction: row; } .dashboard-page--settings-opening { @@ -13,6 +14,44 @@ .dashboard-page--settings-open { .dashboard-settings { opacity: 1; - transition: opacity 250ms ease-in-out; + transition: opacity 300ms ease-in-out; + } +} + +.dashboard-settings__content { + flex-grow: 1; + min-width: 0; + height: 100%; + padding: 30px; +} + +.dashboard-settings__aside { + padding: 30px 0 0 30px; + background: $search-filter-box-bg; + display: flex; + flex-direction: column; +} + +.dashboard-settings__aside-header { + color: $text-muted; + font-size: $font-size-h3; + margin-bottom: 20px; + padding-right: 60px; + white-space: nowrap; +} + +.dashboard-settings__header { + font-size: $font-size-h3; + margin-bottom: 20px; +} + +.dashboard-settings__nav-item { + padding: 7px 12px; + color: $text-color; + @include left-brand-border; + + &.active { + @include left-brand-border-gradient(); + background: $page-bg; } } diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 9e276eaba5f..3a40ed89ccd 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -9,10 +9,26 @@ padding-right: $spacer; display: flex; flex-grow: 1; + border-bottom: 1px solid transparent; + transition: all 300ms ease-in-out; +} - background: $page-header-bg; - box-shadow: $page-header-shadow; - border-bottom: 1px solid $page-header-border-color; +.dashboard-page--settings-open { + .navbar { + background: $page-header-bg; + box-shadow: $search-shadow; + border-bottom: $navbarBorder; + } + + .navbar-buttons--actions, + .navbar-page-btn .fa-caret-down, + .gf-timepicker-nav { + display: none; + } + + .navbar-buttons--close { + display: flex; + } } .sidemenu-open { @@ -29,8 +45,9 @@ margin: 0; color: darken($link-color, 5%); font-size: $font-size-lg; - padding: 1rem 1rem 0.75rem 1rem; + padding-left: 1rem; min-height: $navbarHeight; + line-height: $navbarHeight; .fa-caret-down { font-size: 60%; @@ -71,6 +88,10 @@ align-items: center; justify-content: flex-end; margin-right: $spacer; + + &--close { + display: none; + } } .navbar__spacer { @@ -82,7 +103,7 @@ display: inline-block; font-weight: $btn-font-weight; - padding: 8px 11px; + padding: 6px 11px; line-height: 16px; color: $text-muted; border: 1px solid $navbar-button-border; @@ -98,7 +119,7 @@ } &--add-panel { - padding: 5px 10px; + padding: 3px 10px; .gicon { font-size: 22px; @@ -106,7 +127,7 @@ } &--tight { - padding: 9px 4px; + padding: 7px 4px; .fa { font-size: 14px; @@ -114,4 +135,8 @@ top: 2px; } } + + &--primary { + @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl); + } } diff --git a/public/sass/components/_sidenav.scss b/public/sass/components/_sidenav.scss deleted file mode 100644 index 9eb6fea004f..00000000000 --- a/public/sass/components/_sidenav.scss +++ /dev/null @@ -1,15 +0,0 @@ -.sidenav { - display: flex; - flex-direction: row; -} - -.sidenav__content { - flex-grow: 1; - min-width: 0; -} - -.sidenav__aside { - margin-right: $spacer*2; -} - - diff --git a/public/sass/components/_view_states.scss b/public/sass/components/_view_states.scss index b3c9a44e658..2e6ecde35da 100644 --- a/public/sass/components/_view_states.scss +++ b/public/sass/components/_view_states.scss @@ -45,7 +45,7 @@ background: transparent; transform: translate3d(-40px, 0, 0); transition: all 1.5s ease-in-out 1s; - .icon-gf { + i { opacity: 0; transition: all 1.5s ease-in-out 1s; }