IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

CustomScrollbar: Remove chevrons from scroll indicators (#77498)

Browse Source 
remove chevrons from scroll indicators
This commit is contained in:
Ashley Harrison 2023-11-02 15:21:36 +00:00 committed by GitHub
parent 9a905b6312
commit 5892a64e9f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 2 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/grafana-ui/src/components/CustomScrollbar/ScrollIndicators.tsx
View File

@ -1,11 +1,9 @@
import { css, cx } from '@emotion/css'; import { css, cx } from '@emotion/css';
import classNames from 'classnames';
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '../../themes'; import { useStyles2 } from '../../themes';
import { Icon } from '../Icon/Icon';
export const ScrollIndicators = ({ children }: React.PropsWithChildren<{}>) => { export const ScrollIndicators = ({ children }: React.PropsWithChildren<{}>) => {
const [showScrollTopIndicator, setShowTopScrollIndicator] = useState(false); const [showScrollTopIndicator, setShowTopScrollIndicator] = useState(false);
@ -39,9 +37,7 @@ export const ScrollIndicators = ({ children }: React.PropsWithChildren<{}>) => {
className={cx(styles.scrollIndicator, styles.scrollTopIndicator, { className={cx(styles.scrollIndicator, styles.scrollTopIndicator, {
[styles.scrollIndicatorVisible]: showScrollTopIndicator, [styles.scrollIndicatorVisible]: showScrollTopIndicator,
})} })}
> />
<Icon className={classNames(styles.scrollIcon, styles.scrollTopIcon)} name="angle-up" />
</div>
<div className={styles.scrollContent}> <div className={styles.scrollContent}>
<div ref={scrollTopMarker} /> <div ref={scrollTopMarker} />
{children} {children}
@ -51,9 +47,7 @@ export const ScrollIndicators = ({ children }: React.PropsWithChildren<{}>) => {
className={cx(styles.scrollIndicator, styles.scrollBottomIndicator, { className={cx(styles.scrollIndicator, styles.scrollBottomIndicator, {
[styles.scrollIndicatorVisible]: showScrollBottomIndicator, [styles.scrollIndicatorVisible]: showScrollBottomIndicator,
})} })}
> />
<Icon className={classNames(styles.scrollIcon, styles.scrollBottomIcon)} name="angle-down" />
</div>
</> </>
); );
}; };
@ -85,16 +79,5 @@ const getStyles = (theme: GrafanaTheme2) => {
scrollIndicatorVisible: css({ scrollIndicatorVisible: css({
opacity: 1, opacity: 1,
}), }),
scrollIcon: css({
left: '50%',
position: 'absolute',
transform: 'translateX(-50%)',
}),
scrollTopIcon: css({
top: 0,
}),
scrollBottomIcon: css({
bottom: 0,
}),
}; };
}; };