Small fixes for the new toolbar

pull/1/head
yflory 8 years ago
parent 877c5a8d0e
commit 56a25e1036

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

@ -577,7 +577,7 @@ noscript {
line-height: 24px; line-height: 24px;
vertical-align: middle; vertical-align: middle;
.usage { .usage {
height: 24px; height: 100%;
display: inline-block; display: inline-block;
background: blue; background: blue;
position: absolute; position: absolute;

@ -32,6 +32,9 @@
z-index: 1000; z-index: 1000;
max-height: 300px; max-height: 300px;
overflow-y: auto; overflow-y: auto;
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 16px;
line-height: 1em;
&.left { &.left {
right: 0; right: 0;
@ -45,7 +48,7 @@
color: black; color: black;
padding: 5px 16px; padding: 5px 16px;
text-decoration: none; text-decoration: none;
display: block; display: flex;
cursor: pointer; cursor: pointer;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
@ -53,6 +56,16 @@
user-select: none; user-select: none;
float: none; float: none;
text-align: left; text-align: left;
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 16px;
line-height: 1em;
.fa {
width: 20px;
text-align: center;
margin-right: 5px;
}
&:hover { &:hover {
background-color: #f1f1f1; background-color: #f1f1f1;
@ -77,7 +90,13 @@
margin: 0; margin: 0;
white-space: normal; white-space: normal;
text-align: left; text-align: left;
color: black;
font-size: 14px;
* {
font-size: 14px;
}
h2 { h2 {
color: black;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
background-color: #EEEEEE; background-color: #EEEEEE;

@ -28,16 +28,38 @@
#cke_1_contents { #cke_1_contents {
margin-top: -1px; margin-top: -1px;
display: flex; display: flex;
overflow: visible;
} }
.padColor { color: @toolbar-pad-bg; }
.codeColor { color: @toolbar-code-bg; }
.slideColor { color: @toolbar-slide-bg; }
.pollColor { color: @toolbar-poll-bg; }
.fileColor { color: @toolbar-file-bg; }
.whiteboardColor { color: @toolbar-whiteboard-bg; }
.driveColor { color: @toolbar-drive-bg; }
.defaultColor { color: @toolbar-default-bg; }
.userlist-drawer { .userlist-drawer {
font: normal normal normal 14px Arial,Helvetica,Tahoma,Verdana,Sans-Serif; font: normal normal normal 14px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
min-width: 175px;
width: 175px; width: 175px;
display: block; display: block;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
.close {
position: absolute;
margin-top: -11px;
margin-left: 149px;
font-size: 15px;
opacity: 0.5;
cursor: pointer;
&:hover {
opacity: 1;
}
}
h2 { h2 {
color: inherit; color: inherit;
font-size: 1.2em; font-size: 1.2em;
@ -96,24 +118,20 @@ body {
} }
.cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside, .drawer-content { .cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside, .drawer-content {
background-color: lighten(@bgcolor, 8%); background-color: lighten(@bgcolor, 8%);
button:hover { button:hover, button.active {
background-color: @bgcolor; background-color: @bgcolor;
} }
} }
.hoverable:hover { .hoverable:hover {
.editable { .editable, .pencilIcon {
cursor: text; cursor: text;
border: 1px solid darken(@bgcolor, 15%); border: 1px solid darken(@bgcolor, 15%);
background: darken(@bgcolor, 10%); background: darken(@bgcolor, 10%);
transition: all 0.15s;
color: @color; color: @color;
} }
.pencilIcon { .editable {
border: 1px solid darken(@bgcolor, 15%); cursor: text;
background: darken(@bgcolor, 10%);
color: @color;
&:hover {
background: darken(@bgcolor, 5%);
}
} }
} }
.saveIcon { .saveIcon {
@ -129,7 +147,7 @@ body {
background: darken(@bgcolor, 10%); background: darken(@bgcolor, 10%);
color: @color; color: @color;
} }
.dropdown-bar-content { /*.dropdown-bar-content {
background: darken(@bgcolor, 5%); background: darken(@bgcolor, 5%);
border: 1px solid @color; border: 1px solid @color;
color: @color; color: @color;
@ -155,7 +173,7 @@ body {
background-color: @bgcolor; background-color: @bgcolor;
} }
} }
} }*/
} }
} }
@ -229,9 +247,6 @@ body {
margin: 0; margin: 0;
background: transparent; background: transparent;
} }
.dropdown-bar-content {
line-height: 14px;
}
} }
.separator { .separator {
@ -248,6 +263,7 @@ body {
} }
button { button {
transition: all 0.15s;
.unselectable(); .unselectable();
&#shareButton, &.buttonSuccess { &#shareButton, &.buttonSuccess {
// Bootstrap 4 colors // Bootstrap 4 colors
@ -297,14 +313,9 @@ body {
} }
} }
.cryptpad-toolbar-rightside button, .cryptpad-toolbar-leftside button { .cryptpad-toolbar-rightside button, .cryptpad-toolbar-leftside button {
//background-color: #fff;
//border-color: #ccc;
background: transparent; background: transparent;
&:hover { &:hover {
//color: #292b2c;
background-color: rgba(50,50,50,0.3); background-color: rgba(50,50,50,0.3);
//background-color: #e6e6e6;
border-color: #adadad;
} }
} }
@ -603,7 +614,7 @@ body {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
line-height: @toolbar-top-height; line-height: @toolbar-top-height;
margin: 0 20px; margin: 0 10px;
.title, .pencilIcon, .saveIcon { .title, .pencilIcon, .saveIcon {
font-size: 25px; font-size: 25px;
vertical-align: middle; vertical-align: middle;
@ -671,6 +682,8 @@ body {
} }
order: 2; order: 2;
text-align: center; text-align: center;
font-size: 32px;
margin-left: 10px;
&> button { &> button {
display: flex; display: flex;
align-items: center; align-items: center;
@ -696,10 +709,6 @@ body {
color: inherit; color: inherit;
} }
} }
.dropdown-bar-content {
font-size: 12px;
line-height: 14px;
}
} }
.cryptpad-link { .cryptpad-link {
display: inline-flex; display: inline-flex;
@ -728,6 +737,7 @@ body {
display: inline-block; display: inline-block;
order: 5; order: 5;
line-height: @toolbar-top-height; line-height: @toolbar-top-height;
color: white;
&> * { &> * {
display: inline-block; display: inline-block;
height: 100%; height: 100%;
@ -739,13 +749,15 @@ body {
cursor: pointer; cursor: pointer;
} }
.cryptpad-user-dropdown { .cryptpad-user-dropdown {
margin-left: 20px; z-index: 10000;
//margin-left: 20px;
height: 64px; height: 64px;
width: 64px; width: 64px;
padding: 0px; padding: 0px;
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
background-color: rgba(0,0,0,0.3); background-color: rgba(0,0,0,0.3);
transition: all 0.15s;
&:hover { &:hover {
background-color: rgba(0,0,0,0.4); background-color: rgba(0,0,0,0.4);
} }
@ -838,6 +850,9 @@ body {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
z-index:1000; z-index:1000;
.fa {
font-size: 17px;
}
&> span { &> span {
box-sizing: border-box; box-sizing: border-box;
width: 150px; width: 150px;

@ -241,7 +241,7 @@ define(function () {
out.fm_templateName = "Modèles"; out.fm_templateName = "Modèles";
out.fm_searchName = "Recherche"; out.fm_searchName = "Recherche";
out.fm_searchPlaceholder = "Rechercher..."; out.fm_searchPlaceholder = "Rechercher...";
out.fm_newButton = "Ajouter à ce dossier"; out.fm_newButton = "Nouveau";
out.fm_newButtonTitle = "Créer un nouveau pad ou un dossier, importer un fichier dans le dossier courant"; out.fm_newButtonTitle = "Créer un nouveau pad ou un dossier, importer un fichier dans le dossier courant";
out.fm_newFolder = "Nouveau dossier"; out.fm_newFolder = "Nouveau dossier";
out.fm_newFile = "Nouveau pad"; out.fm_newFile = "Nouveau pad";

@ -244,7 +244,7 @@ define(function () {
out.fm_templateName = "Templates"; out.fm_templateName = "Templates";
out.fm_searchName = "Search"; out.fm_searchName = "Search";
out.fm_searchPlaceholder = "Search..."; out.fm_searchPlaceholder = "Search...";
out.fm_newButton = "Add to this folder"; out.fm_newButton = "New";
out.fm_newButtonTitle = "Create a new pad or folder, import a file in the current folder"; out.fm_newButtonTitle = "Create a new pad or folder, import a file in the current folder";
out.fm_newFolder = "New folder"; out.fm_newFolder = "New folder";
out.fm_newFile = "New pad"; out.fm_newFile = "New pad";

@ -263,5 +263,28 @@ define([
}; };
}; };
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"});
UI.getIcon = function (type) {
var $icon;
switch(type) {
case 'pad': $icon = $padIcon.clone(); break;
case 'file': $icon = $fileAppIcon.clone(); break;
case 'code': $icon = $codeIcon.clone(); break;
case 'slide': $icon = $slideIcon.clone(); break;
case 'poll': $icon = $pollIcon.clone(); break;
case 'whiteboard': $icon = $whiteboardIcon.clone(); break;
default: $icon = $fileIcon.clone();
}
return $icon;
};
return UI; return UI;
}); });

@ -66,6 +66,7 @@ define([
common.errorLoadingScreen = UI.errorLoadingScreen; common.errorLoadingScreen = UI.errorLoadingScreen;
common.notify = UI.notify; common.notify = UI.notify;
common.unnotify = UI.unnotify; common.unnotify = UI.unnotify;
common.getIcon = UI.getIcon;
// import common utilities for export // import common utilities for export
common.find = Util.find; common.find = Util.find;
@ -850,8 +851,9 @@ define([
common.createUsageBar = function (cb) { common.createUsageBar = function (cb) {
// getPinnedUsage updates common.account.usage, and other values // getPinnedUsage updates common.account.usage, and other values
// so we can just use those and only check for errors // so we can just use those and only check for errors
var $container = $('<span>', {'class':'limit-container'});
var todo = function (err) { var todo = function (err) {
var $container = $('<span>', {'class':'limit-container'}); $container.html('');
if (err) { if (err) {
return void window.setTimeout(function () { return void window.setTimeout(function () {
common.getPinnedUsage(todo); common.getPinnedUsage(todo);
@ -867,8 +869,7 @@ define([
var $limit = $('<span>', {'class': 'cryptpad-limit-bar'}).appendTo($container); var $limit = $('<span>', {'class': 'cryptpad-limit-bar'}).appendTo($container);
var quota = usage/limit; var quota = usage/limit;
var width = Math.floor(Math.min(quota, 1)*$limit.width()); // the bar is 200px width var $usage = $('<span>', {'class': 'usage'}).css('width', quota*100+'%');
var $usage = $('<span>', {'class': 'usage'}).css('width', width+'px');
var makeDonateButton = function () { var makeDonateButton = function () {
$('<a>', { $('<a>', {
@ -921,9 +922,9 @@ define([
window.setTimeout(function () { window.setTimeout(function () {
common.getPinnedUsage(todo); common.getPinnedUsage(todo);
}, LIMIT_REFRESH_RATE); }, LIMIT_REFRESH_RATE);
cb(err, $container);
}; };
common.getPinnedUsage(todo); common.getPinnedUsage(todo);
cb(null, $container);
}; };
var prepareFeedback = common.prepareFeedback = function (key) { var prepareFeedback = common.prepareFeedback = function (key) {
@ -1104,8 +1105,7 @@ define([
} }
button = $('<button>', { button = $('<button>', {
title: Messages.historyButton, title: Messages.historyButton,
'class': "fa fa-history", 'class': "fa fa-history history",
style: 'font:'+size+' FontAwesome'
}); });
if (data.histConfig) { if (data.histConfig) {
button button

@ -71,7 +71,7 @@ define([
$('<span>', {'class': STATE_CLS}).hide().appendTo($userContainer); $('<span>', {'class': STATE_CLS}).hide().appendTo($userContainer);
$('<span>', {'class': LAG_CLS}).hide().appendTo($userContainer); $('<span>', {'class': LAG_CLS}).hide().appendTo($userContainer);
$('<span>', {'class': LIMIT_CLS}).hide().appendTo($userContainer); $('<span>', {'class': LIMIT_CLS}).hide().appendTo($userContainer);
//$('<span>', {'class': NEWPAD_CLS + ' dropdown-bar'}).hide().appendTo($userContainer); $('<span>', {'class': NEWPAD_CLS + ' dropdown-bar'}).hide().appendTo($userContainer);
$('<span>', {'class': USERADMIN_CLS + ' dropdown-bar'}).hide().appendTo($userContainer); $('<span>', {'class': USERADMIN_CLS + ' dropdown-bar'}).hide().appendTo($userContainer);
$toolbar.append($topContainer) $toolbar.append($topContainer)
@ -177,9 +177,8 @@ define([
var numberOfViewUsers = numberOfUsers - userList.length; var numberOfViewUsers = numberOfUsers - userList.length;
// Update the userlist // Update the userlist
var $usersTitle = $('<h2>').text(Messages.users); var $editUsers = $userlistContent.find('.' + USERLIST_CLS).html('');
var $editUsers = $userlistContent;
$editUsers.html('').append($usersTitle);
var $editUsersList = $('<div>', {'class': 'userlist-others'}); var $editUsersList = $('<div>', {'class': 'userlist-others'});
@ -248,7 +247,10 @@ define([
throw new Error("You must provide a `userList` object to display the userlist"); throw new Error("You must provide a `userList` object to display the userlist");
} }
var $content = $('<div>', {'class': 'userlist-drawer'}); var $content = $('<div>', {'class': 'userlist-drawer'});
var $closeIcon = $('<span>', {"class": "fa fa-window-close close"}).appendTo($content);
$('<h2>').text(Messages.users).appendTo($content);
$('<p>', {'class': USERLIST_CLS}).appendTo($content); $('<p>', {'class': USERLIST_CLS}).appendTo($content);
toolbar.userlistContent = $content; toolbar.userlistContent = $content;
var $container = $('<span>', {id: 'userButtons'}); var $container = $('<span>', {id: 'userButtons'});
@ -263,13 +265,39 @@ define([
config.$contentContainer.prepend($content); config.$contentContainer.prepend($content);
} }
var $ck = config.$container.find('.cke_toolbox_main');
var hide = function () {
$content.hide();
$button.removeClass('active');
$ck.css({
'display': '',
'padding-left': '',
'margin-bottom': ''
});
};
var show = function () {
$content.show();
$button.addClass('active');
$ck.css({
'display': 'inline-block',
'padding-left': '175px',
'margin-bottom': '-3px'
});
$content.css('margin-top', (-$ck.height())+'px');
};
$closeIcon.click(hide);
$button.click(function () { $button.click(function () {
$content.toggle(); var visible = $content.is(':visible');
if (visible) { hide(); }
else { show(); }
Cryptpad.setAttribute('userlist-drawer', $content.is(':visible')); Cryptpad.setAttribute('userlist-drawer', $content.is(':visible'));
}); });
Cryptpad.getAttribute('userlist-drawer', function (err, val) { Cryptpad.getAttribute('userlist-drawer', function (err, val) {
if (val === false) { $content.hide(); } if (val === false) { return void hide(); }
show();
}); });
return $container; return $container;
@ -655,9 +683,10 @@ define([
}; };
var createNewPad = function (toolbar) { var createNewPad = function (toolbar) {
var $newPad = $('<span>', { /*var $newPad = $('<span>', {
'class': NEWPAD_CLS + " dropdown-bar" 'class': NEWPAD_CLS + " dropdown-bar"
}).appendTo(toolbar.$top); }).appendTo(toolbar.$top);*/
var $newPad = toolbar.$top.find('.'+NEWPAD_CLS).show();
var pads_options = []; var pads_options = [];
Config.availablePadTypes.forEach(function (p) { Config.availablePadTypes.forEach(function (p) {
@ -670,17 +699,18 @@ define([
'target': '_blank', 'target': '_blank',
'href': '/' + p + '/', 'href': '/' + p + '/',
}, },
content: Messages.type[p] content: $('<div>').append(Cryptpad.getIcon(p)).html() + Messages.type[p]
}); });
}); });
var dropdownConfig = { var dropdownConfig = {
text: '', // Button initial text text: '', // Button initial text
options: pads_options, // Entries displayed in the menu options: pads_options, // Entries displayed in the menu
container: $newPad container: $newPad,
left: true
}; };
var $newPadBlock = Cryptpad.createDropdown(dropdownConfig); var $newPadBlock = Cryptpad.createDropdown(dropdownConfig);
$newPadBlock.find('button').attr('title', Messages.newButtonTitle); $newPadBlock.find('button').attr('title', Messages.newButtonTitle);
$newPadBlock.find('button').addClass('fa fa-plus'); $newPadBlock.find('button').addClass('fa fa-th');
return $newPadBlock; return $newPadBlock;
}; };

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

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

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

Loading…
Cancel
Save