From 7ed2ed71f02c82405a8092d4e4d1d78bbd6b9172 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 17 Aug 2017 18:50:46 +0200 Subject: [PATCH] ux: dashboard stuff --- public/app/core/directives/dash_edit_link.js | 1 + .../features/dashboard/dashnav/dashnav.html | 6 +++ .../app/features/dashboard/row/add_panel.html | 23 ++++++------ .../app/features/dashboard/row/add_panel.ts | 37 +++++-------------- public/app/features/dashboard/row/row.html | 18 ++++----- public/app/partials/dashboard.html | 10 +---- public/sass/_variables.dark.scss | 2 +- public/sass/components/_navbar.scss | 7 +++- public/sass/components/_tabbed_view.scss | 8 ++-- public/sass/layout/_page.scss | 4 +- public/sass/pages/_dashboard.scss | 14 +++++-- 11 files changed, 61 insertions(+), 69 deletions(-) diff --git a/public/app/core/directives/dash_edit_link.js b/public/app/core/directives/dash_edit_link.js index 52aec55ac73..a3bac58945c 100644 --- a/public/app/core/directives/dash_edit_link.js +++ b/public/app/core/directives/dash_edit_link.js @@ -13,6 +13,7 @@ function ($, angular, coreModule, _) { 'templating': { src: 'public/app/features/templating/partials/editor.html'}, 'history': { html: ''}, 'timepicker': { src: 'public/app/features/dashboard/timepicker/dropdown.html' }, + 'add-panel': { html: '' }, 'import': { html: '', isModal: true }, 'permissions': { html: '', isModal: true }, 'new-folder': { diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html index 4be86cd74e5..2d3c68965cb 100644 --- a/public/app/features/dashboard/dashnav/dashnav.html +++ b/public/app/features/dashboard/dashnav/dashnav.html @@ -69,6 +69,11 @@ +
  • + +
    • + diff --git a/public/app/features/dashboard/row/add_panel.html b/public/app/features/dashboard/row/add_panel.html index 5a4ecc118cd..8ff43fe5a40 100644 --- a/public/app/features/dashboard/row/add_panel.html +++ b/public/app/features/dashboard/row/add_panel.html @@ -1,15 +1,17 @@ -
    - +
    +

    + Add Panel +

    + + + +     +
    -
    -
    - -
    -
    - -
    +
    +
    -
    diff --git a/public/app/features/dashboard/row/add_panel.ts b/public/app/features/dashboard/row/add_panel.ts index a5cdda2fb83..9d2234e2861 100644 --- a/public/app/features/dashboard/row/add_panel.ts +++ b/public/app/features/dashboard/row/add_panel.ts @@ -6,18 +6,15 @@ import config from 'app/core/config'; import {coreModule, appEvents} from 'app/core/core'; export class AddPanelCtrl { - row: any; dashboard: any; - rowCtrl: any; allPanels: any; panelHits: any; activeIndex: any; panelSearch: any; /** @ngInject */ - constructor(private $scope, private $timeout, private $rootScope) { - this.row = this.rowCtrl.row; - this.dashboard = this.rowCtrl.dashboard; + constructor(private $scope, private $timeout, private $rootScope, dashboardSrv) { + this.dashboard = dashboardSrv.getCurrent(); this.activeIndex = 0; this.allPanels = _.chain(config.panels) @@ -29,9 +26,13 @@ export class AddPanelCtrl { this.panelHits = this.allPanels; } + dismiss() { + this.$rootScope.appEvent('hide-dash-editor'); + } + keyDown(evt) { if (evt.keyCode === 27) { - this.rowCtrl.dropView = 0; + //this.rowCtrl.dropView = 0; return; } @@ -78,24 +79,6 @@ export class AddPanelCtrl { } addPanel(panelPluginInfo) { - var defaultSpan = 6; - var span = 12 - this.row.span; - - var panel = { - id: null, - title: config.new_panel_title, - span: span < defaultSpan && span > 0 ? span : defaultSpan, - type: panelPluginInfo.id, - }; - - this.rowCtrl.closeDropView(); - this.dashboard.addPanel(panel, this.row); - this.$timeout(() => { - this.$rootScope.$broadcast('render'); - //this.$rootScope.appEvent('panel-change-view', { - // fullscreen: true, edit: true, panelId: panel.id - //}); - }); } } @@ -106,10 +89,8 @@ export function addPanelDirective() { controller: AddPanelCtrl, bindToController: true, controllerAs: 'ctrl', - scope: { - rowCtrl: "=", - }, + scope: {}, }; } -coreModule.directive('dashRowAddPanel', addPanelDirective); +coreModule.directive('addPanel', addPanelDirective); diff --git a/public/app/features/dashboard/row/row.html b/public/app/features/dashboard/row/row.html index 1e82aefc3c0..f173aaf79af 100644 --- a/public/app/features/dashboard/row/row.html +++ b/public/app/features/dashboard/row/row.html @@ -1,12 +1,12 @@ -
    - - - - - - {{ctrl.row.title | interpolateTemplateVars:this}} - -
    + + + + + + + + + diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html index 86f3c275b76..11f6930ddf3 100644 --- a/public/app/partials/dashboard.html +++ b/public/app/partials/dashboard.html @@ -3,8 +3,8 @@
    +
    -
    @@ -13,14 +13,6 @@ - -
    -
    - - ADD ROW - -
    -
    diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 97150d3c853..ed97883d63e 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -62,7 +62,7 @@ $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); // gradients $brand-gradient: linear-gradient(to right, rgba(255,213,0,0.7) 0%, rgba(255,68,0,0.7) 99%, rgba(255,68,0,0.7) 100%); -$page-gradient: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%); +$page-gradient: linear-gradient(180deg, rgb(36, 36, 36) 40px, rgba(178, 31, 31, 0.03) 100px, rgba(253, 187, 45, 0.03)); // Links // ------------------------- diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 588663ff24f..35a52748d71 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -4,13 +4,14 @@ overflow: visible; position: relative; margin-left: $side-menu-width; + box-shadow: 0 0 20px black; + z-index: 1; } .navbar-inner { min-height: $navbarHeight; padding-right: $spacer; background-color: $navbarBackground; - border-bottom: $navbarBorder; @include clearfix(); } @@ -111,3 +112,7 @@ position: relative; float: left; } + +.navbar-mini-btn-wrapper { + padding: 15px; +} diff --git a/public/sass/components/_tabbed_view.scss b/public/sass/components/_tabbed_view.scss index 6cc04f259d6..926304ec389 100644 --- a/public/sass/components/_tabbed_view.scss +++ b/public/sass/components/_tabbed_view.scss @@ -1,8 +1,5 @@ .tabbed-view { background-color: $page-bg; - background-image: $page-gradient; - margin: (-$panel-margin*2) (-$panel-margin); - margin-bottom: $spacer*2; padding: $spacer*3; &.tabbed-view--panel-edit { @@ -49,6 +46,11 @@ .tabbed-view-body { padding: $spacer*2 $spacer; min-height: 250px; + + &--small { + min-height: 0px; + padding-bottom: 0px; + } } .section-heading { diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index 4c0f1bcb2b1..3c412ca60fc 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -11,9 +11,7 @@ .main-view { position: relative; flex-grow: 1; - - $gradient-opacity: 0.03; - background: linear-gradient(135deg, rgba(26, 42, 108, $gradient-opacity), rgba(178, 31, 31, $gradient-opacity), rgba(253, 187, 45, $gradient-opacity)); //Matt experiement + background: $page-gradient; } .page-container { diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 45e7b015353..4ec8f4ba381 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -1,14 +1,13 @@ .dashboard-container { padding: $dashboard-padding; width: 100%; + background: $page-gradient; } .template-variable { color: $variable; } - - div.flot-text { color: $text-color !important; } @@ -172,8 +171,6 @@ div.flot-text { } .panel-full-edit { - margin-top: 20px; - margin-bottom: 20px; } .panel-highlight { @@ -260,3 +257,12 @@ div.flot-text { transition: opacity 200ms ease-in-out; } } + +.dashboard-nav-shadow { + box-shadow: 0 0 20px black; + height: 10px; + position: absolute; + width: 100%; + z-index: 1; + top: -10px; +}