Merge pull request #3041 from overleaf/pr-more-outline-polish

More outline polish

GitOrigin-RevId: 6bb69e7af0d62f2107fc9b57c621e0dcb46d0a8d

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

@@ -4,6 +4,8 @@ aside.editor-sidebar.full-size(
 	ng-show="ui.view != 'history' || !history.isV2"
 	vertical-resizable-panes=user.alphaProgram && "outline-resizer"
 	vertical-resizable-panes-toggled-externally-on=user.alphaProgram && "outline-toggled"
+	vertical-resizable-panes-min-size=user.alphaProgram && "32"
+	vertical-resizable-panes-max-size=user.alphaProgram && "75%"
 )
 	.file-tree(
 		vertical-resizable-top=user.alphaProgram

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

@@ -10,7 +10,7 @@ const layoutOptions = {
     paneSelector: '[vertical-resizable-bottom]',
     paneClass: 'vertical-resizable-bottom',
     resizerClass: 'vertical-resizable-resizer',
-    resizerCursor: 'row-resize',
+    resizerCursor: 'ns-resize',
     size: 'auto',
     resizable: true,
     closable: false,
@@ -24,7 +24,9 @@ const layoutOptions = {
 export default App.directive('verticalResizablePanes', localStorage => ({
   restrict: 'A',
   link(scope, element, attrs) {
-    let name = attrs.verticalResizablePanes
+    const name = attrs.verticalResizablePanes
+    const minSize = attrs.verticalResizablePanesMinSize
+    const maxSize = attrs.verticalResizablePanesMaxSize
     let storedSize = null
     let manualResizeIncoming = false
 
@@ -79,6 +81,14 @@ export default App.directive('verticalResizablePanes', localStorage => ({
       })
     }
 
+    if (maxSize) {
+      layoutOptions.south.maxSize = maxSize
+    }
+
+    if (minSize) {
+      layoutOptions.south.minSize = minSize
+    }
+
     // The `drag` event fires only when the user manually resizes the panes; the `resize` event fires even when
     // the layout library internally resizes itself. In order to get explicit user-initiated resizes, we need to
     // listen to `drag` events. However, when the `drag` event fires, the panes aren't yet finished sizing so we

services/web/frontend/stylesheets/app/editor/file-tree.less

@@ -11,6 +11,7 @@
 .editor-sidebar {
   display: flex;
   flex-direction: column;
+  background-color: @file-tree-bg;
 }
 
 .file-tree {
@@ -31,7 +32,6 @@
     flex-direction: column;
     flex-grow: 1;
     overflow-y: auto;
-    background-color: @file-tree-bg;
 
     &.no-toolbar {
       top: 0;

services/web/frontend/stylesheets/app/editor/outline.less

@@ -156,6 +156,8 @@
   &:hover,
   &:focus {
     outline: 0;
+  }
+  &:hover {
     background-color: @file-tree-item-hover-bg;
   }
 }

services/web/frontend/stylesheets/components/vertical-resizable-panes.less

@@ -18,4 +18,8 @@
 
 .vertical-resizable-resizer-disabled {
   pointer-events: none;
+  opacity: 0.5;
+  &::after {
+    opacity: 0.5;
+  }
 }