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 #22288 from overleaf/td-history-dropdown-layout-fix

Browse source 
Fix history dropdown layout issue in Bootstrap 3

GitOrigin-RevId: 85709eaa45fd496128afb95738841894c5d211dd
This commit is contained in:
Tim Down 2024-12-03 10:49:54 +00:00 • committed by Copybot
parent 63a9e99375
commit b3edd2b6c6
7 changed files with 90 additions and 106 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,7 +3,6 @@ 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
@ -26,7 +25,7 @@ function AddLabel({
}
return (
<DropdownListItem>
<>
<OLDropdownMenuItem
onClick={handleClick}
leadingIcon={<OLTagIcon />}
@ -41,7 +40,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,7 +2,6 @@ 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
@ -33,17 +32,15 @@ function CompareDropDownItem({
}
return (
<DropdownListItem>
<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>
)
}

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

@ -3,7 +3,6 @@ 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
@ -20,23 +19,21 @@ function Download({
const { t } = useTranslation()
return (
<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>
<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>
)
}

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

@ -9,7 +9,6 @@ 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
@ -46,7 +45,7 @@ const RestoreProject = ({
}
return (
<DropdownListItem>
<>
<OLDropdownMenuItem
as="button"
leadingIcon={
@ -66,7 +65,7 @@ const RestoreProject = ({
isRestoring={isRestoring}
onRestore={onRestore}
/>
</DropdownListItem>
</>
)
}

38
services/web/frontend/js/features/source-editor/components/math-preview-tooltip.tsx
View file

@ -113,27 +113,23 @@ const MathPreviewTooltip: FC<{ mathContent: HTMLDivElement }> = ({
/>
</DropdownToggle>
<DropdownMenu flip={false}>
<li>
<OLDropdownMenuItem
onClick={onHide}
description={t('temporarily_hides_the_preview')}
trailingIcon={
<span className="math-tooltip-options-keyboard-shortcut">
Esc
</span>
}
>
{t('hide')}
</OLDropdownMenuItem>
</li>
<li>
<OLDropdownMenuItem
onClick={openDisableModal}
description={t('permanently_disables_the_preview')}
>
{t('disable')}
</OLDropdownMenuItem>
</li>
<OLDropdownMenuItem
onClick={onHide}
description={t('temporarily_hides_the_preview')}
trailingIcon={
<span className="math-tooltip-options-keyboard-shortcut">
Esc
</span>
}
>
{t('hide')}
</OLDropdownMenuItem>
<OLDropdownMenuItem
onClick={openDisableModal}
description={t('permanently_disables_the_preview')}
>
{t('disable')}
</OLDropdownMenuItem>
</DropdownMenu>
</Dropdown>
}

8
services/web/frontend/js/features/ui/components/ol/ol-dropdown-menu-item.tsx
View file

@ -2,11 +2,13 @@ import { MenuItem, MenuItemProps } from 'react-bootstrap'
import { DropdownItem } from '@/features/ui/components/bootstrap-5/dropdown-menu'
import { DropdownItemProps } from '@/features/ui/components/types/dropdown-menu-props'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
import DropdownListItem from '@/features/ui/components/bootstrap-5/dropdown-list-item'
type OLDropdownMenuItemProps = DropdownItemProps & {
bs3Props?: MenuItemProps
}
// This represents a menu item. It wraps the item within an <li> element.
function OLDropdownMenuItem(props: OLDropdownMenuItemProps) {
const { bs3Props, ...rest } = props
@ -30,7 +32,11 @@ function OLDropdownMenuItem(props: OLDropdownMenuItemProps) {
return (
<BootstrapVersionSwitcher
bs3={<MenuItem {...bs3MenuItemProps} />}
bs5={<DropdownItem {...rest} />}
bs5={
<DropdownListItem>
<DropdownItem {...rest} />
</DropdownListItem>
}
/>
)
}

86
services/web/frontend/stories/ui/dropdown-menu.stories.tsx
View file

@ -141,54 +141,44 @@ export const Description = (args: Args) => {
export const Icon = (args: Args) => {
return (
<DropdownMenu show>
<li>
<OLDropdownMenuItem
disabled={args.disabled}
eventKey="1"
href="#/action-1"
leadingIcon="view_column_2"
>
Editor & PDF
</OLDropdownMenuItem>
</li>
<li>
<OLDropdownMenuItem
active
eventKey="2"
href="#/action-2"
leadingIcon="terminal"
>
Editor only
</OLDropdownMenuItem>
</li>
<li>
<OLDropdownMenuItem
eventKey="3"
href="#/action-3"
leadingIcon="picture_as_pdf"
>
PDF only
</OLDropdownMenuItem>
</li>
<li>
<OLDropdownMenuItem
eventKey="4"
href="#/action-4"
leadingIcon="select_window"
>
PDF in separate tab
</OLDropdownMenuItem>
</li>
<li>
<OLDropdownMenuItem
eventKey="5"
href="#/action-5"
leadingIcon="align_space_even"
className="dropdown-item-material-icon-small"
>
Small icon
</OLDropdownMenuItem>
</li>
<OLDropdownMenuItem
disabled={args.disabled}
eventKey="1"
href="#/action-1"
leadingIcon="view_column_2"
>
Editor & PDF
</OLDropdownMenuItem>
<OLDropdownMenuItem
active
eventKey="2"
href="#/action-2"
leadingIcon="terminal"
>
Editor only
</OLDropdownMenuItem>
<OLDropdownMenuItem
eventKey="3"
href="#/action-3"
leadingIcon="picture_as_pdf"
>
PDF only
</OLDropdownMenuItem>
<OLDropdownMenuItem
eventKey="4"
href="#/action-4"
leadingIcon="select_window"
>
PDF in separate tab
</OLDropdownMenuItem>
<OLDropdownMenuItem
eventKey="5"
href="#/action-5"
leadingIcon="align_space_even"
className="dropdown-item-material-icon-small"
>
Small icon
</OLDropdownMenuItem>
</DropdownMenu>
)
}