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