Add resizer to the drive

customize.dist/src/less2/include/drive.less

@@ -121,6 +121,9 @@
                 .cp-app-drive-tree-category {
                     margin-top: 0.5em;
                 }
+                .cp-splitter {
+                    display: none;
+                }
             }
         }
     }
@@ -265,7 +268,6 @@
         box-sizing: border-box;
         background: @cp_sidebar-left-bg;
         overflow: auto;
-        resize: horizontal;
         width: auto;
         white-space: nowrap;
         max-width: 500px;
@@ -467,8 +469,18 @@
     #cp-app-drive-content-container {
         display: flex;
         flex-flow: column;
-        flex: 1 1 100%;
+        flex: 1;
         min-width: 0;
+        position: relative;
+        .cp-splitter {
+            position: absolute;
+            height: 100%;
+            width: 8px;
+            top: 0;
+            left: 0;
+            cursor: col-resize;
+            background: red;
+        }
     }
     #cp-app-drive-content {
         box-sizing: border-box;

www/common/drive-ui.js

@@ -626,6 +626,7 @@ define([
         // UI containers
         var $tree = APP.$tree = $("#cp-app-drive-tree");
         var $content = APP.$content = $("#cp-app-drive-content");
+        var $contentContainer = APP.$content = $("#cp-app-drive-content-container");
         var $appContainer = $(".cp-app-drive-container");
         var $driveToolbar = APP.toolbar.$bottom;
         var $contextMenu = createContextMenu(common).appendTo($appContainer);
@@ -635,6 +636,24 @@ define([
         var $trashTreeContextMenu = $("#cp-app-drive-context-trashtree");
         var $trashContextMenu = $("#cp-app-drive-context-trash");
 
+
+        var splitter = h('div.cp-splitter');
+        $contentContainer.append(splitter);
+        APP.$splitter = $(splitter).on('mousedown', function (e) {
+            e.preventDefault();
+            var x = e.pageX;
+            var w = $tree.width();
+            var handler = function (evt) {
+                if (evt.type === 'mouseup') {
+                    $(window).off('mouseup mousemove', handler);
+                    return;
+                }
+                $tree.css('width', (w - x + evt.pageX) + 'px');
+            };
+            $(window).off('mouseup mousemove', handler);
+            $(window).on('mouseup mousemove', handler);
+        });
+
         // TOOLBAR
 
         // DRIVE
@@ -3391,6 +3410,7 @@ define([
             APP.toolbar.$bottomL.append(APP.$collapseButton);
             APP.$collapseButton.off('click').on('click', function () {
                 APP.$tree.toggle();
+                APP.$splitter.toggle(APP.$tree.is(':visible'));
                 checkCollapseButton();
             });
         };