Left menu in drive

customize.dist/src/less/mixins.less

@@ -117,3 +117,19 @@
     }
     }
 }
+
+.leftsideCategory {
+    .unselectable();
+    padding: 5px 20px;
+    margin: 15px 0;
+    cursor: pointer;
+    .fa {
+        width: 20px;
+    }
+    &:hover {
+        background: rgba(0,0,0,0.05);
+    }
+    &.active {
+        background: white;
+    }
+}

www/drive/file.less

@@ -72,7 +72,7 @@ img.icon {
             width: 100%;
             max-width: unset;
             border-bottom: 1px solid @toolbar-border-col;
-            .category2 {
+            .category {
                 margin-top: 0.5em;
             }
         }
@@ -164,6 +164,8 @@ span {
 
 
 #tree {
+    font-family: Ubuntu,Georgia,Cambria,serif;
+    font-size: 16px;
     //border-right: 1px solid #ccc;
     box-sizing: border-box;
     background: @tree-bg;
@@ -187,48 +189,76 @@ span {
         margin-bottom: 3px;
         margin-left: -2px;
     }
-    li {
+    .docTree {
-        padding: 0 0 0 5px;
+        margin-top: 20px;
+        padding: 0 0 0 20px;
         cursor: auto;
-        &.collapsed ul {
+        &li, li {
-            display: none;
+            padding: 0;
-        }
+            &.collapsed ul {
-        input {
+                display: none;
-            width: ~"calc(100% - 30px)";
+            }
-        }
+            input {
-        & > span.element-row {
+                width: ~"calc(100% - 30px)";
-            min-width: ~"calc(100% + 5px)";
+            }
-            display: inline-block;
+            & > span.element-row {
-            cursor: pointer;
+                overflow: hidden;
-            margin-left: -5px;
+                text-overflow: ellipsis;
-            padding-left: 5px;
+                //min-width: ~"calc(100% + 5px)";
-        }
+                .leftsideCategory();
-        & > span.element-row:not(.selected):not(.active):hover {
+                width: ~"calc(100% + 5px)";
-            background-color: @drive-hover;
+                margin: 0;
+                margin-bottom: -5px;
+                display: inline-block;
+                cursor: pointer;
+                margin-left: -5px;
+                padding-left: 5px;
+            }
+            & > span.element-row:not(.selected):not(.active):hover {
+                //background-color: @drive-hover;
+            }
         }
     }
     span.element {
         cursor: pointer;
     }
-    .active {
+    /*.active {
         &:not(.selected):not(.droppable) {
             background-color: darken(@drive-hover, 15%);
         }
-    }
+    }*/
-    .category2 {
+    .category {
-        margin-top: 2em;
+        margin: 0;
+        margin-top: 15px;
         .root {
             &> .fa {
                 min-width: 30px;
                 cursor: pointer;
             }
         }
+        li {
+            padding: 0;
+            .element-row {
+                display: block;
+                padding-left: 20px;
+                .leftsideCategory();
+                margin: 0;
+                .fa {
+                    width: 25px;
+                }
+            }
+        }
+    }
+    .category:last-child {
+        margin-bottom: 20px;
     }
     #allfilesTree {
         margin-top: 0;
     }
+    .limit-container {
+        margin-top: 0;
+    }
     #searchContainer {
-        margin-bottom: 20px;
         text-align: center;
         padding: 0;
         position: relative;
@@ -262,9 +292,9 @@ span {
         font-size: 14px;
         position: absolute;
         left: -20px;
-        top: 9px;
+        top: 10px;
-        width: auto;
+        width: 11px !important;
-        height: 11px;
+        height: 11px !important;
         padding: 0;
         margin: 0;
         background: white;
@@ -277,7 +307,7 @@ span {
     }
 
     // Expand/collapse lines
-    ul {
+    .docTree ul {
         margin: 0px 0px 0px 10px;
         list-style: none;
         padding-left: 10px;
@@ -286,13 +316,13 @@ span {
             &:before {
                 position: absolute;
                 left: -15px;
-                top: -0.25em;
+                top: -11px;
                 content: '';
                 display: block;
                 border-left: 1px solid @tree-lines-col;
-                height: 1em;
+                height: ~"calc(1em + 11px)";
                 border-bottom: 1px solid @tree-lines-col;
-                width: 17.5px;
+                width: 15px;
             }
             &:after {
                 position: absolute;
@@ -326,7 +356,8 @@ span {
     flex: 1;
     // Needed to avoid the folder's path to overflows
     // https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layout
-    min-width: 0;}
+    min-width: 0;
+}
 #content {
     box-sizing: border-box;
     background: @content-bg;

www/drive/main.js

@@ -161,7 +161,7 @@ define([
     //var $upIcon = $('<span>', {"class": "fa fa-arrow-circle-up"});
     var $unsortedIcon = $('<span>', {"class": "fa fa-files-o"});
     var $templateIcon = $('<span>', {"class": "fa fa-cubes"});
-    var $trashIcon = $('<span>', {"class": "fa fa-trash"});
+    var $trashIcon = $('<span>', {"class": "fa fa-trash-o"});
     var $trashEmptyIcon = $('<span>', {"class": "fa fa-trash-o"});
     //var $collapseIcon = $('<span>', {"class": "fa fa-minus-square-o expcol"});
     var $expandIcon = $('<span>', {"class": "fa fa-plus-square-o expcol"});
@@ -2011,7 +2011,9 @@ define([
             }
             $elementRow.data('path', path);
             addDragAndDropHandlers($elementRow, path, true, droppable);
-            if (active) { $elementRow.addClass('active'); }
+            if (active) {
+                $elementRow.addClass('active');
+            }
             return $element;
         };
 
@@ -2031,7 +2033,7 @@ define([
                 var $rootElement = createTreeElement(ROOT_NAME, $rootIcon.clone(), [ROOT], false, true, false, isRootOpened);
                 $rootElement.addClass('root');
                 $rootElement.find('>.element-row').contextmenu(openDirectoryContextMenu);
-                $('<ul>').append($rootElement).appendTo($container);
+                $('<ul>', {'class': 'docTree'}).append($rootElement).appendTo($container);
                 $container = $rootElement;
             } else if (filesOp.isFolderEmpty(root)) { return; }
 
@@ -2061,7 +2063,7 @@ define([
             var isOpened = filesOp.comparePath(path, currentPath);
             var $element = createTreeElement(TEMPLATE_NAME, $icon, [TEMPLATE], false, true, false, isOpened);
             $element.addClass('root');
-            var $list = $('<ul>', { id: 'templateTree', 'class': 'category2' }).append($element);
+            var $list = $('<ul>', { id: 'templateTree', 'class': 'category' }).append($element);
             $container.append($list);
         };
 
@@ -2070,7 +2072,7 @@ define([
             var isOpened = filesOp.comparePath(path, currentPath);
             var $allfilesElement = createTreeElement(FILES_DATA_NAME, $icon, [FILES_DATA], false, false, false, isOpened);
             $allfilesElement.addClass('root');
-            var $allfilesList = $('<ul>', { id: 'allfilesTree', 'class': 'category2' }).append($allfilesElement);
+            var $allfilesList = $('<ul>', { id: 'allfilesTree', 'class': 'category' }).append($allfilesElement);
             $container.append($allfilesList);
         };
 
@@ -2080,7 +2082,7 @@ define([
             var $trashElement = createTreeElement(TRASH_NAME, $icon, [TRASH], false, true, false, isOpened);
             $trashElement.addClass('root');
             $trashElement.find('>.element-row').contextmenu(openTrashTreeContextMenu);
-            var $trashList = $('<ul>', { id: 'trashTree', 'class': 'category2' }).append($trashElement);
+            var $trashList = $('<ul>', { id: 'trashTree', 'class': 'category' }).append($trashElement);
             $container.append($trashList);
         };
 

www/settings/main.less

@@ -32,19 +32,7 @@
             .categories {
                 flex: 1;
                 .category {
-                    .unselectable();
+                    .leftsideCategory();
-                    padding: 5px 20px;
-                    margin: 15px 0;
-                    cursor: pointer;
-                    .fa {
-                        width: 20px;
-                    }
-                    &:hover {
-                        background: rgba(0,0,0,0.05);
-                    }
-                    &.active {
-                        background: white;
-                    }
                 }
             }
         }