web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update the drive UI to show that Upload and New are linked to a folder

Browse Source
This commit is contained in:
yflory 2017-06-14 17:51:48 +02:00
parent 1077b3b267
commit 8738b42861
4 changed files with 36 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
www/drive/file.css
View File

@ -132,7 +132,7 @@ span.fa-folder-open {
width: calc(100% - 30px); width: calc(100% - 30px);
} }
#tree li > span.element-row { #tree li > span.element-row {
width: calc(100% + 5px); min-width: calc(100% + 5px);
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
margin-left: -5px; margin-left: -5px;
@ -223,6 +223,11 @@ span.fa-folder-open {
display: none; display: none;
} }
/* CONTENT */ /* CONTENT */
#rightCol {
display: flex;
flex-flow: column;
flex: 1;
}
#content { #content {
box-sizing: border-box; box-sizing: border-box;
background: #fff; background: #fff;
@ -450,9 +455,6 @@ span.fa-folder-open {
#driveToolbar { #driveToolbar {
background: #ddd; background: #ddd;
color: #555; color: #555;
height: 30px;
display: flex;
flex-flow: row;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
border-bottom: ; border-bottom: ;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
@ -516,21 +518,25 @@ span.fa-folder-open {
width: 250px; width: 250px;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: inline-block;
} }
#driveToolbar .rightside { #driveToolbar .rightside {
margin: 0; margin: 0;
padding: 0; padding: 0;
flex: 1; display: inline-block;
float: right;
} }
#driveToolbar .path { #driveToolbar .path {
display: inline-block; width: 100%;
height: 100%; height: 30px;
line-height: 30px; line-height: 30px;
cursor: default; cursor: default;
width: auto; width: auto;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
direction: rtl; direction: rtl;
max-width: 100%;
text-align: left;
} }
#driveToolbar .path .element { #driveToolbar .path .element {
padding: 5px; padding: 5px;

24
www/drive/file.less
View File

@ -171,7 +171,7 @@ span {
width: ~"calc(100% - 30px)"; width: ~"calc(100% - 30px)";
} }
& > span.element-row { & > span.element-row {
width: ~"calc(100% + 5px)"; min-width: ~"calc(100% + 5px)";
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
margin-left: -5px; margin-left: -5px;
@ -272,7 +272,11 @@ span {
} }
/* CONTENT */ /* CONTENT */
#rightCol {
display: flex;
flex-flow: column;
flex: 1;
}
#content { #content {
box-sizing: border-box; box-sizing: border-box;
background: @content-bg; background: @content-bg;
@ -519,9 +523,9 @@ span {
#driveToolbar { #driveToolbar {
background: @toolbar-bg; background: @toolbar-bg;
color: @toolbar-fg; color: @toolbar-fg;
height: 30px; //height: 30px;
display: flex; //display: flex;
flex-flow: row; //flex-flow: row;
border-top: 1px solid @toolbar-border-col; border-top: 1px solid @toolbar-border-col;
border-bottom: ; border-bottom: ;
box-shadow: 0 2px 4px rgba(0,0,0,0.2); box-shadow: 0 2px 4px rgba(0,0,0,0.2);
@ -586,21 +590,25 @@ span {
width: 250px; width: 250px;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: inline-block;
} }
.rightside { .rightside {
margin: 0; margin: 0;
padding: 0; padding: 0;
flex: 1; display: inline-block;
float: right;
} }
.path { .path {
display: inline-block; width: 100%;
height: 100%; height: 30px;
line-height: 30px; line-height: 30px;
cursor: default; cursor: default;
width: auto; width: auto;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
direction: rtl; direction: rtl;
max-width: 100%;
text-align: left;
.element { .element {
padding: 5px; padding: 5px;
border: 1px solid @toolbar-bg; border: 1px solid @toolbar-bg;

5
www/drive/inner.html
View File

@ -10,11 +10,12 @@
</head> </head>
<body> <body>
<div id="toolbar" class="toolbar-container"></div> <div id="toolbar" class="toolbar-container"></div>
<div id="driveToolbar"></div>
<div class="app-container" tabindex="0"> <div class="app-container" tabindex="0">
<div id="tree"> <div id="tree">
</div> </div>
<div id="content" tabindex="2"> <div id="rightCol">
<div id="driveToolbar"></div>
<div id="content" tabindex="2"></div>
</div> </div>
<div id="treeContextMenu" class="contextMenu dropdown clearfix"> <div id="treeContextMenu" class="contextMenu dropdown clearfix">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;"> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">

28
www/drive/main.js
View File

@ -649,12 +649,7 @@ define([
}; };
var updatePathSize = function () { var updatePathSize = function () {
var $context = $iframe.find('#contextButtonsContainer'); $driveToolbar.find('.path').css('max-width', 'calc(100vw - '+$tree.width()+'px - 50px)');
var l = 50;
if ($context.length) {
l += $context.width() || 0;
}
$driveToolbar.find('.path').css('max-width', 'calc(100vw - '+$tree.width()+'px - '+l+'px)');
}; };
var getSelectedPaths = function ($element) { var getSelectedPaths = function ($element) {
@ -1261,7 +1256,7 @@ define([
var createTitle = function (path, noStyle) { var createTitle = function (path, noStyle) {
if (!path || path.length === 0) { return; } if (!path || path.length === 0) { return; }
var isTrash = filesOp.isPathIn(path, [TRASH]); var isTrash = filesOp.isPathIn(path, [TRASH]);
var $title = $('<span>', {'class': 'path unselectable'}); var $title = $driveToolbar.find('.path');
if (APP.mobile()) { if (APP.mobile()) {
return $title; return $title;
} }
@ -1638,10 +1633,8 @@ define([
var $toolbar = $driveToolbar; var $toolbar = $driveToolbar;
$toolbar.html(''); $toolbar.html('');
var $leftside = $('<div>', {'class': 'leftside'}).appendTo($toolbar); var $leftside = $('<div>', {'class': 'leftside'}).appendTo($toolbar);
if (!APP.mobile()) {
$leftside.width($tree.width());
}
$('<div>', {'class': 'rightside'}).appendTo($toolbar); $('<div>', {'class': 'rightside'}).appendTo($toolbar);
$('<div>', {'class': 'path unselectable'}).appendTo($toolbar);
return $toolbar; return $toolbar;
}; };
@ -1866,7 +1859,7 @@ define([
} }
var $list = $('<ul>').appendTo($dirContent); var $list = $('<ul>').appendTo($dirContent);
createTitle(path).appendTo($toolbar.find('.rightside')); createTitle(path).appendTo($toolbar.find('.path'));
updatePathSize(); updatePathSize();
if (APP.mobile()) { if (APP.mobile()) {
@ -2556,19 +2549,6 @@ define([
} }
}); });
$iframe.find('#tree').mousedown(function () {
if (APP.mobile()) { return; }
if (APP.resizeTree) { return; }
APP.resizeTree = window.setInterval(function () {
$driveToolbar.find('.leftside').width($tree.width());
updatePathSize();
}, 100);
});
$appContainer.mouseup(function () {
window.clearInterval(APP.resizeTree);
APP.resizeTree = undefined;
});
history.onEnterHistory = function (obj) { history.onEnterHistory = function (obj) {
var files = obj.drive; var files = obj.drive;
filesOp = FO.init(files, config); filesOp = FO.init(files, config);