diff --git a/customize.dist/src/less/toolbar.less b/customize.dist/src/less/toolbar.less index 69a14da17..8149312e6 100644 --- a/customize.dist/src/less/toolbar.less +++ b/customize.dist/src/less/toolbar.less @@ -21,7 +21,9 @@ } } } - +.cke_reset_all * { + color: inherit; +} .cryptpad-toolbar { @toolbar-green: #5cb85c; @@ -29,7 +31,37 @@ padding: 0px 6px; //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 { font: normal normal normal 14px/1 FontAwesome; @@ -39,7 +71,6 @@ .unselectable; font: normal normal normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif; - color: #000; width: 100%; z-index: 9001; @@ -48,10 +79,6 @@ } button { - font: @toolbar-button-font; - * { - font: @toolbar-button-font; - } &#shareButton, &.buttonSuccess { // Bootstrap 4 colors color: #fff; @@ -96,6 +123,11 @@ color: #000; background-color: #fff; border-color: #ccc; + font: @toolbar-button-font; + * { + color: #000; + font: @toolbar-button-font; + } &:hover { color: #292b2c; background-color: #e6e6e6; diff --git a/customize.dist/src/less/variables.less b/customize.dist/src/less/variables.less index 43bcb393b..acd2eed78 100644 --- a/customize.dist/src/less/variables.less +++ b/customize.dist/src/less/variables.less @@ -74,6 +74,25 @@ @toolbar-gradient-end: #DDDDDD; @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-color: #000; @topbar-button-bg: #2E9AFE; diff --git a/customize.dist/toolbar.css b/customize.dist/toolbar.css index a36c64d8a..e64684f98 100644 --- a/customize.dist/toolbar.css +++ b/customize.dist/toolbar.css @@ -98,10 +98,14 @@ .toolbar-container .cryptpad-toolbar select { box-sizing: border-box; } +.cke_reset_all * { + color: inherit; +} .cryptpad-toolbar { box-sizing: border-box; padding: 0px 6px; - background-color: #FF0073; + background-color: #fff; + color: #000; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; @@ -109,10 +113,37 @@ -ms-user-select: none; user-select: none; font: normal normal normal 12px Arial, Helvetica, Tahoma, Verdana, Sans-Serif; - color: #000; width: 100%; 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 { font: normal normal normal 14px/1 FontAwesome; font-family: FontAwesome; @@ -121,14 +152,11 @@ float: right; } .cryptpad-toolbar button { - font: 12px Ubuntu, Arial, sans-serif; border: 1px solid transparent; border-radius: .25rem; color: #000; background-color: #fff; border-color: #ccc; -} -.cryptpad-toolbar button * { font: 12px Ubuntu, Arial, sans-serif; } .cryptpad-toolbar button#shareButton, @@ -174,6 +202,10 @@ .cryptpad-toolbar button.hidden { display: none; } +.cryptpad-toolbar button * { + color: #000; + font: 12px Ubuntu, Arial, sans-serif; +} .cryptpad-toolbar button:hover { color: #292b2c; background-color: #e6e6e6; diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index af7ebba91..d63d81cbc 100644 --- a/customize.dist/translations/messages.fr.js +++ b/customize.dist/translations/messages.fr.js @@ -108,8 +108,8 @@ define(function () { out.newButton = 'Nouveau'; out.newButtonTitle = 'Créer un nouveau pad'; - out.uploadButton = 'Upload'; - out.uploadButtonTitle = 'Uploader un nouveau fichier dans le dossier actuel'; + out.uploadButton = 'Importer des fichiers'; + out.uploadButtonTitle = 'Importer un nouveau fichier dans le dossier actuel'; out.saveTemplateButton = "Sauver en tant que modèle"; out.saveTemplatePrompt = "Choisir un titre pour ce modèle"; @@ -241,8 +241,8 @@ define(function () { out.fm_templateName = "Modèles"; out.fm_searchName = "Recherche"; out.fm_searchPlaceholder = "Rechercher..."; - out.fm_newButton = "Nouveau"; - out.fm_newButtonTitle = "Créer un nouveau pad ou un dossier"; + out.fm_newButton = "Ajouter à ce 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_newFile = "Nouveau pad"; out.fm_folder = "Dossier"; @@ -393,9 +393,9 @@ define(function () { 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.upload_serverError = "Erreur interne: impossible d'uploader 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_success = "Votre fichier ({0}) a été uploadé avec succès et ajouté à votre CryptDrive."; + 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'importation. Souhaitez-vous l'annuler et importer ce nouveau fichier ?"; + 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_tooLarge = "Ce fichier dépasse la taille maximale autorisée."; out.upload_choose = "Choisir un fichier"; @@ -404,7 +404,7 @@ define(function () { out.upload_name = "Nom du fichier"; out.upload_size = "Taille"; 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"; // general warnings diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index 4e8acb1b0..42f1613e0 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -110,7 +110,7 @@ define(function () { out.newButton = 'New'; out.newButtonTitle = 'Create a new pad'; - out.uploadButton = 'Upload'; + out.uploadButton = 'Upload files'; out.uploadButtonTitle = 'Upload a new file to the current folder'; out.saveTemplateButton = "Save as template"; @@ -244,8 +244,8 @@ define(function () { out.fm_templateName = "Templates"; out.fm_searchName = "Search"; out.fm_searchPlaceholder = "Search..."; - out.fm_newButton = "New"; - out.fm_newButtonTitle = "Create a new pad or folder"; + out.fm_newButton = "Add to this folder"; + out.fm_newButtonTitle = "Create a new pad or folder, import a file in the current folder"; out.fm_newFolder = "New folder"; out.fm_newFile = "New pad"; out.fm_folder = "Folder"; diff --git a/www/common/toolbar2.js b/www/common/toolbar2.js index 07504e6e3..7f20cbef8 100644 --- a/www/common/toolbar2.js +++ b/www/common/toolbar2.js @@ -67,6 +67,11 @@ define([ id: uid(), }); + var parsed = Cryptpad.parsePadUrl(window.location.href); + if (typeof parsed.type === "string") { + $toolbar.addClass(parsed.type); + } + var $topContainer = $('
', {'class': TOP_CLS}); var $userContainer = $('', { 'class': USER_CLS diff --git a/www/drive/file.css b/www/drive/file.css index fe798b883..f12624db4 100644 --- a/www/drive/file.css +++ b/www/drive/file.css @@ -461,6 +461,8 @@ span.fa-folder-open { z-index: 100; box-sizing: content-box; padding: 0 6px; + display: flex; + flex-flow: row; /* The container
- needed to position the dropdown content */ } #driveToolbar .newPadContainer { @@ -479,15 +481,10 @@ span.fa-folder-open { font-family: FontAwesome; } #driveToolbar button.element { - border-radius: 2px; - background: #888; - color: #eee; - font-size: 14px; - border: 1px solid #888; - font-weight: bold; -} -#driveToolbar button.element:hover { - background: #777; + height: 26px; + width: 26px; + padding: 0; + box-sizing: border-box; } #driveToolbar button.new { padding: 0 5px; @@ -515,7 +512,7 @@ span.fa-folder-open { margin-right: 2px; } #driveToolbar .leftside { - width: 250px; + width: auto; margin: 0; padding: 0; display: inline-block; @@ -527,6 +524,7 @@ span.fa-folder-open { float: right; } #driveToolbar .path { + flex: 1; width: 100%; height: 30px; line-height: 30px; diff --git a/www/drive/file.less b/www/drive/file.less index 662af52f0..5ecce44eb 100644 --- a/www/drive/file.less +++ b/www/drive/file.less @@ -533,6 +533,8 @@ span { z-index: 100; box-sizing: content-box; padding: 0 6px; + display: flex; + flex-flow: row; .newPadContainer { display: inline-block; @@ -549,15 +551,10 @@ span { font-family: FontAwesome; } &.element { - border-radius: 2px; - background: @toolbar-button-bg; - color: @toolbar-button-fg; - font-size: 14px; - border: 1px solid @toolbar-button-border; - font-weight: bold; - &:hover { - background: @toolbar-button-bg-hover; - } + height: 26px; + width: 26px; + padding: 0; + box-sizing: border-box; } &.new { padding: 0 5px; @@ -588,7 +585,7 @@ span { } .leftside { - width: 250px; + width: auto; margin: 0; padding: 0; display: inline-block; @@ -600,6 +597,7 @@ span { float: right; } .path { + flex: 1; width: 100%; height: 30px; line-height: 30px; diff --git a/www/drive/main.js b/www/drive/main.js index 88fe7a0fd..60f337244 100644 --- a/www/drive/main.js +++ b/www/drive/main.js @@ -650,7 +650,9 @@ define([ }; 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) { @@ -1339,10 +1341,10 @@ define([ }); var $listButton = $('