Change navigation layout on small screens in web UI (#34910)

This commit is contained in:
Eugen Rochko 2025-06-11 13:55:43 +02:00 committed by GitHub
parent 8cf246e4d3
commit a13b33d851
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
34 changed files with 1390 additions and 682 deletions

View file

@ -9,7 +9,8 @@ import ArrowBackIcon from '@/material-icons/400-24px/arrow_back.svg?react';
import ChevronLeftIcon from '@/material-icons/400-24px/chevron_left.svg?react';
import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
import SettingsIcon from '@/material-icons/400-24px/settings.svg?react';
import UnfoldLessIcon from '@/material-icons/400-24px/unfold_less.svg?react';
import UnfoldMoreIcon from '@/material-icons/400-24px/unfold_more.svg?react';
import type { IconProp } from 'mastodon/components/icon';
import { Icon } from 'mastodon/components/icon';
import { ButtonInTabsBar } from 'mastodon/features/ui/util/columns_context';
@ -238,7 +239,10 @@ export const ColumnHeader: React.FC<Props> = ({
onClick={handleToggleClick}
>
<i className='icon-with-badge'>
<Icon id='sliders' icon={SettingsIcon} />
<Icon
id='sliders'
icon={collapsed ? UnfoldMoreIcon : UnfoldLessIcon}
/>
{collapseIssues && <i className='icon-with-badge__issue-badge' />}
</i>
</button>

View file

@ -27,6 +27,7 @@ interface Props {
counter?: number;
href?: string;
ariaHidden?: boolean;
ariaControls?: string;
}
export const IconButton = forwardRef<HTMLButtonElement, Props>(
@ -52,6 +53,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(
overlay = false,
tabIndex = 0,
ariaHidden = false,
ariaControls,
},
buttonRef,
) => {
@ -153,6 +155,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(
aria-label={title}
aria-expanded={expanded}
aria-hidden={ariaHidden}
aria-controls={ariaControls}
title={title}
className={classes}
onClick={handleClick}

View file

@ -7,7 +7,7 @@ interface Props {
id: string;
icon: IconProp;
count: number;
issueBadge: boolean;
issueBadge?: boolean;
className: string;
}
export const IconWithBadge: React.FC<Props> = ({