mirror of
https://github.com/yu-i-i/overleaf-cep.git
synced 2025-07-29 23:00:08 +02:00
3c154955b2
* Use OLIconButton for buttons lacking visible text * Ensure correct ARIA attr for the Layout dropdown * Add a tooltip to Layout button * Add "Open dev tool" aria-label * Add accessible names to the rail tab items * Remove unused IconProps export GitOrigin-RevId: 185937384cf5ec87b32238111d6621ac07789fb4
44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import { useTranslation } from 'react-i18next'
|
|
import classNames from 'classnames'
|
|
import {
|
|
Dropdown,
|
|
DropdownMenu,
|
|
DropdownToggle,
|
|
} from '@/features/ui/components/bootstrap-5/dropdown-menu'
|
|
import ChangeLayoutOptions from './change-layout-options'
|
|
import MaterialIcon from '@/shared/components/material-icon'
|
|
import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
|
|
|
|
export default function ChangeLayoutButton() {
|
|
const { t } = useTranslation()
|
|
const toggleButtonClassName = classNames(
|
|
'ide-redesign-toolbar-button-subdued',
|
|
'ide-redesign-toolbar-dropdown-toggle-subdued',
|
|
'ide-redesign-toolbar-button-icon'
|
|
)
|
|
|
|
return (
|
|
<div className="ide-redesign-toolbar-button-container">
|
|
<Dropdown className="toolbar-item layout-dropdown" align="end">
|
|
<OLTooltip
|
|
id="tooltip-open-layout-options"
|
|
description={t('layout_options')}
|
|
overlayProps={{ delay: 0, placement: 'bottom' }}
|
|
>
|
|
<span>
|
|
<DropdownToggle
|
|
id="layout-dropdown-btn"
|
|
className={toggleButtonClassName}
|
|
aria-label={t('layout_options')}
|
|
>
|
|
<MaterialIcon type="space_dashboard" unfilled />
|
|
</DropdownToggle>
|
|
</span>
|
|
</OLTooltip>
|
|
<DropdownMenu>
|
|
<ChangeLayoutOptions />
|
|
</DropdownMenu>
|
|
</Dropdown>
|
|
</div>
|
|
)
|
|
}
|