From 9a2b2863fb714835f91f7ee3fbecf10bc8d1867b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 22 Nov 2018 08:46:54 +0100 Subject: [PATCH] styling progress --- .../features/dashboard/dashgrid/AlertTab.tsx | 2 +- .../dashboard/dashgrid/GeneralTab.tsx | 8 +-- .../dashboard/dashgrid/PanelEditor.tsx | 23 +++--- .../features/panel/partials/metrics_tab.html | 70 ------------------- public/sass/components/_panel_editor.scss | 41 ++++++++++- public/sass/components/_toolbar.scss | 3 + public/sass/layout/_page.scss | 6 ++ 7 files changed, 61 insertions(+), 92 deletions(-) diff --git a/public/app/features/dashboard/dashgrid/AlertTab.tsx b/public/app/features/dashboard/dashgrid/AlertTab.tsx index bf691782e92..7df7864c758 100644 --- a/public/app/features/dashboard/dashgrid/AlertTab.tsx +++ b/public/app/features/dashboard/dashgrid/AlertTab.tsx @@ -64,7 +64,7 @@ export class AlertTab extends PureComponent { render() { return ( - +
(this.element = element)} /> ); diff --git a/public/app/features/dashboard/dashgrid/GeneralTab.tsx b/public/app/features/dashboard/dashgrid/GeneralTab.tsx index f7de2d3ed30..2814b825f17 100644 --- a/public/app/features/dashboard/dashgrid/GeneralTab.tsx +++ b/public/app/features/dashboard/dashgrid/GeneralTab.tsx @@ -43,14 +43,8 @@ export class GeneralTab extends PureComponent { } render() { - const currentDataSource = { - title: 'ProductionDB', - imgSrc: 'public/app/plugins/datasource/prometheus/img/prometheus_logo.svg', - render: () =>

hello

, - }; - return ( - +
(this.element = element)} /> ); diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx index 2ea49b0553f..0d38b60fa95 100644 --- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx +++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx @@ -72,10 +72,7 @@ export class PanelEditor extends PureComponent { const { plugin } = this.props; const activeTab = store.getState().location.query.tab || 'queries'; - const tabs = [ - { id: 'queries', text: 'Queries' }, - { id: 'visualization', text: 'Visualization' }, - ]; + const tabs = [{ id: 'queries', text: 'Queries' }, { id: 'visualization', text: 'Visualization' }]; if (config.alertingEnabled && plugin.id === 'graph') { tabs.push({ @@ -86,16 +83,18 @@ export class PanelEditor extends PureComponent { return (
-
-
-
-
-
+ { + //
+ //
+ //
+ //
+ //
+ }
- {tabs.map(tab => { - return ; - })} + {tabs.map(tab => { + return ; + })}
{this.renderCurrentTab(activeTab)}
diff --git a/public/app/features/panel/partials/metrics_tab.html b/public/app/features/panel/partials/metrics_tab.html index 7899312f5c3..ecee1f76ea9 100644 --- a/public/app/features/panel/partials/metrics_tab.html +++ b/public/app/features/panel/partials/metrics_tab.html @@ -1,73 +1,3 @@ -
-
-
- - - -
- -
- -
-
- - Options - -
-
- -
-
- -
-
- -
-
-
- - - - A lower limit for the auto group by time interval. Recommended to be set to write frequency, - for example 1m if your data is written every minute. Access auto interval via variable $__interval for time range - string and $__interval_ms for numeric variable that can be used in math expressions. - -
-
- - - - If your time series store has a query cache this option can override the default - cache timeout. Specify a numeric value in seconds. - -
-
- - - - The maximum data points the query should return. For graphs this - is automatically set to one data point per pixel. - -
-
- -
-
- - - -
- - -
-
diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss index dfa496a7d27..27a3ad01bf7 100644 --- a/public/sass/components/_panel_editor.scss +++ b/public/sass/components/_panel_editor.scss @@ -33,6 +33,10 @@ display: flex; flex-direction: column; flex-grow: 1; + background: $page-bg; + margin: 0 67px; + border-left: 2px solid #ac5224; + border-radius: 3px; } .panel-editor__scroll { @@ -43,7 +47,6 @@ .panel-editor__content { padding: 40px 20px; - background: $input-label-bg; } .panel-in-fullscreen { @@ -158,11 +161,45 @@ z-index: 2; display: flex; flex-direction: column; - padding: 40px 10px 10px 10px; + position: absolute; + top: 60px; + left: 5px; + align-items: center; + + &::before { + content: ''; + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 25px; + width: 2px; + background: #8e8e8e; + } } .panel-editor-tabs__item { margin-bottom: 25px; + position: relative; + z-index: 1; + text-align: center; + + &:last-child { + margin-bottom: 0; + } +} + +.panel-editor-tabs__link { + display: inline-block; + + &.active { + position: relative; + left: 4px; + } + + img { + height: 44px; + } } .ds-picker-list { diff --git a/public/sass/components/_toolbar.scss b/public/sass/components/_toolbar.scss index d398e0eb97c..9e850968bcf 100644 --- a/public/sass/components/_toolbar.scss +++ b/public/sass/components/_toolbar.scss @@ -6,6 +6,9 @@ position: relative; z-index: 1; flex: 0 0 auto; + background: $input-label-bg; + border-bottom: 1px solid $black; + border-radius: 3px; } .toolbar__heading { diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index faa5b94d4ad..4655c73b48d 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -14,6 +14,12 @@ background: $page-gradient; } +.panel-in-fullscreen { + .main-view { + background: linear-gradient(180deg, #222426 10px, #090909 200px); + } +} + .page-container { margin-left: auto; margin-right: auto;