blitzwing/cryptpad
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Ability to drag&select in the drive

Browse source
This commit is contained in:
yflory 2017-04-27 17:01:56 +02:00
parent 520dabe094
commit 197b366712
3 changed files with 145 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
www/drive/file.css
View file

@ -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%;

23
www/drive/file.less
View file

@ -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%;

103
www/drive/main.js
View file

@ -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 = $('<div>', {'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 = $('<div>', {'class': 'selectBox'}).appendTo($content);
if (!path || path.length === 0) {
path = [ROOT];
}