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 = $('
', {'class': 'selectBox'}).appendTo($content); + var checkSelected = function () { + if (!sel.down) { return; } + var pos = sel.pos; + var l = $content[0].querySelectorAll('.element:not(.selected):not(.header)'); + var p, el; + for (var i = 0; i < l.length; i++) { + el = l[i]; + p = $(el).position(); + p.top += 10 + $content.scrollTop(); + p.left += 10; + p.bottom = p.top + $(el).outerHeight(); + p.right = p.left + $(el).outerWidth(); + if (p.right < pos.left || p.left > pos.right + || p.top > pos.bottom || p.bottom < pos.top) { + $(el).removeClass('selectedTmp'); + } else { + $(el).addClass('selectedTmp'); + } + } + }; + $content.on('mousedown', function (e) { + console.log('down'); + sel.down = true; + if (!e.ctrlKey) { removeSelected(); } + var rect = e.currentTarget.getBoundingClientRect(); + sel.startX = e.clientX - rect.left, + sel.startY = e.clientY - rect.top + $content.scrollTop(); + sel.$selectBox.show().css({ + left: sel.startX + 'px', + top: sel.startY + 'px', + width: '0px', + height: '0px' + }); + if (sel.move) { console.log('ret'); return; } + sel.move = function (ev) { + var rectMove = ev.currentTarget.getBoundingClientRect(), + offX = ev.clientX - rectMove.left, + offY = ev.clientY - rectMove.top + $content.scrollTop(); + + + var left = sel.startX, + top = sel.startY; + var width = offX - sel.startX; + if (width < 0) { + left = Math.max(0, offX); + var diffX = left-offX; + width = Math.abs(width) - diffX; + } + var height = offY - sel.startY; + if (height < 0) { + top = Math.max(0, offY); + var diffY = top-offY; + height = Math.abs(height) - diffY; + } + sel.$selectBox.css({ + width: width + 'px', + left: left + 'px', + height: height + 'px', + top: top + 'px' + }); + + + sel.pos = { + top: top, + left: left, + bottom: top + height, + right: left + width + }; + var diffT = sel.update ? +new Date() - sel.update : sel.refresh; + if (diffT < sel.refresh) { + if (!sel.to) { + sel.to = window.setTimeout(function () { + sel.update = +new Date(); + checkSelected(); + sel.to = undefined; + }, (sel.refresh - diffT)); + } + console.log('cancelled'); + return; + } + sel.update = +new Date(); + checkSelected(); + }; + $content.mousemove(sel.move); + }); + $content.on('mouseup', function (e) { + console.log(sel.pos); + sel.down = false; + sel.$selectBox.hide(); + $content.off('mousemove', sel.move); + delete sel.move; + $content.find('.selectedTmp').removeClass('selectedTmp').addClass('selected'); + }); + + var removeInput = function (cancel) { if (!cancel && $iframe.find('.element-row > input').length === 1) { var $input = $iframe.find('.element-row > input'); @@ -1501,6 +1603,7 @@ define([ currentPath = path; var s = $content.scrollTop() || 0; $content.html(""); + sel.$selectBox = $('
', {'class': 'selectBox'}).appendTo($content); if (!path || path.length === 0) { path = [ROOT]; }