Update the drive UI to show that Upload and New are linked to a folder
yflory
parent
1077b3b267
commit
8738b42861
|
|
@ -132,7 +132,7 @@ span.fa-folder-open {
|
|||
width: calc(100% - 30px);
|
||||
}
|
||||
#tree li > span.element-row {
|
||||
width: calc(100% + 5px);
|
||||
min-width: calc(100% + 5px);
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
margin-left: -5px;
|
||||
|
|
@ -223,6 +223,11 @@ span.fa-folder-open {
|
|||
display: none;
|
||||
}
|
||||
/* CONTENT */
|
||||
#rightCol {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
}
|
||||
#content {
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
|
|
@ -450,9 +455,6 @@ span.fa-folder-open {
|
|||
#driveToolbar {
|
||||
background: #ddd;
|
||||
color: #555;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom: ;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
|
|
@ -516,21 +518,25 @@ span.fa-folder-open {
|
|||
width: 250px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
#driveToolbar .rightside {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
#driveToolbar .path {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
cursor: default;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
direction: rtl;
|
||||
max-width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
#driveToolbar .path .element {
|
||||
padding: 5px;
|
||||
|
|
|
|||
|
|
@ -171,7 +171,7 @@ span {
|
|||
width: ~"calc(100% - 30px)";
|
||||
}
|
||||
& > span.element-row {
|
||||
width: ~"calc(100% + 5px)";
|
||||
min-width: ~"calc(100% + 5px)";
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
margin-left: -5px;
|
||||
|
|
@ -272,7 +272,11 @@ span {
|
|||
}
|
||||
|
||||
/* CONTENT */
|
||||
|
||||
#rightCol {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
}
|
||||
#content {
|
||||
box-sizing: border-box;
|
||||
background: @content-bg;
|
||||
|
|
@ -519,9 +523,9 @@ span {
|
|||
#driveToolbar {
|
||||
background: @toolbar-bg;
|
||||
color: @toolbar-fg;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
//height: 30px;
|
||||
//display: flex;
|
||||
//flex-flow: row;
|
||||
border-top: 1px solid @toolbar-border-col;
|
||||
border-bottom: ;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||||
|
|
@ -586,21 +590,25 @@ span {
|
|||
width: 250px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
.rightside {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
.path {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
cursor: default;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
direction: rtl;
|
||||
max-width: 100%;
|
||||
text-align: left;
|
||||
.element {
|
||||
padding: 5px;
|
||||
border: 1px solid @toolbar-bg;
|
||||
|
|
|
|||
|
|
@ -10,11 +10,12 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="toolbar" class="toolbar-container"></div>
|
||||
<div id="driveToolbar"></div>
|
||||
<div class="app-container" tabindex="0">
|
||||
<div id="tree">
|
||||
</div>
|
||||
<div id="content" tabindex="2">
|
||||
<div id="rightCol">
|
||||
<div id="driveToolbar"></div>
|
||||
<div id="content" tabindex="2"></div>
|
||||
</div>
|
||||
<div id="treeContextMenu" class="contextMenu dropdown clearfix">
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
|
||||
|
|
|
|||
|
|
@ -649,12 +649,7 @@ define([
|
|||
};
|
||||
|
||||
var updatePathSize = function () {
|
||||
var $context = $iframe.find('#contextButtonsContainer');
|
||||
var l = 50;
|
||||
if ($context.length) {
|
||||
l += $context.width() || 0;
|
||||
}
|
||||
$driveToolbar.find('.path').css('max-width', 'calc(100vw - '+$tree.width()+'px - '+l+'px)');
|
||||
$driveToolbar.find('.path').css('max-width', 'calc(100vw - '+$tree.width()+'px - 50px)');
|
||||
};
|
||||
|
||||
var getSelectedPaths = function ($element) {
|
||||
|
|
@ -1261,7 +1256,7 @@ define([
|
|||
var createTitle = function (path, noStyle) {
|
||||
if (!path || path.length === 0) { return; }
|
||||
var isTrash = filesOp.isPathIn(path, [TRASH]);
|
||||
var $title = $('<span>', {'class': 'path unselectable'});
|
||||
var $title = $driveToolbar.find('.path');
|
||||
if (APP.mobile()) {
|
||||
return $title;
|
||||
}
|
||||
|
|
@ -1638,10 +1633,8 @@ define([
|
|||
var $toolbar = $driveToolbar;
|
||||
$toolbar.html('');
|
||||
var $leftside = $('<div>', {'class': 'leftside'}).appendTo($toolbar);
|
||||
if (!APP.mobile()) {
|
||||
$leftside.width($tree.width());
|
||||
}
|
||||
$('<div>', {'class': 'rightside'}).appendTo($toolbar);
|
||||
$('<div>', {'class': 'path unselectable'}).appendTo($toolbar);
|
||||
return $toolbar;
|
||||
};
|
||||
|
||||
|
|
@ -1866,7 +1859,7 @@ define([
|
|||
}
|
||||
var $list = $('<ul>').appendTo($dirContent);
|
||||
|
||||
createTitle(path).appendTo($toolbar.find('.rightside'));
|
||||
createTitle(path).appendTo($toolbar.find('.path'));
|
||||
updatePathSize();
|
||||
|
||||
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) {
|
||||
var files = obj.drive;
|
||||
filesOp = FO.init(files, config);
|
||||
|
|
|
|||
Loading…
Reference in New Issue