diff --git a/resources/icons/fullscreen.svg b/resources/icons/fullscreen.svg new file mode 100644 index 000000000..d00b574ff --- /dev/null +++ b/resources/icons/fullscreen.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/resources/js/components/markdown-editor.js b/resources/js/components/markdown-editor.js index 331cf2f01..25d6bde47 100644 --- a/resources/js/components/markdown-editor.js +++ b/resources/js/components/markdown-editor.js @@ -76,6 +76,7 @@ class MarkdownEditor { return; } if (action === 'insertDrawing') this.actionStartDrawing(); + if (action === 'fullscreen') this.actionFullScreen(); }); // Mobile section toggling @@ -480,6 +481,13 @@ class MarkdownEditor { }); } + // Make the editor full screen + actionFullScreen() { + const alreadyFullscreen = this.elem.classList.contains('fullscreen'); + this.elem.classList.toggle('fullscreen', !alreadyFullscreen); + document.body.classList.toggle('markdown-fullscreen', !alreadyFullscreen); + } + // Scroll to a specified text scrollToText(searchText) { if (!searchText) { diff --git a/resources/lang/en/common.php b/resources/lang/en/common.php index 1807217a3..c8b4a2b22 100644 --- a/resources/lang/en/common.php +++ b/resources/lang/en/common.php @@ -38,6 +38,7 @@ return [ 'reset' => 'Reset', 'remove' => 'Remove', 'add' => 'Add', + 'fullscreen' => 'Fullscreen', // Sort Options 'sort_options' => 'Sort Options', diff --git a/resources/sass/_codemirror.scss b/resources/sass/_codemirror.scss index e3f7028eb..28c777608 100644 --- a/resources/sass/_codemirror.scss +++ b/resources/sass/_codemirror.scss @@ -403,6 +403,7 @@ span.CodeMirror-selectedtext { background: none; } left: 0; width: 100%; height: 100%; + margin-bottom: 0; } /** diff --git a/resources/sass/_forms.scss b/resources/sass/_forms.scss index 1e0c908f9..3e7ff60f3 100644 --- a/resources/sass/_forms.scss +++ b/resources/sass/_forms.scss @@ -62,6 +62,13 @@ width: 50%; max-width: 50%; } + &.fullscreen { + position: fixed; + top: 0; + left: 0; + height: 100%; + z-index: 2; + } } @include smaller-than($m) { @@ -71,6 +78,7 @@ #markdown-editor .markdown-editor-wrap { width: 100%; max-width: 100%; + flex-grow: 1; } #markdown-editor .editor-toolbar { padding: 0; @@ -83,12 +91,15 @@ border-bottom: 1px solid #DDD; display: block; } - .markdown-editor-wrap:not(.active) .editor-toolbar + div, .markdown-editor-wrap:not(.active) .editor-toolbar .buttons { + .markdown-editor-wrap:not(.active) .editor-toolbar + div, + .markdown-editor-wrap:not(.active) .editor-toolbar .buttons, + .markdown-editor-wrap:not(.active) .markdown-display { display: none; } #markdown-editor .markdown-editor-wrap:not(.active) { flex-grow: 0; flex: none; + min-height: 0; } } diff --git a/resources/sass/_pages.scss b/resources/sass/_pages.scss index 709b1a7ef..9281a2194 100755 --- a/resources/sass/_pages.scss +++ b/resources/sass/_pages.scss @@ -20,10 +20,17 @@ } } -body.mce-fullscreen .page-editor .edit-area { +body.mce-fullscreen .page-editor .edit-area, +body.markdown-fullscreen .page-editor .edit-area { z-index: 12; } +body.mce-fullscreen, body.markdown-fullscreen { + .page-editor, .flex-fill { + overflow: visible; + } +} + @include smaller-than($s) { .page-edit-toolbar { overflow-x: scroll; diff --git a/resources/views/pages/markdown-editor.blade.php b/resources/views/pages/markdown-editor.blade.php index 526441138..85afbea06 100644 --- a/resources/views/pages/markdown-editor.blade.php +++ b/resources/views/pages/markdown-editor.blade.php @@ -9,17 +9,21 @@