Merge pull request #9027 from overleaf/ae-file-tree-outline-default-size

Set a default size for the outline pane

GitOrigin-RevId: d06ede6cf026b1aff04e2eb4e05c69f40dd406e4

services/web/app/views/project/editor/file-tree-react.pug

@@ -2,8 +2,9 @@ aside.editor-sidebar.full-size(
 	ng-show="ui.view != 'history'"
 	vertical-resizable-panes="outline-resizer"
 	vertical-resizable-panes-toggled-externally-on="outline-toggled"
+	vertical-resizable-panes-default-size="350"
 	vertical-resizable-panes-min-size="32"
-	vertical-resizable-panes-max-size="75%"
+	vertical-resizable-panes-max-size="'75%'"
 	vertical-resizable-panes-resize-on="left-pane-resize-all"
 )
 

services/web/frontend/js/ide/directives/verticalResizablePanes.js

@@ -1,5 +1,25 @@
 import App from '../../base'
 
+export default App.directive('verticalResizablePanes', (localStorage, ide) => ({
+  restrict: 'A',
+  link(scope, element, attrs) {
+    const name = attrs.verticalResizablePanes
+    const minSize = scope.$eval(attrs.verticalResizablePanesMinSize)
+    const maxSize = scope.$eval(attrs.verticalResizablePanesMaxSize)
+    const defaultSize = scope.$eval(attrs.verticalResizablePanesDefaultSize)
+    let storedSize = null
+    let manualResizeIncoming = false
+
+    if (name) {
+      const storageKey = `vertical-resizable:${name}:south-size`
+      storedSize = localStorage(storageKey)
+      $(window).unload(() => {
+        if (storedSize) {
+          localStorage(storageKey, storedSize)
+        }
+      })
+    }
+
     const layoutOptions = {
       center: {
         paneSelector: '[vertical-resizable-top]',
@@ -21,26 +41,6 @@ const layoutOptions = {
       },
     }
 
-export default App.directive('verticalResizablePanes', (localStorage, ide) => ({
-  restrict: 'A',
-  link(scope, element, attrs) {
-    const name = attrs.verticalResizablePanes
-    const minSize = attrs.verticalResizablePanesMinSize
-    const maxSize = attrs.verticalResizablePanesMaxSize
-    const defaultSize = attrs.verticalResizablePanesDefaultSize
-    let storedSize = null
-    let manualResizeIncoming = false
-
-    if (name) {
-      const storageKey = `vertical-resizable:${name}:south-size`
-      storedSize = localStorage(storageKey)
-      $(window).unload(() => {
-        if (storedSize) {
-          localStorage(storageKey, storedSize)
-        }
-      })
-    }
-
     const toggledExternally = attrs.verticalResizablePanesToggledExternallyOn
     const hiddenExternally = attrs.verticalResizablePanesHiddenExternallyOn
     const hiddenInitially = attrs.verticalResizablePanesHiddenInitially
@@ -72,7 +72,7 @@ export default App.directive('verticalResizablePanes', (localStorage, ide) => ({
 
     if (toggledExternally) {
       scope.$on(toggledExternally, (e, open) => {
-        let newSize = 'auto'
+        let newSize = defaultSize ?? 'auto'
         if (open) {
           if (storedSize) {
             newSize = storedSize