From 0adb00b6922dedcd761ce16134ee383bbaf1249a Mon Sep 17 00:00:00 2001 From: Kristina Date: Wed, 21 Dec 2022 07:07:05 -0600 Subject: [PATCH] Explore: Use new icons for split pane resizing (#60391) * Add icons, use them for split pane resizing * Change icons * Apply scale to child div * Use fancier logic for displaying icon * Remove color fill on icon * Change icons, remove scale * Change icons and logic --- packages/grafana-data/src/types/icon.ts | 2 ++ .../src/components/Icon/cached.json | 2 ++ .../src/components/Icon/iconBundle.ts | 32 +++++++++++-------- .../app/features/explore/ExploreToolbar.tsx | 24 ++++++++++---- public/img/icons/custom/gf-movepane-left.svg | 1 + public/img/icons/custom/gf-movepane-right.svg | 1 + 6 files changed, 42 insertions(+), 20 deletions(-) create mode 100644 public/img/icons/custom/gf-movepane-left.svg create mode 100644 public/img/icons/custom/gf-movepane-right.svg diff --git a/packages/grafana-data/src/types/icon.ts b/packages/grafana-data/src/types/icon.ts index bd04fbb0af0..07b4e796a63 100644 --- a/packages/grafana-data/src/types/icon.ts +++ b/packages/grafana-data/src/types/icon.ts @@ -104,6 +104,8 @@ export const availableIconsIndex = { 'gf-landscape': true, 'gf-layout-simple': true, 'gf-logs': true, + 'gf-movepane-left': true, + 'gf-movepane-right': true, 'gf-portrait': true, 'gf-service-account': true, 'gf-show-context': true, diff --git a/packages/grafana-ui/src/components/Icon/cached.json b/packages/grafana-ui/src/components/Icon/cached.json index 6ad63e13bf5..d0492976e71 100644 --- a/packages/grafana-ui/src/components/Icon/cached.json +++ b/packages/grafana-ui/src/components/Icon/cached.json @@ -147,6 +147,8 @@ "custom/gf-interpolation-step-after", "custom/gf-interpolation-step-before", "custom/gf-logs", + "custom/gf-movepane-left", + "custom/gf-movepane-right", "mono/favorite", "mono/grafana", "mono/heart", diff --git a/packages/grafana-ui/src/components/Icon/iconBundle.ts b/packages/grafana-ui/src/components/Icon/iconBundle.ts index 644060305fd..df9fd101d6e 100644 --- a/packages/grafana-ui/src/components/Icon/iconBundle.ts +++ b/packages/grafana-ui/src/components/Icon/iconBundle.ts @@ -155,13 +155,15 @@ import u1144 from '../../../../../public/img/icons/custom/gf-interpolation-smoot import u1145 from '../../../../../public/img/icons/custom/gf-interpolation-step-after.svg'; import u1146 from '../../../../../public/img/icons/custom/gf-interpolation-step-before.svg'; import u1147 from '../../../../../public/img/icons/custom/gf-logs.svg'; -import u1148 from '../../../../../public/img/icons/mono/favorite.svg'; -import u1149 from '../../../../../public/img/icons/mono/grafana.svg'; -import u1150 from '../../../../../public/img/icons/mono/heart.svg'; -import u1151 from '../../../../../public/img/icons/mono/heart-break.svg'; -import u1152 from '../../../../../public/img/icons/mono/panel-add.svg'; -import u1153 from '../../../../../public/img/icons/mono/library-panel.svg'; -import u1154 from '../../../../../public/img/icons/unicons/record-audio.svg'; +import u1148 from '../../../../../public/img/icons/custom/gf-movepane-left.svg'; +import u1149 from '../../../../../public/img/icons/custom/gf-movepane-right.svg'; +import u1150 from '../../../../../public/img/icons/mono/favorite.svg'; +import u1151 from '../../../../../public/img/icons/mono/grafana.svg'; +import u1152 from '../../../../../public/img/icons/mono/heart.svg'; +import u1153 from '../../../../../public/img/icons/mono/heart-break.svg'; +import u1154 from '../../../../../public/img/icons/mono/panel-add.svg'; +import u1155 from '../../../../../public/img/icons/mono/library-panel.svg'; +import u1156 from '../../../../../public/img/icons/unicons/record-audio.svg'; // do not edit this list directly // the list of icons live here: @grafana/ui/components/Icon/cached.json @@ -332,13 +334,15 @@ export function initIconCache() { cacheItem(u1145, 'custom/gf-interpolation-step-after.svg'); cacheItem(u1146, 'custom/gf-interpolation-step-before.svg'); cacheItem(u1147, 'custom/gf-logs.svg'); - cacheItem(u1148, 'mono/favorite.svg'); - cacheItem(u1149, 'mono/grafana.svg'); - cacheItem(u1150, 'mono/heart.svg'); - cacheItem(u1151, 'mono/heart-break.svg'); - cacheItem(u1152, 'mono/panel-add.svg'); - cacheItem(u1153, 'mono/library-panel.svg'); - cacheItem(u1154, 'unicons/record-audio.svg'); + cacheItem(u1148, 'custom/gf-movepane-left.svg'); + cacheItem(u1149, 'custom/gf-movepane-right.svg'); + cacheItem(u1150, 'mono/favorite.svg'); + cacheItem(u1151, 'mono/grafana.svg'); + cacheItem(u1152, 'mono/heart.svg'); + cacheItem(u1153, 'mono/heart-break.svg'); + cacheItem(u1154, 'mono/panel-add.svg'); + cacheItem(u1155, 'mono/library-panel.svg'); + cacheItem(u1156, 'unicons/record-audio.svg'); // do not edit this list directly // the list of icons live here: @grafana/ui/components/Icon/cached.json } diff --git a/public/app/features/explore/ExploreToolbar.tsx b/public/app/features/explore/ExploreToolbar.tsx index d5a1df7687d..533e06d54cc 100644 --- a/public/app/features/explore/ExploreToolbar.tsx +++ b/public/app/features/explore/ExploreToolbar.tsx @@ -1,3 +1,4 @@ +import { css } from '@emotion/css'; import React, { lazy, PureComponent, RefObject, Suspense } from 'react'; import { connect, ConnectedProps } from 'react-redux'; @@ -36,6 +37,19 @@ const AddToDashboard = lazy(() => import('./AddToDashboard').then(({ AddToDashboard }) => ({ default: AddToDashboard })) ); +const getStyles = (exploreId: ExploreId, isLargerExploreId: boolean) => { + return { + rotateIcon: css({ + '> div > svg': { + transform: + (exploreId === 'left' && isLargerExploreId) || (exploreId === 'right' && !isLargerExploreId) + ? 'rotate(180deg)' + : 'none', + }, + }), + }; +}; + interface OwnProps { exploreId: ExploreId; onChangeTime: (range: RawTimeRange, changedByScanner?: boolean) => void; @@ -136,8 +150,8 @@ class UnConnectedExploreToolbar extends PureComponent { largerExploreId, } = this.props; const showSmallTimePicker = splitted || containerWidth < 1210; - const isLargerExploreId = largerExploreId === exploreId; + const styles = getStyles(exploreId, isLargerExploreId); const showExploreToDashboard = contextSrv.hasAccess(AccessControlAction.DashboardsCreate, contextSrv.isEditor) || @@ -168,11 +182,9 @@ class UnConnectedExploreToolbar extends PureComponent { tooltip={`${isLargerExploreId ? 'Narrow' : 'Widen'} pane`} disabled={isLive} onClick={onClickResize} - icon={ - (exploreId === 'left' && isLargerExploreId) || (exploreId === 'right' && !isLargerExploreId) - ? 'angle-left' - : 'angle-right' - } + icon={isLargerExploreId ? 'gf-movepane-left' : 'gf-movepane-right'} + iconOnly={true} + className={styles.rotateIcon} /> Close diff --git a/public/img/icons/custom/gf-movepane-left.svg b/public/img/icons/custom/gf-movepane-left.svg new file mode 100644 index 00000000000..bcb0292c74f --- /dev/null +++ b/public/img/icons/custom/gf-movepane-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/icons/custom/gf-movepane-right.svg b/public/img/icons/custom/gf-movepane-right.svg new file mode 100644 index 00000000000..61c8e3adad1 --- /dev/null +++ b/public/img/icons/custom/gf-movepane-right.svg @@ -0,0 +1 @@ + \ No newline at end of file