github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #21512 from overleaf/rd-insert-link

Browse source 
Migrate the editor command tooltips to Bootstrap 5

GitOrigin-RevId: 9e3b477608e334e6e8bc0e79710cd2b3878680e6
This commit is contained in:
Rebeka Dekany 2024-11-04 14:36:22 +01:00 committed by Copybot
parent 1c7e4ddcd2
commit caa446f933
7 changed files with 77 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
services/web/frontend/js/features/source-editor/components/command-tooltip/href-tooltip.tsx
View file

@ -14,10 +14,16 @@ import {
ShortTextArgument, ShortTextArgument,
UrlArgument, UrlArgument,
} from '../../lezer-latex/latex.terms.mjs' } from '../../lezer-latex/latex.terms.mjs'
import { Button, ControlLabel, FormControl, FormGroup } from 'react-bootstrap'
import Icon from '../../../../shared/components/icon' import Icon from '../../../../shared/components/icon'
import { EditorState } from '@codemirror/state' import { EditorState } from '@codemirror/state'
import { openURL } from '@/features/source-editor/utils/url' import { openURL } from '@/features/source-editor/utils/url'
import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
import OLFormLabel from '@/features/ui/components/ol/ol-form-label'
import OLFormControl from '@/features/ui/components/ol/ol-form-control'
import OLForm from '@/features/ui/components/ol/ol-form'
import OLButton from '@/features/ui/components/ol/ol-button'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
import MaterialIcon from '@/shared/components/material-icon'
export const HrefTooltipContent: FC = () => { export const HrefTooltipContent: FC = () => {
const state = useCodeMirrorStateContext() const state = useCodeMirrorStateContext()
@ -77,16 +83,16 @@ export const HrefTooltipContent: FC = () => {
return ( return (
<div className="ol-cm-command-tooltip-content"> <div className="ol-cm-command-tooltip-content">
<form className="ol-cm-command-tooltip-form" onSubmit={handleSubmit}> <OLForm className="ol-cm-command-tooltip-form" onSubmit={handleSubmit}>
<FormGroup controlId="link-tooltip-url-input"> <OLFormGroup controlId="link-tooltip-url-input">
<ControlLabel>URL</ControlLabel> <OLFormLabel>URL</OLFormLabel>
<FormControl <OLFormControl
type="url" type="url"
bsSize="sm" size="lg"
size={50} htmlSize={50}
placeholder="https://…" placeholder="https://…"
value={url} value={url}
inputRef={element => { ref={element => {
inputRef.current = element inputRef.current = element
}} }}
autoComplete="off" autoComplete="off"
@ -100,27 +106,31 @@ export const HrefTooltipContent: FC = () => {
}} }}
disabled={state.readOnly} disabled={state.readOnly}
/> />
</FormGroup> </OLFormGroup>
</form> </OLForm>
<Button <OLButton
variant="link"
type="button" type="button"
bsStyle="link" className="ol-cm-command-tooltip-link justify-content-start"
className="ol-cm-command-tooltip-link"
onClick={() => { onClick={() => {
// TODO: unescape content // TODO: unescape content
openURL(url) openURL(url)
}} }}
> >
<Icon type="external-link" fw /> <BootstrapVersionSwitcher
bs3={<Icon type="external-link" fw />}
bs5={<MaterialIcon type="open_in_new" />}
/>
{t('open_link')} {t('open_link')}
</Button> </OLButton>
{!state.readOnly && ( {!state.readOnly && (
<Button <OLButton
variant="link"
type="button" type="button"
bsStyle="link" className="ol-cm-command-tooltip-link justify-content-start"
className="ol-cm-command-tooltip-link"
onClick={() => { onClick={() => {
const spec = removeLink(state) const spec = removeLink(state)
if (spec) { if (spec) {
@ -129,9 +139,13 @@ export const HrefTooltipContent: FC = () => {
} }
}} }}
> >
<Icon type="chain-broken" fw /> <BootstrapVersionSwitcher
bs3={<Icon type="chain-broken" fw />}
bs5={<MaterialIcon type="link_off" />}
/>
{t('remove_link')} {t('remove_link')}
</Button> </OLButton>
)} )}
</div> </div>
) )

15
services/web/frontend/js/features/source-editor/components/command-tooltip/include-tooltip.tsx
View file

@ -1,8 +1,10 @@
import { FC } from 'react' import { FC } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Button } from 'react-bootstrap'
import Icon from '@/shared/components/icon' import Icon from '@/shared/components/icon'
import { useIncludedFile } from '@/features/source-editor/hooks/use-included-file' import { useIncludedFile } from '@/features/source-editor/hooks/use-included-file'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
import MaterialIcon from '@/shared/components/material-icon'
import OLButton from '@/features/ui/components/ol/ol-button'
export const IncludeTooltipContent: FC = () => { export const IncludeTooltipContent: FC = () => {
const { t } = useTranslation() const { t } = useTranslation()
@ -10,15 +12,18 @@ export const IncludeTooltipContent: FC = () => {
return ( return (
<div className="ol-cm-command-tooltip-content"> <div className="ol-cm-command-tooltip-content">
<Button <OLButton
variant="link"
type="button" type="button"
bsStyle="link"
className="ol-cm-command-tooltip-link" className="ol-cm-command-tooltip-link"
onClick={openIncludedFile} onClick={openIncludedFile}
> >
<Icon type="edit" fw /> <BootstrapVersionSwitcher
bs3={<Icon type="edit" fw />}
bs5={<MaterialIcon type="edit" />}
/>
{t('open_file')} {t('open_file')}
</Button> </OLButton>
</div> </div>
) )
} }

15
services/web/frontend/js/features/source-editor/components/command-tooltip/input-tooltip.tsx
View file

@ -1,8 +1,10 @@
import { FC } from 'react' import { FC } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Button } from 'react-bootstrap'
import Icon from '@/shared/components/icon' import Icon from '@/shared/components/icon'
import { useIncludedFile } from '@/features/source-editor/hooks/use-included-file' import { useIncludedFile } from '@/features/source-editor/hooks/use-included-file'
import OLButton from '@/features/ui/components/ol/ol-button'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
import MaterialIcon from '@/shared/components/material-icon'
export const InputTooltipContent: FC = () => { export const InputTooltipContent: FC = () => {
const { t } = useTranslation() const { t } = useTranslation()
@ -10,15 +12,18 @@ export const InputTooltipContent: FC = () => {
return ( return (
<div className="ol-cm-command-tooltip-content"> <div className="ol-cm-command-tooltip-content">
<Button <OLButton
variant="link"
type="button" type="button"
bsStyle="link"
className="ol-cm-command-tooltip-link" className="ol-cm-command-tooltip-link"
onClick={openIncludedFile} onClick={openIncludedFile}
> >
<Icon type="edit" fw /> <BootstrapVersionSwitcher
bs3={<Icon type="edit" fw />}
bs5={<MaterialIcon type="edit" />}
/>
{t('open_file')} {t('open_file')}
</Button> </OLButton>
</div> </div>
) )
} }

15
services/web/frontend/js/features/source-editor/components/command-tooltip/ref-tooltip.tsx
View file

@ -4,7 +4,6 @@ import {
useCodeMirrorStateContext, useCodeMirrorStateContext,
useCodeMirrorViewContext, useCodeMirrorViewContext,
} from '../codemirror-context' } from '../codemirror-context'
import { Button } from 'react-bootstrap'
import { resolveCommandNode } from '../../extensions/command-tooltip' import { resolveCommandNode } from '../../extensions/command-tooltip'
import { import {
LabelArgument, LabelArgument,
@ -21,6 +20,9 @@ import {
} from '@codemirror/state' } from '@codemirror/state'
import { EditorView } from '@codemirror/view' import { EditorView } from '@codemirror/view'
import Icon from '../../../../shared/components/icon' import Icon from '../../../../shared/components/icon'
import OLButton from '@/features/ui/components/ol/ol-button'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
import MaterialIcon from '@/shared/components/material-icon'
export const RefTooltipContent: FC = () => { export const RefTooltipContent: FC = () => {
const { t } = useTranslation() const { t } = useTranslation()
@ -29,9 +31,9 @@ export const RefTooltipContent: FC = () => {
return ( return (
<div className="ol-cm-command-tooltip-content"> <div className="ol-cm-command-tooltip-content">
<Button <OLButton
variant="link"
type="button" type="button"
bsStyle="link"
className="ol-cm-command-tooltip-link" className="ol-cm-command-tooltip-link"
onClick={() => { onClick={() => {
const target = readTarget(state) const target = readTarget(state)
@ -44,9 +46,12 @@ export const RefTooltipContent: FC = () => {
} }
}} }}
> >
<Icon type="link" fw /> <BootstrapVersionSwitcher
bs3={<Icon type="link" fw />}
bs5={<MaterialIcon type="link" />}
/>
{t('open_target')} {t('open_target')}
</Button> </OLButton>
</div> </div>
) )
} }

15
services/web/frontend/js/features/source-editor/components/command-tooltip/url-tooltip.tsx
View file

@ -1,7 +1,6 @@
import { FC } from 'react' import { FC } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { useCodeMirrorStateContext } from '../codemirror-context' import { useCodeMirrorStateContext } from '../codemirror-context'
import { Button } from 'react-bootstrap'
import { resolveCommandNode } from '../../extensions/command-tooltip' import { resolveCommandNode } from '../../extensions/command-tooltip'
import { import {
LiteralArgContent, LiteralArgContent,
@ -10,6 +9,9 @@ import {
import Icon from '../../../../shared/components/icon' import Icon from '../../../../shared/components/icon'
import { EditorState } from '@codemirror/state' import { EditorState } from '@codemirror/state'
import { openURL } from '@/features/source-editor/utils/url' import { openURL } from '@/features/source-editor/utils/url'
import OLButton from '@/features/ui/components/ol/ol-button'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
import MaterialIcon from '@/shared/components/material-icon'
export const UrlTooltipContent: FC = () => { export const UrlTooltipContent: FC = () => {
const { t } = useTranslation() const { t } = useTranslation()
@ -17,9 +19,9 @@ export const UrlTooltipContent: FC = () => {
return ( return (
<div className="ol-cm-command-tooltip-content"> <div className="ol-cm-command-tooltip-content">
<Button <OLButton
variant="link"
type="button" type="button"
bsStyle="link"
className="ol-cm-command-tooltip-link" className="ol-cm-command-tooltip-link"
onClick={() => { onClick={() => {
const url = readUrl(state) const url = readUrl(state)
@ -28,9 +30,12 @@ export const UrlTooltipContent: FC = () => {
} }
}} }}
> >
<Icon type="external-link" fw /> <BootstrapVersionSwitcher
bs3={<Icon type="external-link" fw />}
bs5={<MaterialIcon type="open_in_new" />}
/>
{t('open_link')} {t('open_link')}
</Button> </OLButton>
</div> </div>
) )
} }

15
services/web/frontend/js/features/source-editor/components/figure-modal/file-sources/figure-modal-upload-source.tsx
View file

@ -20,8 +20,8 @@ import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
import OLButton from '@/features/ui/components/ol/ol-button' import OLButton from '@/features/ui/components/ol/ol-button'
import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher' import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
import MaterialIcon from '@/shared/components/material-icon' import MaterialIcon from '@/shared/components/material-icon'
import { Spinner } from 'react-bootstrap-5'
import { isBootstrap5 } from '@/features/utils/bootstrap-5' import { isBootstrap5 } from '@/features/utils/bootstrap-5'
import OLSpinner from '@/features/ui/components/ol/ol-spinner'
/* eslint-disable no-unused-vars */ /* eslint-disable no-unused-vars */
export enum FileUploadStatus { export enum FileUploadStatus {
@ -297,18 +297,7 @@ export const FileContainer: FC<{
})} })}
> >
{status === FileUploadStatus.UPLOADING ? ( {status === FileUploadStatus.UPLOADING ? (
<BootstrapVersionSwitcher <OLSpinner size="sm" />
bs3={<Icon spin type="spinner" className="file-icon" />}
bs5={
<Spinner
animation="border"
aria-hidden="true"
as="span"
role="status"
size="sm"
/>
}
/>
) : ( ) : (
<BootstrapVersionSwitcher <BootstrapVersionSwitcher
bs3={<Icon type={icon} className="file-icon" />} bs3={<Icon type={icon} className="file-icon" />}

1
services/web/frontend/js/features/ui/components/ol/ol-form-control.tsx
View file

@ -56,6 +56,7 @@ const OLFormControl = forwardRef<HTMLInputElement, OLFormControlProps>(
onInvalid: rest.onInvalid as BS3FormControlProps['onInvalid'], onInvalid: rest.onInvalid as BS3FormControlProps['onInvalid'],
prepend: rest.prepend, prepend: rest.prepend,
append: rest.append, append: rest.append,
size: rest.htmlSize,
'main-field': rest['main-field'], 'main-field': rest['main-field'],
...bs3Props, ...bs3Props,
} }