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

Unmask the editor when changing editor theme (#12604)

Browse source 
GitOrigin-RevId: 633d12c748cfd615fa72698f886a452c5b2fd2bb
This commit is contained in:
Alf Eaton 2023-05-24 11:03:58 +01:00 committed by Copybot
parent e0d327a3e8
commit ac19140362
3 changed files with 35 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
services/web/frontend/js/features/editor-left-menu/components/editor-left-menu.tsx
View file

@ -5,9 +5,10 @@ import { useLayoutContext } from '../../../shared/context/layout-context'
import classNames from 'classnames'
import SyncMenu from './sync-menu'
import SettingsMenu from './settings-menu'
import LeftMenuMask from './left-menu-mask'
export default function EditorLeftMenu() {
const { leftMenuShown, setLeftMenuShown } = useLayoutContext()
const { leftMenuShown } = useLayoutContext()
return (
<>
@ -21,10 +22,7 @@ export default function EditorLeftMenu() {
<SettingsMenu />
<HelpMenu />
</aside>
{leftMenuShown ? (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
<div id="left-menu-mask" onClick={() => setLeftMenuShown(false)} />
) : null}
{leftMenuShown && <LeftMenuMask />}
</>
)
}

31
services/web/frontend/js/features/editor-left-menu/components/left-menu-mask.tsx Normal file
View file

@ -0,0 +1,31 @@
import { memo, useEffect, useRef, useState } from 'react'
import { useLayoutContext } from '../../../shared/context/layout-context'
import useScopeValue from '../../../shared/hooks/use-scope-value'
export default memo(function LeftMenuMask() {
const { setLeftMenuShown } = useLayoutContext()
const [editorTheme] = useScopeValue('settings.editorTheme')
const [overallTheme] = useScopeValue('settings.overallTheme')
const [original] = useState({ editorTheme, overallTheme })
const maskRef = useRef<HTMLDivElement | null>(null)
useEffect(() => {
if (maskRef.current) {
if (
editorTheme !== original.editorTheme ||
overallTheme !== original.overallTheme
) {
maskRef.current.style.opacity = '0'
}
}
}, [editorTheme, overallTheme, original])
return (
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
<div
id="left-menu-mask"
ref={maskRef}
onClick={() => setLeftMenuShown(false)}
/>
)
})

1
services/web/frontend/stylesheets/app/editor/left-menu.less
View file

@ -188,4 +188,5 @@
opacity: 0.4;
background-color: #999;
z-index: 99;
transition: opacity 0.5s;
}