Sticky editor toolbar

qvacuba · Apr 12, 2021 · 44eb7e1 · 44eb7e1
1 parent 7e1601a
commit 44eb7e1
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 26 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/components.js b/src/Blogifier.Admin/wwwroot/admin/js/components.js
@@ -69,6 +69,7 @@ window.commonJsFunctions = {
   loadEditor: function () {
     easymde = getEditor();
     autosize(document.querySelectorAll('.autosize'));
+    window.onscroll = function () { stickyToolbar() };
   },
   setEditorValue: function (txt) {
     easymde.value(txt

diff --git a/src/Blogifier.Admin/wwwroot/admin/js/editor.js b/src/Blogifier.Admin/wwwroot/admin/js/editor.js
@@ -1,5 +1,5 @@
 const
-    editorIcon_heading = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-h" viewBox="0 0 16 16" ><path d="M12 13V3H10.59V7.23443H5.40996V3H4V13H5.40996V8.42125H10.59V13H12Z"/></svg>`
+  editorIcon_heading = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-h" viewBox="0 0 16 16" ><path d="M12 13V3H10.59V7.23443H5.40996V3H4V13H5.40996V8.42125H10.59V13H12Z"/></svg>`
   , editorIcon_bold = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-type-bold" viewBox="0 0 16 16"><path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"/></svg>`
   , editorIcon_italic = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-type-italic" viewBox="0 0 16 16"><path d="M7.991 11.674 9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"/></svg>`
   , editorIcon_strikethrough = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-type-strikethrough" viewBox="0 0 16 16"><path d="M6.333 5.686c0 .31.083.581.27.814H5.166a2.776 2.776 0 0 1-.099-.76c0-1.627 1.436-2.768 3.48-2.768 1.969 0 3.39 1.175 3.445 2.85h-1.23c-.11-1.08-.964-1.743-2.25-1.743-1.23 0-2.18.602-2.18 1.607zm2.194 7.478c-2.153 0-3.589-1.107-3.705-2.81h1.23c.144 1.06 1.129 1.703 2.544 1.703 1.34 0 2.31-.705 2.31-1.675 0-.827-.547-1.374-1.914-1.675L8.046 8.5H1v-1h14v1h-3.504c.468.437.675.994.675 1.697 0 1.826-1.436 2.967-3.644 2.967z"/></svg>`
@@ -184,14 +184,18 @@ function insertYoutube(editor) {
   }
 }
 
-// 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();
-//   }
-// }
+// stick the toolbar to the top
 
+function stickyToolbar() {
+  var toolbar = document.querySelector(".editor-toolbar");
+  var editor = document.querySelector(".editor-editor");
+
+
+  var sticky = editor.offsetTop;
+
+  if (window.pageYOffset > sticky) {
+    toolbar.classList.add("-sticky");
+  } else {
+    toolbar.classList.remove("-sticky");
+  }
+}
diff --git a/src/Blogifier.Admin/wwwroot/admin/scss/include/_editor.scss b/src/Blogifier.Admin/wwwroot/admin/scss/include/_editor.scss
@@ -64,15 +64,41 @@
   position: absolute;
   top: 0;
   left: 0;
-  right: 0;
+  width: 100%;
   user-select: none;
   border-bottom: 1px solid $gray-200;
   display: flex;
   z-index: 5;
+  height: 3rem;
+
+  &.-sticky {
+    width: 61rem;
+    position: fixed;
+    top: 0;
+    left: auto;
+    background-color: #fff;
+    border-bottom-color: $gray-100;
+
+    &::after {
+      content: "";
+      display: block;
+      width: 100%;
+      position: absolute;
+      bottom: -2rem;
+      left: 0;
+      height: 2rem;
+      background-image: linear-gradient(180deg, rgba(#000, 0.1), transparent);
+      z-index: 6;
+    }
+    @media screen and (max-width: 1199px) {
+      width: 100%;
+      left: 0;
+    }
+  }
 
   &.fullscreen {
     width: 100%;
-    height: 4rem;
+    height: 3rem;
     box-sizing: border-box;
     background: #fff;
     position: fixed;
@@ -81,7 +107,18 @@
     opacity: 1;
     z-index: 100;
     button {
-      height: 4rem;
+      height: 3rem;
+    }
+    &::after {
+      content: "";
+      display: block;
+      width: 100%;
+      position: absolute;
+      bottom: -2rem;
+      left: 0;
+      height: 2rem;
+      background-image: linear-gradient(180deg, rgba(#000, 0.1), transparent);
+      z-index: 6;
     }
   }
 
@@ -101,39 +138,48 @@
     padding: 0;
     cursor: pointer;
     flex-grow: 1;
+    border-bottom: 1px solid transparent;
+    border-radius: 0;
 
     &:not(:last-child) {
-      border-right: 1px solid #fff;
+      margin-right: 1px;
     }
 
-    &.active,
     &:hover {
-      background: rgba($blogifier, 0.1);
+      background-color: $gray-100;
+      border-bottom-color: $gray-300;
+
+      .bi {
+        fill: $gray-900;
+      }
+    }
+
+    &.active {
+      background-color: rgba($blogifier, 0.1);
+      border-bottom-color: rgba($blogifier, 0.2);
       .bi {
         fill: $blogifier;
       }
     }
 
     .bi {
       fill: $gray-800;
-      &-blockquote-left,
-      &-table,
-      &-image {
-        fill: $gray-800;
-      }
     }
   }
 
   &.disabled-for-preview {
     button:not(.no-disable) {
       opacity: 0.6;
       pointer-events: none;
+      background-color: #fff !important;
+      border-bottom-color: transparent !important;
+      .bi {
+        fill: $gray-800 !important;
+      }
     }
   }
 }
 
-
-
 //
 .editor-preview {
   font-size: 1rem;
@@ -155,6 +201,7 @@
   iframe {
     max-width: 100%;
   }
+
   &-full {
     position: absolute;
     width: 100%;