diff --git a/bower.json b/bower.json index 5734be6ec..587c9e2e8 100644 --- a/bower.json +++ b/bower.json @@ -21,7 +21,7 @@ "jquery": "~2.1.3", "tweetnacl": "~0.12.2", "components-font-awesome": "^4.6.3", - "ckeditor": "~4.5.6", + "ckeditor": "~4", "codemirror": "^5.19.0", "requirejs": "~2.1.15", "marked": "~0.3.5", diff --git a/customize.dist/ckeditor-config.js b/customize.dist/ckeditor-config.js index 51f003a87..45d5bbd38 100644 --- a/customize.dist/ckeditor-config.js +++ b/customize.dist/ckeditor-config.js @@ -50,7 +50,7 @@ CKEDITOR.editorConfig = function( config ) { //skin: 'moono-cryptpad,/pad/themes/moono-cryptpad/' //skin: 'flat,/pad/themes/flat/' - //skin: 'moono-lisa,/pad/themes/moono-lisa/' + //config.skin= 'moono-lisa,/pad/themes/moono-lisa/' //skin: 'moono-dark,/pad/themes/moono-dark/' //skin: 'office2013,/pad/themes/office2013/' }; diff --git a/customize.dist/src/less/toolbar.less b/customize.dist/src/less/toolbar.less index df68bc8c4..8149312e6 100644 --- a/customize.dist/src/less/toolbar.less +++ b/customize.dist/src/less/toolbar.less @@ -21,13 +21,48 @@ } } } - +.cke_reset_all * { + color: inherit; +} .cryptpad-toolbar { @toolbar-green: #5cb85c; box-sizing: border-box; padding: 0px 6px; + //background-color: #BBBBFF; + 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; font-family: FontAwesome; @@ -36,7 +71,6 @@ .unselectable; font: normal normal normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif; - color: #000; width: 100%; z-index: 9001; @@ -45,10 +79,6 @@ } button { - font: @toolbar-button-font; - * { - font: @toolbar-button-font; - } &#shareButton, &.buttonSuccess { // Bootstrap 4 colors color: #fff; @@ -93,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; @@ -321,13 +356,12 @@ height: 32px; position: relative; .cryptpad-title { - .title, .pencilIcon { + .title, .pencilIcon, .saveIcon { font-size: 1.5em; vertical-align: middle; line-height: 32px; } .pencilIcon { - //display: none; margin-left: 11px; &:hover { color: #999; @@ -337,6 +371,22 @@ cursor: pointer; } } + .saveIcon { + cursor: pointer; + border: 1px solid black; + border-radius: 0px 2px 2px 0px; + background: white; + padding: 5px; + display: inline; + margin-left: -1px; + border-collapse: collapse; + &:hover { + color: #999; + } + span { + cursor: pointer; + } + } &:not(input):hover { .editable { border: 1px solid #888; @@ -410,6 +460,7 @@ } } .cryptpad-toolbar-leftside { + height: 32px; float: left; margin-bottom: -1px; .cryptpad-dropdown-users { @@ -427,6 +478,7 @@ } } .cryptpad-toolbar-rightside { + height: 32px; text-align: right; } .cryptpad-toolbar-history { 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 ba7d7ea35..e64684f98 100644 --- a/customize.dist/toolbar.css +++ b/customize.dist/toolbar.css @@ -98,9 +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: #fff; + color: #000; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; @@ -108,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; @@ -120,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, @@ -173,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; @@ -406,7 +439,8 @@ position: relative; } .cryptpad-toolbar-top .cryptpad-title .title, -.cryptpad-toolbar-top .cryptpad-title .pencilIcon { +.cryptpad-toolbar-top .cryptpad-title .pencilIcon, +.cryptpad-toolbar-top .cryptpad-title .saveIcon { font-size: 1.5em; vertical-align: middle; line-height: 32px; @@ -421,6 +455,22 @@ .cryptpad-toolbar-top .cryptpad-title .pencilIcon span { cursor: pointer; } +.cryptpad-toolbar-top .cryptpad-title .saveIcon { + cursor: pointer; + border: 1px solid black; + border-radius: 0px 2px 2px 0px; + background: white; + padding: 5px; + display: inline; + margin-left: -1px; + border-collapse: collapse; +} +.cryptpad-toolbar-top .cryptpad-title .saveIcon:hover { + color: #999; +} +.cryptpad-toolbar-top .cryptpad-title .saveIcon span { + cursor: pointer; +} .cryptpad-toolbar-top .cryptpad-title:not(input):hover .editable { border: 1px solid #888; border-radius: 2px 0px 0px 2px; @@ -485,6 +535,7 @@ vertical-align: baseline; } .cryptpad-toolbar-leftside { + height: 32px; float: left; margin-bottom: -1px; } @@ -500,6 +551,7 @@ margin-top: -1px; } .cryptpad-toolbar-rightside { + height: 32px; text-align: right; } .cryptpad-toolbar-history { diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index 219a6ec2d..d63d81cbc 100644 --- a/customize.dist/translations/messages.fr.js +++ b/customize.dist/translations/messages.fr.js @@ -97,6 +97,7 @@ define(function () { out.user_accountName = "Nom d'utilisateur"; out.clickToEdit = 'Cliquer pour modifier'; + out.saveTitle = "Enregistrer le titre (Entrée)"; out.forgetButtonTitle = 'Déplacer ce pad vers la corbeille'; out.forgetPrompt = 'Cliquer sur OK déplacera ce pad vers la corbeille de votre CryptDrive, êtes-vous sûr ?'; @@ -107,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"; @@ -176,6 +177,9 @@ define(function () { out.history_restoreDone = "Document restauré"; out.history_version = "Version :"; + // Ckeditor links + out.openLinkInNewTab = "Ouvrir le lien dans un nouvel onglet"; + // Polls out.poll_title = "Sélecteur de date Zero Knowledge"; @@ -237,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"; @@ -389,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"; @@ -400,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 faa291032..42f1613e0 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -99,6 +99,7 @@ define(function () { out.user_accountName = "Account name"; out.clickToEdit = "Click to edit"; + out.saveTitle = "Save the title (enter)"; out.forgetButtonTitle = 'Move this pad to the trash'; out.forgetPrompt = 'Clicking OK will move this pad to your trash. Are you sure?'; @@ -109,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"; @@ -178,6 +179,9 @@ define(function () { out.history_restoreDone = "Document restored"; out.history_version = "Version:"; + // Ckeditor links + out.openLinkInNewTab = "Open Link in New Tab"; + // Polls out.poll_title = "Zero Knowledge Date Picker"; @@ -240,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 b96d072ac..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 @@ -396,7 +401,6 @@ define([ 'class': TITLE_CLS }).appendTo(toolbar.$top); - // TODO: move these functions to toolbar or common? if (typeof config.title !== "object") { console.error("config.title", config); throw new Error("config.title is not an object"); @@ -413,6 +417,10 @@ define([ 'class': 'pencilIcon', 'title': Messages.clickToEdit }); + var $saveIcon = $('', { + 'class': 'saveIcon', + 'title': Messages.saveTitle + }).hide(); if (config.readOnly === 1 || typeof(Cryptpad) === "undefined") { return $titleContainer; } var $input = $('', { type: 'text', @@ -426,6 +434,11 @@ define([ style: 'font-family: FontAwesome;' }); $pencilIcon.append($icon).appendTo($titleContainer); + var $icon2 = $('', { + 'class': 'fa fa-check readonly', + style: 'font-family: FontAwesome;' + }); + $saveIcon.append($icon2).appendTo($titleContainer); } // Events @@ -436,26 +449,34 @@ define([ e.stopPropagation(); return true; }); + var save = function () { + var name = $input.val().trim(); + if (name === "") { + name = $input.attr('placeholder'); + } + Cryptpad.renamePad(name, function (err, newtitle) { + if (err) { return; } + $text.text(newtitle); + callback(null, newtitle); + $input.hide(); + $text.show(); + $pencilIcon.show(); + $saveIcon.hide(); + //$pencilIcon.css('display', ''); + }); + }; $input.on('keyup', function (e) { if (e.which === 13 && toolbar.connected === true) { - var name = $input.val().trim(); - if (name === "") { - name = $input.attr('placeholder'); - } - Cryptpad.renamePad(name, null, function (err, newtitle) { - if (err) { return; } - $text.text(newtitle); - callback(null, newtitle); - $input.hide(); - $text.show(); - //$pencilIcon.css('display', ''); - }); + save(); } else if (e.which === 27) { $input.hide(); $text.show(); + $pencilIcon.show(); + $saveIcon.hide(); //$pencilIcon.css('display', ''); } }); + $saveIcon.click(save); var displayInput = function () { if (toolbar.connected === false) { return; } @@ -465,6 +486,8 @@ define([ $input.val(inputVal); $input.show(); $input.focus(); + $pencilIcon.hide(); + $saveIcon.show(); }; $text.on('click', displayInput); $pencilIcon.on('click', displayInput); @@ -486,16 +509,16 @@ define([ title: Messages.header_logoTitle, 'class': "cryptpad-logo" }).append($imgTag); - var $span = $('').text('CryptPad'); + var $span = $('').text('CryptDrive'); var $aTagBig = $aTagSmall.clone().addClass('large').append($span); $aTagSmall.addClass('narrow'); var onClick = function (e) { e.preventDefault(); if (e.ctrlKey) { - window.open('/'); + window.open('/drive'); return; } - window.location = "/"; + window.location = "/drive"; }; var onContext = function (e) { e.stopPropagation(); }; diff --git a/www/drive/file.css b/www/drive/file.css index fe798b883..b609eacca 100644 --- a/www/drive/file.css +++ b/www/drive/file.css @@ -227,6 +227,7 @@ span.fa-folder-open { display: flex; flex-flow: column; flex: 1; + min-width: 0; } #content { box-sizing: border-box; @@ -461,6 +462,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 +482,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 +513,7 @@ span.fa-folder-open { margin-right: 2px; } #driveToolbar .leftside { - width: 250px; + width: auto; margin: 0; padding: 0; display: inline-block; @@ -527,6 +525,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..be12531e7 100644 --- a/www/drive/file.less +++ b/www/drive/file.less @@ -276,7 +276,9 @@ span { display: flex; flex-flow: column; flex: 1; -} + // Needed to avoid the folder's path to overflows + // https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layout + min-width: 0;} #content { box-sizing: border-box; background: @content-bg; @@ -533,6 +535,8 @@ span { z-index: 100; box-sizing: content-box; padding: 0 6px; + display: flex; + flex-flow: row; .newPadContainer { display: inline-block; @@ -549,15 +553,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 +587,7 @@ span { } .leftside { - width: 250px; + width: auto; margin: 0; padding: 0; display: inline-block; @@ -600,6 +599,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 b35faf881..6456896bd 100644 --- a/www/drive/main.js +++ b/www/drive/main.js @@ -650,7 +650,10 @@ define([ }; var updatePathSize = function () { - $driveToolbar.find('.path').css('max-width', 'calc(100vw - '+$tree.width()+'px - 50px)'); + return; + 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)'); }; var getSelectedPaths = function ($element) { @@ -1339,10 +1342,10 @@ define([ }); var $listButton = $('