From 69bdcccd108aa0dbc5979fcdd9ab79adbba20721 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 6 Apr 2020 08:22:49 +0200 Subject: [PATCH] NewPanelEdit: Minor style tweaks & fix to transparent panels (#23353) * NewPanelEdit: Minor style tweaks * Fixed ts issue * Tweaked breakpoint --- .../PanelEditor/OptionsPaneContent.tsx | 2 +- .../PanelEditor/VisualizationTab.tsx | 23 ++++++++++--------- .../dashboard/panel_editor/VizTypePicker.tsx | 3 ++- .../panel_editor/VizTypePickerPlugin.tsx | 17 ++++---------- public/app/plugins/panel/stat/StatPanel.tsx | 1 + public/sass/pages/_dashboard.scss | 4 ++-- 6 files changed, 22 insertions(+), 28 deletions(-) diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx index 3cc2d533068..b22af5991d3 100644 --- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx +++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx @@ -172,7 +172,7 @@ export const TabsBarContent: React.FC<{ return ( <> - {width < 377 ? ( + {width < 352 ? (
setSearchQuery(e.currentTarget.value)} - prefix={} - suffix={suffix} - placeholder="Filter visualisations" - autoFocus - /> + + setSearchQuery(e.currentTarget.value)} + prefix={} + suffix={suffix} + placeholder="Filter visualisations" + autoFocus + /> +
@@ -78,12 +81,11 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { flex-direction: column; flex-grow: 1; max-height: 100%; + padding: ${theme.spacing.md}; `, search: css` - padding: ${theme.spacing.sm} ${theme.spacing.md}; flex-grow: 0; flex-shrink: 1; - margin-bottom: ${theme.spacing.sm}; `, searchClear: css` color: ${theme.colors.gray60}; @@ -93,7 +95,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { flex-grow: 1; height: 100%; overflow: hidden; - padding-left: ${theme.spacing.md}; `, }; }); diff --git a/public/app/features/dashboard/panel_editor/VizTypePicker.tsx b/public/app/features/dashboard/panel_editor/VizTypePicker.tsx index 5a40f94b5bf..7c6ee977bc7 100644 --- a/public/app/features/dashboard/panel_editor/VizTypePicker.tsx +++ b/public/app/features/dashboard/panel_editor/VizTypePicker.tsx @@ -68,7 +68,8 @@ export const VizTypePicker: React.FC = ({ searchQuery, onTypeChange, curr const getStyles = stylesFactory((theme: GrafanaTheme) => { return { wrapper: css` - padding-right: ${theme.spacing.md}; + // this needed here to make the box shadow not be clicked by the parent scroll container + padding-top: ${theme.spacing.md}; `, grid: css` max-width: 100%; diff --git a/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx b/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx index 8775c7830d0..29b6e65cbbc 100644 --- a/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx +++ b/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { GrafanaTheme, PanelPluginMeta } from '@grafana/data'; import { stylesFactory, useTheme } from '@grafana/ui'; import { css, cx } from 'emotion'; -import tinycolor from 'tinycolor2'; interface Props { isCurrent: boolean; @@ -29,10 +28,11 @@ const VizTypePickerPlugin: React.FC = ({ isCurrent, plugin, onClick, disa }; const getStyles = stylesFactory((theme: GrafanaTheme) => { - const itemBorder = `1px solid ${theme.isLight ? theme.colors.gray3 : theme.colors.dark10}`; + const itemBorder = `1px solid ${theme.isLight ? theme.colors.gray85 : theme.colors.gray25}`; + return { item: css` - background: ${theme.isLight ? theme.colors.white : theme.colors.gray05}; + background: ${theme.isLight ? theme.colors.gray98 : theme.colors.gray15}; border: ${itemBorder}; border-radius: 3px; height: 100px; @@ -44,27 +44,18 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { cursor: pointer; display: flex; margin-right: 10px; - margin-bottom: 10px; align-items: center; justify-content: center; padding-bottom: 6px; - transition: transform 1 ease; + &:hover { box-shadow: 0 0 4px ${theme.colors.blueLight}; - background: ${theme.isLight - ? tinycolor(theme.colors.blueBase) - .lighten(45) - .toHexString() - : tinycolor(theme.colors.blueBase) - .darken(46) - .toHexString()}; border: 1px solid ${theme.colors.blueLight}; } `, current: css` box-shadow: 0 0 6px ${theme.colors.orange} !important; border: 1px solid ${theme.colors.orange} !important; - background: ${theme.isLight ? theme.colors.white : theme.colors.gray05}; `, disabled: css` opacity: 0.2; diff --git a/public/app/plugins/panel/stat/StatPanel.tsx b/public/app/plugins/panel/stat/StatPanel.tsx index 47f2da9821e..ecb6ccf2118 100644 --- a/public/app/plugins/panel/stat/StatPanel.tsx +++ b/public/app/plugins/panel/stat/StatPanel.tsx @@ -95,6 +95,7 @@ export class StatPanel extends PureComponent> { width={width} height={height} source={data} + itemSpacing={3} renderCounter={renderCounter} autoGrid={true} orientation={options.orientation} diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index d30e2299b7b..32660716c97 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -52,8 +52,8 @@ div.flot-text { width: 100%; &--transparent { - background-color: $page-bg; - border: none; + background-color: transparent; + border: 1px solid transparent; } &:hover {