Move the toolbar and add a breadcrumb

pull/1/head
yflory 8 years ago
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,18 +357,28 @@ 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 {
button {
&.element {
border-radius: 2px;
height: 30px;
background: #888;
color: #eee;
background: @toolbar-button-bg;
color: @toolbar-button-fg;
font-size: 16px;
border: none;
font-weight: bold;
@ -335,9 +386,14 @@ span {
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…
Cancel
Save