SingleTopNav: Use original kiosk mode icon (#95332)

change kiosk mode icon, put profile icon back in corner
This commit is contained in:
Ashley Harrison 2024-10-24 12:24:28 +01:00 committed by GitHub
parent 762c7dc3a5
commit 5cb4be8c9b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 20 additions and 10 deletions

View File

@ -2,6 +2,7 @@ import { css } from '@emotion/css';
import { useLocation } from 'react-router-dom-v5-compat';
import { GrafanaTheme2, locationUtil, textUtil } from '@grafana/data';
import { config } from '@grafana/runtime';
import { useStyles2 } from '@grafana/ui';
export function SignInLink() {
@ -22,13 +23,19 @@ export function SignInLink() {
}
const getStyles = (theme: GrafanaTheme2) => {
const isSingleTopNav = config.featureToggles.singleTopNav;
return {
link: css({
paddingRight: theme.spacing(1),
whiteSpace: 'nowrap',
'&:hover': {
textDecoration: 'underline',
link: css(
{
paddingRight: theme.spacing(1),
whiteSpace: 'nowrap',
'&:hover': {
textDecoration: 'underline',
},
},
}),
isSingleTopNav && {
paddingLeft: theme.spacing(1),
}
),
};
};

View File

@ -78,6 +78,12 @@ export const SingleTopBar = memo(function SingleTopBar({
</Dropdown>
)}
{config.newsFeedEnabled && <NewsContainer />}
<ToolbarButton
icon="monitor"
className={styles.kioskToggle}
onClick={onToggleKioskMode}
tooltip="Enable kiosk mode"
/>
{!contextSrv.user.isSignedIn && <SignInLink />}
{profileNode && (
<Dropdown overlay={() => <TopNavBarMenu node={profileNode} />} placement="bottom-end">
@ -89,9 +95,6 @@ export const SingleTopBar = memo(function SingleTopBar({
/>
</Dropdown>
)}
<ToolbarButton className={styles.kioskToggle} onClick={onToggleKioskMode} narrow aria-label="Enable kiosk mode">
<Icon name="angle-up" size="xl" />
</ToolbarButton>
</Stack>
</div>
);
@ -128,7 +131,7 @@ const getStyles = (theme: GrafanaTheme2, menuDockedAndOpen: boolean) => ({
width: theme.spacing(3),
}),
profileButton: css({
padding: theme.spacing(0, 0.25),
padding: theme.spacing(0, 0.5),
img: {
borderRadius: theme.shape.radius.circle,
height: '24px',