Change navigation layout on small screens in web UI (#34910)
This commit is contained in:
parent
8cf246e4d3
commit
a13b33d851
34 changed files with 1390 additions and 682 deletions
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -7,7 +7,7 @@ interface Props {
|
|||
id: string;
|
||||
icon: IconProp;
|
||||
count: number;
|
||||
issueBadge: boolean;
|
||||
issueBadge?: boolean;
|
||||
className: string;
|
||||
}
|
||||
export const IconWithBadge: React.FC<Props> = ({
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue