github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-01-26 16:24:11 +00:00
Code Issues Projects Releases Packages Wiki Activity

Switch layouts using custom divider toggle (#7995)

Browse source 
GitOrigin-RevId: 15e517f448165a25df616fd956967202491b15cc
This commit is contained in:
Alf Eaton 2022-05-20 09:15:14 +01:00 committed by Copybot
parent 77ac1514fd
commit 1f24160005
4 changed files with 36 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
services/web/app/views/project/editor/editor.pug
View file

@ -1,7 +1,7 @@
div.full-size(
ng-show="ui.view == 'editor' || ui.view === 'file'"
layout="pdf"
layout-disabled="ui.pdfLayout != 'sideBySide'"
open-east="ui.pdfOpen"
mask-iframes-on-resize="true"
resize-on="layout:main:resize"
resize-proportionally="true"

4
services/web/frontend/js/features/editor-navigation-toolbar/components/layout-dropdown-button.js
View file

@ -10,6 +10,7 @@ import IconEditorOnly from './icon-editor-only'
import IconPdfOnly from './icon-pdf-only'
import { useLayoutContext } from '../../../shared/context/layout-context'
import * as eventTracking from '../../../infrastructure/event-tracking'
import useEventListener from '../../../shared/hooks/use-event-listener'
function IconPlaceholder() {
return <Icon type="" fw />
@ -95,6 +96,9 @@ function LayoutDropdownButton() {
eventTracking.sendMB('project-layout-reattach')
}, [detachRole, reattach])
// reattach when the PDF pane opens
useEventListener('ui:pdf-open', handleReattach)
const handleChangeLayout = useCallback(
(newLayout, newView) => {
handleReattach()

15
services/web/frontend/js/ide.js
View file

@ -332,6 +332,21 @@ If the project has been renamed please look in your project list for a new proje
$scope.switchToSideBySideLayout()
}
// Update ui.pdfOpen when the layout changes.
// The east pane should open when the layout changes from "Editor only" or "PDF only" to "Editor & PDF".
$scope.$watch('ui.pdfLayout', value => {
$scope.ui.pdfOpen = value === 'sideBySide'
})
// Update ui.pdfLayout when the east pane is toggled.
// The layout should be set to "Editor & PDF" (sideBySide) when the east pane is opened, and "Editor only" (flat) when the east pane is closed.
$scope.$watch('ui.pdfOpen', value => {
$scope.ui.pdfLayout = value ? 'sideBySide' : 'flat'
if (value) {
window.dispatchEvent(new CustomEvent('ui:pdf-open'))
}
})
// note: { keyShortcut: true } exists only for tracking purposes.
$scope.recompileViaKey = () => {
if ($scope.recompile) {

21
services/web/frontend/js/ide/directives/layout.js
View file

@ -66,7 +66,7 @@ export default App.directive('layout', ($parse, $compile, ide) => ({
initClosed: scope.$eval(attrs.initClosedEast),
},
west: {
size: scope.$eval(attrs.initialSizeEast),
size: scope.$eval(attrs.initialSizeWest),
initClosed: scope.$eval(attrs.initClosedWest),
},
}
@ -81,6 +81,7 @@ export default App.directive('layout', ($parse, $compile, ide) => ({
) {
options.east = state.east
}
options.east.initClosed = state.east.initClosed
}
if (state.west != null) {
if (
@ -90,6 +91,7 @@ export default App.directive('layout', ($parse, $compile, ide) => ({
) {
options.west = state.west
}
options.west.initClosed = state.west.initClosed
}
}
@ -154,10 +156,13 @@ export default App.directive('layout', ($parse, $compile, ide) => ({
) {
const eastState = layout.readState().east
if (eastState != null) {
const newInternalWidth =
(eastState.size / oldWidth) * element.width()
oldWidth = element.width()
layout.sizePane('east', newInternalWidth)
const currentWidth = element.width()
if (currentWidth > 0) {
const newInternalWidth =
(eastState.size / oldWidth) * currentWidth
oldWidth = currentWidth
layout.sizePane('east', newInternalWidth)
}
return
}
}
@ -250,6 +255,12 @@ ng-click=\"handleClick()\">\
} else {
layout.close('east')
}
if (hasCustomToggler) {
repositionCustomToggler()
customTogglerEl.scope().$applyAsync(function () {
customTogglerEl.scope().isOpen = value
})
}
}
return setTimeout(() => scope.$digest(), 0)
})