diff --git a/www/drive/file.css b/www/drive/file.css index a68b8e7bc..38b314d56 100644 --- a/www/drive/file.css +++ b/www/drive/file.css @@ -89,6 +89,16 @@ li { .selected .fa-plus-square-o { color: #000; } +.selectedTmp { + border: 1px dotted #bbb; + background: #AAA; + color: #ddd; + margin: -1px; +} +.selectedTmp .fa-minus-square-o, +.selectedTmp .fa-plus-square-o { + color: #000; +} span.fa-folder, span.fa-folder-open { color: #FEDE8B; @@ -215,6 +225,12 @@ span.fa-folder-open { flex: 1; display: flex; flex-flow: column; + position: relative; +} +#content .selectBox { + display: none; + background-color: rgba(100, 100, 100, 0.7); + position: absolute; } #content.readonly { background: #e6e6e6; @@ -242,7 +258,7 @@ span.fa-folder-open { #content li:not(.header) *:not(input) { /*pointer-events: none;*/ } -#content li:not(.header):hover:not(.selected) { +#content li:not(.header):hover:not(.selected, .selectedTmp) { background-color: #eee; } #content li:not(.header):hover .name { @@ -304,8 +320,8 @@ span.fa-folder-open { padding-bottom: 5px; max-height: 145px; } -#content div.grid li:not(.selected) { - border: transparent 1px; +#content div.grid li:not(.selected):not(.selectedTmp) { + border: 1px solid transparent; } #content div.grid li .name { width: 100%; @@ -326,6 +342,9 @@ span.fa-folder-open { #content div.grid .listElement { display: none; } +#content .list { + padding-left: 20px; +} #content .list ul { display: table; width: 100%; diff --git a/www/drive/file.less b/www/drive/file.less index 82c6a8657..03bc4750f 100644 --- a/www/drive/file.less +++ b/www/drive/file.less @@ -121,6 +121,16 @@ li { } } +.selectedTmp { + border: 1px dotted #bbb; + background: #AAA; + color: #ddd; + margin: -1px; + .fa-minus-square-o, .fa-plus-square-o { + color: @tree-fg; + } +} + span { &.fa-folder, &.fa-folder-open { color: #FEDE8B; @@ -260,6 +270,12 @@ span { flex: 1; display: flex; flex-flow: column; + position: relative; + .selectBox { + display: none; + background-color: rgba(100, 100, 100, 0.7); + position: absolute; + } &.readonly { background: @content-bg-ro; } @@ -287,7 +303,7 @@ span { /*pointer-events: none;*/ } &:hover { - &:not(.selected) { + &:not(.selected, .selectedTmp) { background-color: @drive-hover; } .name { @@ -357,8 +373,8 @@ span { padding-bottom: 5px; max-height: 145px; - &:not(.selected) { - border: transparent 1px; + &:not(.selected):not(.selectedTmp) { + border: 1px solid transparent; } .name { width: 100%; @@ -384,6 +400,7 @@ span { .list { // Make it act as a table! + padding-left: 20px; ul { display: table; width: 100%; diff --git a/www/drive/main.js b/www/drive/main.js index 038f9402e..057a0a8ee 100644 --- a/www/drive/main.js +++ b/www/drive/main.js @@ -199,6 +199,7 @@ define([ var $trashTreeContextMenu = $iframe.find("#trashTreeContextMenu"); var $trashContextMenu = $iframe.find("#trashContextMenu"); + // TOOLBAR /* add a "change username" button */ @@ -252,12 +253,113 @@ define([ return $el.is('.element-row') ? $el : $el.closest('.element-row'); }; + + // Selection var removeSelected = function () { $iframe.find('.selected').removeClass("selected"); var $container = $driveToolbar.find('#contextButtonsContainer'); if (!$container.length) { return; } $container.html(''); }; + + var sel = {}; + sel.refresh = 200; + sel.$selectBox = $('