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

[cm6] fix toolbar overflow menu alignment (#13873)

Browse source 
GitOrigin-RevId: a70cf3fa37d49b9ed52fea4b928d52ffc2dbf136
This commit is contained in:
Domagoj Kriskovic 2023-07-18 12:37:04 +02:00 committed by Copybot
parent 05165682ba
commit 9c185d6f35
2 changed files with 25 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
services/web/frontend/js/features/source-editor/components/codemirror-toolbar.tsx
View file

@ -43,7 +43,6 @@ const Toolbar = memo(function Toolbar() {
const [overflowed, setOverflowed] = useState(false)
const [collapsed, setCollapsed] = useState(false)
const overflowBeforeRef = useRef<HTMLDivElement>(null)
const overflowedItemsRef = useRef<Set<string>>(new Set())
const languageName = state.facet(language)?.name
@ -62,30 +61,28 @@ const Toolbar = memo(function Toolbar() {
setOverflowOpen(false)
setOverflowed(true)
if (overflowBeforeRef.current) {
overflowedItemsRef.current = new Set()
overflowedItemsRef.current = new Set()
const buttonGroups = [
...element.querySelectorAll<HTMLDivElement>('[data-overflow]'),
].reverse()
const buttonGroups = [
...element.querySelectorAll<HTMLDivElement>('[data-overflow]'),
].reverse()
// restore all the overflowed items
for (const buttonGroup of buttonGroups) {
buttonGroup.classList.remove('overflow-hidden')
}
// find all the available items
for (const buttonGroup of buttonGroups) {
if (element.scrollWidth <= element.clientWidth) {
break
}
// add this item to the overflow
overflowedItemsRef.current.add(buttonGroup.dataset.overflow!)
buttonGroup.classList.add('overflow-hidden')
}
setOverflowed(overflowedItemsRef.current.size > 0)
// restore all the overflowed items
for (const buttonGroup of buttonGroups) {
buttonGroup.classList.remove('overflow-hidden')
}
// find all the available items
for (const buttonGroup of buttonGroups) {
if (element.scrollWidth <= element.clientWidth) {
break
}
// add this item to the overflow
overflowedItemsRef.current.add(buttonGroup.dataset.overflow!)
buttonGroup.classList.add('overflow-hidden')
}
setOverflowed(overflowedItemsRef.current.size > 0)
},
[setOverflowOpen]
)
@ -117,13 +114,9 @@ const Toolbar = memo(function Toolbar() {
visual={visual}
listDepth={listDepth}
/>
<div
className="ol-cm-toolbar-button-group ol-cm-toolbar-stretch"
ref={overflowBeforeRef}
>
<div className="ol-cm-toolbar-button-group ol-cm-toolbar-stretch">
<ToolbarOverflow
overflowed={overflowed}
target={overflowBeforeRef.current ?? undefined}
overflowOpen={overflowOpen}
setOverflowOpen={setOverflowOpen}
overflowRef={overflowRef}

16
services/web/frontend/js/features/source-editor/components/toolbar/overflow.tsx
View file

@ -1,4 +1,4 @@
import { FC, LegacyRef } from 'react'
import { FC, LegacyRef, useRef } from 'react'
import { Button, Overlay, Popover } from 'react-bootstrap'
import classnames from 'classnames'
import Icon from '../../../../shared/components/icon'
@ -6,18 +6,11 @@ import { useCodeMirrorViewContext } from '../codemirror-editor'
export const ToolbarOverflow: FC<{
overflowed: boolean
target?: HTMLDivElement
overflowOpen: boolean
setOverflowOpen: (open: boolean) => void
overflowRef?: LegacyRef<Popover>
}> = ({
overflowed,
target,
overflowOpen,
setOverflowOpen,
overflowRef,
children,
}) => {
}> = ({ overflowed, overflowOpen, setOverflowOpen, overflowRef, children }) => {
const buttonRef = useRef<Button>(null)
const view = useCodeMirrorViewContext()
const className = classnames(
@ -31,6 +24,7 @@ export const ToolbarOverflow: FC<{
return (
<>
<Button
ref={buttonRef}
type="button"
id="toolbar-more"
className={className}
@ -49,7 +43,7 @@ export const ToolbarOverflow: FC<{
<Overlay
show={overflowOpen}
target={target}
target={buttonRef.current ?? undefined}
placement="bottom"
container={view.dom}
containerPadding={0}