diff --git a/customize.dist/src/less/mixins.less b/customize.dist/src/less/mixins.less index 02088e0a3..207ddbd02 100644 --- 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; + } +} diff --git a/www/drive/file.less b/www/drive/file.less index b53369c01..d0f472ee6 100644 --- 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; diff --git a/www/drive/main.js b/www/drive/main.js index d96710684..7aecbed58 100644 --- a/www/drive/main.js +++ b/www/drive/main.js @@ -161,7 +161,7 @@ define([ //var $upIcon = $('', {"class": "fa fa-arrow-circle-up"}); var $unsortedIcon = $('', {"class": "fa fa-files-o"}); var $templateIcon = $('', {"class": "fa fa-cubes"}); - var $trashIcon = $('', {"class": "fa fa-trash"}); + var $trashIcon = $('', {"class": "fa fa-trash-o"}); var $trashEmptyIcon = $('', {"class": "fa fa-trash-o"}); //var $collapseIcon = $('', {"class": "fa fa-minus-square-o expcol"}); var $expandIcon = $('', {"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); - $('
    ').append($rootElement).appendTo($container); + $('
      ', {'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 = $('
        ', { id: 'templateTree', 'class': 'category2' }).append($element); + var $list = $('
          ', { 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 = $('
            ', { id: 'allfilesTree', 'class': 'category2' }).append($allfilesElement); + var $allfilesList = $('
              ', { 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 = $('
                ', { id: 'trashTree', 'class': 'category2' }).append($trashElement); + var $trashList = $('
                  ', { id: 'trashTree', 'class': 'category' }).append($trashElement); $container.append($trashList); }; diff --git a/www/settings/main.less b/www/settings/main.less index 3d11b5c40..76ac5d582 100644 --- 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(); } } }