diff --git a/customize.dist/src/less2/include/markdown.less b/customize.dist/src/less2/include/markdown.less index 4759ea5cb..470f81a82 100644 --- a/customize.dist/src/less2/include/markdown.less +++ b/customize.dist/src/less2/include/markdown.less @@ -23,5 +23,15 @@ } } +.markdown_main() { + blockquote { + background: #e5e5e5; + padding: 10px; + border-left: 3px solid #999; + padding-right: 0; + p { margin: 0; } + blockquote { margin: 0; } + } +} // todo ul, ol diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index e4499d67e..00db20553 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/customize.dist/src/less2/include/toolbar.less @@ -23,6 +23,33 @@ display: flex; } + .toolbar_button { + height: @toolbar_line-height; + box-sizing: border-box; + padding: 3px 10px; + margin: 0; + transition: all 0.15s; + .tools_unselectable(); + &.cp-toolbar-hidden { + display: none; + } + .cp-toolbar-drawer-element { + display: none; + } + // Bootstrap 4 colors (btn-secondary) + border: 1px solid transparent; + color: inherit; + font: @toolbar_button-font; + * { + color: inherit; + font: @toolbar_button-font; + } + background: transparent; + &:hover { + background-color: rgba(50,50,50,0.3); + } + } + .cp-toolbar-userlist-drawer { background-color: @colortheme_default-bg; font: @colortheme_app-font-size @colortheme_font; @@ -143,6 +170,20 @@ } .addToolbarColors (@color, @bg-color, @barWidth: 600px) { + .cp-markdown-toolbar { + height: @toolbar_line-height; + background-color: lighten(@bg-color, 20%); + button { + outline: 0; + color: @color; + .toolbar_button; + font: normal normal normal 14px/1 FontAwesome; + &:hover { + background-color: lighten(@bgcolor, 8%); + } + &.cp-markdown-help { float: right; } + } + } .cp-toolbar-userlist-drawer { background-color: @bgcolor; color: @color; @@ -282,7 +323,6 @@ .addToolbarColors(@color, @bgcolor); } - .cp-toolbar { * { outline-width: 0; @@ -328,28 +368,7 @@ } button { - transition: all 0.15s; - .tools_unselectable(); - &.cp-toolbar-hidden { - display: none; - } - .cp-toolbar-drawer-element { - display: none; - } - // Bootstrap 4 colors (btn-secondary) - border: 1px solid transparent; - color: inherit; - font: @toolbar_button-font; - * { - color: inherit; - font: @toolbar_button-font; - } - } - .cp-toolbar-rightside button, .cp-toolbar-leftside button { - background: transparent; - &:hover { - background-color: rgba(50,50,50,0.3); - } + .toolbar_button; } .cp-toolbar-limit { @@ -373,13 +392,12 @@ white-space: normal; } - button, select { + /*button, select { height: @toolbar_line-height; box-sizing: border-box; padding: 3px 10px; margin: 0; - - } + }*/ .cp-toolbar-rightside-button { float: right; diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index 4565af03f..7a0ee42d4 100644 --- a/customize.dist/translations/messages.fr.js +++ b/customize.dist/translations/messages.fr.js @@ -559,6 +559,22 @@ define(function () { // general warnings out.warn_notPinned = "Ce pad n'est stocké dans aucun CryptDrive. Il va expirer après 3 mois d'inactivité. En savoir plus..."; + // markdown toolbar + out.mdToolbar_button = "Afficher ou cacher la barre d'outils Markdown"; + out.mdToolbar_defaultText = "Votre texte ici"; + out.mdToolbar_help = "Aide"; + out.mdToolbar_tutorial = "https://blog.wax-o.com/2014/04/tutoriel-un-guide-pour-bien-commencer-avec-markdown/"; + out.mdToolbar_bold = "Gras"; + out.mdToolbar_italic = "Italique"; + out.mdToolbar_strikethrough = "Barré"; + out.mdToolbar_heading = "Titre"; + out.mdToolbar_link = "Lien"; + out.mdToolbar_quote = "Citation"; + out.mdToolbar_nlist = "Liste ordonnée"; + out.mdToolbar_list = "Liste à puces"; + out.mdToolbar_check = "Liste de tâches"; + out.mdToolbar_code = "Code"; + // index.html //about.html diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index e19be756c..511629de8 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -564,6 +564,22 @@ define(function () { // general warnings out.warn_notPinned = "This pad is not in anyone's CryptDrive. It will expire after 3 months. Learn more..."; + // markdown toolbar + out.mdToolbar_button = "Show or hide the Markdown toolbar"; + out.mdToolbar_defaultText = "Your text here"; + out.mdToolbar_help = "Help"; + out.mdToolbar_tutorial = "http://www.markdowntutorial.com/"; + out.mdToolbar_bold = "Bold"; + out.mdToolbar_italic = "Italic"; + out.mdToolbar_strikethrough = "Strikethrough"; + out.mdToolbar_heading = "Heading"; + out.mdToolbar_link = "Link"; + out.mdToolbar_quote = "Quote"; + out.mdToolbar_nlist = "Ordered list"; + out.mdToolbar_list = "Bullet list"; + out.mdToolbar_check = "Task list"; + out.mdToolbar_code = "Code"; + // index.html diff --git a/www/bounce/main.js b/www/bounce/main.js index dfd3bb2cd..74a0d0154 100644 --- a/www/bounce/main.js +++ b/www/bounce/main.js @@ -6,5 +6,6 @@ define([], function () { } var bounceTo = decodeURIComponent(window.location.hash.slice(1)); if (!bounceTo) { return; } + window.opener = null; window.location.href = bounceTo; }); diff --git a/www/code/app-code.less b/www/code/app-code.less index d2303d0b2..2541431ea 100644 --- a/www/code/app-code.less +++ b/www/code/app-code.less @@ -17,21 +17,27 @@ max-height: 100%; min-height: auto; - .CodeMirror { - display: inline-block; + #cp-app-code-container { + display: inline-flex; + flex-flow: column; height: 100%; min-height: 100%; width: 50%; min-width: 20%; max-width: 80%; resize: horizontal; - font-size: initial; + overflow: hidden; + &.cp-app-code-fullpage { + max-width: 100%; + resize: none; + flex: 1; + } + } - .CodeMirror.cp-app-code-fullpage { - //min-width: 100%; - max-width: 100%; - resize: none; + .CodeMirror { flex: 1; + font-size: initial; + width: 100%; } .CodeMirror-focused .cm-matchhighlight { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==); @@ -68,6 +74,7 @@ max-height:50vh; } } + .markdown_main(); } #cp-app-code-preview-content { diff --git a/www/code/inner.html b/www/code/inner.html index 327363fd0..f80e13c9c 100644 --- a/www/code/inner.html +++ b/www/code/inner.html @@ -12,7 +12,9 @@
- +
+ +
diff --git a/www/code/inner.js b/www/code/inner.js index 3a36c9ec7..cc8511659 100644 --- a/www/code/inner.js +++ b/www/code/inner.js @@ -67,10 +67,13 @@ define([ var $previewContainer = $('#cp-app-code-preview'); var $preview = $('#cp-app-code-preview-content'); var $editorContainer = $('#cp-app-code-editor'); + var $codeMirrorContainer = $('#cp-app-code-container'); var $codeMirror = $('.CodeMirror'); - var $previewButton = framework._.sfCommon.createButton(null, true); + var markdownTb = framework._.sfCommon.createMarkdownToolbar(editor); + $codeMirrorContainer.prepend(markdownTb.toolbar); + var $previewButton = framework._.sfCommon.createButton(null, true); var forceDrawPreview = function () { try { DiffMd.apply(DiffMd.render(editor.getValue()), $preview); @@ -101,20 +104,21 @@ define([ $previewContainer.toggle(); if ($previewContainer.is(':visible')) { forceDrawPreview(); - $codeMirror.removeClass('cp-app-code-fullpage'); + $codeMirrorContainer.removeClass('cp-app-code-fullpage'); $previewButton.addClass('cp-toolbar-button-active'); framework._.sfCommon.setPadAttribute('previewMode', true, function (e) { if (e) { return console.log(e); } }); } else { - $codeMirror.addClass('cp-app-code-fullpage'); + $codeMirrorContainer.addClass('cp-app-code-fullpage'); $previewButton.removeClass('cp-toolbar-button-active'); framework._.sfCommon.setPadAttribute('previewMode', false, function (e) { if (e) { return console.log(e); } }); } }); - framework._.toolbar.$rightside.append($previewButton); + + framework._.toolbar.$rightside.append($previewButton).append(markdownTb.button); $preview.click(function (e) { if (!e.target) { return; } @@ -135,19 +139,20 @@ define([ if (data !== false) { $previewContainer.show(); $previewButton.addClass('cp-toolbar-button-active'); - $codeMirror.removeClass('cp-app-code-fullpage'); + $codeMirrorContainer.removeClass('cp-app-code-fullpage'); if (isPresentMode) { $editorContainer.addClass('cp-app-code-present'); } } }); - return; + markdownTb.setState(true); } $editorContainer.removeClass('cp-app-code-present'); $previewButton.hide(); $previewContainer.hide(); $previewButton.removeClass('active'); - $codeMirror.addClass('cp-app-code-fullpage'); + $codeMirrorContainer.addClass('cp-app-code-fullpage'); + markdownTb.setState(true); }; var isVisible = function () { @@ -164,7 +169,7 @@ define([ splitter.css('top', $preview.scrollTop() + 'px'); }); - var $target = $('.CodeMirror'); + var $target = $codeMirrorContainer; splitter.on('mousedown', function (e) { e.preventDefault(); @@ -372,7 +377,7 @@ define([ SFCommon.create(waitFor(function (c) { common = c; })); }).nThen(function () { CodeMirror = common.initCodeMirrorApp(null, CMeditor); - $('.CodeMirror').addClass('cp-app-code-fullpage'); + $('#cp-app-code-container').addClass('cp-app-code-fullpage'); editor = CodeMirror.editor; }).nThen(waitFor()); diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index aea63b510..a6d680e7f 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -227,6 +227,27 @@ define([ .click(common.prepareFeedback(type)) .click(function () { UIElements.updateTags(common, null); }); break; + case 'toggle': + button = $('