github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-04-22 02:18:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #22089 from overleaf/td-bs5-menu-item-reduce-height

Browse source 
Reduce the height of menu items in BS5 to 36px

GitOrigin-RevId: 0d6294f1713618bc97562c92ea877aaeac8b9698
This commit is contained in:
Tim Down 2024-11-25 14:18:12 +00:00 • committed by Copybot
parent 794f4782c4
commit ef72402df6
13 changed files with 59 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/add-label.tsx
View file

@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
import OLDropdownMenuItem from '@/features/ui/components/ol/ol-dropdown-menu-item'
import OLTagIcon from '@/features/ui/components/ol/icons/ol-tag-icon'
import AddLabelModal from '../../add-label-modal'
import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
type DownloadProps = {
projectId: string
@ -25,7 +26,7 @@ function AddLabel({
}
return (
<>
<DropdownListItem>
<OLDropdownMenuItem
onClick={handleClick}
leadingIcon={<OLTagIcon />}
@ -40,7 +41,7 @@ function AddLabel({
setShow={setShowModal}
version={version}
/>
</>
</DropdownListItem>
)
}

21
services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/compare-dropdown-item.tsx
View file

@ -2,6 +2,7 @@ import { useHistoryContext } from '../../../../context/history-context'
import { UpdateRange } from '../../../../services/types/update'
import { ReactNode } from 'react'
import OLDropdownMenuItem from '@/features/ui/components/ol/ol-dropdown-menu-item'
import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
type CompareProps = {
comparisonRange: UpdateRange
@ -32,15 +33,17 @@ function CompareDropDownItem({
}
return (
<OLDropdownMenuItem
{...props}
leadingIcon={icon}
as="button"
onClick={handleCompareVersion}
className="dropdown-item-material-icon-small"
>
{text}
</OLDropdownMenuItem>
<DropdownListItem>
<OLDropdownMenuItem
{...props}
leadingIcon={icon}
as="button"
onClick={handleCompareVersion}
className="dropdown-item-material-icon-small"
>
{text}
</OLDropdownMenuItem>
</DropdownListItem>
)
}

33
services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/download.tsx
View file

@ -3,6 +3,7 @@ import OLDropdownMenuItem from '@/features/ui/components/ol/ol-dropdown-menu-ite
import MaterialIcon from '@/shared/components/material-icon'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
import Icon from '../../../../../../shared/components/icon'
import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
type DownloadProps = {
projectId: string
@ -19,21 +20,23 @@ function Download({
const { t } = useTranslation()
return (
<OLDropdownMenuItem
href={`/project/${projectId}/version/${version}/zip`}
download={`${projectId}_v${version}.zip`}
rel="noreferrer"
onClick={closeDropdown}
leadingIcon={
<BootstrapVersionSwitcher
bs3={<Icon type="cloud-download" fw />}
bs5={<MaterialIcon type="download" />}
/>
}
{...props}
>
{t('history_download_this_version')}
</OLDropdownMenuItem>
<DropdownListItem>
<OLDropdownMenuItem
href={`/project/${projectId}/version/${version}/zip`}
download={`${projectId}_v${version}.zip`}
rel="noreferrer"
onClick={closeDropdown}
leadingIcon={
<BootstrapVersionSwitcher
bs3={<Icon type="cloud-download" fw />}
bs5={<MaterialIcon type="download" />}
/>
}
{...props}
>
{t('history_download_this_version')}
</OLDropdownMenuItem>
</DropdownListItem>
)
}

5
services/web/frontend/js/features/history/components/change-list/dropdown/menu-item/restore-project.tsx
View file

@ -9,6 +9,7 @@ import withErrorBoundary from '@/infrastructure/error-boundary'
import { RestoreProjectErrorModal } from '../../../diff-view/modals/restore-project-error-modal'
import MaterialIcon from '@/shared/components/material-icon'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
type RestoreProjectProps = {
projectId: string
@ -45,7 +46,7 @@ const RestoreProject = ({
}
return (
<>
<DropdownListItem>
<OLDropdownMenuItem
as="button"
leadingIcon={
@ -65,7 +66,7 @@ const RestoreProject = ({
isRestoring={isRestoring}
onRestore={onRestore}
/>
</>
</DropdownListItem>
)
}

9
services/web/frontend/js/features/ui/components/bootstrap-5/dropdown-list-item.tsx Normal file
View file

@ -0,0 +1,9 @@
import { ReactNode } from 'react'
export default function DropdownListItem({
children,
}: {
children: ReactNode
}) {
return <li role="none">{children}</li>
}

6
services/web/frontend/js/features/ui/components/bootstrap-5/navbar/contact-us-item.tsx
View file

@ -1,7 +1,7 @@
import { sendMB } from '@/infrastructure/event-tracking'
import { useTranslation } from 'react-i18next'
import { DropdownItem } from 'react-bootstrap-5'
import NavDropdownItem from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-item'
import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
export default function ContactUsItem({
showModal,
@ -11,7 +11,7 @@ export default function ContactUsItem({
const { t } = useTranslation()
return (
<NavDropdownItem>
<DropdownListItem>
<DropdownItem
as="button"
role="menuitem"
@ -22,6 +22,6 @@ export default function ContactUsItem({
>
{t('contact_us')}
</DropdownItem>
</NavDropdownItem>
</DropdownListItem>
)
}

6
services/web/frontend/js/features/ui/components/bootstrap-5/navbar/logged-in-items.tsx
View file

@ -4,7 +4,7 @@ import NavDropdownDivider from '@/features/ui/components/bootstrap-5/navbar/nav-
import getMeta from '@/utils/meta'
import NavDropdownMenu from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-menu'
import NavDropdownLinkItem from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-link-item'
import NavDropdownItem from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-item'
import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
import type { NavbarSessionUser } from '@/features/ui/components/types/navbar'
import NavLinkItem from '@/features/ui/components/bootstrap-5/navbar/nav-link-item'
@ -35,7 +35,7 @@ export default function LoggedInItems({
</NavDropdownLinkItem>
) : null}
<NavDropdownDivider />
<NavDropdownItem>
<DropdownListItem>
{
// The button is outside the form but still belongs to it via the
// form attribute. The reason to do this is that if the button is
@ -53,7 +53,7 @@ export default function LoggedInItems({
<form id={logOutFormId} method="POST" action="/logout">
<input type="hidden" name="_csrf" value={getMeta('ol-csrfToken')} />
</form>
</NavDropdownItem>
</DropdownListItem>
</NavDropdownMenu>
</>
)

6
services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-from-data.tsx
View file

@ -3,7 +3,7 @@ import NavDropdownDivider from '@/features/ui/components/bootstrap-5/navbar/nav-
import { sendMB } from '@/infrastructure/event-tracking'
import { isDropdownLinkItem } from '@/features/ui/components/bootstrap-5/navbar/util'
import NavDropdownLinkItem from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-link-item'
import NavDropdownItem from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-item'
import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
import NavDropdownMenu from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-menu'
import ContactUsItem from '@/features/ui/components/bootstrap-5/navbar/contact-us-item'
@ -35,9 +35,9 @@ export default function NavDropdownFromData({
)
} else {
return (
<NavDropdownItem key={index}>
<DropdownListItem key={index}>
{child.translatedText}
</NavDropdownItem>
</DropdownListItem>
)
}
})}

5
services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-item.tsx
View file

@ -1,5 +0,0 @@
import { ReactNode } from 'react'
export default function NavDropdownItem({ children }: { children: ReactNode }) {
return <li role="none">{children}</li>
}

6
services/web/frontend/js/features/ui/components/bootstrap-5/navbar/nav-dropdown-link-item.tsx
View file

@ -1,5 +1,5 @@
import { ReactNode } from 'react'
import NavDropdownItem from '@/features/ui/components/bootstrap-5/navbar/nav-dropdown-item'
import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
import { DropdownItem } from 'react-bootstrap-5'
import { DropdownItemProps } from 'react-bootstrap-5/DropdownItem'
@ -13,10 +13,10 @@ export default function NavDropdownLinkItem({
children: ReactNode
}) {
return (
<NavDropdownItem>
<DropdownListItem>
<DropdownItem href={href} role="menuitem" onClick={onClick}>
{children}
</DropdownItem>
</NavDropdownItem>
</DropdownListItem>
)
}

2
services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss
View file

@ -257,7 +257,7 @@ $dropdown-border-radius: var(--border-radius-base);
$dropdown-padding-x: var(--spacing-02);
$dropdown-padding-y: var(--spacing-02);
$dropdown-item-padding-x: var(--spacing-04);
$dropdown-item-padding-y: var(--spacing-05);
$dropdown-item-padding-y: var(--spacing-04);
$dropdown-header-color: var(--content-secondary);
// Offcanvas

2
services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss
View file

@ -55,7 +55,7 @@
display: grid;
grid-auto-flow: column;
place-content: center start;
min-height: 44px; // a minimum height of 44px to be accessible for touch screens
min-height: 36px; // a minimum height of 36px to be accessible for touch screens
position: relative;
&:active {

13
services/web/frontend/stylesheets/bootstrap-5/pages/editor/history.scss
View file

@ -380,19 +380,6 @@ history-root {
}
}
.history-version-dropdown-menu {
[role='menuitem'] {
padding: var(--spacing-05);
color: var(--content-primary);
&:hover,
&:focus {
color: var(--content-primary);
background-color: var(--bg-light-secondary);
}
}
}
.document-diff-container {
height: 100%;
display: flex;