From 8d6a1cdbb4e1a469f22cd23850f5c43f223c399b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 14 Aug 2017 18:11:35 +0200 Subject: [PATCH] ux: wip --- public/app/core/components/navbar/navbar.html | 46 +++--- public/app/core/components/navbar/navbar.ts | 6 - public/app/core/nav_model_srv.ts | 21 ++- .../features/dashboard/dashnav/dashnav.html | 137 ++++++++++-------- .../app/features/dashboard/dashnav/dashnav.ts | 11 ++ public/app/features/plugins/ds_edit_ctrl.ts | 2 +- .../features/plugins/partials/ds_edit.html | 23 +-- .../features/plugins/partials/ds_list.html | 16 +- public/sass/layout/_page.scss | 45 +++++- 9 files changed, 171 insertions(+), 136 deletions(-) diff --git a/public/app/core/components/navbar/navbar.html b/public/app/core/components/navbar/navbar.html index d2543b91868..a1469466caa 100644 --- a/public/app/core/components/navbar/navbar.html +++ b/public/app/core/components/navbar/navbar.html @@ -1,31 +1,27 @@ -
+
-
- - - - {{::ctrl.section.title}} - -
+
+
+ + {{::item.title}} + + -
- - - - {{::ctrl.section.title}} - - - + + {{::item.title}} + + + +
- -
+ diff --git a/public/app/core/components/navbar/navbar.ts b/public/app/core/components/navbar/navbar.ts index fae27a8d5c7..8938ac4adcc 100644 --- a/public/app/core/components/navbar/navbar.ts +++ b/public/app/core/components/navbar/navbar.ts @@ -8,13 +8,9 @@ import {NavModel, NavModelItem} from '../../nav_model_srv'; export class NavbarCtrl { model: NavModel; - section: NavModelItem; - hasMenu: boolean; /** @ngInject */ constructor(private $scope, private $rootScope, private contextSrv) { - this.section = this.model.section; - this.hasMenu = this.model.menu.length > 0; } showSearch() { @@ -35,13 +31,11 @@ export function navbarDirective() { templateUrl: 'public/app/core/components/navbar/navbar.html', controller: NavbarCtrl, bindToController: true, - transclude: true, controllerAs: 'ctrl', scope: { model: "=", }, link: function(scope, elem) { - elem.addClass('navbar'); } }; } diff --git a/public/app/core/nav_model_srv.ts b/public/app/core/nav_model_srv.ts index 67a221bfcb4..e64bb2f74c5 100644 --- a/public/app/core/nav_model_srv.ts +++ b/public/app/core/nav_model_srv.ts @@ -37,14 +37,19 @@ export class NavModelSrv { getDatasourceNav(subPage) { return { - section: { - title: 'Data Sources', - url: 'datasources', - icon: 'icon-gf icon-gf-datasources' - }, - menu: [ - {title: 'List view', active: subPage === 0, url: 'datasources', icon: 'fa fa-list-ul'}, - {title: 'Add data source', active: subPage === 1, url: 'datasources/new', icon: 'fa fa-plus'}, + items: [ + { + title: 'Configuration', + items: [ + {title: 'Data sources', active: subPage === 0, url: 'datasources', icon: 'fa fa-database'}, + {title: 'Users', active: subPage === 0, url: 'users', icon: 'fa fa-fw fa-users'}, + {title: 'Plugins', active: subPage === 0, url: 'plugins', icon: 'icon-gf icon-gf-apps'}, + ] + }, + { + title: 'Data sources', + url: 'datasources', + } ] }; } diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html index c88af17f8da..9fe6cfb9a1e 100644 --- a/public/app/features/dashboard/dashnav/dashnav.html +++ b/public/app/features/dashboard/dashnav/dashnav.html @@ -1,64 +1,83 @@ - +
+
+
-
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
+ + + + {{::ctrl.navModel.section.title}} + + - + +
- +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
- + + + +
+
diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts index ed623fd70f8..c52d3186142 100644 --- a/public/app/features/dashboard/dashnav/dashnav.ts +++ b/public/app/features/dashboard/dashnav/dashnav.ts @@ -144,6 +144,17 @@ export class DashNavCtrl { onFolderChange(folderId) { this.dashboard.folderId = folderId; } + + showSearch() { + this.$rootScope.appEvent('show-dash-search'); + } + + navItemClicked(navItem, evt) { + if (navItem.clickHandler) { + navItem.clickHandler(); + evt.preventDefault(); + } + } } export function dashNavDirective() { diff --git a/public/app/features/plugins/ds_edit_ctrl.ts b/public/app/features/plugins/ds_edit_ctrl.ts index b577ad3131b..e0d402bb802 100644 --- a/public/app/features/plugins/ds_edit_ctrl.ts +++ b/public/app/features/plugins/ds_edit_ctrl.ts @@ -44,7 +44,6 @@ export class DataSourceEditCtrl { ) { this.navModel = navModelSrv.getDatasourceNav(0); - this.isNew = true; this.datasources = []; this.tabIndex = 0; @@ -58,6 +57,7 @@ export class DataSourceEditCtrl { } initNewDatasourceModel() { + this.isNew = true; this.current = angular.copy(defaults); // We are coming from getting started diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index 96c4d2b3836..549cc86f856 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -1,23 +1,10 @@ -
-
-
-
- - Configuration - -
- -
- - Data sources - -
-
+ +
+

- Add data source - Settings + Settings (new)

@@ -40,9 +27,7 @@
-
-
diff --git a/public/app/features/plugins/partials/ds_list.html b/public/app/features/plugins/partials/ds_list.html index ed8cad218f4..d1b3949ce5a 100644 --- a/public/app/features/plugins/partials/ds_list.html +++ b/public/app/features/plugins/partials/ds_list.html @@ -1,13 +1,7 @@ -
-
-
-
- - Configuration - -
-
+ +
+

Data Sources @@ -17,12 +11,8 @@ Add data source -

-
- -
diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index 0fa4094e452..d98629244a6 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -19,8 +19,6 @@ } .page-header-inner { - @include brand-bottom-border(); - @include clearfix(); } .page-body { @@ -43,7 +41,10 @@ } .page-header { - padding: 2rem 0 1rem 0; + padding: $spacer 0 0 0; + margin-bottom: 2rem; + @include brand-bottom-border(); + @include clearfix(); h1 { font-size: $font-size-h2; @@ -101,9 +102,43 @@ } .page-breadcrumb__item { - a { + > a { color: $text-color-weak; + display: block; + padding: 0.6rem 3rem 0.6rem 1rem;; + } + + &:hover a { + .page-breadcrumb__caret { + opacity: 1; + } + } + + background: black; + + &::after { + content: ""; + position: absolute; + top: 0; + left: 100%; + content: ''; + height: 0; + width: 0; + border: 24px solid transparent; + border-right-width: 0; + border-left-width: 20px; + transform: translateX(4px); + border-left-color: #ffffff; } - padding-right: $spacer; +} + +.page-breadcrumb__caret { + opacity: 0; + position: absolute; + display: block; + width: 16px; + height: 16px; + right: 20px; + top: 14px; }