From 02f8a139dbe0f3a4193d43b3876a210bdea644f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 27 Jan 2021 20:10:03 +0100 Subject: [PATCH] PanelEdit: Get rid of last remaining usage of navbar-button (#30682) --- .../src/components/Button/ToolbarButton.tsx | 3 + .../src/themes/_variables.dark.scss.tmpl.ts | 3 - .../src/themes/_variables.light.scss.tmpl.ts | 3 - .../dashboard/components/DashNav/DashNav.tsx | 4 - .../components/DashNav/DashNavButton.tsx | 60 +++--------- .../PanelEditor/OptionsPaneContent.tsx | 22 +++-- .../components/PanelEditor/PanelEditor.tsx | 13 +-- public/sass/_variables.dark.generated.scss | 3 - public/sass/_variables.light.generated.scss | 3 - public/sass/components/_navbar.scss | 91 ------------------- 10 files changed, 33 insertions(+), 172 deletions(-) diff --git a/packages/grafana-ui/src/components/Button/ToolbarButton.tsx b/packages/grafana-ui/src/components/Button/ToolbarButton.tsx index f7db756cbfe..ad1df23bee8 100644 --- a/packages/grafana-ui/src/components/Button/ToolbarButton.tsx +++ b/packages/grafana-ui/src/components/Button/ToolbarButton.tsx @@ -118,9 +118,12 @@ const getStyles = (theme: GrafanaTheme) => { line-height: ${theme.height.md - 2}px; font-weight: ${theme.typography.weight.semibold}; border: 1px solid ${theme.colors.border2}; + white-space: nowrap; + &:focus { outline: none; } + &[disabled], &:disabled { cursor: not-allowed; diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts index 6e94110e5da..d71f1ef7e4b 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -240,9 +240,6 @@ $horizontalComponentOffset: 180px; $navbarHeight: 55px; $navbarBorder: 1px solid $dark-6; -$navbarButtonBackground: $panel-bg; -$navbar-button-border: #2f2f32; - // Sidemenu // ------------------------- $side-menu-bg: $panel-bg; diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts index 38fa74b746b..ab2d11c91e8 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -234,9 +234,6 @@ $horizontalComponentOffset: 180px; $navbarHeight: 52px; $navbarBorder: 1px solid $gray-5; -$navbarButtonBackground: $panel-bg; -$navbar-button-border: $gray-4; - // Sidemenu // ------------------------- $side-menu-bg: ${theme.palette.gray15}; diff --git a/public/app/features/dashboard/components/DashNav/DashNav.tsx b/public/app/features/dashboard/components/DashNav/DashNav.tsx index 1b583aab1de..083cd91d67c 100644 --- a/public/app/features/dashboard/components/DashNav/DashNav.tsx +++ b/public/app/features/dashboard/components/DashNav/DashNav.tsx @@ -145,11 +145,9 @@ class DashNav extends PureComponent { buttons.push( @@ -162,10 +160,8 @@ class DashNav extends PureComponent { {({ showModal, hideModal }) => ( { showModal(ShareModal, { dashboard, diff --git a/public/app/features/dashboard/components/DashNav/DashNavButton.tsx b/public/app/features/dashboard/components/DashNav/DashNavButton.tsx index ae2908c3733..c1f137700f1 100644 --- a/public/app/features/dashboard/components/DashNav/DashNavButton.tsx +++ b/public/app/features/dashboard/components/DashNav/DashNavButton.tsx @@ -2,71 +2,37 @@ import React, { FunctionComponent } from 'react'; import { css } from 'emotion'; // Components -import { Tooltip, Icon, IconName, IconType, IconSize, IconButton, useTheme, stylesFactory } from '@grafana/ui'; -import { selectors } from '@grafana/e2e-selectors'; +import { IconName, IconType, IconSize, IconButton, useTheme, stylesFactory } from '@grafana/ui'; import { GrafanaTheme } from '@grafana/data'; interface Props { icon?: IconName; tooltip: string; - classSuffix?: string; onClick?: () => void; href?: string; children?: React.ReactNode; iconType?: IconType; iconSize?: IconSize; - noBorder?: boolean; } -export const DashNavButton: FunctionComponent = ({ - icon, - iconType, - iconSize, - tooltip, - classSuffix, - onClick, - href, - children, - noBorder, -}) => { +export const DashNavButton: FunctionComponent = ({ icon, iconType, iconSize, tooltip, onClick, children }) => { const theme = useTheme(); const styles = getStyles(theme); - if (noBorder) { - return ( -
- {icon && ( - - )} - {children} -
- ); - } return ( - - {onClick ? ( - - ) : ( - - {icon && } - {children} - + /> )} - + {children} + ); }; diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx index 4b11df0ec39..0121eca9f6f 100644 --- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx +++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx @@ -2,12 +2,22 @@ import React, { CSSProperties, useCallback, useState } from 'react'; import Transition from 'react-transition-group/Transition'; import { FieldConfigSource, GrafanaTheme, PanelPlugin, SelectableValue } from '@grafana/data'; import { DashboardModel, PanelModel } from '../../state'; -import { CustomScrollbar, Icon, Input, Select, stylesFactory, Tab, TabContent, TabsBar, useTheme } from '@grafana/ui'; +import { + CustomScrollbar, + Icon, + Input, + Select, + stylesFactory, + Tab, + TabContent, + TabsBar, + ToolbarButton, + useTheme, +} from '@grafana/ui'; import { OverrideFieldConfigEditor } from './OverrideFieldConfigEditor'; import { DefaultFieldConfigEditor } from './DefaultFieldConfigEditor'; import { css } from 'emotion'; import { PanelOptionsTab } from './PanelOptionsTab'; -import { DashNavButton } from 'app/features/dashboard/components/DashNav/DashNavButton'; import { usePanelLatestData } from './usePanelLatestData'; import { selectors } from '@grafana/e2e-selectors'; @@ -213,13 +223,7 @@ export const TabsBarContent: React.FC<{ )}
- +
); diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx index 052a628af71..69c5d737ae3 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx +++ b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx @@ -6,7 +6,7 @@ import { Subscription } from 'rxjs'; import { FieldConfigSource, GrafanaTheme } from '@grafana/data'; import { selectors } from '@grafana/e2e-selectors'; -import { HorizontalGroup, Icon, PageToolbar, RadioButtonGroup, stylesFactory, ToolbarButton } from '@grafana/ui'; +import { HorizontalGroup, PageToolbar, RadioButtonGroup, stylesFactory, ToolbarButton } from '@grafana/ui'; import config from 'app/core/config'; import { appEvents } from 'app/core/core'; @@ -15,7 +15,6 @@ import { calculatePanelSize } from './utils'; import { PanelEditorTabs } from './PanelEditorTabs'; import { DashNavTimeControls } from '../DashNav/DashNavTimeControls'; import { OptionsPaneContent } from './OptionsPaneContent'; -import { DashNavButton } from 'app/features/dashboard/components/DashNav/DashNavButton'; import { SubMenuItems } from 'app/features/dashboard/components/SubMenu/SubMenuItems'; import { SplitPaneWrapper } from 'app/core/components/SplitPaneWrapper/SplitPaneWrapper'; import { SaveDashboardModalProxy } from '../SaveDashboard/SaveDashboardModalProxy'; @@ -235,13 +234,9 @@ export class PanelEditorUnconnected extends PureComponent { onChangeTimeZone={updateTimeZoneForSession} /> {!uiState.isPanelOptionsVisible && ( - - Show options - + + Show options + )} diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index c6e439597df..63afd6fddf0 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -242,9 +242,6 @@ $horizontalComponentOffset: 180px; $navbarHeight: 55px; $navbarBorder: 1px solid $dark-6; -$navbarButtonBackground: $panel-bg; -$navbar-button-border: #2f2f32; - // Sidemenu // ------------------------- $side-menu-bg: $panel-bg; diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index 4efe9e30605..9eaf954beaa 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -236,9 +236,6 @@ $horizontalComponentOffset: 180px; $navbarHeight: 52px; $navbarBorder: 1px solid $gray-5; -$navbarButtonBackground: $panel-bg; -$navbar-button-border: $gray-4; - // Sidemenu // ------------------------- $side-menu-bg: #202226; diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index e1b3e86e222..f19900a21a2 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -30,94 +30,3 @@ } } } - -.navbar-button { - background-color: $panel-bg; - - display: flex; - align-items: center; - font-weight: $btn-font-weight; - padding: 0 $space-sm; - height: 32px; - // 2px less then border - line-height: 30px; - color: $text-muted; - border: 1px solid $navbar-button-border; - margin-left: $space-xs; - white-space: nowrap; - - .gicon { - font-size: 16px; - } - - .fa { - font-size: 16px; - } - - &--add-panel { - padding: 2px 10px; - - .gicon { - font-size: 22px; - } - } - - &--refresh { - padding-left: 8px; - padding-right: 8px; - } - - &--attached { - margin-left: 0; - border-radius: 0 2px 2px 0; - } - - &--settings { - .gicon { - filter: $navbar-btn-gicon-brightness; - } - - &:hover { - .gicon { - filter: brightness(0.8); - } - } - } - - &--danger { - @include buttonBackground($red-base, $red-shade); - } - - &--tight { - padding: 0px 4px; - - .fa { - font-size: 14px; - } - } - - &--primary { - @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl); - } - - &--danger { - @include buttonBackground($red-base, $red-shade); - } - - &:hover { - svg { - color: $text-color; - } - } - - &--danger { - @include buttonBackground($red-base, $red-shade); - } - - @include media-breakpoint-down(lg) { - .btn-title { - margin-left: $space-xs; - display: none; - } - } -}