blogifierdotnet#267 - Editor part 6

qvacuba · Apr 7, 2021 · 600fb4c · 600fb4c
1 parent 81a59f3
commit 600fb4c
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 14 deletions.
diff --git a/src/Blogifier.Admin/wwwroot/admin/css/app.css b/src/Blogifier.Admin/wwwroot/admin/css/app.css
diff --git a/src/Blogifier.Admin/wwwroot/admin/css/app.css.map b/src/Blogifier.Admin/wwwroot/admin/css/app.css.map
diff --git a/src/Blogifier.Admin/wwwroot/admin/js/editor.js b/src/Blogifier.Admin/wwwroot/admin/js/editor.js
@@ -16,6 +16,7 @@ const
   , editorIcon_clear = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eraser" viewBox="0 0 16 16"><path d="M8.086 2.207a2 2 0 0 1 2.828 0l3.879 3.879a2 2 0 0 1 0 2.828l-5.5 5.5A2 2 0 0 1 7.879 15H5.12a2 2 0 0 1-1.414-.586l-2.5-2.5a2 2 0 0 1 0-2.828l6.879-6.879zm2.121.707a1 1 0 0 0-1.414 0L4.16 7.547l5.293 5.293 4.633-4.633a1 1 0 0 0 0-1.414l-3.879-3.879zM8.746 13.547 3.453 8.254 1.914 9.793a1 1 0 0 0 0 1.414l2.5 2.5a1 1 0 0 0 .707.293H7.88a1 1 0 0 0 .707-.293l.16-.16z"/></svg>`
   , editorIcon_preview = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16"><path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/><path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/></svg>`
   , editorIcon_sidebyside = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-layout-split" viewBox="0 0 16 16"><path d="M0 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3zm8.5-1v12H14a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H8.5zm-1 0H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h5.5V2z"/></svg>`
+  , editorIcon_fullscreen = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrows-fullscreen" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707zm4.344 0a.5.5 0 0 1 .707 0l4.096 4.096V11.5a.5.5 0 1 1 1 0v3.975a.5.5 0 0 1-.5.5H11.5a.5.5 0 0 1 0-1h2.768l-4.096-4.096a.5.5 0 0 1 0-.707zm0-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707zm-4.344 0a.5.5 0 0 1-.707 0L1.025 1.732V4.5a.5.5 0 0 1-1 0V.525a.5.5 0 0 1 .5-.5H4.5a.5.5 0 0 1 0 1H1.732l4.096 4.096a.5.5 0 0 1 0 .707z"/></svg>`
   ;
 
 const
@@ -105,7 +106,7 @@ const
   },
   editorToolbar_preview = {
     name: "editor-toolbar-preview",
-    action: EasyMDE.togglePreview,
+    action: previewAction,
     icon: editorIcon_preview,
     title: "Toggle Preview",
     noDisable: true,
@@ -116,6 +117,13 @@ const
     icon: editorIcon_sidebyside,
     title: "Toggle Side by Side",
     noDisable: true,
+  },
+  editorToolbar_fullscreen = {
+    name: "editor-toolbar-fullscreen",
+    action: EasyMDE.toggleFullScreen,
+    icon: editorIcon_fullscreen,
+    title: "Toggle Fullscreen",
+    noDisable: true,
   };
 
 function getEditor() {
@@ -153,6 +161,8 @@ function getEditor() {
       editorToolbar_clear,
       editorToolbar_preview,
       editorToolbar_sidebyside,
+      editorToolbar_fullscreen,
+
     ]
   });
   return easyMDE;
@@ -175,3 +185,14 @@ function insertYoutube(editor) {
     cm.replaceSelection(tag);
   }
 }
+
+function previewAction() {
+  let editable = document.querySelector('.CodeMirror-scroll');
+  if (easymde.isPreviewActive()) {
+    easymde.togglePreview();
+    editable.classList.remove('d-none');
+  } else {
+    editable.classList.add('d-none');
+    easymde.togglePreview();
+  }
+}
diff --git a/src/Blogifier.Admin/wwwroot/admin/scss/include/_codemirror.scss b/src/Blogifier.Admin/wwwroot/admin/scss/include/_codemirror.scss
@@ -41,9 +41,6 @@
   color: #292;
 }
 
-
-// I don't know what these are all about
-
 .CodeMirror-composing {
   border-bottom: 2px solid;
 }
@@ -55,16 +52,19 @@
 }
 .CodeMirror-scroll {
   overflow: scroll !important;
-  margin-bottom: -4rem;
-  margin-right: -4rem;
-  padding-bottom: 4rem;
+  margin-bottom: -4.0625rem;
+  margin-right: -4.0625rem;
+  padding-bottom: 4.0625rem;
+  padding-right: 1rem;
+  padding: 3rem 4rem 6rem 3rem;
+
   height: 100%;
   outline: 0;
   position: relative;
 }
 .CodeMirror-sizer {
   position: relative;
-  border-right: 50px solid transparent;
+  border-right: 4.0625rem solid transparent;
 }
 .CodeMirror-gutter-filler,
 .CodeMirror-hscrollbar,
@@ -107,7 +107,7 @@
   height: 100%;
   display: inline-block;
   vertical-align: top;
-  margin-bottom: -50px;
+  margin-bottom: -3.125rem;
 }
 .CodeMirror-gutter-wrapper {
   position: absolute;

diff --git a/src/Blogifier.Admin/wwwroot/admin/scss/include/_editor.scss b/src/Blogifier.Admin/wwwroot/admin/scss/include/_editor.scss
@@ -10,7 +10,7 @@
   box-sizing: border-box;
   height: auto;
   border: none;
-  padding: 3rem;
+  padding: 0;
   font: inherit;
   z-index: 0;
   word-wrap: break-word;
@@ -29,6 +29,10 @@
   z-index: 8;
   border-right: none !important;
   border-bottom-right-radius: 0 !important;
+
+  .CodeMirror-lines {
+    padding-bottom: 10rem;
+  }
 }
 .EasyMDEContainer .CodeMirror-sided {
   width: 50% !important;
@@ -179,6 +183,11 @@
   border: 1px solid #ddd;
   word-wrap: break-word;
 }
+.editor-preview-side {
+  iframe {
+    max-width: 100%;
+  }
+}
 .editor-preview-active-side {
   display: block;
 }
@@ -191,8 +200,9 @@
   display: block;
 }
 .editor-preview {
-  padding: 10px;
-  background: #fafafa;
+  font-size: 1rem;
+  padding: 3rem;
+  background: #fff;
 }
 .editor-preview > p {
   margin-top: 0;