Left menu in drive

7 years ago · 112c4c85e5
parent 8f5a244999
commit 112c4c85e5
4 changed files with 87 additions and 50 deletions
--- a/customize.dist/src/less/mixins.less
+++ b/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;
+    }
+}
--- a/www/drive/file.less
+++ b/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 {
-        padding: 0 0 0 5px;
+    .docTree {
+        margin-top: 20px;
+        padding: 0 0 0 20px;
        cursor: auto;
-        &.collapsed ul {
-            display: none;
-        }
-        input {
-            width: ~"calc(100% - 30px)";
-        }
-        & > span.element-row {
-            min-width: ~"calc(100% + 5px)";
-            display: inline-block;
-            cursor: pointer;
-            margin-left: -5px;
-            padding-left: 5px;
-        }
-        & > span.element-row:not(.selected):not(.active):hover {
-            background-color: @drive-hover;
+        &li, li {
+            padding: 0;
+            &.collapsed ul {
+                display: none;
+            }
+            input {
+                width: ~"calc(100% - 30px)";
+            }
+            & > span.element-row {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                //min-width: ~"calc(100% + 5px)";
+                .leftsideCategory();
+                width: ~"calc(100% + 5px)";
+                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 {
-        margin-top: 2em;
+    }*/
+    .category {
+        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;
-        width: auto;
-        height: 11px;
+        top: 10px;
+        width: 11px !important;
+        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;
--- a/www/drive/main.js
+++ b/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);
        };

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