diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html index 5c01e2099c6..b5e151bf966 100644 --- a/public/app/features/dashboard/dashnav/dashnav.html +++ b/public/app/features/dashboard/dashnav/dashnav.html @@ -51,9 +51,8 @@ diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts index c87d533d192..837d0d76537 100644 --- a/public/app/features/dashboard/dashnav/dashnav.ts +++ b/public/app/features/dashboard/dashnav/dashnav.ts @@ -42,6 +42,18 @@ export class DashNavCtrl { this.$location.search(search); } + close() { + let search = this.$location.search(); + if (search.editview) { + delete search.editview; + } + if (search.fullscreen) { + delete search.fullscreen; + delete search.edit; + } + this.$location.search(search); + } + starDashboard() { this.dashboardSrv.starDashboard(this.dashboard.id, this.dashboard.meta.isStarred) .then(newState => { diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index fd5b5be364b..d2895fc2d78 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -22,7 +22,6 @@ $gray-5: #ECECEC; $gray-6: #f4f5f8; $gray-7: #fbfbfb; -// $gray-blue: #292a2d; $gray-blue: #212327; $input-black: #09090B; @@ -100,6 +99,7 @@ $panel-border: solid 1px $panel-border-color; $panel-drop-zone-bg: repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px); $panel-header-hover-bg: $dark-4; $panel-header-menu-hover-bg: $dark-5; +$panel-edit-shadow: 0 -30px 30px -30px $black; // page header $page-header-bg: linear-gradient(90deg, #292a2d, black); diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index f6512aed3c4..0570b6a6e85 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -103,6 +103,7 @@ $panel-border: solid 1px $panel-border-color; $panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $gray-6 10px, $gray-6 20px); $panel-header-hover-bg: $gray-6; $panel-header-menu-hover-bg: $gray-4; +$panel-edit-shadow: 0 0 30px 20px $black; // Page header $page-header-bg: linear-gradient(90deg, $white, $gray-7); diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 3a40ed89ccd..4f9b8fbbf4f 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -10,14 +10,19 @@ display: flex; flex-grow: 1; border-bottom: 1px solid transparent; - transition: all 300ms ease-in-out; + transition: all 350ms ease-in-out; } +@mixin navbar-alt-look() { + background: $page-header-bg; + box-shadow: $search-shadow; + border-bottom: $navbarBorder; +} + + .dashboard-page--settings-open { .navbar { - background: $page-header-bg; - box-shadow: $search-shadow; - border-bottom: $navbarBorder; + @include navbar-alt-look(); } .navbar-buttons--actions, @@ -31,6 +36,20 @@ } } +.panel-in-fullscreen { + .navbar { + @include navbar-alt-look(); + } + + .navbar-buttons--actions { + display: none; + } + + .navbar-buttons--close { + display: flex; + } +} + .sidemenu-open { .navbar { padding-left: 15px; diff --git a/public/sass/components/_tabbed_view.scss b/public/sass/components/_tabbed_view.scss index d2c9b24d2a0..dfd760753fe 100644 --- a/public/sass/components/_tabbed_view.scss +++ b/public/sass/components/_tabbed_view.scss @@ -6,7 +6,8 @@ padding: 0; .tabbed-view-header { - padding: 1.5em 1rem 0 1rem; + padding: 0px 25px; + background: none; } } } diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 943eb930543..d1951486c4b 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -217,4 +217,6 @@ div.flot-text { } } - +.panel-full-edit { + margin: $dashboard-padding (-$dashboard-padding) 0 (-$dashboard-padding); +}