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] 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; }