From 94c35e2577bc0d5e280853cdf40578aaec687a8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 26 Oct 2018 13:20:10 +0200 Subject: [PATCH 01/22] testing panel edit ux idea --- public/app/core/directives/dash_class.ts | 9 ++-- .../dashboard/dashgrid/DashboardPanel.tsx | 16 +++---- .../dashboard/dashgrid/PanelEditor.tsx | 36 +++++++------- .../features/dashboard/submenu/submenu.html | 2 + public/sass/components/_navbar.scss | 7 +-- public/sass/components/_submenu.scss | 1 - public/sass/components/_viz_editor.scss | 47 +++++++++++++++++++ public/sass/pages/_dashboard.scss | 29 ++++++------ 8 files changed, 100 insertions(+), 47 deletions(-) diff --git a/public/app/core/directives/dash_class.ts b/public/app/core/directives/dash_class.ts index 37124eb7d4b..1fb93d29cf3 100644 --- a/public/app/core/directives/dash_class.ts +++ b/public/app/core/directives/dash_class.ts @@ -1,3 +1,4 @@ +import $ from 'jquery'; import _ from 'lodash'; import coreModule from '../core_module'; @@ -5,18 +6,20 @@ import coreModule from '../core_module'; function dashClass($timeout) { return { link: ($scope, elem) => { + const body = $('body'); + $scope.ctrl.dashboard.events.on('view-mode-changed', panel => { console.log('view-mode-changed', panel.fullscreen); if (panel.fullscreen) { - elem.addClass('panel-in-fullscreen'); + body.addClass('panel-in-fullscreen'); } else { $timeout(() => { - elem.removeClass('panel-in-fullscreen'); + body.removeClass('panel-in-fullscreen'); }); } }); - elem.toggleClass('panel-in-fullscreen', $scope.ctrl.dashboard.meta.fullscreen === true); + body.toggleClass('panel-in-fullscreen', $scope.ctrl.dashboard.meta.fullscreen === true); $scope.$watch('ctrl.dashboardViewState.state.editview', newValue => { if (newValue) { diff --git a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx index 7dd8a06996d..4f73a50f138 100644 --- a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx @@ -128,15 +128,13 @@ export class DashboardPanel extends React.Component { /> {this.props.panel.isEditing && ( -
- -
+ )} ); diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx index 26ac8b7d2c1..c4922c7de34 100644 --- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx +++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx @@ -77,20 +77,24 @@ export class PanelEditor extends React.Component { const activeTab = location.query.tab || 'queries'; return ( -
-
-
    - {this.tabs.map(tab => { - return ; - })} -
+
+
+

+ + Edit Panel +

+ {this.tabs.map(tab => { + return ; + })} - +
+ +
-
+
{activeTab === 'queries' && this.renderQueriesTab()} {activeTab === 'visualization' && this.renderVizTab()}
@@ -107,15 +111,13 @@ interface TabItemParams { function TabItem({ tab, activeTab, onClick }: TabItemParams) { const tabClasses = classNames({ - 'gf-tabs-link': true, + 'dashboard-settings__nav-item': true, active: activeTab === tab.id, }); return ( -
  • - onClick(tab)}> - {tab.text} - -
    • + onClick(tab)}> + {tab.text} + ); } diff --git a/public/app/features/dashboard/submenu/submenu.html b/public/app/features/dashboard/submenu/submenu.html index d7cee33e6c3..8d657be4471 100644 --- a/public/app/features/dashboard/submenu/submenu.html +++ b/public/app/features/dashboard/submenu/submenu.html @@ -23,5 +23,7 @@
    + +
    diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index fe4bd9e719e..9ab0a0457d4 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -41,7 +41,8 @@ .panel-in-fullscreen { .navbar { - @include navbar-alt-look(); + // @include navbar-alt-look(); + display: none; } .navbar-button--add-panel, @@ -98,11 +99,11 @@ } .navbar-buttons { - height: $navbarHeight; + // height: $navbarHeight; display: flex; align-items: center; justify-content: flex-end; - margin-right: $spacer; + // margin-right: $spacer; &--close { display: none; diff --git a/public/sass/components/_submenu.scss b/public/sass/components/_submenu.scss index 1efd275bfad..0e7be53591c 100644 --- a/public/sass/components/_submenu.scss +++ b/public/sass/components/_submenu.scss @@ -4,7 +4,6 @@ flex-wrap: wrap; align-content: flex-start; align-items: flex-start; - margin: 0 0 $panel-margin 0; } diff --git a/public/sass/components/_viz_editor.scss b/public/sass/components/_viz_editor.scss index 048e513cfbb..48a32212904 100644 --- a/public/sass/components/_viz_editor.scss +++ b/public/sass/components/_viz_editor.scss @@ -79,3 +79,50 @@ height: 100%; filter: saturate(30%); } + +.panel-editor-container { + display: flex; + flex-direction: column; + height: 100%; +} + +.panel-editor-container__panel { + height: 35%; +} + +.panel-editor-container__editor { + height: 65%; + margin-top: $panel-margin; + display: flex; + flex-direction: row; +} + +.panel-editor__content { + flex-grow: 1; + min-width: 0; + height: 100%; + padding: 20px 0 20px 20px; + max-width: 1100px; +} + +.panel-editor__aside { + padding: 18px 0 0 20px; + background: $panel-bg; + display: flex; + flex-direction: column; +} + +.panel-editor__aside-header { + color: $text-muted; + font-size: $font-size-h3; + padding-right: 50px; + white-space: nowrap; + margin-bottom: $spacer; + + i { + font-size: 25px; + position: relative; + top: 1px; + padding-right: 5px; + } +} diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 795766a22de..ec3e805871e 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -9,6 +9,21 @@ } } +.panel-in-fullscreen { + .dashboard-container--has-submenu { + height: 100%; + } + .scroll-canvas--dashboard { + height: 100%; + } + .sidemenu { + display: none; + } + .main-view { + background: unset; + } +} + .template-variable { color: $variable; } @@ -37,20 +52,6 @@ div.flot-text { height: 100%; } -.panel-editor-container { - display: flex; - flex-direction: column; - height: 100%; -} - -.panel-editor-container__panel { - height: 35%; -} - -.panel-editor-container__editor { - height: 65%; -} - .panel-container { background-color: $panel-bg; border: $panel-border; From bcf669fab5e31aff9a1dd548bf44a0d9f4d04089 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 26 Oct 2018 16:29:08 +0200 Subject: [PATCH 02/22] ux experiments --- .../dashboard/dashgrid/PanelEditor.tsx | 18 ++++----- .../dashboard/dashgrid/VizTypePicker.tsx | 25 ++++++------ public/sass/components/_viz_editor.scss | 38 ++++++------------- public/sass/pages/_dashboard.scss | 3 -- 4 files changed, 33 insertions(+), 51 deletions(-) diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx index c4922c7de34..570fc3cd287 100644 --- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx +++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx @@ -7,6 +7,7 @@ import { QueriesTab } from './QueriesTab'; import { PanelPlugin, PluginExports } from 'app/types/plugins'; import { VizTypePicker } from './VizTypePicker'; import { updateLocation } from 'app/core/actions'; +import CustomScrollbar from 'app/core/components/CustomScrollbar/CustomScrollbar'; interface PanelEditorProps { panel: PanelModel; @@ -31,6 +32,7 @@ export class PanelEditor extends React.Component { this.tabs = [ { id: 'queries', text: 'Queries', icon: 'fa fa-database' }, { id: 'visualization', text: 'Visualization', icon: 'fa fa-line-chart' }, + { id: 'alert', text: 'Alert', icon: 'gicon gicon-alert' }, ]; } @@ -52,13 +54,9 @@ export class PanelEditor extends React.Component { renderVizTab() { return (
    -
    - -
    -
    -
    Options
    - {this.renderPanelOptions()} -
    + +
    Options
    + {this.renderPanelOptions()}
    ); } @@ -95,8 +93,10 @@ export class PanelEditor extends React.Component {
    - {activeTab === 'queries' && this.renderQueriesTab()} - {activeTab === 'visualization' && this.renderVizTab()} + + {activeTab === 'queries' && this.renderQueriesTab()} + {activeTab === 'visualization' && this.renderVizTab()} +
    ); diff --git a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx index 9402133df34..f709ea6a6a6 100644 --- a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx +++ b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx @@ -2,7 +2,6 @@ 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 { @@ -50,19 +49,21 @@ export class VizTypePicker extends PureComponent { render() { return (
    -
    -
    - +
    + + +
    + +
    + +
    -
    - -
    {this.state.pluginList.map(this.renderVizPlugin)}
    -     -
    + +
    {this.state.pluginList.map(this.renderVizPlugin)}
    ); } diff --git a/public/sass/components/_viz_editor.scss b/public/sass/components/_viz_editor.scss index 48a32212904..da2b85337d2 100644 --- a/public/sass/components/_viz_editor.scss +++ b/public/sass/components/_viz_editor.scss @@ -1,22 +1,8 @@ .viz-editor { - display: flex; height: 100%; } -.viz-editor-col1 { - width: 210px; - height: 100%; - margin-right: 40px; -} - -.viz-editor-col2 { - flex-grow: 1; -} - .viz-picker { - display: flex; - flex-direction: column; - height: 100%; } .viz-picker__search { @@ -25,7 +11,8 @@ .viz-picker__items { flex-grow: 1; - height: calc(100% - 50px); + display: flex; + flex-wrap: wrap; } .viz-picker__item { @@ -34,10 +21,10 @@ border-radius: 3px; padding: $spacer; - width: 100%; height: 60px; + width: 157px; text-align: center; - margin-bottom: 6px; + margin: 0 7px 7px 0; cursor: pointer; display: flex; flex-shrink: 0; @@ -49,16 +36,9 @@ } &--selected { - // border: 1px solid $orange; - @include left-brand-border-gradient(); - .viz-picker__item-name { color: $text-color; } - - .viz-picker__item-img { - filter: saturate(100%); - } } } @@ -77,7 +57,6 @@ .viz-picker__item-img { height: 100%; - filter: saturate(30%); } .panel-editor-container { @@ -92,7 +71,7 @@ .panel-editor-container__editor { height: 65%; - margin-top: $panel-margin; + margin-top: $panel-margin*2; display: flex; flex-direction: row; } @@ -101,7 +80,7 @@ flex-grow: 1; min-width: 0; height: 100%; - padding: 20px 0 20px 20px; + padding: 0px 0 20px 20px; max-width: 1100px; } @@ -126,3 +105,8 @@ padding-right: 5px; } } + +.viz-picker__bar { + display: flex; + margin-bottom: $spacer; +} diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index ec3e805871e..c40ad1a32f3 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -10,9 +10,6 @@ } .panel-in-fullscreen { - .dashboard-container--has-submenu { - height: 100%; - } .scroll-canvas--dashboard { height: 100%; } From a4674ecaa14701dd50c7d1b9fd3d288ff6301ad3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 27 Oct 2018 10:14:38 +0200 Subject: [PATCH 03/22] panel edit mode changes --- .../dashboard/dashgrid/PanelEditor.tsx | 27 +++++-- .../dashboard/dashgrid/VizTypePicker.tsx | 4 +- public/app/viz/Graph.tsx | 7 +- public/sass/components/_dashboard_grid.scss | 2 +- public/sass/components/_submenu.scss | 2 +- public/sass/components/_viz_editor.scss | 72 +++++++++++++++++-- public/sass/pages/_dashboard.scss | 12 ---- 7 files changed, 95 insertions(+), 31 deletions(-) diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx index 570fc3cd287..ff5344c61dc 100644 --- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx +++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx @@ -70,6 +70,15 @@ export class PanelEditor extends React.Component { ); }; + onClose = () => { + store.dispatch( + updateLocation({ + query: { tab: false, fullscreen: false, edit: false }, + partial: true, + }) + ); + }; + render() { const { location } = store.getState(); const activeTab = location.query.tab || 'queries'; @@ -81,17 +90,23 @@ export class PanelEditor extends React.Component { Edit Panel + {this.tabs.map(tab => { return ; })} - -
    {activeTab === 'queries' && this.renderQueriesTab()} @@ -111,7 +126,7 @@ interface TabItemParams { function TabItem({ tab, activeTab, onClick }: TabItemParams) { const tabClasses = classNames({ - 'dashboard-settings__nav-item': true, + 'panel-editor__aside-item': true, active: activeTab === tab.id, }); diff --git a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx index f709ea6a6a6..b7028aabd54 100644 --- a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx +++ b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx @@ -54,11 +54,11 @@ export class VizTypePicker extends PureComponent {
    - +
    diff --git a/public/app/viz/Graph.tsx b/public/app/viz/Graph.tsx index fab65225715..bc7f041164e 100644 --- a/public/app/viz/Graph.tsx +++ b/public/app/viz/Graph.tsx @@ -108,8 +108,11 @@ export class Graph extends PureComponent { ...dynamicOptions, }; - console.log('plot', timeSeries, options); - $.plot(this.element, timeSeries, options); + try { + $.plot(this.element, timeSeries, options); + } catch (err) { + console.log('plot error', err); + } } render() { diff --git a/public/sass/components/_dashboard_grid.scss b/public/sass/components/_dashboard_grid.scss index da1f140d252..7b1db117247 100644 --- a/public/sass/components/_dashboard_grid.scss +++ b/public/sass/components/_dashboard_grid.scss @@ -3,7 +3,7 @@ .panel-in-fullscreen { .react-grid-layout { - height: 100% !important; + height: calc(100% - 20px) !important; } .react-grid-item { diff --git a/public/sass/components/_submenu.scss b/public/sass/components/_submenu.scss index 0e7be53591c..a6844b9e66b 100644 --- a/public/sass/components/_submenu.scss +++ b/public/sass/components/_submenu.scss @@ -4,7 +4,7 @@ flex-wrap: wrap; align-content: flex-start; align-items: flex-start; - margin: 0 0 $panel-margin 0; + padding: 0 0 $panel-margin 0; } .annotation-disabled, diff --git a/public/sass/components/_viz_editor.scss b/public/sass/components/_viz_editor.scss index da2b85337d2..20d546fb326 100644 --- a/public/sass/components/_viz_editor.scss +++ b/public/sass/components/_viz_editor.scss @@ -1,5 +1,27 @@ -.viz-editor { - height: 100%; +.panel-in-fullscreen { + .scroll-canvas--dashboard { + height: 100%; + } + + .sidemenu { + display: none; + } + + .main-view { + background: unset; + } + + .dashboard-container { + padding: 0; + } + + .submenu-controls { + padding: $dashboard-padding $dashboard-padding $panel-margin $dashboard-padding; + } + + .panel-editor-container__panel { + margin: 0 $dashboard-padding; + } } .viz-picker { @@ -66,35 +88,71 @@ } .panel-editor-container__panel { - height: 35%; + flex: 1 1 0; } .panel-editor-container__editor { - height: 65%; margin-top: $panel-margin*2; display: flex; flex-direction: row; + height: 65%; } .panel-editor__content { flex-grow: 1; min-width: 0; height: 100%; - padding: 0px 0 20px 20px; + padding: 0 20px; max-width: 1100px; } .panel-editor__aside { - padding: 18px 0 0 20px; background: $panel-bg; display: flex; flex-direction: column; } +.panel-editor__aside-item { + padding: 8px 20px; + color: $text-color; + font-size: $font-size-md; + @include left-brand-border; + + &.active { + @include left-brand-border-gradient(); + background: $page-bg; + } + + i { + width: 23px; + } + + .gicon { + margin-bottom: 2px; + } + + .fa { + font-size: 17px; + } +} + +.panel-editor__aside-actions { + display: flex; + flex-direction: column; + height: 100%; + flex-grow: 1; + padding: 30px 0 0 0; + + a { + text-align: left; + padding-left: 20px; + } +} + .panel-editor__aside-header { color: $text-muted; font-size: $font-size-h3; - padding-right: 50px; + padding: 20px 20px 10px 20px; white-space: nowrap; margin-bottom: $spacer; diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index c40ad1a32f3..18d6145c4b3 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -9,18 +9,6 @@ } } -.panel-in-fullscreen { - .scroll-canvas--dashboard { - height: 100%; - } - .sidemenu { - display: none; - } - .main-view { - background: unset; - } -} - .template-variable { color: $variable; } From b1b534a005d5bcda6c988c4c4303a0d27e77e6b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 27 Oct 2018 15:09:36 +0200 Subject: [PATCH 04/22] more ux progress --- public/app/core/reducers/location.ts | 1 + .../dashboard/dashgrid/PanelEditor.tsx | 9 ++- .../dashboard/dashgrid/VizTypePicker.tsx | 39 ++++++++---- public/sass/components/_viz_editor.scss | 61 +++++++++++++------ 4 files changed, 79 insertions(+), 31 deletions(-) diff --git a/public/app/core/reducers/location.ts b/public/app/core/reducers/location.ts index 7c7dffd04b9..0bec305f29d 100644 --- a/public/app/core/reducers/location.ts +++ b/public/app/core/reducers/location.ts @@ -18,6 +18,7 @@ export const locationReducer = (state = initialState, action: Action): LocationS if (action.payload.partial) { query = _.defaults(query, state.query); + query = _.omitBy(query, _.isNull); } return { diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx index ff5344c61dc..7488c24997c 100644 --- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx +++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx @@ -1,5 +1,6 @@ import React from 'react'; import classNames from 'classnames'; + import { PanelModel } from '../panel_model'; import { DashboardModel } from '../dashboard_model'; import { store } from 'app/store/configureStore'; @@ -55,7 +56,6 @@ export class PanelEditor extends React.Component { return (
    -
    Options
    {this.renderPanelOptions()}
    ); @@ -73,7 +73,7 @@ export class PanelEditor extends React.Component { onClose = () => { store.dispatch( updateLocation({ - query: { tab: false, fullscreen: false, edit: false }, + query: { tab: null, fullscreen: null, edit: null }, partial: true, }) ); @@ -85,6 +85,11 @@ export class PanelEditor extends React.Component { return (
    +
    +
    +
    +
    +

    diff --git a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx index b7028aabd54..9f8b26b8635 100644 --- a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx +++ b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx @@ -1,7 +1,9 @@ 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 { @@ -40,30 +42,45 @@ export class VizTypePicker extends PureComponent { return (
    this.props.onTypeChanged(plugin)} title={plugin.name}> -
    {plugin.name}
    +
    ); }; + renderFilters() { + return ( + <> + +
    + + +
    + + ); + } + render() { + const { currentType } = this.props; + const { pluginList } = this.state; + return (
    - -
    -
    ); } diff --git a/public/sass/components/_viz_editor.scss b/public/sass/components/_viz_editor.scss index 20d546fb326..4830da62b9e 100644 --- a/public/sass/components/_viz_editor.scss +++ b/public/sass/components/_viz_editor.scss @@ -24,17 +24,14 @@ } } -.viz-picker { -} - .viz-picker__search { flex-grow: 0; } .viz-picker__items { - flex-grow: 1; display: flex; - flex-wrap: wrap; + // for scrollbar + margin-bottom: 10px; } .viz-picker__item { @@ -42,16 +39,16 @@ box-shadow: $card-shadow; border-radius: 3px; - padding: $spacer; - height: 60px; - width: 157px; + height: 70px; + width: 130px; + flex-shrink: 0; + flex-direction: column; text-align: center; - margin: 0 7px 7px 0; cursor: pointer; display: flex; - flex-shrink: 0; + margin-right: 6px; border: 1px solid transparent; - @include left-brand-border; + align-items: center; &:hover { background: $card-background-hover; @@ -68,17 +65,15 @@ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; - font-size: $font-size-h5; + font-size: $font-size-sm; display: flex; flex-direction: column; align-self: center; - padding-left: $spacer; - font-size: $font-size-md; - color: $text-muted; + height: 20px; } .viz-picker__item-img { - height: 100%; + height: 40px; } .panel-editor-container { @@ -96,6 +91,7 @@ display: flex; flex-direction: row; height: 65%; + position: relative; } .panel-editor__content { @@ -152,9 +148,8 @@ .panel-editor__aside-header { color: $text-muted; font-size: $font-size-h3; - padding: 20px 20px 10px 20px; + padding: 20px 30px 10px 20px; white-space: nowrap; - margin-bottom: $spacer; i { font-size: 25px; @@ -168,3 +163,33 @@ display: flex; margin-bottom: $spacer; } + +.panel-editor-resizer { + position: absolute; + height: 2px; + width: 100%; + top: 1px; + padding-left: 32px; +} + +.panel-editor-resizer__handle { + display: inline-block; + width: 100px; + position: relative; + background: $input-label-bg; + top: -12px; + border-radius: 2px; + box-shadow: 0 0 8px $black; + height: 8px; + cursor: grabbing; +} + +.panel-editor-resizer__handle-dots { + border-top: 2px dotted $text-color-faint; + position: relative; + top: 3px; +} + +.panel-editor { + height: calc(100% - 10px); +} From 60b6bd10a4b51d6979802f5c31ac2e3882120956 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 28 Oct 2018 11:31:42 +0100 Subject: [PATCH 05/22] fixes to angular panel edit mode --- public/sass/components/_tabbed_view.scss | 6 ++++-- public/sass/components/_viz_editor.scss | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/public/sass/components/_tabbed_view.scss b/public/sass/components/_tabbed_view.scss index 87b43a31142..c1cf78716bb 100644 --- a/public/sass/components/_tabbed_view.scss +++ b/public/sass/components/_tabbed_view.scss @@ -2,9 +2,10 @@ display: flex; flex-direction: column; height: 100%; + flex-grow: 1; &.tabbed-view--new { - padding: 25px 0 0 0; + padding: 0 0 0 0; height: 100%; } } @@ -12,13 +13,14 @@ .tabbed-view-header { box-shadow: $page-header-shadow; border-bottom: 1px solid $page-header-border-color; + padding: 0 $dashboard-padding; @include clearfix(); } .tabbed-view-title { float: left; padding-top: 0.5rem; - margin: 0 $spacer*3 0 $spacer*1; + margin: 0 $spacer*3 0 0; } .tabbed-view-panel-title { diff --git a/public/sass/components/_viz_editor.scss b/public/sass/components/_viz_editor.scss index 4830da62b9e..a342f584f69 100644 --- a/public/sass/components/_viz_editor.scss +++ b/public/sass/components/_viz_editor.scss @@ -31,7 +31,7 @@ .viz-picker__items { display: flex; // for scrollbar - margin-bottom: 10px; + margin-bottom: 13px; } .viz-picker__item { From 6bf0531f818e2f662a0bf812d7c81a4c2fcd736e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 28 Oct 2018 10:26:49 -0700 Subject: [PATCH 06/22] fixed width of panel edit mode --- public/sass/components/_viz_editor.scss | 51 ++++++++++++------------- 1 file changed, 25 insertions(+), 26 deletions(-) diff --git a/public/sass/components/_viz_editor.scss b/public/sass/components/_viz_editor.scss index a342f584f69..3fe4d44cc24 100644 --- a/public/sass/components/_viz_editor.scss +++ b/public/sass/components/_viz_editor.scss @@ -1,3 +1,28 @@ +.panel-editor-container { + display: flex; + flex-direction: column; + height: 100%; +} + +.panel-editor-container__panel { + flex: 1 1 0; +} + +.panel-editor-container__editor { + margin-top: $panel-margin*2; + display: flex; + flex-direction: row; + height: 65%; + position: relative; +} + +.panel-editor__content { + flex-grow: 1; + min-width: 0; + height: 100%; + padding: 0 20px; +} + .panel-in-fullscreen { .scroll-canvas--dashboard { height: 100%; @@ -76,32 +101,6 @@ height: 40px; } -.panel-editor-container { - display: flex; - flex-direction: column; - height: 100%; -} - -.panel-editor-container__panel { - flex: 1 1 0; -} - -.panel-editor-container__editor { - margin-top: $panel-margin*2; - display: flex; - flex-direction: row; - height: 65%; - position: relative; -} - -.panel-editor__content { - flex-grow: 1; - min-width: 0; - height: 100%; - padding: 0 20px; - max-width: 1100px; -} - .panel-editor__aside { background: $panel-bg; display: flex; From e24dc37966b1c4cb0ee0a0b2ce403797d457f479 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 28 Oct 2018 12:44:47 -0700 Subject: [PATCH 07/22] minor update --- public/app/plugins/panel/graph2/module.tsx | 16 +++++++++++++--- public/app/plugins/panel/graph2/plugin.json | 2 ++ public/sass/components/_viz_editor.scss | 4 ++++ 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/public/app/plugins/panel/graph2/module.tsx b/public/app/plugins/panel/graph2/module.tsx index 4011458bea9..c42c579276f 100644 --- a/public/app/plugins/panel/graph2/module.tsx +++ b/public/app/plugins/panel/graph2/module.tsx @@ -40,9 +40,19 @@ export class TextOptions extends PureComponent { render() { return ( -
    -
    Draw Modes
    - +
    +
    +
    Draw Modes
    + + + +
    +
    +
    Modes Options
    + + + +
    ); } diff --git a/public/app/plugins/panel/graph2/plugin.json b/public/app/plugins/panel/graph2/plugin.json index b519a57fae4..2e674ab3557 100644 --- a/public/app/plugins/panel/graph2/plugin.json +++ b/public/app/plugins/panel/graph2/plugin.json @@ -3,6 +3,8 @@ "name": "React Graph", "id": "graph2", + "state": "alpha", + "info": { "author": { "name": "Grafana Project", diff --git a/public/sass/components/_viz_editor.scss b/public/sass/components/_viz_editor.scss index 3fe4d44cc24..7b08b145557 100644 --- a/public/sass/components/_viz_editor.scss +++ b/public/sass/components/_viz_editor.scss @@ -53,6 +53,10 @@ flex-grow: 0; } +.viz-picker { + margin-bottom: $spacer; +} + .viz-picker__items { display: flex; // for scrollbar From 0e26fad30b509e715ca3ec23dae5416bfbf34e78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 1 Nov 2018 19:25:54 +0100 Subject: [PATCH 08/22] minor tweak to back to dashboard buttons --- .../features/dashboard/dashgrid/PanelEditor.tsx | 15 ++++++--------- public/sass/components/_viz_editor.scss | 7 +++---- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx index 7488c24997c..cb67db23c61 100644 --- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx +++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx @@ -101,15 +101,12 @@ export class PanelEditor extends React.Component { })}
    - - Close - - - Discard - - - Save as master type - + +
    diff --git a/public/sass/components/_viz_editor.scss b/public/sass/components/_viz_editor.scss index 7b08b145557..97b0b22d500 100644 --- a/public/sass/components/_viz_editor.scss +++ b/public/sass/components/_viz_editor.scss @@ -140,11 +140,10 @@ flex-direction: column; height: 100%; flex-grow: 1; - padding: 30px 0 0 0; + padding: 60px 15px; - a { - text-align: left; - padding-left: 20px; + button { + margin-bottom: 10px; } } From c9802c283e41f9d2fc40aaac062482dcfda67060 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 5 Nov 2018 12:33:40 +0100 Subject: [PATCH 09/22] minor fix --- public/app/features/dashboard/dashgrid/PanelEditor.tsx | 2 +- public/sass/components/_timepicker.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx index cb67db23c61..0c05d771c50 100644 --- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx +++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx @@ -101,7 +101,7 @@ export class PanelEditor extends React.Component { })}
    -
    @@ -63,24 +65,52 @@ export class VizTypePicker extends PureComponent { ); } + onToggleOpen = () => { + this.setState({ isOpen: !this.state.isOpen }); + }; + render() { - const { currentType } = this.props; - const { pluginList } = this.state; + const { current } = this.props; + const { pluginList, isOpen } = this.state; return (
    - - -
    - {this.renderFilters()} +
    +
    + + +
    +
    +
    +
    + +
    +
    - -
    {pluginList.map(this.renderVizPlugin)}
    -     + +
    + + +
    +
    Select visualization
    + {this.renderFilters()} +
    +
    + +
    {pluginList.map(this.renderVizPlugin)}
    +
    +
    ); } diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 0de386f3f68..8ec697326be 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -410,7 +410,27 @@ select.gf-form-input ~ .gf-form-help-icon { } .cta-form__close { + background: transparent; + padding: 4px 8px 4px 9px; + border: none; position: absolute; right: 0; - top: 0; + top: -2px; + font-size: $font-size-lg; + + &:hover { + color: $text-color-strong; + } +} + +.cta-form__bar { + display: flex; + align-items: center; + align-content: center; + margin-bottom: 20px; +} + +.cta-form__bar-header { + font-size: $font-size-h4; + padding-right: 20px; } diff --git a/public/sass/components/_viz_editor.scss b/public/sass/components/_viz_editor.scss index 8eac117d2a4..e109c8840e0 100644 --- a/public/sass/components/_viz_editor.scss +++ b/public/sass/components/_viz_editor.scss @@ -59,6 +59,7 @@ .viz-picker__items { display: flex; + flex-wrap: wrap; // for scrollbar margin-bottom: 13px; } @@ -68,14 +69,15 @@ box-shadow: $card-shadow; border-radius: 3px; - height: 70px; - width: 130px; + height: 90px; + width: 150px; flex-shrink: 0; flex-direction: column; text-align: center; cursor: pointer; display: flex; - margin-right: 6px; + margin-right: 10px; + margin-bottom: 10px; border: 1px solid transparent; align-items: center; @@ -98,11 +100,11 @@ display: flex; flex-direction: column; align-self: center; - height: 20px; + height: 23px; } .viz-picker__item-img { - height: 40px; + height: 55px; } .panel-editor__aside { @@ -162,7 +164,6 @@ } .viz-picker__bar { - display: flex; margin-bottom: $spacer; } From 7d87f57367d699c8d3020d4ab025a86d178c1632 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 6 Nov 2018 18:55:35 +0100 Subject: [PATCH 13/22] experimental option boxes --- .../dashboard/dashgrid/VizTypePicker.tsx | 2 +- public/app/plugins/panel/graph2/module.tsx | 25 +++++++++++++++---- public/sass/components/_viz_editor.scss | 11 ++++++++ 3 files changed, 32 insertions(+), 6 deletions(-) diff --git a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx index e3bc9cd0a04..05be2ef8d41 100644 --- a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx +++ b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx @@ -90,7 +90,7 @@ export class VizTypePicker extends PureComponent {
    diff --git a/public/app/plugins/panel/graph2/module.tsx b/public/app/plugins/panel/graph2/module.tsx index b132d3374f1..194f07823ad 100644 --- a/public/app/plugins/panel/graph2/module.tsx +++ b/public/app/plugins/panel/graph2/module.tsx @@ -61,11 +61,26 @@ export class GraphOptions extends PureComponent> { return (
    -
    -
    Draw Modes
    - - - +
    +
    Display Options
    +
    +
    Draw Modes
    + + + +
    +
    +
    Test Options
    + + + +
    +
    +
    +
    Axes
    +
    +
    +
    Thresholds
    ); diff --git a/public/sass/components/_viz_editor.scss b/public/sass/components/_viz_editor.scss index e109c8840e0..3d82e133469 100644 --- a/public/sass/components/_viz_editor.scss +++ b/public/sass/components/_viz_editor.scss @@ -212,3 +212,14 @@ .panel-editor { height: calc(100% - 10px); } + +.form-option-box { + margin-bottom: 20px; +} + +.form-option-box__header { + border-bottom: 2px solid $blue-dark; + padding: 5px 0px; + font-size: $font-size-lg; + margin-bottom: 20px; +} From 8a9d721c0059d4c266b45f95cf86eae5959b4a86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 8 Nov 2018 12:25:22 +0100 Subject: [PATCH 14/22] panel-edit-ux-tabs on top alternative --- .../dashboard/dashgrid/PanelEditor.tsx | 113 +++++++++++++++--- 1 file changed, 94 insertions(+), 19 deletions(-) diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx index 1e41fd7ee0e..9c4f1440096 100644 --- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx +++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx @@ -87,7 +87,50 @@ export class PanelEditor extends PureComponent { }; render() { + return this.renderAsTabs(); + // return this.renderAsBoxes(); + // const { location } = store.getState(); + // const activeTab = location.query.tab || 'queries'; + // + // return ( + //
    + //
    + //
    + //
    + //
    + //
    + //
    + //

    + // + // Edit Panel + //

    + // + // {this.tabs.map(tab => { + // return ; + // })} + // + //
    + // + // + //
    + //
    + //
    + // + // {activeTab === 'queries' && this.renderQueriesTab()} + // {activeTab === 'visualization' && this.renderVizTab()} + // + //
    + //
    + // ); + } + + renderAsTabs() { const { location } = store.getState(); + const { panel } = this.props; const activeTab = location.query.tab || 'queries'; return ( @@ -97,31 +140,50 @@ export class PanelEditor extends PureComponent {
    -
    -

    - - Edit Panel -

    - {this.tabs.map(tab => { - return ; - })} +
    +
    +

    {panel.title}

    -
    - -
    + +
    + + {activeTab === 'queries' && this.renderQueriesTab()} + {activeTab === 'visualization' && this.renderVizTab()} + +
    -
    - - {activeTab === 'queries' && this.renderQueriesTab()} - {activeTab === 'visualization' && this.renderVizTab()} - +
    + ); + } + + renderAsBoxes() { + const { location } = store.getState(); + const { panel } = this.props; + const activeTab = location.query.tab || 'queries'; + + return ( +
    +
    +
    +
    +
    + + + {this.renderQueriesTab()} + {this.renderVizTab()} +
    ); } @@ -145,3 +207,16 @@ function TabItem({ tab, activeTab, onClick }: TabItemParams) { ); } + +function OldTabItem({ tab, activeTab, onClick }: TabItemParams) { + const tabClasses = classNames({ + 'gf-tabs-link': true, + active: activeTab === tab.id, + }); + + return ( +
  • onClick(tab)}> + {tab.text} +
    • + ); +} From a7daf58bb9ef3406e32981ed6fcd66e7cc4fee17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 9 Nov 2018 13:17:41 +0100 Subject: [PATCH 15/22] wip: progress on edit mode ux with tabs --- .../CustomScrollbar/CustomScrollbar.tsx | 2 +- .../dashboard/dashgrid/EditorTabBody.tsx | 84 +++++++++ .../dashboard/dashgrid/PanelEditor.tsx | 146 ++------------- .../dashboard/dashgrid/QueriesTab.tsx | 17 +- .../dashboard/dashgrid/VisualizationTab.tsx | 56 ++++++ .../dashboard/dashgrid/VizTypePicker.tsx | 52 +----- .../features/panel/partials/metrics_tab.html | 2 +- public/sass/components/_dashboard_grid.scss | 4 + public/sass/components/_gf-form.scss | 2 +- public/sass/components/_viz_editor.scss | 168 +++++++++++------- 10 files changed, 293 insertions(+), 240 deletions(-) create mode 100644 public/app/features/dashboard/dashgrid/EditorTabBody.tsx create mode 100644 public/app/features/dashboard/dashgrid/VisualizationTab.tsx diff --git a/public/app/core/components/CustomScrollbar/CustomScrollbar.tsx b/public/app/core/components/CustomScrollbar/CustomScrollbar.tsx index 9b9a9c4d02a..93add925095 100644 --- a/public/app/core/components/CustomScrollbar/CustomScrollbar.tsx +++ b/public/app/core/components/CustomScrollbar/CustomScrollbar.tsx @@ -15,7 +15,7 @@ interface Props { class CustomScrollbar extends PureComponent { static defaultProps: Partial = { customClassName: 'custom-scrollbars', - autoHide: true, + autoHide: false, autoHideTimeout: 200, autoHideDuration: 200, hideTracksWhenNotNeeded: false, diff --git a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx new file mode 100644 index 00000000000..2460514eda1 --- /dev/null +++ b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx @@ -0,0 +1,84 @@ +import React, { PureComponent } from 'react'; +import CustomScrollbar from 'app/core/components/CustomScrollbar/CustomScrollbar'; +import { FadeIn } from 'app/core/components/Animations/FadeIn'; + +interface Props { + selectedText?: string; + selectedImage?: string; + children: JSX.Element; + toolbarItems: EditorToolBarView[]; +} + +export interface EditorToolBarView { + title: string; + imgSrc: string; + render: () => JSX.Element; +} + +interface State { + openView?: EditorToolBarView; +} + +export class EditorTabBody extends PureComponent { + constructor(props) { + super(props); + + this.state = { + openView: null, + }; + } + + onToggleToolBarView = (item: EditorToolBarView) => { + this.setState({ + openView: item === this.state.openView ? null : item, + }); + } + + onCloseOpenView = () => { + this.setState({ openView: null }); + } + + renderToolBarViewToggle(item: EditorToolBarView) { + return ( +
    this.onToggleToolBarView(item)} key={item.title}> + +
    {item.title}
    + +
    + ); + } + + renderOpenView(view: EditorToolBarView) { + return ( +
    + + {view.render()} +
    + ); + } + + render() { + const { children, toolbarItems} = this.props; + const { openView } = this.state; + + return ( + <> +
    +
    {toolbarItems.map(item => this.renderToolBarViewToggle(item))}
    +
    +
    + +
    + + {openView && this.renderOpenView(openView)} + + {children} +
    +     +
    + + ); + } +} diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx index 9c4f1440096..a1b976c6c66 100644 --- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx +++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx @@ -2,8 +2,7 @@ import React, { PureComponent } from 'react'; import classNames from 'classnames'; import { QueriesTab } from './QueriesTab'; -import { VizTypePicker } from './VizTypePicker'; -import CustomScrollbar from 'app/core/components/CustomScrollbar/CustomScrollbar'; +import { VisualizationTab } from './VisualizationTab'; import { store } from 'app/store/configureStore'; import { updateLocation } from 'app/core/actions'; @@ -38,35 +37,6 @@ export class PanelEditor extends PureComponent { ]; } - renderQueriesTab() { - return ; - } - - renderPanelOptions() { - const { plugin, panel } = this.props; - const { PanelOptionsComponent } = plugin.exports; - - if (PanelOptionsComponent) { - return ; - } else { - return

    Visualization has no options

    ; - } - } - - onPanelOptionsChanged = (options: any) => { - this.props.panel.updateOptions(options); - this.forceUpdate(); - }; - - renderVizTab() { - return ( -
    - - {this.renderPanelOptions()} -
    - ); - } - onChangeTab = (tab: PanelEditorTab) => { store.dispatch( updateLocation({ @@ -87,50 +57,8 @@ export class PanelEditor extends PureComponent { }; render() { - return this.renderAsTabs(); - // return this.renderAsBoxes(); - // const { location } = store.getState(); - // const activeTab = location.query.tab || 'queries'; - // - // return ( - //
    - //
    - //
    - //
    - //
    - //
    - //
    - //

    - // - // Edit Panel - //

    - // - // {this.tabs.map(tab => { - // return ; - // })} - // - //
    - // - // - //
    - //
    - //
    - // - // {activeTab === 'queries' && this.renderQueriesTab()} - // {activeTab === 'visualization' && this.renderVizTab()} - // - //
    - //
    - // ); - } - - renderAsTabs() { + const { panel, dashboard, onTypeChanged, plugin } = this.props; const { location } = store.getState(); - const { panel } = this.props; const activeTab = location.query.tab || 'queries'; return ( @@ -141,49 +69,22 @@ export class PanelEditor extends PureComponent {
    -
    -
    -

    {panel.title}

    +
    +
      + {this.tabs.map(tab => { + return ; + })} +
    -
      - {this.tabs.map(tab => { - return ; - })} -
    - - -
    - -
    - - {activeTab === 'queries' && this.renderQueriesTab()} - {activeTab === 'visualization' && this.renderVizTab()} - -
    -
    -
    - ); - } - - renderAsBoxes() { - const { location } = store.getState(); - const { panel } = this.props; - const activeTab = location.query.tab || 'queries'; - - return ( -
    -
    -
    -
    -
    +
    - - {this.renderQueriesTab()} - {this.renderVizTab()} - + {activeTab === 'queries' && } + {activeTab === 'visualization' && ( + + )}
    ); } @@ -196,19 +97,6 @@ interface TabItemParams { } function TabItem({ tab, activeTab, onClick }: TabItemParams) { - const tabClasses = classNames({ - 'panel-editor__aside-item': true, - active: activeTab === tab.id, - }); - - return ( - onClick(tab)}> - {tab.text} - - ); -} - -function OldTabItem({ tab, activeTab, onClick }: TabItemParams) { const tabClasses = classNames({ 'gf-tabs-link': true, active: activeTab === tab.id, @@ -216,7 +104,9 @@ function OldTabItem({ tab, activeTab, onClick }: TabItemParams) { return (
  • onClick(tab)}> - {tab.text} + + {tab.text} +
    • ); } diff --git a/public/app/features/dashboard/dashgrid/QueriesTab.tsx b/public/app/features/dashboard/dashgrid/QueriesTab.tsx index f13f212826a..e1884992901 100644 --- a/public/app/features/dashboard/dashgrid/QueriesTab.tsx +++ b/public/app/features/dashboard/dashgrid/QueriesTab.tsx @@ -3,6 +3,7 @@ import React, { PureComponent } from 'react'; // Services & utils import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader'; +import { EditorTabBody } from './EditorTabBody'; // Types import { PanelModel } from '../panel_model'; @@ -48,6 +49,20 @@ export class QueriesTab extends PureComponent { } render() { - return
    (this.element = element)} className="panel-height-helper" />; + const currentDataSource = { + title: 'ProductionDB', + imgSrc: 'public/app/plugins/datasource/prometheus/img/prometheus_logo.svg', + render: () => { + return ( +

    Hello

    + ); + }, + }; + + return ( + +
    (this.element = element)} style={{ width: '100%' }} /> + + ); } } diff --git a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx new file mode 100644 index 00000000000..34d37c0e61b --- /dev/null +++ b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx @@ -0,0 +1,56 @@ +import React, { PureComponent } from 'react'; + +import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader'; +import { EditorTabBody } from './EditorTabBody'; +import { VizTypePicker } from './VizTypePicker'; + +import { PanelModel } from '../panel_model'; +import { DashboardModel } from '../dashboard_model'; + +interface Props { + panel: PanelModel; + dashboard: DashboardModel; + plugin: PluginModel; + onTypeChanged: (newType: PanelPlugin) => void; +} + +export class VisualizationTab extends PureComponent { + + constructor(props) { + super(props); + } + + renderPanelOptions() { + const { plugin, panel } = this.props; + const { PanelOptionsComponent } = plugin.exports; + + if (PanelOptionsComponent) { + return ; + } else { + return

    Visualization has no options

    ; + } + } + + onPanelOptionsChanged = (options: any) => { + this.props.panel.updateOptions(options); + this.forceUpdate(); + }; + + render() { + const {plugin, onTypeChanged} = this.props; + + const panelSelection = { + title: plugin.name, + imgSrc: plugin.info.logos.small, + render: () => { + return ; + }, + }; + + return ( + + {this.renderPanelOptions()} + + ); + } +} diff --git a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx index 05be2ef8d41..7e87670955b 100644 --- a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx +++ b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx @@ -2,7 +2,6 @@ import React, { PureComponent } from 'react'; import classNames from 'classnames'; import _ from 'lodash'; -import { FadeIn } from 'app/core/components/Animations/FadeIn'; import config from 'app/core/config'; import { PanelPlugin } from 'app/types/plugins'; @@ -13,7 +12,6 @@ interface Props { interface State { pluginList: PanelPlugin[]; - isOpen: boolean; } export class VizTypePicker extends PureComponent { @@ -22,7 +20,6 @@ export class VizTypePicker extends PureComponent { this.state = { pluginList: this.getPanelPlugins(''), - isOpen: false, }; } @@ -65,53 +62,20 @@ export class VizTypePicker extends PureComponent { ); } - onToggleOpen = () => { - this.setState({ isOpen: !this.state.isOpen }); - }; - render() { const { current } = this.props; - const { pluginList, isOpen } = this.state; + const { pluginList } = this.state; return ( -
    -
    -
    -
    - - -
    -
    -
    -
    - -
    -
    + <> +
    +
    Select visualization
    + {this.renderFilters()} +
    - -
    - - -
    -
    Select visualization
    - {this.renderFilters()} -
    -
    - -
    {pluginList.map(this.renderVizPlugin)}
    -
    - -
    +
    {pluginList.map(this.renderVizPlugin)}
    + ); } } diff --git a/public/app/features/panel/partials/metrics_tab.html b/public/app/features/panel/partials/metrics_tab.html index 815a99d6b74..42808ac10f7 100644 --- a/public/app/features/panel/partials/metrics_tab.html +++ b/public/app/features/panel/partials/metrics_tab.html @@ -1,4 +1,4 @@ -
    +
    diff --git a/public/sass/components/_dashboard_grid.scss b/public/sass/components/_dashboard_grid.scss index 7b1db117247..5f142dfd02f 100644 --- a/public/sass/components/_dashboard_grid.scss +++ b/public/sass/components/_dashboard_grid.scss @@ -19,6 +19,10 @@ transform: translate(0px, 0px) !important; } + .panel { + margin: 0 !important; + } + // Disable grid interaction indicators in fullscreen panels .panel-header:hover { background-color: inherit; diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 8ec697326be..b2d01bc5136 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -416,7 +416,7 @@ select.gf-form-input ~ .gf-form-help-icon { position: absolute; right: 0; top: -2px; - font-size: $font-size-lg; + font-size: $font-size-md; &:hover { color: $text-color-strong; diff --git a/public/sass/components/_viz_editor.scss b/public/sass/components/_viz_editor.scss index 3d82e133469..b51f6d335a3 100644 --- a/public/sass/components/_viz_editor.scss +++ b/public/sass/components/_viz_editor.scss @@ -11,16 +11,20 @@ .panel-editor-container__editor { margin-top: $panel-margin*2; display: flex; - flex-direction: row; + flex-direction: column; height: 65%; position: relative; } -.panel-editor__content { +.panel-editor__scroll { flex-grow: 1; min-width: 0; - height: 100%; - padding: 0 20px; + display: flex; + padding: 0 5px; +} + +.panel-editor__content { + padding: 40px 15px; } .panel-in-fullscreen { @@ -107,66 +111,6 @@ height: 55px; } -.panel-editor__aside { - background: $panel-bg; - display: flex; - flex-direction: column; -} - -.panel-editor__aside-item { - padding: 8px 20px; - color: $text-color; - font-size: $font-size-md; - @include left-brand-border; - - &.active { - @include left-brand-border-gradient(); - background: $page-bg; - } - - i { - width: 23px; - } - - .gicon { - margin-bottom: 2px; - } - - .fa { - font-size: 17px; - } -} - -.panel-editor__aside-actions { - display: flex; - flex-direction: column; - height: 100%; - flex-grow: 1; - padding: 60px 15px; - - button { - margin-bottom: 10px; - } -} - -.panel-editor__aside-header { - color: $text-muted; - font-size: $font-size-h3; - padding: 20px 30px 10px 20px; - white-space: nowrap; - - i { - font-size: 25px; - position: relative; - top: 1px; - padding-right: 5px; - } -} - -.viz-picker__bar { - margin-bottom: $spacer; -} - .panel-editor-resizer { position: absolute; height: 2px; @@ -223,3 +167,99 @@ font-size: $font-size-lg; margin-bottom: 20px; } + +.edit-section { + position: relative; +} + +.edit-section__header { + display: flex; + align-content: center; + align-items: center; + background: linear-gradient(90deg, #292a2d, black); + padding: 7px 30px 7px 20px; + box-shadow: 0 0 20px black; + cursor: pointer; +} + +.edit-section__selected { + padding: $input-padding-y $input-padding-x; + font-size: $font-size-md; + line-height: $input-line-height; + color: $input-color; + background-color: $input-bg; + border: $input-border; + border-radius: $input-border-radius; + display: flex; + align-items: center; + .fa { + margin-left: 20px; + display: inline-block; + position: relative; + } +} + +.edit-section__title { + font-size: $font-size-lg; + padding-right: 20px; + width: 150px; +} + +.edit-section__selected-image { + margin-right: 10px; + display: inline-block; + width: 20px; + height: 20px; +} + +.panel-editor-tabs { + z-index: 1; + box-shadow: $page-header-shadow; + border-bottom: 1px solid $page-header-border-color; + padding: 0 $dashboard-padding; + @include clearfix(); + + .active.gf-tabs-link { + background: #242427; + } +} + +.panel-editor-tabs__close { + float: right; + padding: 0; + margin: 0; + background-color: transparent; + border: none; + padding: $tabs-padding; + color: $text-color; + + i { + font-size: 120%; + } + &:hover { + color: $text-color-strong; + } +} + +.editor-toolbar-view { + position: relative; + padding: 10px 20px; + background-color: $empty-list-cta-bg; + border-top: 3px solid $orange; + margin: 0 100px; +} + +.editor-toolbar-view__close { + background: transparent; + padding: 4px 8px 4px 9px; + border: none; + position: absolute; + right: 0; + top: -2px; + font-size: $font-size-md; + + &:hover { + color: $text-color-strong; + } +} + From 1bad8db94ca11b4648c501b0071739fae4352ea5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 9 Nov 2018 15:49:55 +0100 Subject: [PATCH 16/22] data source picker demo state --- .../dashboard/dashgrid/DataSourcePicker.tsx | 89 +++++++++++++++++++ .../dashboard/dashgrid/EditorTabBody.tsx | 60 ++++++++----- .../dashboard/dashgrid/QueriesTab.tsx | 24 +++-- .../dashboard/dashgrid/VisualizationTab.tsx | 5 +- .../dashboard/dashgrid/VizTypePicker.tsx | 16 +++- public/app/features/plugins/datasource_srv.ts | 9 +- public/app/types/datasources.ts | 7 ++ public/app/types/index.ts | 3 +- public/sass/components/_tabs.scss | 1 + public/sass/components/_viz_editor.scss | 52 +++++++++-- 10 files changed, 214 insertions(+), 52 deletions(-) create mode 100644 public/app/features/dashboard/dashgrid/DataSourcePicker.tsx diff --git a/public/app/features/dashboard/dashgrid/DataSourcePicker.tsx b/public/app/features/dashboard/dashgrid/DataSourcePicker.tsx new file mode 100644 index 00000000000..d8fb1b9d48e --- /dev/null +++ b/public/app/features/dashboard/dashgrid/DataSourcePicker.tsx @@ -0,0 +1,89 @@ +import React, { PureComponent } from 'react'; +import classNames from 'classnames'; +import _ from 'lodash'; + +import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; +import { DataSourceSelectItem } from 'app/types'; + +interface Props {} + +interface State { + datasources: DataSourceSelectItem[]; + searchQuery: string; +} + +export class DataSourcePicker extends PureComponent { + searchInput: HTMLElement; + + constructor(props) { + super(props); + + this.state = { + datasources: getDatasourceSrv().getMetricSources(), + searchQuery: '', + }; + } + + getDataSources() { + const { datasources, searchQuery } = this.state; + const regex = new RegExp(searchQuery, 'i'); + + const filtered = datasources.filter(item => { + return regex.test(item.name) || regex.test(item.meta.name); + }); + + return _.sortBy(filtered, 'sort'); + } + + renderDataSource = (ds: DataSourceSelectItem, index) => { + const cssClass = classNames({ + 'ds-picker-list__item': true, + }); + + return ( +
    + +
    {ds.name}
    +
    + ); + }; + + componentDidMount() { + setTimeout(() => { + this.searchInput.focus(); + }, 300); + } + + renderFilters() { + return ( + <> + +
    + + +
    + + ); + } + + render() { + return ( + <> +
    +
    Select data source
    + {this.renderFilters()} +
    +
    +
    {this.getDataSources().map(this.renderDataSource)}
    + + ); + } +} diff --git a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx index 2460514eda1..f7ba511f086 100644 --- a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx +++ b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx @@ -3,15 +3,15 @@ import CustomScrollbar from 'app/core/components/CustomScrollbar/CustomScrollbar import { FadeIn } from 'app/core/components/Animations/FadeIn'; interface Props { - selectedText?: string; - selectedImage?: string; children: JSX.Element; + main: EditorToolBarView; toolbarItems: EditorToolBarView[]; } export interface EditorToolBarView { title: string; - imgSrc: string; + imgSrc?: string; + icon?: string; render: () => JSX.Element; } @@ -32,18 +32,28 @@ export class EditorTabBody extends PureComponent { this.setState({ openView: item === this.state.openView ? null : item, }); - } + }; onCloseOpenView = () => { this.setState({ openView: null }); + }; + + renderMainSelection(view: EditorToolBarView) { + return ( +
    this.onToggleToolBarView(view)} key={view.title}> + +
    {view.title}
    + +
    + ); } - renderToolBarViewToggle(item: EditorToolBarView) { + renderButton(view: EditorToolBarView) { return ( -
    this.onToggleToolBarView(item)} key={item.title}> - -
    {item.title}
    - +
    +
    ); } @@ -60,25 +70,29 @@ export class EditorTabBody extends PureComponent { } render() { - const { children, toolbarItems} = this.props; + const { children, toolbarItems, main } = this.props; const { openView } = this.state; return ( <> -
    -
    {toolbarItems.map(item => this.renderToolBarViewToggle(item))}
    -
    -
    - -
    - - {openView && this.renderOpenView(openView)} - - {children} +
    +
    + {this.renderMainSelection(main)} +
    + {toolbarItems.map(item => this.renderButton(item))}
    - -
    +
    +
    + +
    + + {openView && this.renderOpenView(openView)} + + {children} +
    +     +
    - ); + ); } } diff --git a/public/app/features/dashboard/dashgrid/QueriesTab.tsx b/public/app/features/dashboard/dashgrid/QueriesTab.tsx index e1884992901..873924737e7 100644 --- a/public/app/features/dashboard/dashgrid/QueriesTab.tsx +++ b/public/app/features/dashboard/dashgrid/QueriesTab.tsx @@ -1,11 +1,9 @@ -// Libraries import React, { PureComponent } from 'react'; -// Services & utils import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader'; import { EditorTabBody } from './EditorTabBody'; +import { DataSourcePicker } from './DataSourcePicker'; -// Types import { PanelModel } from '../panel_model'; import { DashboardModel } from '../dashboard_model'; @@ -52,15 +50,23 @@ export class QueriesTab extends PureComponent { const currentDataSource = { title: 'ProductionDB', imgSrc: 'public/app/plugins/datasource/prometheus/img/prometheus_logo.svg', - render: () => { - return ( -

    Hello

    - ); - }, + render: () => , + }; + + const queryInspector = { + title: 'Query Inspector', + icon: 'fa fa-lightbulb-o', + render: () =>

    hello

    , + }; + + const dsHelp = { + title: 'Help', + icon: 'fa fa-question', + render: () =>

    hello

    , }; return ( - +
    (this.element = element)} style={{ width: '100%' }} /> ); diff --git a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx index 34d37c0e61b..ad20ed514af 100644 --- a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx +++ b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx @@ -15,7 +15,6 @@ interface Props { } export class VisualizationTab extends PureComponent { - constructor(props) { super(props); } @@ -37,7 +36,7 @@ export class VisualizationTab extends PureComponent { }; render() { - const {plugin, onTypeChanged} = this.props; + const { plugin, onTypeChanged } = this.props; const panelSelection = { title: plugin.name, @@ -48,7 +47,7 @@ export class VisualizationTab extends PureComponent { }; return ( - + {this.renderPanelOptions()} ); diff --git a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx index 7e87670955b..bd4895514ad 100644 --- a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx +++ b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx @@ -15,6 +15,8 @@ interface State { } export class VizTypePicker extends PureComponent { + searchInput: HTMLElement; + constructor(props) { super(props); @@ -47,11 +49,22 @@ export class VizTypePicker extends PureComponent { ); }; + componentDidMount() { + setTimeout(() => { + this.searchInput.focus(); + }, 300); + } + renderFilters() { return ( <>
    @@ -63,7 +76,6 @@ export class VizTypePicker extends PureComponent { } render() { - const { current } = this.props; const { pluginList } = this.state; return ( diff --git a/public/app/features/plugins/datasource_srv.ts b/public/app/features/plugins/datasource_srv.ts index fed455472c9..d3c90c2ae43 100644 --- a/public/app/features/plugins/datasource_srv.ts +++ b/public/app/features/plugins/datasource_srv.ts @@ -1,14 +1,11 @@ -// Libraries import _ from 'lodash'; import coreModule from 'app/core/core_module'; -// Utils import config from 'app/core/config'; import { importPluginModule } from './plugin_loader'; -// Types import { DataSourceApi } from 'app/types/series'; -import { DataSource } from 'app/types'; +import { DataSource, DataSourceSelectItem } from 'app/types'; export class DatasourceSrv { datasources: { [name: string]: DataSource }; @@ -102,8 +99,8 @@ export class DatasourceSrv { return _.sortBy(es, ['name']); } - getMetricSources(options) { - const metricSources = []; + getMetricSources(options?) { + const metricSources: DataSourceSelectItem[] = []; _.each(config.datasources, (value, key) => { if (value.meta && value.meta.metrics) { diff --git a/public/app/types/datasources.ts b/public/app/types/datasources.ts index 5522f3a11ce..f247d13bf5a 100644 --- a/public/app/types/datasources.ts +++ b/public/app/types/datasources.ts @@ -22,6 +22,13 @@ export interface DataSource { testDatasource?: () => Promise; } +export interface DataSourceSelectItem { + name: string; + value: string | null; + meta: PluginMeta; + sort: string; +} + export interface DataSourcesState { dataSources: DataSource[]; searchQuery: string; diff --git a/public/app/types/index.ts b/public/app/types/index.ts index fc176fed7e2..d6a6e73f06d 100644 --- a/public/app/types/index.ts +++ b/public/app/types/index.ts @@ -7,7 +7,7 @@ import { DashboardState } from './dashboard'; import { DashboardAcl, OrgRole, PermissionLevel } from './acl'; import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys'; import { Invitee, OrgUser, User, UsersState, UserState } from './user'; -import { DataSource, DataSourcesState } from './datasources'; +import { DataSource, DataSourceSelectItem, DataSourcesState } from './datasources'; import { TimeRange, LoadingState, @@ -55,6 +55,7 @@ export { OrgRole, PermissionLevel, DataSource, + DataSourceSelectItem, PluginMeta, ApiKey, ApiKeysState, diff --git a/public/sass/components/_tabs.scss b/public/sass/components/_tabs.scss index eb3c8ce13f5..ea557b985a7 100644 --- a/public/sass/components/_tabs.scss +++ b/public/sass/components/_tabs.scss @@ -53,6 +53,7 @@ background-image: linear-gradient(to right, #ffd500 0%, #ff4400 99%, #ff4400 100%); } } + &.active--panel { background: $panel-bg !important; } diff --git a/public/sass/components/_viz_editor.scss b/public/sass/components/_viz_editor.scss index b51f6d335a3..371fcd49cb7 100644 --- a/public/sass/components/_viz_editor.scss +++ b/public/sass/components/_viz_editor.scss @@ -53,10 +53,6 @@ } } -.viz-picker__search { - flex-grow: 0; -} - .viz-picker { margin-bottom: $spacer; } @@ -64,7 +60,6 @@ .viz-picker__items { display: flex; flex-wrap: wrap; - // for scrollbar margin-bottom: 13px; } @@ -192,7 +187,7 @@ border-radius: $input-border-radius; display: flex; align-items: center; - .fa { + .fa { margin-left: 20px; display: inline-block; position: relative; @@ -247,6 +242,7 @@ background-color: $empty-list-cta-bg; border-top: 3px solid $orange; margin: 0 100px; + margin-bottom: 20px; } .editor-toolbar-view__close { @@ -254,8 +250,8 @@ padding: 4px 8px 4px 9px; border: none; position: absolute; - right: 0; - top: -2px; + right: 9px; + top: 7px; font-size: $font-size-md; &:hover { @@ -263,3 +259,43 @@ } } +.ds-picker-list { + display: flex; + flex-wrap: wrap; + margin-bottom: 13px; + flex-direction: column; +} + +.ds-picker-list__item { + background: $card-background; + box-shadow: $card-shadow; + + border-radius: 3px; + display: flex; + cursor: pointer; + margin-bottom: 3px; + padding: 5px 15px; + align-items: center; + + &:hover { + background: $card-background-hover; + } + + &--selected { + .ds-picker-list__name { + color: $text-color; + } + } +} + +.ds-picker-list__name { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + font-size: $font-size-md; + padding-left: 15px; +} + +.ds-picker-list__img { + width: 30px; +} From c54ae5d1240aee69631f1a408144aa5f245eda25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 9 Nov 2018 11:33:33 -0800 Subject: [PATCH 17/22] improve dropdown pane connetion to tab toolbar --- .../dashboard/dashgrid/DataSourcePicker.tsx | 1 - .../dashboard/dashgrid/EditorTabBody.tsx | 6 ++--- .../dashboard/dashgrid/QueriesTab.tsx | 5 ++-- .../dashboard/dashgrid/VisualizationTab.tsx | 4 ++- .../dashboard/dashgrid/VizTypePicker.tsx | 1 - public/sass/components/_viz_editor.scss | 27 ++++++++++--------- 6 files changed, 22 insertions(+), 22 deletions(-) diff --git a/public/app/features/dashboard/dashgrid/DataSourcePicker.tsx b/public/app/features/dashboard/dashgrid/DataSourcePicker.tsx index d8fb1b9d48e..c40ca753a8e 100644 --- a/public/app/features/dashboard/dashgrid/DataSourcePicker.tsx +++ b/public/app/features/dashboard/dashgrid/DataSourcePicker.tsx @@ -78,7 +78,6 @@ export class DataSourcePicker extends PureComponent { return ( <>
    -
    Select data source
    {this.renderFilters()}
    diff --git a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx index f7ba511f086..2a2ff020d23 100644 --- a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx +++ b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx @@ -51,8 +51,8 @@ export class EditorTabBody extends PureComponent { renderButton(view: EditorToolBarView) { return (
    -
    ); @@ -62,7 +62,7 @@ export class EditorTabBody extends PureComponent { return (
    {view.render()}
    diff --git a/public/app/features/dashboard/dashgrid/QueriesTab.tsx b/public/app/features/dashboard/dashgrid/QueriesTab.tsx index 873924737e7..be8ffe30666 100644 --- a/public/app/features/dashboard/dashgrid/QueriesTab.tsx +++ b/public/app/features/dashboard/dashgrid/QueriesTab.tsx @@ -55,18 +55,17 @@ export class QueriesTab extends PureComponent { const queryInspector = { title: 'Query Inspector', - icon: 'fa fa-lightbulb-o', render: () =>

    hello

    , }; const dsHelp = { - title: 'Help', + title: '', icon: 'fa fa-question', render: () =>

    hello

    , }; return ( - +
    (this.element = element)} style={{ width: '100%' }} /> ); diff --git a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx index ad20ed514af..a7eaaca0760 100644 --- a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx +++ b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx @@ -36,12 +36,14 @@ export class VisualizationTab extends PureComponent { }; render() { - const { plugin, onTypeChanged } = this.props; + const { plugin } = this.props; const panelSelection = { title: plugin.name, imgSrc: plugin.info.logos.small, render: () => { + // the needs to be scoped inside this closure + const { plugin, onTypeChanged } = this.props; return ; }, }; diff --git a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx index bd4895514ad..035ed7c5fed 100644 --- a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx +++ b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx @@ -81,7 +81,6 @@ export class VizTypePicker extends PureComponent { return ( <>
    -
    Select visualization
    {this.renderFilters()}
    diff --git a/public/sass/components/_viz_editor.scss b/public/sass/components/_viz_editor.scss index 371fcd49cb7..bd9f52047fa 100644 --- a/public/sass/components/_viz_editor.scss +++ b/public/sass/components/_viz_editor.scss @@ -85,9 +85,7 @@ } &--selected { - .viz-picker__item-name { - color: $text-color; - } + box-shadow: 0 0 12px #ff4d00; } } @@ -171,10 +169,12 @@ display: flex; align-content: center; align-items: center; - background: linear-gradient(90deg, #292a2d, black); - padding: 7px 30px 7px 20px; + background: $page-header-bg; box-shadow: 0 0 20px black; + padding: 7px 30px 7px 20px; cursor: pointer; + position: relative; + z-index: 1; } .edit-section__selected { @@ -208,14 +208,15 @@ } .panel-editor-tabs { - z-index: 1; + position: relative; + z-index: 2; box-shadow: $page-header-shadow; border-bottom: 1px solid $page-header-border-color; padding: 0 $dashboard-padding; @include clearfix(); .active.gf-tabs-link { - background: #242427; + background: $input-label-bg; } } @@ -231,6 +232,7 @@ i { font-size: 120%; } + &:hover { color: $text-color-strong; } @@ -238,11 +240,10 @@ .editor-toolbar-view { position: relative; - padding: 10px 20px; + padding: 20px 20px; background-color: $empty-list-cta-bg; - border-top: 3px solid $orange; - margin: 0 100px; - margin-bottom: 20px; + top: -45px; + margin: 0 30px 20px 0px; } .editor-toolbar-view__close { @@ -250,8 +251,8 @@ padding: 4px 8px 4px 9px; border: none; position: absolute; - right: 9px; - top: 7px; + right: 15px; + top: 20px; font-size: $font-size-md; &:hover { From f74f7b017f406bbfd6b3def44da09eb89c3afeb0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 10 Nov 2018 07:34:09 -0800 Subject: [PATCH 18/22] Minor progress on edit mode --- .../features/dashboard/dashgrid/DashboardGrid.tsx | 8 +++++++- public/app/features/dashboard/submenu/submenu.html | 2 -- public/sass/components/_navbar.scss | 11 +---------- public/sass/components/_viz_editor.scss | 14 +++++++------- 4 files changed, 15 insertions(+), 20 deletions(-) diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx index 12b4809f51a..55249a4716f 100644 --- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx @@ -8,6 +8,7 @@ import classNames from 'classnames'; import sizeMe from 'react-sizeme'; let lastGridWidth = 1200; +let ignoreNextWidthChange = false; function GridWrapper({ size, @@ -24,8 +25,12 @@ function GridWrapper({ isFullscreen, }) { const width = size.width > 0 ? size.width : lastGridWidth; + + // logic to ignore width changes (optimization) if (width !== lastGridWidth) { - if (!isFullscreen && Math.abs(width - lastGridWidth) > 8) { + if (ignoreNextWidthChange) { + ignoreNextWidthChange = false; + } else if (!isFullscreen && Math.abs(width - lastGridWidth) > 8) { onWidthChange(); lastGridWidth = width; } @@ -138,6 +143,7 @@ export class DashboardGrid extends React.Component { } onViewModeChanged(payload) { + ignoreNextWidthChange = true; this.setState({ animated: !payload.fullscreen }); } diff --git a/public/app/features/dashboard/submenu/submenu.html b/public/app/features/dashboard/submenu/submenu.html index 8d657be4471..d7cee33e6c3 100644 --- a/public/app/features/dashboard/submenu/submenu.html +++ b/public/app/features/dashboard/submenu/submenu.html @@ -23,7 +23,5 @@
    - -
    diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 9ab0a0457d4..9ed5c614301 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -40,21 +40,12 @@ } .panel-in-fullscreen { - .navbar { - // @include navbar-alt-look(); - display: none; - } - .navbar-button--add-panel, .navbar-button--star, .navbar-button--tv, .navbar-page-btn .fa-caret-down { display: none; } - - .navbar-buttons--close { - display: flex; - } } .navbar-page-btn { @@ -103,7 +94,7 @@ display: flex; align-items: center; justify-content: flex-end; - // margin-right: $spacer; + margin-right: $spacer; &--close { display: none; diff --git a/public/sass/components/_viz_editor.scss b/public/sass/components/_viz_editor.scss index bd9f52047fa..43491ef4544 100644 --- a/public/sass/components/_viz_editor.scss +++ b/public/sass/components/_viz_editor.scss @@ -28,24 +28,24 @@ } .panel-in-fullscreen { - .scroll-canvas--dashboard { - height: 100%; - } + // .scroll-canvas--dashboard { + // height: 100%; + // } .sidemenu { display: none; } - .main-view { - background: unset; - } + // .main-view { + // background: unset; + // } .dashboard-container { padding: 0; } .submenu-controls { - padding: $dashboard-padding $dashboard-padding $panel-margin $dashboard-padding; + padding: 0 $dashboard-padding $panel-margin $dashboard-padding; } .panel-editor-container__panel { From c4ad069083caa73ade4c7b09dffbb8992bc2cb61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 10 Nov 2018 17:27:25 +0100 Subject: [PATCH 19/22] refactoring & cleaning up css --- .../dashboard/dashgrid/EditorTabBody.tsx | 20 +- .../dashboard/dashgrid/VisualizationTab.tsx | 4 +- .../dashboard/dashgrid/VizTypePicker.tsx | 2 +- .../features/panel/partials/metrics_tab.html | 2 +- public/sass/_grafana.scss | 3 +- public/sass/components/_navbar.scss | 4 + .../{_viz_editor.scss => _panel_editor.scss} | 188 +++++------------- public/sass/components/_toolbar.scss | 59 ++++++ 8 files changed, 131 insertions(+), 151 deletions(-) rename public/sass/components/{_viz_editor.scss => _panel_editor.scss} (71%) create mode 100644 public/sass/components/_toolbar.scss diff --git a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx index 2a2ff020d23..530603d1ad0 100644 --- a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx +++ b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx @@ -40,9 +40,9 @@ export class EditorTabBody extends PureComponent { renderMainSelection(view: EditorToolBarView) { return ( -
    this.onToggleToolBarView(view)} key={view.title}> - -
    {view.title}
    +
    this.onToggleToolBarView(view)} key={view.title}> + +
    {view.title}
    ); @@ -60,8 +60,8 @@ export class EditorTabBody extends PureComponent { renderOpenView(view: EditorToolBarView) { return ( -
    - {view.render()} @@ -75,12 +75,10 @@ export class EditorTabBody extends PureComponent { return ( <> -
    -
    - {this.renderMainSelection(main)} -
    - {toolbarItems.map(item => this.renderButton(item))} -
    +
    + {this.renderMainSelection(main)} +
    + {toolbarItems.map(item => this.renderButton(item))}
    diff --git a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx index a7eaaca0760..1bf03bb3b23 100644 --- a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx +++ b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx @@ -1,16 +1,16 @@ import React, { PureComponent } from 'react'; -import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader'; import { EditorTabBody } from './EditorTabBody'; import { VizTypePicker } from './VizTypePicker'; import { PanelModel } from '../panel_model'; import { DashboardModel } from '../dashboard_model'; +import { PanelPlugin } from 'app/types/plugins'; interface Props { panel: PanelModel; dashboard: DashboardModel; - plugin: PluginModel; + plugin: PanelPlugin; onTypeChanged: (newType: PanelPlugin) => void; } diff --git a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx index 035ed7c5fed..4d886c86d74 100644 --- a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx +++ b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx @@ -85,7 +85,7 @@ export class VizTypePicker extends PureComponent {
    -
    {pluginList.map(this.renderVizPlugin)}
    +
    {pluginList.map(this.renderVizPlugin)}
    ); } diff --git a/public/app/features/panel/partials/metrics_tab.html b/public/app/features/panel/partials/metrics_tab.html index 42808ac10f7..815a99d6b74 100644 --- a/public/app/features/panel/partials/metrics_tab.html +++ b/public/app/features/panel/partials/metrics_tab.html @@ -1,4 +1,4 @@ -
    +
    diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index e4c7a9c59e1..55069163783 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -97,7 +97,8 @@ @import 'components/form_select_box'; @import 'components/user-picker'; @import 'components/description-picker'; -@import 'components/viz_editor'; +@import 'components/panel_editor'; +@import 'components/toolbar'; @import 'components/delete_button'; @import 'components/add_data_source.scss'; @import 'components/page_loader'; diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 9ed5c614301..dcf3b1f0aa9 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -40,6 +40,10 @@ } .panel-in-fullscreen { + .navbar { + padding-left: 15px; + } + .navbar-button--add-panel, .navbar-button--star, .navbar-button--tv, diff --git a/public/sass/components/_viz_editor.scss b/public/sass/components/_panel_editor.scss similarity index 71% rename from public/sass/components/_viz_editor.scss rename to public/sass/components/_panel_editor.scss index 43491ef4544..45b51a5d5ec 100644 --- a/public/sass/components/_viz_editor.scss +++ b/public/sass/components/_panel_editor.scss @@ -28,18 +28,10 @@ } .panel-in-fullscreen { - // .scroll-canvas--dashboard { - // height: 100%; - // } - .sidemenu { display: none; } - // .main-view { - // background: unset; - // } - .dashboard-container { padding: 0; } @@ -53,11 +45,49 @@ } } -.viz-picker { - margin-bottom: $spacer; +.panel-editor-resizer { + position: absolute; + height: 2px; + width: 100%; + top: -23px; + text-align: center; + border-bottom: 2px dashed transparent; + + &:hover { + transition: border-color 0.2s ease-in 0.4s; + transition-delay: 0.2s; + border-color: $text-color-faint; + } } -.viz-picker__items { +.panel-editor-resizer__handle { + display: inline-block; + width: 180px; + position: relative; + border-radius: 2px; + height: 10px; + cursor: grabbing; + background: $dark-4; + top: -8px; + + &:hover { + transition: background 0.2s ease-in 0.4s; + transition-delay: 0.2s; + background: $blue-dark; + .panel-editor-resizer__handle-dots { + transition: opacity 0.2s ease-in; + opacity: 0; + } + } +} + +.panel-editor-resizer__handle-dots { + border-top: 2px dashed $text-color-faint; + position: relative; + top: 4px; +} + +.viz-picker { display: flex; flex-wrap: wrap; margin-bottom: 13px; @@ -104,108 +134,6 @@ height: 55px; } -.panel-editor-resizer { - position: absolute; - height: 2px; - width: 100%; - top: -23px; - text-align: center; - border-bottom: 2px dashed transparent; - - &:hover { - transition: border-color 0.2s ease-in 0.4s; - transition-delay: 0.2s; - border-color: $text-color-faint; - } -} - -.panel-editor-resizer__handle { - display: inline-block; - width: 180px; - position: relative; - border-radius: 2px; - height: 10px; - cursor: grabbing; - background: $dark-4; - top: -8px; - - &:hover { - transition: background 0.2s ease-in 0.4s; - transition-delay: 0.2s; - background: $blue-dark; - .panel-editor-resizer__handle-dots { - transition: opacity 0.2s ease-in; - opacity: 0; - } - } -} - -.panel-editor-resizer__handle-dots { - border-top: 2px dashed $text-color-faint; - position: relative; - top: 4px; -} - -.panel-editor { - height: calc(100% - 10px); -} - -.form-option-box { - margin-bottom: 20px; -} - -.form-option-box__header { - border-bottom: 2px solid $blue-dark; - padding: 5px 0px; - font-size: $font-size-lg; - margin-bottom: 20px; -} - -.edit-section { - position: relative; -} - -.edit-section__header { - display: flex; - align-content: center; - align-items: center; - background: $page-header-bg; - box-shadow: 0 0 20px black; - padding: 7px 30px 7px 20px; - cursor: pointer; - position: relative; - z-index: 1; -} - -.edit-section__selected { - padding: $input-padding-y $input-padding-x; - font-size: $font-size-md; - line-height: $input-line-height; - color: $input-color; - background-color: $input-bg; - border: $input-border; - border-radius: $input-border-radius; - display: flex; - align-items: center; - .fa { - margin-left: 20px; - display: inline-block; - position: relative; - } -} - -.edit-section__title { - font-size: $font-size-lg; - padding-right: 20px; - width: 150px; -} - -.edit-section__selected-image { - margin-right: 10px; - display: inline-block; - width: 20px; - height: 20px; -} .panel-editor-tabs { position: relative; @@ -213,6 +141,7 @@ box-shadow: $page-header-shadow; border-bottom: 1px solid $page-header-border-color; padding: 0 $dashboard-padding; + @include clearfix(); .active.gf-tabs-link { @@ -238,28 +167,6 @@ } } -.editor-toolbar-view { - position: relative; - padding: 20px 20px; - background-color: $empty-list-cta-bg; - top: -45px; - margin: 0 30px 20px 0px; -} - -.editor-toolbar-view__close { - background: transparent; - padding: 4px 8px 4px 9px; - border: none; - position: absolute; - right: 15px; - top: 20px; - font-size: $font-size-md; - - &:hover { - color: $text-color-strong; - } -} - .ds-picker-list { display: flex; flex-wrap: wrap; @@ -300,3 +207,14 @@ .ds-picker-list__img { width: 30px; } + +.form-option-box { + margin-bottom: 20px; +} + +.form-option-box__header { + border-bottom: 2px solid $blue-dark; + padding: 5px 0px; + font-size: $font-size-lg; + margin-bottom: 20px; +} diff --git a/public/sass/components/_toolbar.scss b/public/sass/components/_toolbar.scss new file mode 100644 index 00000000000..eef650b67f0 --- /dev/null +++ b/public/sass/components/_toolbar.scss @@ -0,0 +1,59 @@ +.toolbar { + display: flex; + align-content: center; + align-items: center; + background: $page-header-bg; + box-shadow: 0 0 20px black; + padding: 7px 30px 7px 20px; + cursor: pointer; + position: relative; + z-index: 1; + flex: 0 0 auto; +} + +.toolbar__main { + padding: $input-padding-y $input-padding-x; + font-size: $font-size-md; + line-height: $input-line-height; + color: $input-color; + background-color: $input-bg; + border: $input-border; + border-radius: $input-border-radius; + display: flex; + align-items: center; + + .fa { + margin-left: 20px; + display: inline-block; + position: relative; + } +} + +.toolbar__main-image { + margin-right: 10px; + display: inline-block; + width: 20px; + height: 20px; +} + +.toolbar-subview { + position: relative; + padding: 20px 20px; + background-color: $empty-list-cta-bg; + top: -45px; + margin: 0 30px 20px 0px; +} + +.toolbar-subview__close { + background: transparent; + padding: 4px 8px 4px 9px; + border: none; + position: absolute; + right: 15px; + top: 20px; + font-size: $font-size-md; + + &:hover { + color: $text-color-strong; + } +} From 02cbb4076ecbcfe1d099d91ffc5264f93b413519 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 10 Nov 2018 17:38:12 +0100 Subject: [PATCH 20/22] disable custom webkit scrollbar styles --- public/sass/components/_scrollbar.scss | 142 ++++++++++++------------- 1 file changed, 71 insertions(+), 71 deletions(-) diff --git a/public/sass/components/_scrollbar.scss b/public/sass/components/_scrollbar.scss index 00bd5f7c94c..5dbb4518d52 100644 --- a/public/sass/components/_scrollbar.scss +++ b/public/sass/components/_scrollbar.scss @@ -106,78 +106,78 @@ opacity: 0.9; } -// Scrollbars +// // Scrollbars +// // +// +// ::-webkit-scrollbar { +// width: 8px; +// height: 8px; +// } +// +// ::-webkit-scrollbar:hover { +// height: 8px; +// } +// +// ::-webkit-scrollbar-button:start:decrement, +// ::-webkit-scrollbar-button:end:increment { +// display: none; +// } +// ::-webkit-scrollbar-button:horizontal:decrement { +// display: none; +// } +// ::-webkit-scrollbar-button:horizontal:increment { +// display: none; +// } +// ::-webkit-scrollbar-button:vertical:decrement { +// display: none; +// } +// ::-webkit-scrollbar-button:vertical:increment { +// display: none; +// } +// ::-webkit-scrollbar-button:horizontal:decrement:active { +// background-image: none; +// } +// ::-webkit-scrollbar-button:horizontal:increment:active { +// background-image: none; +// } +// ::-webkit-scrollbar-button:vertical:decrement:active { +// background-image: none; +// } +// ::-webkit-scrollbar-button:vertical:increment:active { +// background-image: none; +// } +// ::-webkit-scrollbar-track-piece { +// background-color: transparent; +// } +// +// ::-webkit-scrollbar-thumb:vertical { +// height: 50px; +// background: -webkit-gradient( +// linear, +// left top, +// right top, +// color-stop(0%, $scrollbarBackground), +// color-stop(100%, $scrollbarBackground2) +// ); +// border: 1px solid $scrollbarBorder; +// border-top: 1px solid $scrollbarBorder; +// border-left: 1px solid $scrollbarBorder; +// } +// +// ::-webkit-scrollbar-thumb:horizontal { +// width: 50px; +// background: -webkit-gradient( +// linear, +// left top, +// left bottom, +// color-stop(0%, $scrollbarBackground), +// color-stop(100%, $scrollbarBackground2) +// ); +// border: 1px solid $scrollbarBorder; +// border-top: 1px solid $scrollbarBorder; +// border-left: 1px solid $scrollbarBorder; +// } // - -::-webkit-scrollbar { - width: 8px; - height: 8px; -} - -::-webkit-scrollbar:hover { - height: 8px; -} - -::-webkit-scrollbar-button:start:decrement, -::-webkit-scrollbar-button:end:increment { - display: none; -} -::-webkit-scrollbar-button:horizontal:decrement { - display: none; -} -::-webkit-scrollbar-button:horizontal:increment { - display: none; -} -::-webkit-scrollbar-button:vertical:decrement { - display: none; -} -::-webkit-scrollbar-button:vertical:increment { - display: none; -} -::-webkit-scrollbar-button:horizontal:decrement:active { - background-image: none; -} -::-webkit-scrollbar-button:horizontal:increment:active { - background-image: none; -} -::-webkit-scrollbar-button:vertical:decrement:active { - background-image: none; -} -::-webkit-scrollbar-button:vertical:increment:active { - background-image: none; -} -::-webkit-scrollbar-track-piece { - background-color: transparent; -} - -::-webkit-scrollbar-thumb:vertical { - height: 50px; - background: -webkit-gradient( - linear, - left top, - right top, - color-stop(0%, $scrollbarBackground), - color-stop(100%, $scrollbarBackground2) - ); - border: 1px solid $scrollbarBorder; - border-top: 1px solid $scrollbarBorder; - border-left: 1px solid $scrollbarBorder; -} - -::-webkit-scrollbar-thumb:horizontal { - width: 50px; - background: -webkit-gradient( - linear, - left top, - left bottom, - color-stop(0%, $scrollbarBackground), - color-stop(100%, $scrollbarBackground2) - ); - border: 1px solid $scrollbarBorder; - border-top: 1px solid $scrollbarBorder; - border-left: 1px solid $scrollbarBorder; -} - // Baron styles .baron { From 2aef5fbc3ba2f8f3f68410a23daaa2bcdbe293cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 10 Nov 2018 12:17:40 -0800 Subject: [PATCH 21/22] minor update --- public/sass/components/_panel_editor.scss | 5 ++--- public/sass/components/_toolbar.scss | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss index 45b51a5d5ec..7a7e38a7ae5 100644 --- a/public/sass/components/_panel_editor.scss +++ b/public/sass/components/_panel_editor.scss @@ -134,7 +134,6 @@ height: 55px; } - .panel-editor-tabs { position: relative; z-index: 2; @@ -213,8 +212,8 @@ } .form-option-box__header { - border-bottom: 2px solid $blue-dark; + border-bottom: 2px solid $dark-4; padding: 5px 0px; - font-size: $font-size-lg; + font-size: $font-size-md; margin-bottom: 20px; } diff --git a/public/sass/components/_toolbar.scss b/public/sass/components/_toolbar.scss index eef650b67f0..9bbcaa3f736 100644 --- a/public/sass/components/_toolbar.scss +++ b/public/sass/components/_toolbar.scss @@ -5,7 +5,6 @@ background: $page-header-bg; box-shadow: 0 0 20px black; padding: 7px 30px 7px 20px; - cursor: pointer; position: relative; z-index: 1; flex: 0 0 auto; @@ -21,6 +20,7 @@ border-radius: $input-border-radius; display: flex; align-items: center; + cursor: pointer; .fa { margin-left: 20px; From a0620ac8f669ebe180b7f68597894eae263f7cba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 11 Nov 2018 17:46:40 +0100 Subject: [PATCH 22/22] minor style fixes & polish --- .../dashboard/dashgrid/PanelEditor.tsx | 2 +- public/app/features/panel/panel_directive.ts | 4 ++-- public/sass/_variables.dark.scss | 5 ++++ public/sass/_variables.light.scss | 5 ++++ public/sass/components/_panel_editor.scss | 23 +++++-------------- public/sass/components/_toolbar.scss | 6 ++--- 6 files changed, 22 insertions(+), 23 deletions(-) diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx index a1b976c6c66..087c69c9bf9 100644 --- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx +++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx @@ -77,7 +77,7 @@ export class PanelEditor extends PureComponent {
    diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts index 77ebf754b3a..561663d36d5 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -44,8 +44,8 @@ const panelTemplate = ` -
    diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index c72c3ba21e3..8aa01cf245d 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -267,6 +267,11 @@ $menu-dropdown-shadow: 5px 5px 20px -5px $black; // ------------------------- $tab-border-color: $dark-4; +// Toolbar +$toolbar-bg: $page-header-bg; +$toolbar-shadow: 0 0 20px black; +$toolbar-tab-bg: $gray-blue; + // Pagination // ------------------------- diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 26634bb9991..ec34c963344 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -214,6 +214,11 @@ $menu-dropdown-shadow: 5px 5px 10px -5px $gray-1; // ------------------------- $tab-border-color: $gray-5; +// Toolbar +$toolbar-bg: linear-gradient(90deg, #ffffff, #e6eef9); +$toolbar-shadow: 1px 1px 3px #c7d0d8; +$toolbar-tab-bg: $white; + // search $search-shadow: 0 5px 30px 0 $gray-4; $search-filter-box-bg: $gray-7; diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss index 7a7e38a7ae5..6d4022b6d3a 100644 --- a/public/sass/components/_panel_editor.scss +++ b/public/sass/components/_panel_editor.scss @@ -67,13 +67,13 @@ border-radius: 2px; height: 10px; cursor: grabbing; - background: $dark-4; + background: $input-label-bg; top: -8px; &:hover { transition: background 0.2s ease-in 0.4s; transition-delay: 0.2s; - background: $blue-dark; + background: linear-gradient(90deg, $orange, $red); .panel-editor-resizer__handle-dots { transition: opacity 0.2s ease-in; opacity: 0; @@ -144,26 +144,15 @@ @include clearfix(); .active.gf-tabs-link { - background: $input-label-bg; + background: $toolbar-tab-bg; } } .panel-editor-tabs__close { + padding: 5px 9px; + border-radius: $border-radius; float: right; - padding: 0; - margin: 0; - background-color: transparent; - border: none; - padding: $tabs-padding; - color: $text-color; - - i { - font-size: 120%; - } - - &:hover { - color: $text-color-strong; - } + @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl); } .ds-picker-list { diff --git a/public/sass/components/_toolbar.scss b/public/sass/components/_toolbar.scss index 9bbcaa3f736..aa1c46e0fb4 100644 --- a/public/sass/components/_toolbar.scss +++ b/public/sass/components/_toolbar.scss @@ -2,9 +2,9 @@ display: flex; align-content: center; align-items: center; - background: $page-header-bg; - box-shadow: 0 0 20px black; - padding: 7px 30px 7px 20px; + background: $toolbar-bg; + box-shadow: $toolbar-shadow; + padding: 7px 20px 7px 20px; position: relative; z-index: 1; flex: 0 0 auto;