diff --git a/customize.dist/pages.js b/customize.dist/pages.js index 811714531..9dd366da2 100644 --- a/customize.dist/pages.js +++ b/customize.dist/pages.js @@ -756,10 +756,14 @@ define([ Pages['/whiteboard/'] = Pages['/whiteboard/index.html'] = function () { return [ appToolbar(), - h('div#cp-app-whiteboard-canvas-area', h('canvas#cp-app-whiteboard-canvas', { - width: 600, - height: 600 - })), + h('div#cp-app-whiteboard-canvas-area', + h('div#cp-app-whiteboard-container', + h('canvas#cp-app-whiteboard-canvas', { + width: 600, + height: 600 + }) + ) + ), h('div#cp-app-whiteboard-controls', { style: { display: 'block', diff --git a/customize.dist/src/less2/include/creation.less b/customize.dist/src/less2/include/creation.less index 58d5a53ba..16bce0637 100644 --- a/customize.dist/src/less2/include/creation.less +++ b/customize.dist/src/less2/include/creation.less @@ -25,6 +25,7 @@ text-align: center; font: @colortheme_app-font; width: 100%; + outline: none; & > div { width: 60vw; max-width: 100%; @@ -75,7 +76,7 @@ } } - .cp-creation-create { + .cp-creation-create, .cp-creation-settings { button { .tools_unselectable(); padding: 15px; @@ -84,9 +85,14 @@ margin: 3px 10px; border: none; cursor: pointer; + outline: none; &:hover { background: darken(@colortheme_loading-bg, 5%); } + &.cp-creation-button-selected { + color: darken(@colortheme_loading-bg, 10%); + background: @colortheme_loading-color; + } } } @@ -159,6 +165,9 @@ color: lighten(#0275d8, 10%); } } + &> span.fa { + margin-left: 15px; + } } .cp-creation-deleted { background: #111; diff --git a/customize.dist/src/less2/include/help.less b/customize.dist/src/less2/include/help.less new file mode 100644 index 000000000..905c453fb --- /dev/null +++ b/customize.dist/src/less2/include/help.less @@ -0,0 +1,32 @@ +@import (once) "./colortheme-all.less"; + +.help_main (@color, @bg-color) { + .cp-help-container { + position: relative; + background-color: lighten(@bg-color, 15%); + &.cp-help-hidden { + display: none; + } + + .cp-help-close { + position: absolute; + top: 5px; + right: 5px; + } + .cp-help-text { + color: @color; + margin: 0; + padding: 15px; + h1 { + font-size: 20px; + } + h2 { + font-size: 18px; + } + h3 { + font-size: 16px; + } + ul, ol, p { margin: 0; } + } + } +} diff --git a/customize.dist/src/less2/include/icons.less b/customize.dist/src/less2/include/icons.less index a79bc25f5..03a6af5ab 100644 --- a/customize.dist/src/less2/include/icons.less +++ b/customize.dist/src/less2/include/icons.less @@ -25,6 +25,10 @@ text-overflow: ellipsis; word-wrap: break-word; } + &.cp-icons-element-selected { + background-color: white; + color: #666; + } .fa { display: block; font-size: 64px; diff --git a/customize.dist/src/less2/include/markdown-toolbar.less b/customize.dist/src/less2/include/markdown-toolbar.less new file mode 100644 index 000000000..4fb466525 --- /dev/null +++ b/customize.dist/src/less2/include/markdown-toolbar.less @@ -0,0 +1,20 @@ +@import (once) "./colortheme-all.less"; + +.markdownToolbar_main (@color, @bg-color) { + .cp-markdown-toolbar { + height: @toolbar_line-height; + background-color: lighten(@bg-color, 20%); + display: none; + button { + height: @toolbar_line-height !important; + outline: 0; + color: @color; + .toolbar_button; + font: normal normal normal 14px/1 FontAwesome; + &:hover { + background-color: lighten(@bg-color, 8%); + } + &.cp-markdown-help { float: right; } + } + } +} diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index a070c8af6..a0c01e377 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/customize.dist/src/less2/include/toolbar.less @@ -8,6 +8,8 @@ @import (once) "./tools.less"; @import (once) "./icons.less"; @import (once) "./modal.less"; +@import (once) "./markdown-toolbar.less"; +@import (once) "./help.less"; .toolbar_main ( @color: @colortheme_default-color, // Color of the text for the toolbar @@ -24,6 +26,8 @@ .ckeditor_fix(); .history_main(); .iconColors_main(); + .markdownToolbar_main(@color, @bg-color); + .help_main(@color, @bg-color); .cp-toolbar-container { display: flex; @@ -208,6 +212,7 @@ width: auto; margin: 0; padding: 0; + outline: none; } label[for="cp-app-toolbar-creation-advanced"] { margin: 0; @@ -238,55 +243,6 @@ } } - // TODO(cjd) This ought to be in a less file for markdown-based editors - .cp-markdown-toolbar { - height: @toolbar_line-height; - background-color: lighten(@bg-color, 20%); - display: none; - button { - height: @toolbar_line-height !important; - outline: 0; - color: @color; - .toolbar_button; - font: normal normal normal 14px/1 FontAwesome; - &:hover { - background-color: lighten(@bg-color, 8%); - } - &.cp-markdown-help { float: right; } - } - } - - // TODO put in a different less file - .cp-help-container { - position: relative; - background-color: lighten(@bg-color, 15%); - &.cp-help-hidden { - display: none; - } - - .cp-help-close { - position: absolute; - top: 5px; - right: 5px; - } - .cp-help-text { - color: @color; - margin: 0; - padding: 15px; - h1 { - font-size: 20px; - } - h2 { - font-size: 18px; - } - h3 { - font-size: 16px; - } - ul, ol, p { margin: 0; } - } - } - - .cp-toolbar-userlist-drawer { background-color: @bg-color; color: @color; @@ -388,11 +344,6 @@ margin: 0; }*/ - .cp-toolbar-rightside-button { - float: right; - cursor: pointer; - } - select { margin-left: 5px; margin-right: 5px; @@ -454,6 +405,7 @@ font-size: @colortheme_app-font-size; flex: 1; max-width: none; + line-height: calc(@toolbar_line-height - 12px); // padding + border } } } @@ -474,13 +426,6 @@ background-color: @bg-color; } } - .cp-toolbar-rightside { - @media screen and (max-width: @barWidth) { // 450px - flex-wrap: wrap; - height: auto; - width: 100%; - } - } .cp-toolbar-title-hoverable:hover { .cp-toolbar-title-editable, .cp-toolbar-title-edit { cursor: text; @@ -626,7 +571,7 @@ } input { max-width: ~"calc(100% - 40px)"; - flex: 1; + //flex: 1; vertical-align: middle; box-sizing: border-box; cursor: auto; @@ -634,6 +579,7 @@ font-size: 20px; padding: 5px 5px; height: 40px; + line-height: 28px; // padding + border } } .cp-toolbar-link, .cp-toolbar-new { @@ -829,13 +775,37 @@ } } .cp-toolbar-rightside { + display: flex; min-height: @toolbar_line-height; overflow: hidden; + @media screen and (max-width: @barWidth) { // 450px + flex-wrap: wrap; + height: auto; + width: 100%; + } &:empty { min-height: 0; height: 0; } - text-align: right; + + .cp-toolbar-rightside-button { + cursor: pointer; + // UI actions + &.cp-toolbar-icon-toggle { order: 1; } + &.cp-toolbar-icon-preview { order: 2; } + &.cp-toolbar-icon-present { order: 3; } + // Content actions + &.cp-toolbar-icon-mediatag { order: 10; } + order: 11; + // Storage actions + &.cp-toolbar-icon-hashtag { order: 20; } + &.cp-toolbar-icon-template { order: 21; } + &.cp-toolbar-icon-forget { order: 22; } + // Drawer + &.cp-toolbar-drawer-button { order: 30; } + + } + .cp-toolbar-drawer-content:empty ~ .cp-toolbar-drawer-button { display: none; } @@ -854,6 +824,7 @@ font-size: 17px; } &> span { + order: 8; box-sizing: border-box; min-width: 150px; height: @toolbar_line-height; @@ -868,15 +839,36 @@ border: 0; width: 100%; line-height: 1em; + &.cp-toolbar-button-active { + background-color: inherit; + } .cp-toolbar-drawer-element { margin-left: 10px; display: inline; - vertical-align: top; + vertical-align: baseline; + } + &.fa-info-circle, &.fa-history, &.fa-cog { + .cp-toolbar-drawer-element { + margin-left: 11px; + } + } + &.fa-question { + .cp-toolbar-drawer-element { + margin-left: 16px; + } } &:hover { background-color: @colortheme_dropdown-bg-hover !important; color: @colortheme_dropdown-color; } + order: 8; + &.fa-history { order: 1; } + &.fa-download { order: 2; } + &.fa-upload { order: 3; } + &.fa-print { order: 4; } + &.fa-cog { order: 5; } + &.fa-info-circle { order: 6; } + &.fa-help { order: 7; } } } } diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index 08b974821..145d50720 100644 --- a/customize.dist/translations/messages.fr.js +++ b/customize.dist/translations/messages.fr.js @@ -218,6 +218,10 @@ define(function () { out.cancelButton = 'Annuler (Échap)'; out.doNotAskAgain = "Ne plus demander (Échap)"; + out.show_help_button = "Afficher l'aide"; + out.hide_help_button = "Cacher l'aide"; + out.help_button = "Aide"; + out.historyText = "Historique"; out.historyButton = "Afficher l'historique du document"; out.history_next = "Voir la version suivante"; @@ -278,9 +282,6 @@ define(function () { out.poll_locked = "Verrouillé"; out.poll_unlocked = "Déverrouillé"; - out.poll_show_help_button = "Afficher l'aide"; - out.poll_hide_help_button = "Cacher l'aide"; - out.poll_bookmark_col = "Marquer cette colonne comme favorite pour qu'elle soit toujours déverouillée et affichée en première position."; out.poll_bookmarked_col = "Voici votre colonne favorite; elle sera toujours dévérouillée et affichée en première position."; out.poll_total = 'TOTAL'; @@ -857,6 +858,7 @@ define(function () { out.creation_createFromTemplate = "Depuis un modèle"; out.creation_createFromScratch = "Nouveau pad vide"; out.creation_settings = "Préférences des nouveaux pads"; + out.creation_saveSettings = "Sauver les préférences"; // Properties about creation data out.creation_owners = "Propriétaires"; out.creation_ownedByOther = "Possédé par un autre utilisateur"; @@ -864,7 +866,8 @@ define(function () { out.creation_expiration = "Date d'expiration"; out.creation_propertiesTitle = "Disponibilité"; out.creation_appMenuName = "Mode avancé (Ctrl + E)"; - out.creation_newPadModalDescription = "Cliquez sur un type de pad pour le créer. Vous pouvez cocher la case pour afficher l'écran de création de pads"; + out.creation_newPadModalDescription = "Cliquez sur un type de pad pour le créer. Vous pouvez aussi appuyer sur Tab pour sélectionner un type et appuyer sur Entrée pour valider."; + out.creation_newPadModalDescriptionAdvanced = "Cochez la case si vous souhaitez voir l'écran de création de pads (pour les pads possédés ou à date d'expiration). Vous pouvez appuyer sur Espace pour changer sa valeur."; out.creation_newPadModalAdvanced = "Afficher l'écran de création de pads"; // New share modal diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index 1e15eac1c..92702a339 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -220,6 +220,10 @@ define(function () { out.cancelButton = 'Cancel (esc)'; out.doNotAskAgain = "Don't ask me again (Esc)"; + out.show_help_button = "Show help"; + out.hide_help_button = "Hide help"; + out.help_button = "Help"; + out.historyText = "History"; out.historyButton = "Display the document history"; out.history_next = "Go to the next version"; @@ -280,9 +284,6 @@ define(function () { out.poll_locked = "Locked"; out.poll_unlocked = "Unlocked"; - out.poll_show_help_button = "Show help"; - out.poll_hide_help_button = "Hide help"; - out.poll_bookmark_col = 'Bookmark this column so that it is always unlocked and displayed at the beginning for you'; out.poll_bookmarked_col = 'This is your bookmarked column. It will always be unlocked and displayed at the beginning for you.'; out.poll_total = 'TOTAL'; @@ -895,6 +896,7 @@ define(function () { out.creation_createFromTemplate = "From template"; out.creation_createFromScratch = "From scratch"; out.creation_settings = "New Pad settings"; + out.creation_saveSettings = "Save settings"; // Properties about creation data out.creation_owners = "Owners"; out.creation_ownedByOther = "Owned by another user"; @@ -902,7 +904,8 @@ define(function () { out.creation_expiration = "Expiration time"; out.creation_propertiesTitle = "Availability"; out.creation_appMenuName = "Advanced mode (Ctrl + E)"; - out.creation_newPadModalDescription = "Click on a pad type to create it. You can check the box if you want to display the pad creation screen (for owned pads, expiring pads, etc.)."; + out.creation_newPadModalDescription = "Click on a pad type to create it. You can also press Tab to select the type and press Enter to confirm."; + out.creation_newPadModalDescriptionAdvanced = "You can check the box (or press Space to change its value) if you want to display the pad creation screen (for owned pads, expiring pads, etc.)."; out.creation_newPadModalAdvanced = "Display the pad creation screen"; // New share modal diff --git a/www/code/inner.js b/www/code/inner.js index 091baa0e8..66010a485 100644 --- a/www/code/inner.js +++ b/www/code/inner.js @@ -54,6 +54,7 @@ define([ var MEDIA_TAG_MODES = Object.freeze([ 'markdown', + 'gfm', 'html', 'htmlembedded', 'htmlmixed', @@ -86,7 +87,7 @@ define([ $(helpMenu.text).html(DiffMd.render(Messages.codeInitialState)); - framework._.toolbar.$rightside.append(helpMenu.button); + framework._.toolbar.$drawer.append(helpMenu.button); }; var mkPreviewPane = function (editor, CodeMirror, framework, isPresentMode) { var $previewContainer = $('#cp-app-code-preview'); @@ -101,7 +102,7 @@ define([ class: 'cp-app-code-preview-empty' }).appendTo($previewContainer); - var $previewButton = framework._.sfCommon.createButton(null, true); + var $previewButton = framework._.sfCommon.createButton('preview', true); var forceDrawPreview = function () { try { if (editor.getValue() === '') { @@ -118,12 +119,6 @@ define([ forceDrawPreview(); }, 150); - $previewButton.removeClass('fa-question').addClass('fa-eye'); - window.setTimeout(function () { - // setTimeout needed for tippy (tooltip), otherwise we have the browser's default - // tooltips - $previewButton.attr('title', Messages.previewButtonTitle); - }); var previewTo; $previewButton.click(function () { clearTimeout(previewTo); @@ -327,6 +322,8 @@ define([ framework.setTitleRecommender(CodeMirror.getHeadingText); framework.onReady(function (newPad) { + editor.focus(); + if (newPad && !CodeMirror.highlightMode) { CodeMirror.setMode('gfm', evModeChange.fire); //console.log("%s => %s", CodeMirror.highlightMode, CodeMirror.$language.val()); @@ -370,13 +367,9 @@ define([ var getThumbnailContainer = function () { var $preview = $('#cp-app-code-preview-content'); - var $codeMirror = $('.CodeMirror'); if ($preview.length && $preview.is(':visible')) { return $preview[0]; } - if ($codeMirror.length) { - return $codeMirror[0]; - } }; var main = function () { diff --git a/www/common/common-interface.js b/www/common/common-interface.js index 4822e357b..d10b289cd 100644 --- a/www/common/common-interface.js +++ b/www/common/common-interface.js @@ -668,7 +668,6 @@ define([ position: 'bottom', distance: 0, performance: true, - dynamicTitle: true, delay: [delay, 0], sticky: true }); @@ -678,6 +677,12 @@ define([ setInterval(UI.clearTooltips, delay); var checkRemoved = function (x) { var out = false; + var xId = $(x).attr('aria-describedby'); + if (xId) { + if (xId.indexOf('tippy-tooltip-') === 0) { + return true; + } + } $(x).find('[aria-describedby]').each(function (i, el) { var id = el.getAttribute('aria-describedby'); if (id.indexOf('tippy-tooltip-') !== 0) { return; } @@ -691,6 +696,9 @@ define([ mutations.forEach(function(mutation) { if (mutation.type === "childList") { for (var i = 0; i < mutation.addedNodes.length; i++) { + if ($(mutation.addedNodes[i]).attr('title')) { + addTippy(0, mutation.addedNodes[i]); + } $(mutation.addedNodes[i]).find('[title]').each(addTippy); } for (var j = 0; j < mutation.removedNodes.length; j++) { diff --git a/www/common/common-thumbnail.js b/www/common/common-thumbnail.js index f0ba27194..f3864e6a3 100644 --- a/www/common/common-thumbnail.js +++ b/www/common/common-thumbnail.js @@ -177,6 +177,7 @@ define([ window.html2canvas = undefined; Thumb.fromDOM = function (opts, cb) { var element = opts.getContainer(); + if (!element) { return; } var todo = function () { if (opts.filter) { opts.filter(element, true); } window.html2canvas(element, { @@ -202,8 +203,8 @@ define([ var mkThumbnail = function () { var content = opts.getContent(); if (content === oldThumbnailState) { return; } + oldThumbnailState = content; Thumb.fromDOM(opts, function (err, b64) { - oldThumbnailState = content; Thumb.setPadThumbnail(common, opts.href, b64); }); }; diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 502f18bea..de550dc0c 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -463,12 +463,11 @@ define([ UIElements.createButton = function (common, type, rightside, data, callback) { var AppConfig = common.getAppConfig(); var button; - var size = "17px"; var sframeChan = common.getSframeChannel(); switch (type) { case 'export': button = $('