Left menu in drive
yflory
parent
8f5a244999
commit
112c4c85e5
customize.dist/src/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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue