infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Add resizer to the drive

master
yflory 2022-05-02 16:23:06 +02:00
parent 97832340cf
commit b25a38e13c
2 changed files with 34 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
customize.dist/src/less2/include/drive.less
View File

@ -121,6 +121,9 @@
.cp-app-drive-tree-category {
margin-top: 0.5em;
}
.cp-splitter {
display: none;
}
}
}
}
@ -265,7 +268,6 @@
box-sizing: border-box;
background: @cp_sidebar-left-bg;
overflow: auto;
resize: horizontal;
width: auto;
white-space: nowrap;
max-width: 500px;
@ -467,8 +469,18 @@
#cp-app-drive-content-container {
display: flex;
flex-flow: column;
flex: 1 1 100%;
flex: 1;
min-width: 0;
position: relative;
.cp-splitter {
position: absolute;
height: 100%;
width: 8px;
top: 0;
left: 0;
cursor: col-resize;
background: red;
}
}
#cp-app-drive-content {
box-sizing: border-box;

20
www/common/drive-ui.js
View File

@ -626,6 +626,7 @@ define([
// UI containers
var $tree = APP.$tree = $("#cp-app-drive-tree");
var $content = APP.$content = $("#cp-app-drive-content");
var $contentContainer = APP.$content = $("#cp-app-drive-content-container");
var $appContainer = $(".cp-app-drive-container");
var $driveToolbar = APP.toolbar.$bottom;
var $contextMenu = createContextMenu(common).appendTo($appContainer);
@ -635,6 +636,24 @@ define([
var $trashTreeContextMenu = $("#cp-app-drive-context-trashtree");
var $trashContextMenu = $("#cp-app-drive-context-trash");
var splitter = h('div.cp-splitter');
$contentContainer.append(splitter);
APP.$splitter = $(splitter).on('mousedown', function (e) {
e.preventDefault();
var x = e.pageX;
var w = $tree.width();
var handler = function (evt) {
if (evt.type === 'mouseup') {
$(window).off('mouseup mousemove', handler);
return;
}
$tree.css('width', (w - x + evt.pageX) + 'px');
};
$(window).off('mouseup mousemove', handler);
$(window).on('mouseup mousemove', handler);
});
// TOOLBAR
// DRIVE
@ -3391,6 +3410,7 @@ define([
APP.toolbar.$bottomL.append(APP.$collapseButton);
APP.$collapseButton.off('click').on('click', function () {
APP.$tree.toggle();
APP.$splitter.toggle(APP.$tree.is(':visible'));
checkCollapseButton();
});
};