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,33 +1,12 @@
 import App from '../../base'
 
-const layoutOptions = {
-  center: {
-    paneSelector: '[vertical-resizable-top]',
-    paneClass: 'vertical-resizable-top',
-    size: 'auto',
-  },
-  south: {
-    paneSelector: '[vertical-resizable-bottom]',
-    paneClass: 'vertical-resizable-bottom',
-    resizerClass: 'vertical-resizable-resizer',
-    resizerCursor: 'ns-resize',
-    size: 'auto',
-    resizable: true,
-    closable: false,
-    slidable: false,
-    spacing_open: 6,
-    spacing_closed: 6,
-    maxSize: '75%',
-  },
-}
-
 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
+    const minSize = scope.$eval(attrs.verticalResizablePanesMinSize)
+    const maxSize = scope.$eval(attrs.verticalResizablePanesMaxSize)
+    const defaultSize = scope.$eval(attrs.verticalResizablePanesDefaultSize)
     let storedSize = null
     let manualResizeIncoming = false
 
@@ -41,6 +20,27 @@ export default App.directive('verticalResizablePanes', (localStorage, ide) => ({
       })
     }
 
+    const layoutOptions = {
+      center: {
+        paneSelector: '[vertical-resizable-top]',
+        paneClass: 'vertical-resizable-top',
+        size: 'auto',
+      },
+      south: {
+        paneSelector: '[vertical-resizable-bottom]',
+        paneClass: 'vertical-resizable-bottom',
+        resizerClass: 'vertical-resizable-resizer',
+        resizerCursor: 'ns-resize',
+        size: 'auto',
+        resizable: true,
+        closable: false,
+        slidable: false,
+        spacing_open: 6,
+        spacing_closed: 6,
+        maxSize: '75%',
+      },
+    }
+
     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