diff --git a/customize.dist/src/less/dropdown.less b/customize.dist/src/less/dropdown.less index 90878510e..e6fc7105c 100644 --- a/customize.dist/src/less/dropdown.less +++ b/customize.dist/src/less/dropdown.less @@ -26,7 +26,7 @@ .dropdown-bar-content { display: none; position: absolute; - background-color: #f9f9f9; + background-color: @dropdown-bg; min-width: 250px; box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2); z-index: 1000; @@ -45,7 +45,7 @@ } a { - color: black; + color: @dropdown-color; padding: 5px 16px; text-decoration: none; display: flex; @@ -56,8 +56,7 @@ user-select: none; float: none; text-align: left; - font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; - font-size: 16px; + font: @dropdown-font; line-height: 1em; @@ -68,13 +67,13 @@ } &:hover { - background-color: #f1f1f1; - color: black; + background-color: @dropdown-bg-hover; + color: @dropdown-color; } &.active { - background-color: #e8e8e8; - color: black; + background-color: @dropdown-bg-active; + color: @dropdown-color; } } diff --git a/customize.dist/src/less/toolbar.less b/customize.dist/src/less/toolbar.less index 3513e5a46..712d71598 100644 --- a/customize.dist/src/less/toolbar.less +++ b/customize.dist/src/less/toolbar.less @@ -12,15 +12,6 @@ user-select: none; } -.toolbar-container { - font: 12px Arial,Helvetica,Tahoma,Verdana,sans-serif; - .two-part-gradient(@toolbar-gradient-start, @toolbar-gradient-end); - .cryptpad-toolbar { - select { - box-sizing: border-box; - } - } -} .cke_reset_all * { color: inherit; } @@ -132,10 +123,21 @@ body { color: @color; } } + .cryptpad-spinner, .cryptpad-state { + color: @color; + } .cryptpad-limit { text-shadow: -1px 0 @color, 0 1px @color, 1px 0 @color, 0 -1px @color; } - .cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside, .drawer-content { + .cryptpad-lag { + .bars { + span { + background: @color; + border: 1px solid darken(@bgcolor, 20%); + } + } + } + .cryptpad-toolbar-leftside, .cryptpad-toolbar-rightside { background-color: lighten(@bgcolor, 8%); button:hover, button.active { background-color: @bgcolor; @@ -263,7 +265,7 @@ body { .unselectable; - font: normal normal normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif; + font: @toolbar-button-font; width: 100%; z-index: 9001; @@ -294,43 +296,12 @@ body { button { transition: all 0.15s; .unselectable(); - &#shareButton, &.buttonSuccess { - // Bootstrap 4 colors - color: #fff; - background: @toolbar-green; - border-color: @toolbar-green; - &:hover { - color: #fff; - background: #449d44; - border: 1px solid #419641; - } - span { - color: #fff; - } - .large { - margin-left: 5px; - } - } - &#newdoc, &.buttonPrimary { - // Bootstrap 4 colors - color: #fff; - background: #0275d8; - border-color: #0275d8; - &:hover { - color: #fff; - background: #025aa5; - border: 1px solid #01549b; - } - span { - color: #fff; - } - .large { - margin-left: 5px; - } - } &.hidden { display: none; } + .drawer { + display: none; + } // Bootstrap 4 colors (btn-secondary) border: 1px solid transparent; border-radius: .25rem; @@ -359,8 +330,7 @@ body { width: 26px; display: inline-block; padding: 3px; - margin: 0px; - margin-right: 3px; + margin: 0px 3px 0 6px; vertical-align: middle; line-height: @toolbar-top-height; span { @@ -377,6 +347,11 @@ body { .cryptpad-state { line-height: @toolbar-top-height; + padding: 0 5px; + color: inherit; + &:empty { + display: none; + } } .cryptpad-lag { display: inline-block; @@ -429,38 +404,29 @@ body { &.lag0 { span span { .clag(); - //border-color: red; } } &.lag1 { .bar2, .bar3, .bar4 { .clag(); } span span { visibility: visible; - //background-color: orange; - //border-color: orange; } } &.lag2 { .bar3, .bar4 { .clag(); } span span { visibility: visible; - //background-color: orange; - //border-color: orange; } } &.lag3 { .bar4 { .clag(); } span span { visibility: visible; - //background-color: @toolbar-green; - //border-color: @toolbar-green; } } &.lag4 { span span { visibility: visible; - //background-color: @toolbar-green; - //border-color: @toolbar-green; } } } @@ -644,10 +610,27 @@ body { align-items: center; line-height: @toolbar-top-height; margin: 0 10px; - .title, .pencilIcon, .saveIcon { + .title { font-size: 25px; vertical-align: middle; line-height: 25px; + white-space: nowrap; + } + .pencilIcon, .saveIcon { + display: flex; + align-items: center; + font-size: 20px; + vertical-align: middle; + line-height: 20px; + .fa { + font-size: 20px; + } + } + .readOnly { + margin-left: 10px; + font-size: 25px; + font-style: italic; + white-space: nowrap; } .hoverable { display: inline-flex; @@ -659,7 +642,6 @@ body { padding: 5px; border-collapse: collapse; span { - font-size: 25px; cursor: pointer; } } @@ -668,7 +650,6 @@ body { padding: 5px; border-collapse: collapse; span { - font-size: 25px; cursor: pointer; } } @@ -875,44 +856,42 @@ body { display: none; } .drawer-content { + box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2); position: absolute; right:0px; margin-top: 32px; min-width: 50px; - background: white; - border: 1px solid black; + background: @dropdown-bg; display: flex; flex-flow: column; z-index:1000; + color: black; .fa { font-size: 17px; } &> span { box-sizing: border-box; - width: 150px; + min-width: 150px; height: 26px; border-radius: 0; border: 0; - &:not(:last-child) { - border-bottom: 1px solid rgba(0,0,0,0.2); - } - button { - border: 0; - } } button { - width: 100%; - } - &> button { - text-align: center; + padding: 5px 16px; + text-align: left; margin: 0; border-radius: 0; - border: 1px solid transparent; - &:hover { - border: 1px solid transparent; + border: 0; + width: 100%; + line-height: 1em; + .drawer { + margin-left: 10px; + display: inline; + vertical-align: top; } - &:not(:last-child) { - border-bottom: 1px solid rgba(0,0,0,0.2); + &:hover { + background-color: @dropdown-bg-hover !important; + color: @dropdown-color; } } } @@ -951,12 +930,12 @@ body { } .cryptpad-spinner { line-height: @toolbar-top-height; - &> span { - height: 16px; - width: 16px; + &> span.fa { + height: 20px; + width: 20px; margin: 8px; - line-height: 16px; - font-size: 16px; + line-height: 20px; + font-size: 20px; text-align: center; } } diff --git a/customize.dist/src/less/variables.less b/customize.dist/src/less/variables.less index 6c750e550..2ccebf170 100644 --- a/customize.dist/src/less/variables.less +++ b/customize.dist/src/less/variables.less @@ -70,11 +70,19 @@ @media-narrow-screen: 400px; @media-medium-screen: 600px; -@toolbar-gradient-start: #f5f5f5; -@toolbar-gradient-end: #DDDDDD; -@toolbar-button-font: 12px Ubuntu, Arial, sans-serif; + +// Dropdown + +@dropdown-font: 16px -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; +@dropdown-bg: #f9f9f9; +@dropdown-color: black; +@dropdown-bg-hover: #f1f1f1; +@dropdown-bg-active: #e8e8e8; // Toolbar + +@toolbar-button-font: @dropdown-font; + @toolbar-pad-bg: #1c4fa0; @toolbar-pad-color: #fff; @toolbar-slide-bg: #e57614; diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index e373765ac..0e4cce6a7 100644 --- a/customize.dist/translations/messages.fr.js +++ b/customize.dist/translations/messages.fr.js @@ -86,8 +86,12 @@ define(function () { out.pinLimitDrive = out.pinLimitReached+ ".
" + "Vous ne pouvez pas créer de nouveaux pads."; + out.moreActions = "Autres actions"; + + out.importButton = "Importer"; out.importButtonTitle = 'Importer un pad depuis un fichier local'; + out.exportButton = "Exporter"; out.exportButtonTitle = 'Exporter ce pad vers un fichier local'; out.exportPrompt = 'Comment souhaitez-vous nommer ce fichier ?'; @@ -99,6 +103,7 @@ define(function () { out.clickToEdit = 'Cliquer pour modifier'; out.saveTitle = "Enregistrer le titre (Entrée)"; + out.forgetButton = "Supprimer"; 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 ?'; out.movedToTrash = 'Ce pad a été déplacé vers la corbeille.
Accéder à mon Drive'; @@ -124,6 +129,7 @@ define(function () { out.backgroundButtonTitle = 'Changer la couleur de fond de la présentation'; out.colorButtonTitle = 'Changer la couleur du texte en mode présentation'; + out.printText = "Imprimer"; out.printButton = "Imprimer (Entrée)"; out.printButtonTitle = "Imprimer votre présentation ou l'enregistrer au format PDF"; out.printOptions = "Options de mise en page"; @@ -139,6 +145,7 @@ define(function () { out.filePicker_filter = "Filtrez les fichiers par leur nom"; out.or = 'ou'; + out.slideOptionsText = "Options"; out.slideOptionsTitle = "Personnaliser la présentation"; out.slideOptionsButton = "Enregistrer (Entrée)"; @@ -165,6 +172,7 @@ define(function () { out.cancel = "Annuler"; out.cancelButton = 'Annuler (Echap)'; + out.historyText = "Historique"; out.historyButton = "Afficher l'historique du document"; out.history_next = "Voir la version suivante"; out.history_prev = "Voir la version précédente"; diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index 9f7f34be7..3d84e9ecf 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -88,8 +88,12 @@ define(function () { out.pinLimitDrive = "You've reached your storage limit.
" + "You can't create new pads."; + out.moreActions = "More actions"; + + out.importButton = "Import"; out.importButtonTitle = 'Import a pad from a local file'; + out.exportButton = "Export"; out.exportButtonTitle = 'Export this pad to a local file'; out.exportPrompt = 'What would you like to name your file?'; @@ -101,6 +105,7 @@ define(function () { out.clickToEdit = "Click to edit"; out.saveTitle = "Save the title (enter)"; + out.forgetButton = "Delete"; out.forgetButtonTitle = 'Move this pad to the trash'; out.forgetPrompt = 'Clicking OK will move this pad to your trash. Are you sure?'; out.movedToTrash = 'That pad has been moved to the trash.
Access my Drive'; @@ -126,6 +131,7 @@ define(function () { out.backgroundButtonTitle = 'Change the background color in the presentation'; out.colorButtonTitle = 'Change the text color in presentation mode'; + out.printText = "Print"; out.printButton = "Print (enter)"; out.printButtonTitle = "Print your slides or export them as a PDF file"; out.printOptions = "Layout options"; @@ -141,6 +147,7 @@ define(function () { out.filePicker_filter = "Filter files by name"; out.or = 'or'; + out.slideOptionsText = "Options"; out.slideOptionsTitle = "Customize your slides"; out.slideOptionsButton = "Save (enter)"; @@ -167,6 +174,7 @@ define(function () { out.cancel = "Cancel"; out.cancelButton = 'Cancel (esc)'; + out.historyText = "History"; out.historyButton = "Display the document history"; out.history_next = "Go to the next version"; out.history_prev = "Go to the previous version"; diff --git a/www/code/main.js b/www/code/main.js index ad4148a88..226e3a235 100644 --- a/www/code/main.js +++ b/www/code/main.js @@ -161,6 +161,7 @@ define([ if (e) { return void console.error(e); } if (data !== false) { $previewContainer.show(); + APP.$previewButton.addClass('active'); $codeMirror.removeClass('fullPage'); } }); @@ -168,6 +169,7 @@ define([ } APP.$previewButton.hide(); $previewContainer.hide(); + APP.$previewButton.removeClass('active'); $codeMirror.addClass('fullPage'); }; @@ -272,8 +274,10 @@ define([ Cryptpad.setPadAttribute('previewMode', true, function (e) { if (e) { return console.log(e); } }); + $previewButton.addClass('active'); } else { $codeMirror.addClass('fullPage'); + $previewButton.removeClass('active'); Cryptpad.setPadAttribute('previewMode', false, function (e) { if (e) { return console.log(e); } }); diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js index 950afc561..9b26df082 100644 --- a/www/common/cryptpad-common.js +++ b/www/common/cryptpad-common.js @@ -967,8 +967,9 @@ define([ switch (type) { case 'export': button = $('