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

Small fixes for the new toolbar

Browse Source
This commit is contained in:
yflory
2017-06-29 15:15:40 +02:00
parent 877c5a8d0e
commit 56a25e1036
12 changed files with 300 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
www/drive/file.less
View File

@@ -171,8 +171,16 @@ span {
white-space: nowrap;
max-width: 500px;
min-width: 200px;
padding: 10px 0px;
padding: 0px;
color: @tree-fg;
display: flex;
flex-flow: column;
max-height: 100%;
.categories-container {
flex: 1;
max-width: 500px;
overflow: auto;
}
img.icon {
margin-bottom: 3px;
margin-left: -2px;
@@ -218,10 +226,20 @@ span {
margin-top: 0;
}
#searchContainer {
margin-bottom: 20px;
text-align: center;
padding: 5px 0;
padding: 0;
input {
width: 80%;
outline-width: 0px;
border-radius: 0;
width: 100%;
border: 1px solid #ccc;
border-right: 0;
height: 32px;
padding: 0 5px;
&:focus {
outline-width: 0px;
}
}
}
.fa.expcol {
@@ -284,7 +302,27 @@ span {
}
}
}
.limit-container {
display: inline-flex;
flex-flow: column-reverse;
width: 100%;
margin-top: 20px;
.upgrade {
padding: 0;
line-height: 25px;
height: 25px;
margin: 0 3px;
border-radius: 0;
}
.cryptpad-limit-bar {
width: ~"calc(100% - 6px)";
height: 25px;
line-height: 25px;
.usage {
height: 100%;
}
}
}
}
/* CONTENT */
@@ -545,17 +583,15 @@ span {
/* Toolbar */
#driveToolbar {
background: @toolbar-bg;
color: @toolbar-fg;
background: lighten(@toolbar-drive-bg, 8%);
color: @toolbar-drive-color;
//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);
z-index: 100;
box-sizing: content-box;
padding: 0 6px;
box-sizing: border-box;
height: 32px;
padding: 0;
display: flex;
flex-flow: row;
@@ -564,8 +600,71 @@ span {
height: 100%;
}
.history {
float: right;
}
.rightside, .leftside {
display: inline-block;
margin: 0;
padding: 0;
.fa {
margin: 0;
}
button {
height: 100%;
padding: 0 10px;
border: none;
border-radius: 0;
box-sizing: border-box;
background: transparent;
font-size: 17px;
color: @toolbar-drive-color;
transition: all 0.15s;
.fa, span {
font-size: 17px;
}
&:hover {
background: @toolbar-drive-bg;
}
&.active {
display: none;
}
}
}
.rightside {
float: right;
& > * {
float: right;
}
#contextButtonsContainer {
display: inline-block;
height: 100%;
}
padding-left: 10px;
}
.leftside {
& > span {
height: 100%;
margin: 0;
}
button {
padding: 0 10px;
.fa {
margin-right: 5px;
}
.buttonTitle {
display: inline-flex;
height: 32px;
align-items: center;
span:not(.fa) {
line-height: 23px;
}
}
}
}
button {
height: 24px;
font: @toolbar-button-font;
span {
font: @toolbar-button-font;
@@ -573,15 +672,6 @@ span {
.fa, &.fa {
font-family: FontAwesome;
}
&.element {
height: 26px;
width: 26px;
padding: 0;
box-sizing: border-box;
}
&.new {
padding: 0 5px;
}
}
/* The container <div> - needed to position the dropdown content */
.dropdown-bar {
@@ -590,10 +680,10 @@ span {
position: relative;
display: inline-block;
}
.right {
/*.right {
float: right;
/* Right-side buttons */
button {
/* button {
display: inline-block;
&.active {
display: none;
@@ -602,28 +692,16 @@ span {
margin-right: 0px;
}
}
}
}*/
.dropdown-bar-content {
margin-right: 2px;
}
.leftside {
width: auto;
margin: 0;
padding: 0;
display: inline-block;
}
.rightside {
margin: 0;
padding: 0;
display: inline-block;
float: right;
}
.path {
flex: 1;
width: 100%;
height: 30px;
line-height: 30px;
height: 32px;
line-height: 32px;
cursor: default;
width: auto;
overflow: hidden;
@@ -632,26 +710,21 @@ span {
max-width: 100%;
text-align: left;
.element {
font-size: 17px;
padding: 5px;
border: 1px solid @toolbar-bg;
border-radius: 2px;
border: 0;
background: darken(@toolbar-drive-bg, 10%);
color: @toolbar-drive-color;
box-sizing: border-box;
transition: all 0.15s;
&.clickable {
cursor: pointer;
&:hover {
background: @toolbar-path-bg;
border: 1px solid @toolbar-path-border;
background: darken(@toolbar-drive-bg, 15%);
}
}
}
}
#contextButtonsContainer {
float: right;
margin: 2px;
button {
vertical-align: top;
}
}
}

2
www/drive/inner.js
View File

@@ -1,7 +1,7 @@
define([
'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
'css!/drive/file.css',
'less!/drive/file.less',
'less!/customize/src/less/cryptpad.less',
'less!/customize/src/less/toolbar.less',
], function () {});

91
www/drive/main.js
View File

@@ -158,13 +158,6 @@ define([
//var $folderOpenedIcon = $('<span>', {"class": "fa fa-folder-open folder"});
var $folderOpenedIcon = $('<img>', {src: "/customize/images/icons/folderOpen.svg", "class": "folder icon"});
var $folderOpenedEmptyIcon = $folderOpenedIcon.clone();
var $fileIcon = $('<span>', {"class": "fa fa-file-text-o file icon"});
var $fileAppIcon = $('<span>', {"class": "fa fa-file-text-o file icon fileColor"});
var $padIcon = $('<span>', {"class": "fa fa-file-word-o file icon padColor"});
var $codeIcon = $('<span>', {"class": "fa fa-file-code-o file icon codeColor"});
var $slideIcon = $('<span>', {"class": "fa fa-file-powerpoint-o file icon slideColor"});
var $pollIcon = $('<span>', {"class": "fa fa-calendar file icon pollColor"});
var $whiteboardIcon = $('<span>', {"class": "fa fa-paint-brush whiteboardColor"});
//var $upIcon = $('<span>', {"class": "fa fa-arrow-circle-up"});
var $unsortedIcon = $('<span>', {"class": "fa fa-files-o"});
var $templateIcon = $('<span>', {"class": "fa fa-cubes"});
@@ -172,8 +165,8 @@ define([
var $trashEmptyIcon = $('<span>', {"class": "fa fa-trash-o"});
//var $collapseIcon = $('<span>', {"class": "fa fa-minus-square-o expcol"});
var $expandIcon = $('<span>', {"class": "fa fa-plus-square-o expcol"});
var $listIcon = $('<span>', {"class": "fa fa-list"});
var $gridIcon = $('<span>', {"class": "fa fa-th"});
var $listIcon = $('<button>', {"class": "fa fa-list"});
var $gridIcon = $('<button>', {"class": "fa fa-th-large"});
var $sortAscIcon = $('<span>', {"class": "fa fa-angle-up sortasc"});
var $sortDescIcon = $('<span>', {"class": "fa fa-angle-down sortdesc"});
var $closeIcon = $('<span>', {"class": "fa fa-window-close"});
@@ -1141,7 +1134,7 @@ define([
};
var getFileIcon = function (id) {
var $icon = $fileIcon.clone();
var $icon = Cryptpad.getIcon();
var data = filesOp.getFileData(id);
if (!data) { return $icon; }
@@ -1149,15 +1142,16 @@ define([
var href = data.href;
if (!href) { return $icon; }
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(); }
else if (href.indexOf('/whiteboard/') !== -1) { $icon = $whiteboardIcon.clone(); }
else if (href.indexOf('/file/') !== -1) { $icon = $fileAppIcon.clone(); }
if (href.indexOf('/pad/') !== -1) { $icon = Cryptpad.getIcon('pad'); }
else if (href.indexOf('/code/') !== -1) { $icon = Cryptpad.getIcon('code'); }
else if (href.indexOf('/slide/') !== -1) { $icon = Cryptpad.getIcon('slide'); }
else if (href.indexOf('/poll/') !== -1) { $icon = Cryptpad.getIcon('poll'); }
else if (href.indexOf('/whiteboard/') !== -1) { $icon = Cryptpad.getIcon('whiteboard'); }
else if (href.indexOf('/file/') !== -1) { $icon = Cryptpad.getIcon('file'); }
return $icon;
};
var getIcon = Cryptpad.getIcon;
// Create the "li" element corresponding to the file/folder located in "path"
var createElement = function (path, elPath, root, isFolder) {
@@ -1285,7 +1279,10 @@ define([
}
if (idx === 0) { name = getPrettyName(p); }
else { $title.append(' > '); }
else {
var $span2 = $('<span>', {'class': 'element'}).text(' > ');
$title.append($span2);
}
$span.text(name).appendTo($title);
});
@@ -1335,17 +1332,13 @@ define([
};
// Create the button allowing the user to switch from list to icons modes
var createViewModeButton = function () {
var $block = $('<div>', {
var createViewModeButton = function ($container) {
/*var $block = $('<div>', {
'class': 'dropdown-bar right changeViewModeContainer'
});
});*/
var $listButton = $('<button>', {
'class': 'element btn btn-secondary'
}).append($listIcon.clone());
var $gridButton = $('<button>', {
'class': 'element btn btn-secondary'
}).append($gridIcon.clone());
var $listButton = $listIcon.clone().addClass('element');
var $gridButton = $gridIcon.clone().addClass('element');
$listButton.click(function () {
$gridButton.removeClass('active');
@@ -1367,11 +1360,10 @@ define([
} else {
$gridButton.addClass('active');
}
$block.append($listButton).append($gridButton);
return $block;
$container.append($listButton).append($gridButton);
};
var createNewButton = function (isInRoot) {
var createNewButton = function (isInRoot, $container) {
if (!APP.editable) { return; }
if (!APP.loggedIn) { return; } // Anonymous users can use the + menu in the toolbar
@@ -1381,13 +1373,13 @@ define([
options.push({
tag: 'a',
attributes: {'class': 'newFolder'},
content: Messages.fm_folder
content: $('<div>').append($folderIcon.clone()).html() + Messages.fm_folder
});
options.push({tag: 'hr'});
options.push({
tag: 'a',
attributes: {'class': 'uploadFile'},
content: Messages.uploadButton
content: $('<div>').append(getIcon('file')).html() + Messages.uploadButton
});
options.push({tag: 'hr'});
}
@@ -1405,20 +1397,20 @@ define([
options.push({
tag: 'a',
attributes: attributes,
content: Messages.type[type]
content: $('<div>').append(getIcon(type)).html() + Messages.type[type]
});
});
var $plusIcon = $('<div>').append($('<span>', {'class': 'fa fa-plus'}));
var dropdownConfig = {
text: $plusIcon.html() + Messages.fm_newButton,
text: $plusIcon.html() + '<span>'+Messages.fm_newButton+'</span>',
options: options
};
var $block = Cryptpad.createDropdown(dropdownConfig);
// Custom style:
$block.find('button').addClass('btn').addClass('btn-primary').addClass('new');
$block.find('button').addClass('new');
$block.find('button').attr('title', Messages.fm_newButtonTitle);
// Handlers
@@ -1456,7 +1448,7 @@ define([
window.open('/' + type + '/');
});
return $block;
$container.append($block);
};
var hideNewButton = function () {
@@ -1633,7 +1625,8 @@ define([
$toolbar.html('');
$('<div>', {'class': 'leftside'}).appendTo($toolbar);
$('<div>', {'class': 'path unselectable'}).appendTo($toolbar);
$('<div>', {'class': 'rightside'}).appendTo($toolbar);
var $rightside = $('<div>', {'class': 'rightside'}).appendTo($toolbar);
if (APP.$hist) { $rightside.append(APP.$hist); }
return $toolbar;
};
@@ -1854,12 +1847,12 @@ define([
if (mode) {
$dirContent.addClass(getViewModeClass());
}
createViewModeButton().appendTo($toolbar.find('.rightside'));
createViewModeButton($toolbar.find('.rightside'));
}
var $list = $('<ul>').appendTo($dirContent);
// NewButton can be undefined if we're in read only mode
$toolbar.find('.leftside').append(createNewButton(isInRoot));
createNewButton(isInRoot, $toolbar.find('.leftside'));
createTitle(path).appendTo($toolbar.find('.path'));
@@ -2124,10 +2117,15 @@ define([
var s = $tree.scrollTop() || 0;
$tree.html('');
if (displayedCategories.indexOf(SEARCH) !== -1) { createSearch($tree); }
if (displayedCategories.indexOf(ROOT) !== -1) { createTree($tree, [ROOT]); }
if (displayedCategories.indexOf(TEMPLATE) !== -1) { createTemplate($tree, [TEMPLATE]); }
if (displayedCategories.indexOf(FILES_DATA) !== -1) { createAllFiles($tree, [FILES_DATA]); }
if (displayedCategories.indexOf(TRASH) !== -1) { createTrash($tree, [TRASH]); }
var $div = $('<div>', {'class': 'categories-container'}).appendTo($tree);
if (displayedCategories.indexOf(ROOT) !== -1) { createTree($div, [ROOT]); }
if (displayedCategories.indexOf(TEMPLATE) !== -1) { createTemplate($div, [TEMPLATE]); }
if (displayedCategories.indexOf(FILES_DATA) !== -1) { createAllFiles($div, [FILES_DATA]); }
if (displayedCategories.indexOf(TRASH) !== -1) { createTrash($div, [TRASH]); }
//$tree.append($('<div>', {'class': 'filler'}));
$tree.append(APP.$limit);
$tree.scrollTop(s);
};
@@ -2718,7 +2716,6 @@ define([
var $rightside = toolbar.$rightside;
$rightside.html(''); // Remove the drawer if we don't use it to hide the toolbar
var $leftside = toolbar.$leftside;
var $userBlock = toolbar.$userAdmin;
APP.$displayName = APP.$bar.find('.' + Toolbar.constants.username);
@@ -2733,8 +2730,7 @@ define([
/* add the usage */
Cryptpad.createUsageBar(function (err, $limitContainer) {
if (err) { return void logError(err); }
$leftside.html('');
$leftside.append($limitContainer);
APP.$limit = $limitContainer;
}, true);
/* add a history button */
@@ -2752,8 +2748,9 @@ define([
$toolbar: APP.$bar,
href: window.location.origin + window.location.pathname + '#' + APP.hash
};
var $hist = Cryptpad.createButton('history', true, {histConfig: histConfig});
if (APP.loggedIn) { $rightside.append($hist); }
APP.$hist = Cryptpad.createButton('history', true, {histConfig: histConfig});
APP.$hist.addClass('element');
//if (APP.loggedIn) { $rightside.append($hist); } TODO
if (!readOnly && !APP.loggedIn) {
var $backupButton = Cryptpad.createButton('', true).removeClass('fa').removeClass('fa-question').addClass('cryptpad-backup');