From c331e7c73b5ea6f3f34be1b5a3f3ee0bd1dca8ea Mon Sep 17 00:00:00 2001
From: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com>
Date: Fri, 5 Aug 2022 12:03:49 +0300
Subject: [PATCH] Merge pull request #9027 from
 overleaf/ae-file-tree-outline-default-size

Set a default size for the outline pane

GitOrigin-RevId: d06ede6cf026b1aff04e2eb4e05c69f40dd406e4
---
 .../views/project/editor/file-tree-react.pug  |  3 +-
 .../ide/directives/verticalResizablePanes.js  | 50 +++++++++----------
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/services/web/app/views/project/editor/file-tree-react.pug b/services/web/app/views/project/editor/file-tree-react.pug
index 788ae43c55..c56cf6981d 100644
--- a/services/web/app/views/project/editor/file-tree-react.pug
+++ b/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"
 )
 
diff --git a/services/web/frontend/js/ide/directives/verticalResizablePanes.js b/services/web/frontend/js/ide/directives/verticalResizablePanes.js
index 421d865c1c..83611fde0d 100644
--- a/services/web/frontend/js/ide/directives/verticalResizablePanes.js
+++ b/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