diff --git a/public/app/core/directives/dash_class.ts b/public/app/core/directives/dash_class.ts index 645f32de645..37124eb7d4b 100644 --- a/public/app/core/directives/dash_class.ts +++ b/public/app/core/directives/dash_class.ts @@ -6,6 +6,7 @@ function dashClass($timeout) { return { link: ($scope, elem) => { $scope.ctrl.dashboard.events.on('view-mode-changed', panel => { + console.log('view-mode-changed', panel.fullscreen); if (panel.fullscreen) { elem.addClass('panel-in-fullscreen'); } else { diff --git a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx index 8f5690f31d5..9402133df34 100644 --- a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx +++ b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx @@ -2,6 +2,7 @@ import React, { PureComponent } from 'react'; import classNames from 'classnames'; import config from 'app/core/config'; import { PanelPlugin } from 'app/types/plugins'; +import CustomScrollbar from 'app/core/components/CustomScrollbar/CustomScrollbar'; import _ from 'lodash'; interface Props { @@ -49,13 +50,19 @@ export class VizTypePicker extends PureComponent { render() { return (
-
- +
+
+ +
+
+
+ +
{this.state.pluginList.map(this.renderVizPlugin)}
+
-
{this.state.pluginList.map(this.renderVizPlugin)}
); } diff --git a/public/app/features/dashboard/view_state_srv.ts b/public/app/features/dashboard/view_state_srv.ts index a13bc88161e..8805050831e 100644 --- a/public/app/features/dashboard/view_state_srv.ts +++ b/public/app/features/dashboard/view_state_srv.ts @@ -11,7 +11,6 @@ export class DashboardViewState { panelScopes: any; $scope: any; dashboard: DashboardModel; - editStateChanged: any; fullscreenPanel: any; oldTimeRange: any; @@ -72,9 +71,6 @@ export class DashboardViewState { } } - // remember if editStateChanged - this.editStateChanged = (state.edit || false) !== (this.state.edit || false); - _.extend(this.state, state); this.dashboard.meta.fullscreen = this.state.fullscreen; @@ -128,17 +124,11 @@ export class DashboardViewState { return; } - if (this.fullscreenPanel) { - // if already fullscreen - if (this.fullscreenPanel === panel && this.editStateChanged === false) { - return; - } else { - this.leaveFullscreen(); - } - } - if (!panel.fullscreen) { this.enterFullscreen(panel); + } else { + // already in fullscreen view just update the view mode + this.dashboard.setViewMode(panel, this.state.fullscreen, this.state.edit); } } else if (this.fullscreenPanel) { this.leaveFullscreen(); diff --git a/public/sass/components/_scrollbar.scss b/public/sass/components/_scrollbar.scss index adb9e0c54c0..00bd5f7c94c 100644 --- a/public/sass/components/_scrollbar.scss +++ b/public/sass/components/_scrollbar.scss @@ -307,6 +307,7 @@ .view { display: flex; flex-grow: 1; + flex-direction: column; } .track-vertical { @@ -337,3 +338,7 @@ border-radius: 6px; } } + +.scroll-margin-helper { + margin-right: 12px; +} diff --git a/public/sass/components/_viz_editor.scss b/public/sass/components/_viz_editor.scss index 3658c869d6d..048e513cfbb 100644 --- a/public/sass/components/_viz_editor.scss +++ b/public/sass/components/_viz_editor.scss @@ -19,12 +19,13 @@ height: 100%; } -.viz-picker-list { - padding-top: $spacer; - display: flex; - flex-direction: column; - overflow: auto; +.viz-picker__search { + flex-grow: 0; +} + +.viz-picker__items { flex-grow: 1; + height: calc(100% - 50px); } .viz-picker__item { @@ -41,13 +42,15 @@ display: flex; flex-shrink: 0; border: 1px solid transparent; + @include left-brand-border; &:hover { background: $card-background-hover; } &--selected { - border: 1px solid $orange; + // border: 1px solid $orange; + @include left-brand-border-gradient(); .viz-picker__item-name { color: $text-color;