From 74e59a513afa76f082a9b66cff9a626fcb1e44c3 Mon Sep 17 00:00:00 2001 From: yflory Date: Mon, 27 Nov 2017 17:55:20 +0100 Subject: [PATCH] Add the markdown toolbar to the slide and poll apps --- customize.dist/src/less2/include/toolbar.less | 1 + www/code/inner.js | 3 ++- www/common/common-ui-elements.js | 7 ++++++- www/common/sframe-app-framework.js | 1 + www/poll/app-poll.less | 5 +++++ www/poll/inner.js | 5 +++++ www/slide/app-slide.less | 14 +++++++++++++- www/slide/inner.html | 4 +++- www/slide/inner.js | 8 ++++++++ 9 files changed, 44 insertions(+), 4 deletions(-) diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less index 00db20553..dbc30a3ec 100644 --- a/customize.dist/src/less2/include/toolbar.less +++ b/customize.dist/src/less2/include/toolbar.less @@ -173,6 +173,7 @@ .cp-markdown-toolbar { height: @toolbar_line-height; background-color: lighten(@bg-color, 20%); + display: none; button { outline: 0; color: @color; diff --git a/www/code/inner.js b/www/code/inner.js index fad828fa6..7417206c4 100644 --- a/www/code/inner.js +++ b/www/code/inner.js @@ -144,13 +144,14 @@ define([ } }); markdownTb.setState(true); + return; } $editorContainer.removeClass('cp-app-code-present'); $previewButton.hide(); $previewContainer.hide(); $previewButton.removeClass('active'); $codeMirrorContainer.addClass('cp-app-code-fullpage'); - markdownTb.setState(true); + markdownTb.setState(false); }; var isVisible = function () { diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 32b89c424..57392a5cd 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -374,10 +374,13 @@ define([ if (e) { return void console.error(e); } }); }; + var $toolbarButton = common.createButton('toggle', true, cfg, onClick); + var tbState = true; common.getAttribute(['general', 'markdown-help'], function (e, data) { if (e) { return void console.error(e); } - if (data === true && $toolbarButton) { + if (data === true && $toolbarButton.length && tbState) { + console.log($toolbar.is(':visible')); $toolbarButton.click(); } }); @@ -385,6 +388,7 @@ define([ // setState provides the ability to disable the toolbar and the button in case we don't // have the markdown editor available (in code we can switch mode, in poll we can publish) var setState = function (state) { + tbState = state; if (!state) { $toolbar.hide(); $toolbarButton.hide(); @@ -411,6 +415,7 @@ define([ setState: setState }; }; + // Avatars // Enable mediatags diff --git a/www/common/sframe-app-framework.js b/www/common/sframe-app-framework.js index fc233bf02..1f7723cf3 100644 --- a/www/common/sframe-app-framework.js +++ b/www/common/sframe-app-framework.js @@ -253,6 +253,7 @@ define([ newContent = normalize(newContent); contentUpdate(newContent); } else { + console.log('updating title'); title.updateTitle(title.defaultTitle); evOnDefaultContentNeeded.fire(); } diff --git a/www/poll/app-poll.less b/www/poll/app-poll.less index 2d28c3a90..08acd2b6b 100644 --- a/www/poll/app-poll.less +++ b/www/poll/app-poll.less @@ -139,6 +139,11 @@ table#cp-app-poll-table { width: auto; display: inline-block; } +.cp-markdown-toolbar { + margin: auto; + min-width: 80%; + width: 80%; +} #cp-app-poll-description { &~ .CodeMirror { margin: auto; diff --git a/www/poll/inner.js b/www/poll/inner.js index b8af07890..5c19162d6 100644 --- a/www/poll/inner.js +++ b/www/poll/inner.js @@ -258,6 +258,7 @@ define([ }; var setTablePublished = function (bool) { + if (APP.markdownTb) { APP.markdownTb.setState(!bool); } if (bool) { if (APP.$publish) { APP.$publish.hide(); } if (APP.$admin) { APP.$admin.show(); } @@ -993,6 +994,10 @@ define([ updateDescription(null, APP.proxy.description || ''); initThumbnails(); + var markdownTb = APP.markdownTb = common.createMarkdownToolbar(APP.editor); + $('.CodeMirror').parent().prepend(markdownTb.toolbar); + APP.toolbar.$rightside.append(markdownTb.button); + // Initialize author name for comments. // Disable name modification for logged in users var $cName = APP.$addComment.find('.cp-app-poll-comments-add-name') diff --git a/www/slide/app-slide.less b/www/slide/app-slide.less index f9bb7b09c..a53a8f85e 100644 --- a/www/slide/app-slide.less +++ b/www/slide/app-slide.less @@ -33,9 +33,21 @@ h4 { font-size: 31px; } h5 { font-size: 27px; } h6 { font-size: 24px; } -.CodeMirror { +#cp-app-slide-editor-container { + display: inline-flex; + flex-flow: column; height: 100%; min-height: 100%; + width: 50%; + min-width: 20%; + max-width: 80%; + overflow: hidden; + max-width: 100%; + flex: 1; +} +.CodeMirror { + flex: 1; + width: 100%; font-size: initial; } .CodeMirror-focused .cm-matchhighlight { diff --git a/www/slide/inner.html b/www/slide/inner.html index b7f831ccd..c04091cf7 100644 --- a/www/slide/inner.html +++ b/www/slide/inner.html @@ -12,7 +12,9 @@
- +
+ +
diff --git a/www/slide/inner.js b/www/slide/inner.js index 37c284d72..a50228114 100644 --- a/www/slide/inner.js +++ b/www/slide/inner.js @@ -358,6 +358,13 @@ define([ }); }; + var mkMarkdownToolbar = function (framework, editor) { + var $codeMirrorContainer = $('#cp-app-slide-editor-container'); + var markdownTb = framework._.sfCommon.createMarkdownToolbar(editor); + $codeMirrorContainer.prepend(markdownTb.toolbar); + framework._.toolbar.$rightside.append(markdownTb.button); + }; + var activateLinks = function ($content, framework) { $content.click(function (e) { if (!e.target) { return; } @@ -396,6 +403,7 @@ define([ mkColorConfiguration(framework, $modal); mkFilePicker(framework, editor); mkSlidePreviewPane(framework, $contentContainer); + mkMarkdownToolbar(framework, editor); CodeMirror.configureTheme();