Skip to content

N
nexpie-grafana-theme
Commit 5b40b267 by Torkel Ödegaard Committed by GitHub
Options

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
parent 22eb558d
Showing with 101 additions and 36 deletions
public/app/core/components/BackButton/BackButton.tsx 0 → 100644
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<HTMLButtonElement>;
export const BackButton: React.FC<Props> = props => {
const theme = useTheme();
const styles = getStyles(theme);
return (
<Tooltip content="Go back (Esc)" placement="bottom">
<button className={styles.wrapper} {...props}>
<i className="gicon gicon-arrow-left" />
</button>
</Tooltip>
);
};
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;
}
}
`,
};
});
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<Props> {
renderBackButton() {
return (
<div className="navbar-edit">
<Tooltip content="Go back (Esc)">
<button
className="navbar-edit__back-btn"
onClick={this.onClose}
aria-label={e2e.pages.Dashboard.Toolbar.selectors.backArrow}
>
<i className="fa fa-arrow-left" />
</button>
</Tooltip>
<BackButton onClick={this.onClose} aria-label={e2e.pages.Dashboard.Toolbar.selectors.backArrow} />
</div>
);
}
......
public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
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<Props> {
<div className={styles.wrapper}>
<div className={styles.toolbar}>
<div className={styles.toolbarLeft}>
<button className="navbar-edit__back-btn" onClick={this.onPanelExit}>
<Icon name="arrow-left" />
</button>
<BackButton onClick={this.onPanelExit} />
<PanelTitle value={panel.title} onChange={this.onPanelTitleChange} />
</div>
<div className={styles.toolbarLeft}>
......
public/img/icons_dark_theme/icon_arrow_left.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#d8d9da" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
public/img/icons_dark_theme/icon_arrow_left_circle.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#d8d9da" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="12 8 8 12 12 16"></polyline><line x1="16" y1="12" x2="8" y2="12"></line></svg>
public/img/icons_dark_theme/icon_remove.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#d8d9da" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
public/img/icons_light_theme/icon_arrow_left.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#52545c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
public/img/icons_light_theme/icon_arrow_left_circle.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#52545c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="12 8 8 12 12 16"></polyline><line x1="16" y1="12" x2="8" y2="12"></line></svg>
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');
......
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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment