From 2c943d9aecff57b58b1b0fd11e2c540c06ebdfc3 Mon Sep 17 00:00:00 2001 From: ijin08 Date: Wed, 28 Nov 2018 15:51:45 +0100 Subject: [PATCH] added new icons, fixed so different icons in different themes, added animation to hover on icons, styled choose visualization and datasource for both themes, made som styling adjustments to whole panel editor --- .../dashboard/dashgrid/PanelEditor.tsx | 19 ++--- public/img/icons_dark_theme/icon_advanced.svg | 33 +++++++++ .../icons_dark_theme/icon_advanced_active.svg | 69 ++++++++++++++++++ public/img/icons_dark_theme/icon_alerting.svg | 26 +++++++ .../icons_dark_theme/icon_alerting_active.svg | 43 +++++++++++ public/img/icons_dark_theme/icon_query.svg | 25 +++++++ .../icons_dark_theme/icon_query_active.svg | 46 ++++++++++++ .../img/icons_dark_theme/icon_visualize.svg | 20 +++++ .../icon_visualize_active.svg | 38 ++++++++++ .../img/icons_light_theme/icon_advanced.svg | 33 +++++++++ .../icon_advanced_active.svg | 70 ++++++++++++++++++ .../img/icons_light_theme/icon_alerting.svg | 26 +++++++ .../icon_alerting_active.svg | 43 +++++++++++ public/img/icons_light_theme/icon_query.svg | 25 +++++++ .../icons_light_theme/icon_query_active.svg | 46 ++++++++++++ .../img/icons_light_theme/icon_visualize.svg | 22 ++++++ .../icon_visualize_active.svg | 38 ++++++++++ public/sass/_variables.dark.scss | 14 ++++ public/sass/_variables.light.scss | 17 ++++- public/sass/base/_icons.scss | 34 +++++++++ public/sass/components/_panel_editor.scss | 73 ++++++++++++++----- 21 files changed, 732 insertions(+), 28 deletions(-) create mode 100644 public/img/icons_dark_theme/icon_advanced.svg create mode 100644 public/img/icons_dark_theme/icon_advanced_active.svg create mode 100644 public/img/icons_dark_theme/icon_alerting.svg create mode 100644 public/img/icons_dark_theme/icon_alerting_active.svg create mode 100644 public/img/icons_dark_theme/icon_query.svg create mode 100644 public/img/icons_dark_theme/icon_query_active.svg create mode 100644 public/img/icons_dark_theme/icon_visualize.svg create mode 100644 public/img/icons_dark_theme/icon_visualize_active.svg create mode 100644 public/img/icons_light_theme/icon_advanced.svg create mode 100644 public/img/icons_light_theme/icon_advanced_active.svg create mode 100644 public/img/icons_light_theme/icon_alerting.svg create mode 100644 public/img/icons_light_theme/icon_alerting_active.svg create mode 100644 public/img/icons_light_theme/icon_query.svg create mode 100644 public/img/icons_light_theme/icon_query_active.svg create mode 100644 public/img/icons_light_theme/icon_visualize.svg create mode 100644 public/img/icons_light_theme/icon_visualize_active.svg diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx index 56067f67495..fbf51e1e86c 100644 --- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx +++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx @@ -15,6 +15,8 @@ import { PanelModel } from '../panel_model'; import { DashboardModel } from '../dashboard_model'; import { PanelPlugin } from 'app/types/plugins'; +import Tooltip from 'app/core/components/Tooltip/Tooltip'; + interface PanelEditorProps { panel: PanelModel; dashboard: DashboardModel; @@ -47,11 +49,11 @@ export class PanelEditor extends PureComponent { const { panel, dashboard, onTypeChanged, plugin, angularPanel } = this.props; switch (activeTab) { - case 'general': + case 'advanced': return ; case 'queries': return ; - case 'alert': + case 'alerts': return ; case 'visualization': return ( @@ -75,21 +77,18 @@ export class PanelEditor extends PureComponent { const tabs = [ { id: 'queries', text: 'Queries' }, { id: 'visualization', text: 'Visualization' }, - { id: 'general', text: 'General' }, + { id: 'advanced', text: 'Advanced' }, ]; if (config.alertingEnabled && plugin.id === 'graph') { tabs.push({ - id: 'alert', - text: 'Alert', + id: 'alerts', + text: 'Alerts', }); } return (
-
- -
{ //
//
@@ -124,7 +123,9 @@ function TabItem({ tab, activeTab, onClick }: TabItemParams) { return (
onClick(tab)}> - + + +
); diff --git a/public/img/icons_dark_theme/icon_advanced.svg b/public/img/icons_dark_theme/icon_advanced.svg new file mode 100644 index 00000000000..5fd18a86dd5 --- /dev/null +++ b/public/img/icons_dark_theme/icon_advanced.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_advanced_active.svg b/public/img/icons_dark_theme/icon_advanced_active.svg new file mode 100644 index 00000000000..80672a2595b --- /dev/null +++ b/public/img/icons_dark_theme/icon_advanced_active.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_alerting.svg b/public/img/icons_dark_theme/icon_alerting.svg new file mode 100644 index 00000000000..aa483576f2c --- /dev/null +++ b/public/img/icons_dark_theme/icon_alerting.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_alerting_active.svg b/public/img/icons_dark_theme/icon_alerting_active.svg new file mode 100644 index 00000000000..5c70638f64c --- /dev/null +++ b/public/img/icons_dark_theme/icon_alerting_active.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_query.svg b/public/img/icons_dark_theme/icon_query.svg new file mode 100644 index 00000000000..fab09779936 --- /dev/null +++ b/public/img/icons_dark_theme/icon_query.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_query_active.svg b/public/img/icons_dark_theme/icon_query_active.svg new file mode 100644 index 00000000000..ed8141b51bf --- /dev/null +++ b/public/img/icons_dark_theme/icon_query_active.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_visualize.svg b/public/img/icons_dark_theme/icon_visualize.svg new file mode 100644 index 00000000000..2941f256ae8 --- /dev/null +++ b/public/img/icons_dark_theme/icon_visualize.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_visualize_active.svg b/public/img/icons_dark_theme/icon_visualize_active.svg new file mode 100644 index 00000000000..43207ebaae4 --- /dev/null +++ b/public/img/icons_dark_theme/icon_visualize_active.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_advanced.svg b/public/img/icons_light_theme/icon_advanced.svg new file mode 100644 index 00000000000..574a958f829 --- /dev/null +++ b/public/img/icons_light_theme/icon_advanced.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_advanced_active.svg b/public/img/icons_light_theme/icon_advanced_active.svg new file mode 100644 index 00000000000..7185429fffb --- /dev/null +++ b/public/img/icons_light_theme/icon_advanced_active.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_alerting.svg b/public/img/icons_light_theme/icon_alerting.svg new file mode 100644 index 00000000000..273cf099c75 --- /dev/null +++ b/public/img/icons_light_theme/icon_alerting.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_alerting_active.svg b/public/img/icons_light_theme/icon_alerting_active.svg new file mode 100644 index 00000000000..6e6f11b5843 --- /dev/null +++ b/public/img/icons_light_theme/icon_alerting_active.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_query.svg b/public/img/icons_light_theme/icon_query.svg new file mode 100644 index 00000000000..fcb369e7da1 --- /dev/null +++ b/public/img/icons_light_theme/icon_query.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_query_active.svg b/public/img/icons_light_theme/icon_query_active.svg new file mode 100644 index 00000000000..eef8e6a9ab7 --- /dev/null +++ b/public/img/icons_light_theme/icon_query_active.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_visualize.svg b/public/img/icons_light_theme/icon_visualize.svg new file mode 100644 index 00000000000..8ddef23864d --- /dev/null +++ b/public/img/icons_light_theme/icon_visualize.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_visualize_active.svg b/public/img/icons_light_theme/icon_visualize_active.svg new file mode 100644 index 00000000000..c9a14925d97 --- /dev/null +++ b/public/img/icons_light_theme/icon_visualize_active.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 2e98bc48aae..b57be74e6d7 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -369,3 +369,17 @@ $checkbox-bg: $dark-1; $checkbox-border: 1px solid $gray-1; $checkbox-checked-bg: linear-gradient(0deg, $orange, $red); $checkbox-color: $dark-1; + +//Panel Edit +// ------------------------- +$panel-editor-shadow: 0 0 20px black; +$panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black); +$panel-editor-toolbar-view-bg: $black; +$panel-editor-viz-item-shadow: 0 0 8px $dark-5; +$panel-editor-viz-item-border: 1px solid $dark-5; +$panel-editor-viz-item-shadow-hover: 0 0 4px $blue; +$panel-editor-viz-item-border-hover: 1px solid $blue; +$panel-editor-viz-item-bg: $black; +$panel-editor-tabs-line-color: #e3e3e3; +$panel-editor-viz-item-bg-hover: darken($blue, 47%); +$panel-editor-viz-item-bg-hover-active: darken($orange, 45%); diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 806aae353c3..16cd96e3fc4 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -61,7 +61,7 @@ $critical: #ec2128; // ------------------------- $body-bg: $gray-7; -$page-bg: $gray-7; +$page-bg: $gray-6; $body-color: $gray-1; $text-color: $gray-1; $text-color-strong: $dark-2; @@ -76,6 +76,7 @@ $textShadow: none; // gradients $brand-gradient: linear-gradient(to right, rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%); $page-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); +//$page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px); $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); // Links @@ -378,3 +379,17 @@ $checkbox-bg: $gray-6; $checkbox-border: 1px solid $gray-3; $checkbox-checked-bg: linear-gradient(0deg, $yellow, $red); $checkbox-color: $gray-7; + +//Panel Edit +// ------------------------- +$panel-editor-shadow: 2px 2px 8px $gray-3; +$panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3); +$panel-editor-toolbar-view-bg: $white; +$panel-editor-viz-item-shadow: 0 0 4px $gray-3; +$panel-editor-viz-item-border: 1px solid $gray-3; +$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light; +$panel-editor-viz-item-border-hover: 1px solid $blue-light; +$panel-editor-viz-item-bg: $white; +$panel-editor-tabs-line-color: $dark-5; +$panel-editor-viz-item-bg-hover: lighten($blue, 62%); +$panel-editor-viz-item-bg-hover-active: lighten($orange, 34%); diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss index bf66d4dc68d..90bda583e95 100644 --- a/public/sass/base/_icons.scss +++ b/public/sass/base/_icons.scss @@ -211,3 +211,37 @@ min-width: 20px; padding-right: 5px; } + +.panel-editor-tabs { + .gicon-advanced-active { + background-image: url('../img/icons_#{$theme-name}_theme/icon_advanced_active.svg'); + } + + .gicon-advanced { + background-image: url('../img/icons_#{$theme-name}_theme/icon_advanced.svg'); + } + + .gicon-alerts-active { + background-image: url('../img/icons_#{$theme-name}_theme/icon_alerting_active.svg'); + } + + .gicon-alerts { + background-image: url('../img/icons_#{$theme-name}_theme/icon_alerting.svg'); + } + + .gicon-queries-active { + background-image: url('../img/icons_#{$theme-name}_theme/icon_query_active.svg'); + } + + .gicon-queries { + background-image: url('../img/icons_#{$theme-name}_theme/icon_query.svg'); + } + + .gicon-visualization-active { + background-image: url('../img/icons_#{$theme-name}_theme/icon_visualize_active.svg'); + } + + .gicon-visualization { + background-image: url('../img/icons_#{$theme-name}_theme/icon_visualize.svg'); + } +} diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss index 2f92e736a58..21338f25282 100644 --- a/public/sass/components/_panel_editor.scss +++ b/public/sass/components/_panel_editor.scss @@ -34,10 +34,10 @@ flex-direction: column; flex-grow: 1; background: $page-bg; - margin: 0 62px; - border-left: 2px solid #ac5224; + margin: 0 20px 0 84px; + border-left: 2px solid $orange; border-radius: 3px; - box-shadow: $popover-shadow; + box-shadow: $panel-editor-shadow; } .panel-editor__close { @@ -69,7 +69,7 @@ } .panel-editor__toolbar-view { - background: $black; + background: $panel-editor-toolbar-view-bg; padding: 20px; } @@ -140,10 +140,10 @@ } .viz-picker__item { - background: $panel-bg; - border: $panel-border; + background: $panel-editor-viz-item-bg; + border: $panel-editor-viz-item-border; border-radius: 3px; - height: 90px; + height: 100px; width: 150px; flex-shrink: 0; flex-direction: column; @@ -152,15 +152,30 @@ display: flex; margin-right: 10px; margin-bottom: 10px; - border: 1px solid transparent; + //border: 1px solid transparent; align-items: center; + justify-content: center; + padding-bottom: 6px; + transition: transform 1 ease; &:hover { - background: $card-background-hover; + //background: $card-background-hover; + transform: scale(1.05); + box-shadow: $panel-editor-viz-item-shadow-hover; + background: $panel-editor-viz-item-bg-hover; + border: $panel-editor-viz-item-border-hover; } &--selected { - box-shadow: 0 0 12px #ff4d00; + box-shadow: 0 0 6px $orange; + border: 1px solid $orange; + + &:hover { + transform: scale(1.05); + box-shadow: 0 0 6px $orange; + border: 1px solid $orange; + background: $panel-editor-viz-item-bg-hover-active; + } } } @@ -173,6 +188,7 @@ flex-direction: column; align-self: center; height: 23px; + font-weight: 500; } .viz-picker__item-img { @@ -185,19 +201,19 @@ display: flex; flex-direction: column; position: absolute; - top: 79px; - left: 9px; + top: 44px; + left: 20px; align-items: flex-start; &::before { content: ''; display: block; position: absolute; - top: 0; - bottom: 0; + top: 10px; + bottom: 10px; left: 21px; width: 2px; - background: #8e8e8e; + background: $panel-editor-tabs-line-color; } } @@ -219,8 +235,17 @@ position: relative; } - img { + .gicon { height: 44px; + width: 53px; + transition: transform 0.1s ease; + margin-right: 5px; + + &:hover { + filter: $panel-editor-side-menu-shadow; + transform: translate(-2px, -2px); + transform: scale(1.1); + } } } @@ -232,20 +257,28 @@ } .ds-picker-list__item { - background: $panel-bg; - border: $panel-border; + background: $panel-editor-viz-item-bg; + border: $panel-editor-viz-item-border; border-radius: 3px; display: flex; cursor: pointer; margin-bottom: 3px; padding: 5px 15px; align-items: center; + height: 44px; &:hover { background: $card-background-hover; + transform: scaleY(1.1); + box-shadow: $panel-editor-viz-item-shadow-hover; + background: $panel-editor-viz-item-bg-hover; + border: $panel-editor-viz-item-border-hover; } &--selected { + box-shadow: 0 0 6px $orange; + border: 1px solid $orange; + .ds-picker-list__name { color: $text-color; } @@ -290,3 +323,7 @@ .form-section__body { padding: 0 10px; } + +.panel-editor-tabs__item-popover { + background: $orange; +}