Merge pull request #21013 from overleaf/td-bs5-history-document-diff-viewer

Migrate document diff viewer to Bootstrap 5

GitOrigin-RevId: 361e6398a09a5ec5c48aced02f27d9896567b539
This commit is contained in:
Tim Down 2024-10-16 11:50:32 +01:00 committed by Copybot
parent 43965828c8
commit 76f8680db0
3 changed files with 82 additions and 12 deletions

View file

@ -18,9 +18,10 @@ import {
highlightLocationsField, highlightLocationsField,
scrollToHighlight, scrollToHighlight,
} from '../../extensions/highlight-locations' } from '../../extensions/highlight-locations'
import Icon from '../../../../shared/components/icon'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { inlineBackground } from '../../../source-editor/extensions/inline-background' import { inlineBackground } from '../../../source-editor/extensions/inline-background'
import OLButton from '@/features/ui/components/ol/ol-button'
import { bsVersion } from '@/features/utils/bootstrap-5'
function extensions(themeOptions: Options): Extension[] { function extensions(themeOptions: Options): Extension[] {
return [ return [
@ -131,24 +132,24 @@ function DocumentDiffViewer({
<div className="document-diff-container"> <div className="document-diff-container">
<div ref={containerRef} className="cm-viewer-container" /> <div ref={containerRef} className="cm-viewer-container" />
{before > 0 ? ( {before > 0 ? (
<button <OLButton
className="btn btn-secondary previous-highlight-button" variant="secondary"
leadingIcon={bsVersion({ bs3: 'arrow-up', bs5: 'arrow_upward' })}
onClick={scrollToPrevious} onClick={scrollToPrevious}
className="previous-highlight-button"
> >
<Icon type="arrow-up" />
&nbsp;
{t('n_more_updates_above', { count: before })} {t('n_more_updates_above', { count: before })}
</button> </OLButton>
) : null} ) : null}
{after > 0 ? ( {after > 0 ? (
<button <OLButton
className="btn btn-secondary next-highlight-button" variant="secondary"
leadingIcon={bsVersion({ bs3: 'arrow-down', bs5: 'arrow_downward' })}
onClick={scrollToNext} onClick={scrollToNext}
className="next-highlight-button"
> >
<Icon type="arrow-down" />
&nbsp;
{t('n_more_updates_below', { count: after })} {t('n_more_updates_below', { count: after })}
</button> </OLButton>
) : null} ) : null}
</div> </div>
) )

View file

@ -7,6 +7,8 @@ import Button from '../bootstrap-5/button'
import classnames from 'classnames' import classnames from 'classnames'
import { getAriaAndDataProps } from '@/features/utils/bootstrap-5' import { getAriaAndDataProps } from '@/features/utils/bootstrap-5'
import { callFnsInSequence } from '@/utils/functions' import { callFnsInSequence } from '@/utils/functions'
import Icon from '@/shared/components/icon'
export type BS3ButtonSize = 'xsmall' | 'sm' | 'medium' | 'lg' export type BS3ButtonSize = 'xsmall' | 'sm' | 'medium' | 'lg'
export type OLButtonProps = ButtonProps & { export type OLButtonProps = ButtonProps & {
@ -49,6 +51,38 @@ export function bs3ButtonProps(props: ButtonProps) {
return bs3ButtonProps return bs3ButtonProps
} }
function BS3ButtonContent({
children,
leadingIcon,
trailingIcon,
}: {
children: React.ReactNode
leadingIcon: OLButtonProps['leadingIcon']
trailingIcon: OLButtonProps['trailingIcon']
}) {
const leadingIconComponent =
leadingIcon && typeof leadingIcon === 'string' ? (
<Icon type={leadingIcon} />
) : (
leadingIcon
)
const trailingIconComponent =
trailingIcon && typeof trailingIcon === 'string' ? (
<Icon type={trailingIcon} />
) : (
trailingIcon
)
return (
<>
{leadingIconComponent ? <>{leadingIconComponent}&nbsp;</> : null}
{children}
{trailingIconComponent ? <>&nbsp;{trailingIconComponent}</> : null}
</>
)
}
const OLButton = forwardRef<HTMLButtonElement, OLButtonProps>( const OLButton = forwardRef<HTMLButtonElement, OLButtonProps>(
({ bs3Props = {}, ...rest }, ref) => { ({ bs3Props = {}, ...rest }, ref) => {
const { className: _, ...restBs3Props } = bs3Props const { className: _, ...restBs3Props } = bs3Props
@ -78,7 +112,14 @@ const OLButton = forwardRef<HTMLButtonElement, OLButtonProps>(
{...bs3FinalProps} {...bs3FinalProps}
ref={ref as React.LegacyRef<any> | undefined} ref={ref as React.LegacyRef<any> | undefined}
> >
{bs3Props?.loading || rest.children} {bs3Props?.loading || (
<BS3ButtonContent
leadingIcon={rest.leadingIcon}
trailingIcon={rest.trailingIcon}
>
{rest.children}
</BS3ButtonContent>
)}
</BS3Button> </BS3Button>
} }
bs5={<Button {...rest} ref={ref} />} bs5={<Button {...rest} ref={ref} />}

View file

@ -365,6 +365,34 @@ history-root {
} }
} }
.document-diff-container {
height: 100%;
display: flex;
flex-direction: column;
position: relative;
.cm-viewer-container,
.cm-editor {
height: 100%;
}
.previous-highlight-button,
.next-highlight-button {
@include shadow-md;
position: absolute;
right: var(--spacing-06);
}
.previous-highlight-button {
top: var(--spacing-06);
}
.next-highlight-button {
bottom: var(--spacing-06);
}
}
.history-dropdown-icon { .history-dropdown-icon {
color: var(--content-primary); color: var(--content-primary);
} }