From 5b40b267446ca7d14da0b3292d9e2d1a79a70d3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 22 Feb 2020 22:13:56 +0100 Subject: [PATCH] UX: BackButton left arrow icon (#22369) * Adding new svg for back arrow button * Created new back button component * same stroke width * minor fix * Style changes * hover animation * Minor tweak --- .../core/components/BackButton/BackButton.tsx | 79 +++++++++++++++++++ .../dashboard/components/DashNav/DashNav.tsx | 12 +-- .../components/PanelEditor/PanelEditor.tsx | 7 +- .../img/icons_dark_theme/icon_arrow_left.svg | 1 + .../icon_arrow_left_circle.svg | 1 + public/img/icons_dark_theme/icon_remove.svg | 1 + .../img/icons_light_theme/icon_arrow_left.svg | 1 + .../icon_arrow_left_circle.svg | 1 + public/sass/base/_icons.scss | 12 +++ public/sass/components/_navbar.scss | 22 ------ 10 files changed, 101 insertions(+), 36 deletions(-) create mode 100644 public/app/core/components/BackButton/BackButton.tsx create mode 100644 public/img/icons_dark_theme/icon_arrow_left.svg create mode 100644 public/img/icons_dark_theme/icon_arrow_left_circle.svg create mode 100644 public/img/icons_dark_theme/icon_remove.svg create mode 100644 public/img/icons_light_theme/icon_arrow_left.svg create mode 100644 public/img/icons_light_theme/icon_arrow_left_circle.svg diff --git a/public/app/core/components/BackButton/BackButton.tsx b/public/app/core/components/BackButton/BackButton.tsx new file mode 100644 index 00000000000..31e44bab426 --- /dev/null +++ b/public/app/core/components/BackButton/BackButton.tsx @@ -0,0 +1,79 @@ +import React, { ButtonHTMLAttributes } from 'react'; +import { css } from 'emotion'; +import { GrafanaTheme } from '@grafana/data'; +import { stylesFactory, useTheme, Tooltip, selectThemeVariant } from '@grafana/ui'; + +export type Props = ButtonHTMLAttributes; + +export const BackButton: React.FC = props => { + const theme = useTheme(); + const styles = getStyles(theme); + + return ( + + + + ); +}; + +BackButton.displayName = 'BackButton'; + +const getStyles = stylesFactory((theme: GrafanaTheme) => { + const hoverColor = selectThemeVariant({ dark: theme.colors.gray25, light: theme.colors.gray85 }, theme.type); + + return { + wrapper: css` + background: transparent; + border: none; + padding: 0; + margin: 0; + outline: none; + box-shadow: none; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + &:before { + content: ''; + display: block; + opacity: 1; + position: absolute; + transition-duration: 0.2s; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + z-index: -1; + bottom: -10px; + left: -10px; + right: -10px; + top: -10px; + background: none; + border-radius: 50%; + box-sizing: border-box; + transform: scale(0); + transition-property: transform, opacity; + } + + .gicon { + opacity: 0.9; + font-size: 26px; + } + + &:hover { + &:before { + background-color: ${hoverColor}; + border: none; + box-shadow: none; + opacity: 1; + transform: scale(0.8); + } + + .gicon { + opacity: 1; + transition: opacity 0.2s ease-in-out; + } + } + `, + }; +}); diff --git a/public/app/features/dashboard/components/DashNav/DashNav.tsx b/public/app/features/dashboard/components/DashNav/DashNav.tsx index cd7f857fe28..ea5bef3ac59 100644 --- a/public/app/features/dashboard/components/DashNav/DashNav.tsx +++ b/public/app/features/dashboard/components/DashNav/DashNav.tsx @@ -8,7 +8,7 @@ import { PlaylistSrv } from 'app/features/playlist/playlist_srv'; // Components import { DashNavButton } from './DashNavButton'; import { DashNavTimeControls } from './DashNavTimeControls'; -import { Tooltip } from '@grafana/ui'; +import { BackButton } from 'app/core/components/BackButton/BackButton'; // State import { updateLocation } from 'app/core/actions'; // Types @@ -156,15 +156,7 @@ export class DashNav extends PureComponent { renderBackButton() { return (
- - - +
); } diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx index 0d9fbc1a559..14d3a0b7e7b 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx +++ b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx @@ -1,6 +1,6 @@ import React, { PureComponent } from 'react'; import { FieldConfigSource, GrafanaTheme, PanelData, PanelPlugin, SelectableValue } from '@grafana/data'; -import { CustomScrollbar, Forms, Icon, selectThemeVariant, stylesFactory } from '@grafana/ui'; +import { CustomScrollbar, Forms, selectThemeVariant, stylesFactory } from '@grafana/ui'; import { css, cx } from 'emotion'; import config from 'app/core/config'; import AutoSizer from 'react-virtualized-auto-sizer'; @@ -18,6 +18,7 @@ import { PanelTitle } from './PanelTitle'; import { DisplayMode, displayModes, PanelEditorTab } from './types'; import { PanelEditorTabs } from './PanelEditorTabs'; import { DashNavTimeControls } from '../DashNav/DashNavTimeControls'; +import { BackButton } from 'app/core/components/BackButton/BackButton'; import { LocationState } from 'app/types'; import { calculatePanelSize } from './utils'; import { initPanelEditor, panelEditorCleanUp, updatePanelEditorUIState } from './state/actions'; @@ -231,9 +232,7 @@ export class PanelEditorUnconnected extends PureComponent {
- +
diff --git a/public/img/icons_dark_theme/icon_arrow_left.svg b/public/img/icons_dark_theme/icon_arrow_left.svg new file mode 100644 index 00000000000..e7f6749c94f --- /dev/null +++ b/public/img/icons_dark_theme/icon_arrow_left.svg @@ -0,0 +1 @@ + diff --git a/public/img/icons_dark_theme/icon_arrow_left_circle.svg b/public/img/icons_dark_theme/icon_arrow_left_circle.svg new file mode 100644 index 00000000000..4b2019cdf8c --- /dev/null +++ b/public/img/icons_dark_theme/icon_arrow_left_circle.svg @@ -0,0 +1 @@ + diff --git a/public/img/icons_dark_theme/icon_remove.svg b/public/img/icons_dark_theme/icon_remove.svg new file mode 100644 index 00000000000..f6010b3b1bf --- /dev/null +++ b/public/img/icons_dark_theme/icon_remove.svg @@ -0,0 +1 @@ + diff --git a/public/img/icons_light_theme/icon_arrow_left.svg b/public/img/icons_light_theme/icon_arrow_left.svg new file mode 100644 index 00000000000..4431c07030d --- /dev/null +++ b/public/img/icons_light_theme/icon_arrow_left.svg @@ -0,0 +1 @@ + diff --git a/public/img/icons_light_theme/icon_arrow_left_circle.svg b/public/img/icons_light_theme/icon_arrow_left_circle.svg new file mode 100644 index 00000000000..8476db2d6de --- /dev/null +++ b/public/img/icons_light_theme/icon_arrow_left_circle.svg @@ -0,0 +1 @@ + diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss index f99821efa14..24c95fd72ae 100644 --- a/public/sass/base/_icons.scss +++ b/public/sass/base/_icons.scss @@ -66,6 +66,18 @@ background-image: url('../img/icons_#{$theme-name}_theme/icon_alert.svg'); } +.gicon-remove { + background-image: url('../img/icons_#{$theme-name}_theme/icon_remove.svg'); +} + +.gicon-arrow-left { + background-image: url('../img/icons_#{$theme-name}_theme/icon_arrow_left.svg'); +} + +.gicon-arrow-left-circle { + background-image: url('../img/icons_#{$theme-name}_theme/icon_arrow_left_circle.svg'); +} + //not used .gicon-alert-alt { background-image: url('../img/icons_#{$theme-name}_theme/icon_alert_alt.svg'); diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 83f3dba4c93..a2485f430b2 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -207,28 +207,6 @@ i.navbar-page-btn__search { padding-right: 13px; } -.navbar-edit__back-btn { - background: transparent; - border: 2px solid $text-color; - border-radius: 50%; - width: 34px; - height: 34px; - transition: transform 0.1s ease 0.1s; - color: $text-color; - - i { - font-size: $font-size-lg; - position: relative; - top: 1px; - right: 1px; - } - - &:hover { - color: $text-color-strong; - border-color: $text-color-strong; - } -} - .navbar-settings-title { display: block; margin: 0;