Move the toolbar and add a breadcrumb
yflory
parent
283bde3435
commit
00efc96919
|
|
@ -14,6 +14,14 @@ body {
|
|||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
.unselectable {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.app-container {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
|
|
@ -28,7 +36,7 @@ body {
|
|||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 10px;
|
||||
padding-left: 0px;
|
||||
}
|
||||
li {
|
||||
padding: 0px 5px;
|
||||
|
|
@ -65,7 +73,7 @@ span.fa-folder-open {
|
|||
#tree {
|
||||
border-right: 1px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
background: #eee;
|
||||
background: #eeeeee;
|
||||
overflow: auto;
|
||||
resize: horizontal;
|
||||
width: 250px;
|
||||
|
|
@ -73,11 +81,12 @@ span.fa-folder-open {
|
|||
max-width: 500px;
|
||||
min-width: 200px;
|
||||
padding: 10px 0px;
|
||||
color: #000000;
|
||||
}
|
||||
#tree li {
|
||||
cursor: auto;
|
||||
}
|
||||
#tree li > span.element:hover {
|
||||
#tree li:hover > span.element {
|
||||
text-decoration: underline;
|
||||
}
|
||||
#tree li.collapsed ul {
|
||||
|
|
@ -95,6 +104,10 @@ span.fa-folder-open {
|
|||
#tree .category2 {
|
||||
margin-top: 2em;
|
||||
}
|
||||
#tree .category2 .root > .fa {
|
||||
min-width: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#tree .fa.expcol {
|
||||
margin-left: -10px;
|
||||
font-size: 14px;
|
||||
|
|
@ -116,6 +129,7 @@ span.fa-folder-open {
|
|||
#tree ul {
|
||||
margin: 0px 0px 0px 10px;
|
||||
list-style: none;
|
||||
padding-left: 10px;
|
||||
}
|
||||
#tree ul li {
|
||||
position: relative;
|
||||
|
|
@ -126,9 +140,9 @@ span.fa-folder-open {
|
|||
top: -0.25em;
|
||||
content: '';
|
||||
display: block;
|
||||
border-left: 1px solid #888;
|
||||
border-left: 1px solid #888888;
|
||||
height: 1em;
|
||||
border-bottom: 1px solid #888;
|
||||
border-bottom: 1px solid #888888;
|
||||
width: 17.5px;
|
||||
}
|
||||
#tree ul li:after {
|
||||
|
|
@ -137,7 +151,7 @@ span.fa-folder-open {
|
|||
bottom: -7px;
|
||||
content: '';
|
||||
display: block;
|
||||
border-left: 1px solid #888;
|
||||
border-left: 1px solid #888888;
|
||||
height: 100%;
|
||||
}
|
||||
#tree ul li.root {
|
||||
|
|
@ -155,7 +169,8 @@ span.fa-folder-open {
|
|||
/* CONTENT */
|
||||
#content {
|
||||
box-sizing: border-box;
|
||||
background: #eee;
|
||||
background: #eeeeee;
|
||||
color: #000000;
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
|
@ -166,12 +181,13 @@ span.fa-folder-open {
|
|||
margin-top: 10px;
|
||||
}
|
||||
#content .info-box {
|
||||
margin: 0px auto;
|
||||
padding: 5px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding-left: 10px;
|
||||
margin: 10px auto;
|
||||
background: #ddddff;
|
||||
border: 1px solid #bbb;
|
||||
border: 1px solid #bbbbbb;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#content .info-box span {
|
||||
cursor: pointer;
|
||||
|
|
@ -184,6 +200,9 @@ span.fa-folder-open {
|
|||
#content li:not(.header):hover .name {
|
||||
text-decoration: underline;
|
||||
}
|
||||
#content div.grid {
|
||||
padding: 20px;
|
||||
}
|
||||
#content div.grid li {
|
||||
display: inline-block;
|
||||
margin: 10px 10px;
|
||||
|
|
@ -212,6 +231,7 @@ span.fa-folder-open {
|
|||
#content .list ul {
|
||||
display: table;
|
||||
width: 100%;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
#content .list li {
|
||||
display: table-row;
|
||||
|
|
@ -222,7 +242,7 @@ span.fa-folder-open {
|
|||
}
|
||||
#content .list li.header {
|
||||
cursor: default;
|
||||
color: #888;
|
||||
color: #888888;
|
||||
}
|
||||
#content .list li.header span:not(.fa) {
|
||||
text-align: left;
|
||||
|
|
@ -231,6 +251,9 @@ span.fa-folder-open {
|
|||
#content .list li.header span.sortdesc {
|
||||
float: right;
|
||||
}
|
||||
#content .list li.header > span {
|
||||
padding: 15px 5px;
|
||||
}
|
||||
#content .list li.header > span.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -278,28 +301,40 @@ span.fa-folder-open {
|
|||
}
|
||||
/* Toolbar */
|
||||
#driveToolbar {
|
||||
background: #ddd;
|
||||
background: #dddddd;
|
||||
color: #555555;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
border-top: 1px solid #cccccc;
|
||||
border-bottom: ;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
z-index: 100;
|
||||
box-sizing: content-box;
|
||||
/* The container <div> - needed to position the dropdown content */
|
||||
}
|
||||
#driveToolbar .newPadContainer {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
}
|
||||
#driveToolbar button.newElement {
|
||||
#driveToolbar button.element {
|
||||
border-radius: 2px;
|
||||
height: 30px;
|
||||
background: #888;
|
||||
color: #eee;
|
||||
background: #888888;
|
||||
color: #eeeeee;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
#driveToolbar button.newElement:hover {
|
||||
#driveToolbar button.element:hover {
|
||||
box-shadow: 0px 0px 2px #000;
|
||||
}
|
||||
#driveToolbar button.new {
|
||||
padding: 0 20px;
|
||||
}
|
||||
#driveToolbar .dropdown-bar {
|
||||
margin: 4px 5px;
|
||||
margin: 5px 5px;
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -320,3 +355,32 @@ span.fa-folder-open {
|
|||
margin-top: -3px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
#driveToolbar .leftside {
|
||||
width: 250px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#driveToolbar .rightside {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
}
|
||||
#driveToolbar .path {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
line-height: 40px;
|
||||
cursor: default;
|
||||
}
|
||||
#driveToolbar .path .element {
|
||||
padding: 5px;
|
||||
border: 1px solid #dddddd;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#driveToolbar .path .element.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
#driveToolbar .path .element.clickable:hover {
|
||||
background: #ffffff;
|
||||
border: 1px solid #888888;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,22 @@
|
|||
@tree-bg: #eee;
|
||||
@tree-fg: #000;
|
||||
@tree-lines-col: #888;
|
||||
|
||||
@content-bg: @tree-bg;
|
||||
@content-fg: @tree-fg;
|
||||
@info-box-bg: #ddddff;
|
||||
@info-box-border: #bbb;
|
||||
@table-header-fg: #888;
|
||||
@table-header-bg: #d8d8d8;
|
||||
|
||||
@toolbar-bg: #ddd;
|
||||
@toolbar-fg: #555;
|
||||
@toolbar-border-col: #ccc;
|
||||
@toolbar-button-bg: #888;
|
||||
@toolbar-button-fg: #eee;
|
||||
@toolbar-path-bg: #fff;
|
||||
@toolbar-path-border: #888;
|
||||
|
||||
/* PAGE */
|
||||
|
||||
html, body {
|
||||
|
|
@ -16,6 +35,15 @@ body {
|
|||
flex-flow: column;
|
||||
}
|
||||
|
||||
.unselectable {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
|
|
@ -32,7 +60,7 @@ body {
|
|||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 10px;
|
||||
padding-left: 0px; // Remove the default padding
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
@ -78,7 +106,7 @@ span {
|
|||
#tree {
|
||||
border-right: 1px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
background: #eee;
|
||||
background: @tree-bg;
|
||||
overflow: auto;
|
||||
resize: horizontal;
|
||||
width: 250px;
|
||||
|
|
@ -86,9 +114,10 @@ span {
|
|||
max-width: 500px;
|
||||
min-width: 200px;
|
||||
padding: 10px 0px;
|
||||
color: @tree-fg;
|
||||
li {
|
||||
cursor: auto;
|
||||
&> span.element:hover {
|
||||
&:hover > span.element {
|
||||
text-decoration: underline;
|
||||
}
|
||||
&.collapsed ul {
|
||||
|
|
@ -106,6 +135,12 @@ span {
|
|||
}
|
||||
.category2 {
|
||||
margin-top: 2em;
|
||||
.root {
|
||||
&> .fa {
|
||||
min-width: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fa.expcol {
|
||||
margin-left: -10px;
|
||||
|
|
@ -130,6 +165,7 @@ span {
|
|||
ul {
|
||||
margin: 0px 0px 0px 10px;
|
||||
list-style: none;
|
||||
padding-left: 10px;
|
||||
li {
|
||||
position: relative;
|
||||
&:before {
|
||||
|
|
@ -138,9 +174,9 @@ span {
|
|||
top: -0.25em;
|
||||
content: '';
|
||||
display: block;
|
||||
border-left: 1px solid #888;
|
||||
border-left: 1px solid @tree-lines-col;
|
||||
height: 1em;
|
||||
border-bottom: 1px solid #888;
|
||||
border-bottom: 1px solid @tree-lines-col;
|
||||
width: 17.5px;
|
||||
}
|
||||
&:after {
|
||||
|
|
@ -149,7 +185,7 @@ span {
|
|||
bottom: -7px;
|
||||
content: '';
|
||||
display: block;
|
||||
border-left: 1px solid #888;
|
||||
border-left: 1px solid @tree-lines-col;
|
||||
height: 100%;
|
||||
}
|
||||
&.root {
|
||||
|
|
@ -173,7 +209,8 @@ span {
|
|||
|
||||
#content {
|
||||
box-sizing: border-box;
|
||||
background: #eee;
|
||||
background: @content-bg;
|
||||
color: @content-fg;
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
|
@ -183,12 +220,13 @@ span {
|
|||
margin-top: 10px;
|
||||
}
|
||||
.info-box {
|
||||
margin: 0px auto;
|
||||
padding: 5px;
|
||||
background: #ddddff;
|
||||
border: 1px solid #bbb;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding-left: 10px;
|
||||
margin: 10px auto;
|
||||
background: @info-box-bg;
|
||||
border: 1px solid @info-box-border;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
span {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
|
|
@ -208,6 +246,7 @@ span {
|
|||
}
|
||||
}
|
||||
div.grid {
|
||||
padding: 20px;
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 10px 10px;
|
||||
|
|
@ -241,6 +280,7 @@ span {
|
|||
ul {
|
||||
display: table;
|
||||
width: 100%;
|
||||
padding: 0px 10px;
|
||||
}
|
||||
li {
|
||||
display: table-row;
|
||||
|
|
@ -252,7 +292,7 @@ span {
|
|||
li {
|
||||
&.header {
|
||||
cursor: default;
|
||||
color: #888;
|
||||
color: @table-header-fg;
|
||||
span {
|
||||
&:not(.fa) {
|
||||
text-align: left;
|
||||
|
|
@ -262,13 +302,14 @@ span {
|
|||
}
|
||||
}
|
||||
&> span {
|
||||
padding: 15px 5px;
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
&.clickable {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: #d8d8d8;
|
||||
background: @table-header-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -316,28 +357,43 @@ span {
|
|||
/* Toolbar */
|
||||
|
||||
#driveToolbar {
|
||||
background: #ddd;
|
||||
background: @toolbar-bg;
|
||||
color: @toolbar-fg;
|
||||
height: 40px;
|
||||
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);
|
||||
z-index: 100;
|
||||
box-sizing: content-box;
|
||||
|
||||
.newPadContainer {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
button.newElement {
|
||||
border-radius: 2px;
|
||||
height: 30px;
|
||||
background: #888;
|
||||
color: #eee;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
font-weight: bold;
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 2px #000;
|
||||
button {
|
||||
&.element {
|
||||
border-radius: 2px;
|
||||
height: 30px;
|
||||
background: @toolbar-button-bg;
|
||||
color: @toolbar-button-fg;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
font-weight: bold;
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 2px #000;
|
||||
}
|
||||
}
|
||||
&.new {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
/* The container <div> - needed to position the dropdown content */
|
||||
.dropdown-bar {
|
||||
margin: 4px 5px;
|
||||
margin: 5px 5px;
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
&.right {
|
||||
|
|
@ -358,6 +414,36 @@ span {
|
|||
margin-top: -3px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.leftside {
|
||||
width: 250px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.rightside {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
}
|
||||
.path {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
line-height: 40px;
|
||||
cursor: default;
|
||||
.element {
|
||||
padding: 5px;
|
||||
border: 1px solid @toolbar-bg;
|
||||
border-radius: 2px;
|
||||
box-sizing: border-box;
|
||||
&.clickable {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: @toolbar-path-bg;
|
||||
border: 1px solid @toolbar-path-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="toolbar" class="toolbar-container"></div>
|
||||
<div id="driveToolbar"></div>
|
||||
<div class="app-container">
|
||||
<div id="tree">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -175,6 +175,7 @@ define([
|
|||
|
||||
var $tree = $iframe.find("#tree");
|
||||
var $content = $iframe.find("#content");
|
||||
var $driveToolbar = $iframe.find("#driveToolbar");
|
||||
var $contextMenu = $iframe.find("#treeContextMenu");
|
||||
var $contentContextMenu = $iframe.find("#contentContextMenu");
|
||||
var $defaultContextMenu = $iframe.find("#defaultContextMenu");
|
||||
|
|
@ -578,6 +579,10 @@ define([
|
|||
onDrag(e.originalEvent, path);
|
||||
});
|
||||
|
||||
$element.on('mousedown', function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// Add drop handlers if we are not in the trash and if the element is a folder
|
||||
if (!droppable || !isFolder) { return; }
|
||||
|
||||
|
|
@ -648,10 +653,10 @@ define([
|
|||
var getFileIcon = function (href) {
|
||||
var $icon = $fileIcon.clone();
|
||||
|
||||
if (href.indexOf('/pad/') !== -1) { $icon = $padIcon.clone() }
|
||||
else if (href.indexOf('/code/') !== -1) { $icon = $codeIcon.clone() }
|
||||
else if (href.indexOf('/slide/') !== -1) { $icon = $slideIcon.clone() }
|
||||
else if (href.indexOf('/poll/') !== -1) { $icon = $pollIcon.clone() }
|
||||
if (href.indexOf('/pad/') !== -1) { $icon = $padIcon.clone(); }
|
||||
else if (href.indexOf('/code/') !== -1) { $icon = $codeIcon.clone(); }
|
||||
else if (href.indexOf('/slide/') !== -1) { $icon = $slideIcon.clone(); }
|
||||
else if (href.indexOf('/poll/') !== -1) { $icon = $pollIcon.clone(); }
|
||||
|
||||
return $icon;
|
||||
};
|
||||
|
|
@ -732,32 +737,41 @@ define([
|
|||
return title;
|
||||
};
|
||||
|
||||
var getPrettyName = function (name) {
|
||||
var pName;
|
||||
switch (name) {
|
||||
case ROOT: pName = ROOT_NAME; break;
|
||||
case TRASH: pName = TRASH_NAME; break;
|
||||
case UNSORTED: pName = UNSORTED_NAME; break;
|
||||
case TEMPLATE: pName = TEMPLATE_NAME; break;
|
||||
case FILES_DATA: pName = FILES_DATA_NAME; break;
|
||||
default: pName = name;
|
||||
}
|
||||
return pName;
|
||||
};
|
||||
|
||||
// Create the title block with the "parent folder" button
|
||||
var createTitle = function (path) {
|
||||
var isTrash = path[0] === TRASH;
|
||||
// Create title and "Up" icon
|
||||
var name = path[path.length - 1];
|
||||
if (name === ROOT && path.length === 1) { name = ROOT_NAME; }
|
||||
else if (name === TRASH && path.length === 1) { name = TRASH_NAME; }
|
||||
else if (name === UNSORTED && path.length === 1) { name = UNSORTED_NAME; }
|
||||
else if (name === TEMPLATE && path.length === 1) { name = TEMPLATE_NAME; }
|
||||
else if (name === FILES_DATA && path.length === 1) { name = FILES_DATA_NAME; }
|
||||
else if (filesOp.isPathInTrash(path)) { name = getTrashTitle(path); }
|
||||
var $title = $('<h1>').text(name);
|
||||
if (path.length > 1) {
|
||||
var $parentFolder = $upIcon.clone().addClass("parentFolder")
|
||||
.click(function() {
|
||||
var newPath = path.slice();
|
||||
newPath.pop();
|
||||
if (isTrash && path.length === 4) {
|
||||
// path = [TRASH, "{DirName}", 0, 'element']
|
||||
// --> parent is TRASH
|
||||
newPath = [TRASH];
|
||||
}
|
||||
module.displayDirectory(newPath);
|
||||
if (!path || path.length === 0) { return; }
|
||||
var isTrash = filesOp.isPathInTrash(path);
|
||||
var $title = $('<span>', {'class': 'path unselectable'});
|
||||
path.forEach(function (p, idx) {
|
||||
if (isTrash && [1,2].indexOf(idx) !== -1) { return; }
|
||||
|
||||
var $span = $('<span>', {'class': 'element'});
|
||||
if (idx < path.length - 1) {
|
||||
$span.addClass('clickable');
|
||||
$span.click(function (e) {
|
||||
module.displayDirectory(path.slice(0, idx + 1));
|
||||
});
|
||||
$title.append($parentFolder);
|
||||
}
|
||||
}
|
||||
|
||||
var name = p;
|
||||
if (idx === 0) { name = getPrettyName(p); }
|
||||
else { $title.append(' > '); }
|
||||
|
||||
$span.text(name).appendTo($title);
|
||||
});
|
||||
return $title;
|
||||
};
|
||||
|
||||
|
|
@ -807,10 +821,10 @@ define([
|
|||
});
|
||||
|
||||
var $listButton = $('<button>', {
|
||||
'class': 'newElement'
|
||||
'class': 'element'
|
||||
}).append($listIcon.clone());
|
||||
var $gridButton = $('<button>', {
|
||||
'class': 'newElement'
|
||||
'class': 'element'
|
||||
}).append($gridIcon.clone());
|
||||
|
||||
$listButton.click(function () {
|
||||
|
|
@ -871,7 +885,7 @@ define([
|
|||
var $block = Cryptpad.createDropdown(dropdownConfig);
|
||||
|
||||
// Custom style:
|
||||
$block.find('button').addClass('newElement');
|
||||
$block.find('button').addClass('new').addClass('element');
|
||||
|
||||
// Handlers
|
||||
$block.find('a.newFolder').click(function () {
|
||||
|
|
@ -1072,9 +1086,11 @@ define([
|
|||
|
||||
// Drive content toolbar
|
||||
var createToolbar = function (path) {
|
||||
var $toolbar = $('<div>', {
|
||||
id: 'driveToolbar'
|
||||
});
|
||||
var $toolbar = $driveToolbar;
|
||||
$toolbar.html('');
|
||||
var $leftside = $('<div>', {'class': 'leftside'}).appendTo($toolbar);
|
||||
$leftside.width($tree.width());
|
||||
var $rightside = $('<div>', {'class': 'rightside'}).appendTo($toolbar);
|
||||
return $toolbar;
|
||||
};
|
||||
|
||||
|
|
@ -1130,7 +1146,7 @@ define([
|
|||
var sortedFiles = sortElements(false, [FILES_DATA], keys, Cryptpad.getLSAttribute(SORT_FILE_BY), !getSortFileDesc(), false, true);
|
||||
sortedFiles.forEach(function (file) {
|
||||
var $icon = getFileIcon(file.href);
|
||||
var $element = $('<li>', { 'class': 'file-element element' })
|
||||
var $element = $('<li>', { 'class': 'file-element element' });
|
||||
addFileData(file.href, file.title, $element, false);
|
||||
$element.prepend($icon).dblclick(function () {
|
||||
openFile(file.href);
|
||||
|
|
@ -1225,7 +1241,6 @@ define([
|
|||
}
|
||||
|
||||
var $toolbar = createToolbar(path);
|
||||
var $title = createTitle(path);
|
||||
var $info = createInfoBox(path);
|
||||
|
||||
var $dirContent = $('<div>', {id: FOLDER_CONTENT_ID});
|
||||
|
|
@ -1236,9 +1251,10 @@ define([
|
|||
}
|
||||
var $list = $('<ul>').appendTo($dirContent);
|
||||
|
||||
var $modeButton = createViewModeButton().appendTo($toolbar);
|
||||
var $modeButton = createViewModeButton().appendTo($toolbar.find('.rightside'));
|
||||
var $title = createTitle(path).appendTo($toolbar.find('.rightside'));
|
||||
if (!filesOp.isPathInTrash(path)) {
|
||||
createNewButton(isInRoot).appendTo($toolbar);
|
||||
createNewButton(isInRoot).appendTo($toolbar.find('.leftside'));
|
||||
}
|
||||
|
||||
var $folderHeader = getFolderListHeader();
|
||||
|
|
@ -1270,7 +1286,8 @@ define([
|
|||
$element.appendTo($list);
|
||||
});
|
||||
}
|
||||
$content.append($toolbar).append($title).append($info).append($dirContent);
|
||||
//$content.append($toolbar).append($title).append($info).append($dirContent);
|
||||
$content.append($info).append($dirContent);
|
||||
appStatus.ready(true);
|
||||
};
|
||||
|
||||
|
|
@ -1290,15 +1307,15 @@ define([
|
|||
};
|
||||
|
||||
var createTreeElement = function (name, $icon, path, draggable, droppable, collapsable, active) {
|
||||
var $name = $('<span>', { 'class': 'folder-element element' }).text(name)
|
||||
.click(function () {
|
||||
module.displayDirectory(path);
|
||||
});
|
||||
var $name = $('<span>', { 'class': 'folder-element element' }).text(name);
|
||||
var $collapse;
|
||||
if (collapsable) {
|
||||
$collapse = $expandIcon.clone();
|
||||
}
|
||||
var $element = $('<li>').append($collapse).append($icon).append($name);
|
||||
var $element = $('<li>').append($collapse).append($icon).append($name)
|
||||
.click(function () {
|
||||
module.displayDirectory(path);
|
||||
});
|
||||
if (draggable) { $element.attr('draggable', true); }
|
||||
if (collapsable) {
|
||||
$element.addClass('collapsed');
|
||||
|
|
@ -1401,19 +1418,9 @@ define([
|
|||
var createTrash = function ($container, path) {
|
||||
var $icon = filesOp.isFolderEmpty(files[TRASH]) ? $trashEmptyIcon.clone() : $trashIcon.clone();
|
||||
var isOpened = filesOp.comparePath(path, currentPath);
|
||||
var $trash = $('<span>', {
|
||||
'class': 'tree-trash element'
|
||||
}).text(TRASH_NAME).prepend($icon)
|
||||
.click(function () {
|
||||
module.displayDirectory(path);
|
||||
});
|
||||
var $trashElement = $('<li>').append($trash);
|
||||
var $trashElement = createTreeElement(TRASH_NAME, $icon, [TRASH], false, true, false, isOpened);
|
||||
$trashElement.addClass('root');
|
||||
$trashElement.data('path', [TRASH]);
|
||||
addDragAndDropHandlers($trashElement, path, true, true);
|
||||
$trashElement.contextmenu(openTrashTreeContextMenu);
|
||||
if (isOpened) { $trash.addClass('active'); }
|
||||
|
||||
var $trashList = $('<ul>', { id: 'trashTree', 'class': 'category2' }).append($trashElement);
|
||||
$container.append($trashList);
|
||||
};
|
||||
|
|
@ -1701,6 +1708,18 @@ define([
|
|||
return false;
|
||||
});
|
||||
|
||||
$iframe.find('#tree').mousedown(function (e) {
|
||||
if (APP.resizeTree) { return; }
|
||||
APP.resizeTree = window.setInterval(function () {
|
||||
$driveToolbar.find('.leftside').width($tree.width());
|
||||
}, 100);
|
||||
});
|
||||
$(ifrw).mouseup(function (e) {
|
||||
window.clearInterval(APP.resizeTree);
|
||||
APP.resizeTree = undefined;
|
||||
});
|
||||
|
||||
|
||||
refresh();
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue