One toolbar color per app

pull/1/head
yflory 8 years ago
parent 5a248db267
commit 59fb5bd8be

@ -21,7 +21,9 @@
} }
} }
} }
.cke_reset_all * {
color: inherit;
}
.cryptpad-toolbar { .cryptpad-toolbar {
@toolbar-green: #5cb85c; @toolbar-green: #5cb85c;
@ -29,7 +31,37 @@
padding: 0px 6px; padding: 0px 6px;
//background-color: #BBBBFF; //background-color: #BBBBFF;
background-color: #FF0073; background-color: @toolbar-default-bg;
color: @toolbar-default-color;
&.pad {
background-color: @toolbar-pad-bg;
color: @toolbar-pad-color;
}
&.code {
background-color: @toolbar-code-bg;
color: @toolbar-code-color;
}
&.slide {
background-color: @toolbar-slide-bg;
color: @toolbar-slide-color;
}
&.poll {
background-color: @toolbar-poll-bg;
color: @toolbar-poll-color;
}
&.whiteboard {
background-color: @toolbar-whiteboard-bg;
color: @toolbar-whiteboard-color;
}
&.drive {
background-color: @toolbar-drive-bg;
color: @toolbar-drive-color;
}
&.file {
background-color: @toolbar-file-bg;
color: @toolbar-file-color;
}
.fa { .fa {
font: normal normal normal 14px/1 FontAwesome; font: normal normal normal 14px/1 FontAwesome;
@ -39,7 +71,6 @@
.unselectable; .unselectable;
font: normal normal normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif; font: normal normal normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
color: #000;
width: 100%; width: 100%;
z-index: 9001; z-index: 9001;
@ -48,10 +79,6 @@
} }
button { button {
font: @toolbar-button-font;
* {
font: @toolbar-button-font;
}
&#shareButton, &.buttonSuccess { &#shareButton, &.buttonSuccess {
// Bootstrap 4 colors // Bootstrap 4 colors
color: #fff; color: #fff;
@ -96,6 +123,11 @@
color: #000; color: #000;
background-color: #fff; background-color: #fff;
border-color: #ccc; border-color: #ccc;
font: @toolbar-button-font;
* {
color: #000;
font: @toolbar-button-font;
}
&:hover { &:hover {
color: #292b2c; color: #292b2c;
background-color: #e6e6e6; background-color: #e6e6e6;

@ -74,6 +74,25 @@
@toolbar-gradient-end: #DDDDDD; @toolbar-gradient-end: #DDDDDD;
@toolbar-button-font: 12px Ubuntu, Arial, sans-serif; @toolbar-button-font: 12px Ubuntu, Arial, sans-serif;
// Toolbar
@toolbar-pad-bg: #1c4fa0;
@toolbar-pad-color: #fff;
@toolbar-slide-bg: #a01c1c;
@toolbar-slide-color: #fff;
@toolbar-code-bg: #ffae00;
@toolbar-code-color: #000;
@toolbar-poll-bg: #006304;
@toolbar-poll-color: #fff;
@toolbar-whiteboard-bg: #570063;
@toolbar-whiteboard-color: #fff;
@toolbar-drive-bg: #0087ff;
@toolbar-drive-color: #fff;
@toolbar-file-bg: #ccffa0;
@toolbar-file-color: #000;
@toolbar-default-bg: #fff;
@toolbar-default-color: #000;
@topbar-back: #fff; @topbar-back: #fff;
@topbar-color: #000; @topbar-color: #000;
@topbar-button-bg: #2E9AFE; @topbar-button-bg: #2E9AFE;

@ -98,10 +98,14 @@
.toolbar-container .cryptpad-toolbar select { .toolbar-container .cryptpad-toolbar select {
box-sizing: border-box; box-sizing: border-box;
} }
.cke_reset_all * {
color: inherit;
}
.cryptpad-toolbar { .cryptpad-toolbar {
box-sizing: border-box; box-sizing: border-box;
padding: 0px 6px; padding: 0px 6px;
background-color: #FF0073; background-color: #fff;
color: #000;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-khtml-user-select: none; -khtml-user-select: none;
@ -109,10 +113,37 @@
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
font: normal normal normal 12px Arial, Helvetica, Tahoma, Verdana, Sans-Serif; font: normal normal normal 12px Arial, Helvetica, Tahoma, Verdana, Sans-Serif;
color: #000;
width: 100%; width: 100%;
z-index: 9001; z-index: 9001;
} }
.cryptpad-toolbar.pad {
background-color: #1c4fa0;
color: #fff;
}
.cryptpad-toolbar.code {
background-color: #ffae00;
color: #000;
}
.cryptpad-toolbar.slide {
background-color: #a01c1c;
color: #fff;
}
.cryptpad-toolbar.poll {
background-color: #006304;
color: #fff;
}
.cryptpad-toolbar.whiteboard {
background-color: #570063;
color: #fff;
}
.cryptpad-toolbar.drive {
background-color: #0087ff;
color: #fff;
}
.cryptpad-toolbar.file {
background-color: #ccffa0;
color: #000;
}
.cryptpad-toolbar .fa { .cryptpad-toolbar .fa {
font: normal normal normal 14px/1 FontAwesome; font: normal normal normal 14px/1 FontAwesome;
font-family: FontAwesome; font-family: FontAwesome;
@ -121,14 +152,11 @@
float: right; float: right;
} }
.cryptpad-toolbar button { .cryptpad-toolbar button {
font: 12px Ubuntu, Arial, sans-serif;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: .25rem; border-radius: .25rem;
color: #000; color: #000;
background-color: #fff; background-color: #fff;
border-color: #ccc; border-color: #ccc;
}
.cryptpad-toolbar button * {
font: 12px Ubuntu, Arial, sans-serif; font: 12px Ubuntu, Arial, sans-serif;
} }
.cryptpad-toolbar button#shareButton, .cryptpad-toolbar button#shareButton,
@ -174,6 +202,10 @@
.cryptpad-toolbar button.hidden { .cryptpad-toolbar button.hidden {
display: none; display: none;
} }
.cryptpad-toolbar button * {
color: #000;
font: 12px Ubuntu, Arial, sans-serif;
}
.cryptpad-toolbar button:hover { .cryptpad-toolbar button:hover {
color: #292b2c; color: #292b2c;
background-color: #e6e6e6; background-color: #e6e6e6;

@ -108,8 +108,8 @@ define(function () {
out.newButton = 'Nouveau'; out.newButton = 'Nouveau';
out.newButtonTitle = 'Créer un nouveau pad'; out.newButtonTitle = 'Créer un nouveau pad';
out.uploadButton = 'Upload'; out.uploadButton = 'Importer des fichiers';
out.uploadButtonTitle = 'Uploader un nouveau fichier dans le dossier actuel'; out.uploadButtonTitle = 'Importer un nouveau fichier dans le dossier actuel';
out.saveTemplateButton = "Sauver en tant que modèle"; out.saveTemplateButton = "Sauver en tant que modèle";
out.saveTemplatePrompt = "Choisir un titre pour ce modèle"; out.saveTemplatePrompt = "Choisir un titre pour ce modèle";
@ -241,8 +241,8 @@ 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 = "Nouveau"; out.fm_newButton = "Ajouter à ce dossier";
out.fm_newButtonTitle = "Créer un nouveau pad ou un dossier"; 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";
out.fm_folder = "Dossier"; out.fm_folder = "Dossier";
@ -393,9 +393,9 @@ define(function () {
out.settings_logoutEverywhere = "Se déconnecter de toutes les autres sessions."; out.settings_logoutEverywhere = "Se déconnecter de toutes les autres sessions.";
out.settings_logoutEverywhereConfirm = "Êtes-vous sûr ? Vous devrez vous reconnecter sur tous vos autres appareils."; out.settings_logoutEverywhereConfirm = "Êtes-vous sûr ? Vous devrez vous reconnecter sur tous vos autres appareils.";
out.upload_serverError = "Erreur interne: impossible d'uploader le fichier pour l'instant."; out.upload_serverError = "Erreur interne: impossible d'importer le fichier pour l'instant.";
out.upload_uploadPending = "Vous avez déjà un fichier en cours d'upload. Souhaitez-vous l'annuler et uploader ce nouveau fichier ?"; out.upload_uploadPending = "Vous avez déjà un fichier en cours d'importation. Souhaitez-vous l'annuler et importer ce nouveau fichier ?";
out.upload_success = "Votre fichier ({0}) a été uploadé avec succès et ajouté à votre CryptDrive."; out.upload_success = "Votre fichier ({0}) a été importé avec succès et ajouté à votre CryptDrive.";
out.upload_notEnoughSpace = "Il n'y a pas assez d'espace libre dans votre CryptDrive pour ce fichier."; out.upload_notEnoughSpace = "Il n'y a pas assez d'espace libre dans votre CryptDrive pour ce fichier.";
out.upload_tooLarge = "Ce fichier dépasse la taille maximale autorisée."; out.upload_tooLarge = "Ce fichier dépasse la taille maximale autorisée.";
out.upload_choose = "Choisir un fichier"; out.upload_choose = "Choisir un fichier";
@ -404,7 +404,7 @@ define(function () {
out.upload_name = "Nom du fichier"; out.upload_name = "Nom du fichier";
out.upload_size = "Taille"; out.upload_size = "Taille";
out.upload_progress = "État"; out.upload_progress = "État";
out.upload_mustLogin = "Vous devez vous connecter pour uploader un fichier"; out.upload_mustLogin = "Vous devez vous connecter pour importer un fichier";
out.download_button = "Déchiffrer et télécharger"; out.download_button = "Déchiffrer et télécharger";
// general warnings // general warnings

@ -110,7 +110,7 @@ define(function () {
out.newButton = 'New'; out.newButton = 'New';
out.newButtonTitle = 'Create a new pad'; out.newButtonTitle = 'Create a new pad';
out.uploadButton = 'Upload'; out.uploadButton = 'Upload files';
out.uploadButtonTitle = 'Upload a new file to the current folder'; out.uploadButtonTitle = 'Upload a new file to the current folder';
out.saveTemplateButton = "Save as template"; out.saveTemplateButton = "Save as template";
@ -244,8 +244,8 @@ 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 = "New"; out.fm_newButton = "Add to this folder";
out.fm_newButtonTitle = "Create a new pad or 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";
out.fm_folder = "Folder"; out.fm_folder = "Folder";

@ -67,6 +67,11 @@ define([
id: uid(), id: uid(),
}); });
var parsed = Cryptpad.parsePadUrl(window.location.href);
if (typeof parsed.type === "string") {
$toolbar.addClass(parsed.type);
}
var $topContainer = $('<div>', {'class': TOP_CLS}); var $topContainer = $('<div>', {'class': TOP_CLS});
var $userContainer = $('<span>', { var $userContainer = $('<span>', {
'class': USER_CLS 'class': USER_CLS

@ -461,6 +461,8 @@ span.fa-folder-open {
z-index: 100; z-index: 100;
box-sizing: content-box; box-sizing: content-box;
padding: 0 6px; padding: 0 6px;
display: flex;
flex-flow: row;
/* The container <div> - needed to position the dropdown content */ /* The container <div> - needed to position the dropdown content */
} }
#driveToolbar .newPadContainer { #driveToolbar .newPadContainer {
@ -479,15 +481,10 @@ span.fa-folder-open {
font-family: FontAwesome; font-family: FontAwesome;
} }
#driveToolbar button.element { #driveToolbar button.element {
border-radius: 2px; height: 26px;
background: #888; width: 26px;
color: #eee; padding: 0;
font-size: 14px; box-sizing: border-box;
border: 1px solid #888;
font-weight: bold;
}
#driveToolbar button.element:hover {
background: #777;
} }
#driveToolbar button.new { #driveToolbar button.new {
padding: 0 5px; padding: 0 5px;
@ -515,7 +512,7 @@ span.fa-folder-open {
margin-right: 2px; margin-right: 2px;
} }
#driveToolbar .leftside { #driveToolbar .leftside {
width: 250px; width: auto;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: inline-block; display: inline-block;
@ -527,6 +524,7 @@ span.fa-folder-open {
float: right; float: right;
} }
#driveToolbar .path { #driveToolbar .path {
flex: 1;
width: 100%; width: 100%;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;

@ -533,6 +533,8 @@ span {
z-index: 100; z-index: 100;
box-sizing: content-box; box-sizing: content-box;
padding: 0 6px; padding: 0 6px;
display: flex;
flex-flow: row;
.newPadContainer { .newPadContainer {
display: inline-block; display: inline-block;
@ -549,15 +551,10 @@ span {
font-family: FontAwesome; font-family: FontAwesome;
} }
&.element { &.element {
border-radius: 2px; height: 26px;
background: @toolbar-button-bg; width: 26px;
color: @toolbar-button-fg; padding: 0;
font-size: 14px; box-sizing: border-box;
border: 1px solid @toolbar-button-border;
font-weight: bold;
&:hover {
background: @toolbar-button-bg-hover;
}
} }
&.new { &.new {
padding: 0 5px; padding: 0 5px;
@ -588,7 +585,7 @@ span {
} }
.leftside { .leftside {
width: 250px; width: auto;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: inline-block; display: inline-block;
@ -600,6 +597,7 @@ span {
float: right; float: right;
} }
.path { .path {
flex: 1;
width: 100%; width: 100%;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;

@ -650,7 +650,9 @@ define([
}; };
var updatePathSize = function () { var updatePathSize = function () {
$driveToolbar.find('.path').css('max-width', 'calc(100vw - '+$tree.width()+'px - 50px)'); var $tb = $driveToolbar;
var w = $tree.width() + $tb.find('.leftside').width() + $tb.find('.rightside').width();
$driveToolbar.find('.path').css('max-width', 'calc(100vw - '+w+'px - 50px)');
}; };
var getSelectedPaths = function ($element) { var getSelectedPaths = function ($element) {
@ -1339,10 +1341,10 @@ define([
}); });
var $listButton = $('<button>', { var $listButton = $('<button>', {
'class': 'element' 'class': 'element btn btn-secondary'
}).append($listIcon.clone()); }).append($listIcon.clone());
var $gridButton = $('<button>', { var $gridButton = $('<button>', {
'class': 'element' 'class': 'element btn btn-secondary'
}).append($gridIcon.clone()); }).append($gridIcon.clone());
$listButton.click(function () { $listButton.click(function () {
@ -1381,6 +1383,12 @@ define([
content: Messages.fm_folder content: Messages.fm_folder
}); });
options.push({tag: 'hr'}); options.push({tag: 'hr'});
options.push({
tag: 'a',
attributes: {'class': 'uploadFile'},
content: Messages.uploadButton
});
options.push({tag: 'hr'});
} }
AppConfig.availablePadTypes.forEach(function (type) { AppConfig.availablePadTypes.forEach(function (type) {
if (type === 'drive') { return; } if (type === 'drive') { return; }
@ -1427,6 +1435,20 @@ define([
$block.find('a.newFolder').click(function () { $block.find('a.newFolder').click(function () {
filesOp.addFolder(currentPath, null, onCreated); filesOp.addFolder(currentPath, null, onCreated);
}); });
$block.find('a.uploadFile').click(function () {
var $input = $('<input>', {
'type': 'file',
'style': 'display: none;'
}).on('change', function (e) {
var file = e.target.files[0];
var ev = {
target: $content[0]
};
APP.FM.handleFile(file, ev);
if (callback) { callback(); }
});
$input.click();
});
} }
$block.find('a.newdoc').click(function () { $block.find('a.newdoc').click(function () {
var type = $(this).attr('data-type') || 'pad'; var type = $(this).attr('data-type') || 'pad';
@ -1437,16 +1459,6 @@ define([
return $block; return $block;
}; };
var createUploadButton = function () {
var inTrash = filesOp.isPathIn(currentPath, [TRASH]);
if (inTrash) { return; }
var data = {
FM: APP.FM,
target: $content[0]
};
return Cryptpad.createButton('upload', false, data);
};
var hideNewButton = function () { var hideNewButton = function () {
$iframe.find('.dropdown-bar-content').hide(); $iframe.find('.dropdown-bar-content').hide();
}; };
@ -1620,8 +1632,8 @@ define([
var $toolbar = $driveToolbar; var $toolbar = $driveToolbar;
$toolbar.html(''); $toolbar.html('');
$('<div>', {'class': 'leftside'}).appendTo($toolbar); $('<div>', {'class': 'leftside'}).appendTo($toolbar);
$('<div>', {'class': 'rightside'}).appendTo($toolbar);
$('<div>', {'class': 'path unselectable'}).appendTo($toolbar); $('<div>', {'class': 'path unselectable'}).appendTo($toolbar);
$('<div>', {'class': 'rightside'}).appendTo($toolbar);
return $toolbar; return $toolbar;
}; };
@ -1846,6 +1858,9 @@ define([
} }
var $list = $('<ul>').appendTo($dirContent); var $list = $('<ul>').appendTo($dirContent);
// NewButton can be undefined if we're in read only mode
$toolbar.find('.leftside').append(createNewButton(isInRoot));
createTitle(path).appendTo($toolbar.find('.path')); createTitle(path).appendTo($toolbar.find('.path'));
updatePathSize(); updatePathSize();
@ -1879,11 +1894,6 @@ define([
} }
updateContextButton(); updateContextButton();
// NewButton can be undefined if we're in read only mode
$toolbar.find('.leftside').append(createNewButton(isInRoot));
$toolbar.find('.leftside').append(createUploadButton());
var $folderHeader = getFolderListHeader(); var $folderHeader = getFolderListHeader();
var $fileHeader = getFileListHeader(true); var $fileHeader = getFileListHeader(true);

@ -17,7 +17,7 @@
#cke_1_toolbox { #cke_1_toolbox {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
background-color: lightgoldenrodyellow; background-color: #c1e7ff;
} }
#cke_1_toolbox .cke_toolbar { #cke_1_toolbox .cke_toolbar {
height: 28px; height: 28px;

Loading…
Cancel
Save