Editors: Tightened up new design, adjusted for MD editor

Author: ssddanbrown

resources/sass/_forms.scss

@@ -148,10 +148,9 @@ html.markdown-editor-display.dark-mode {
   width: 100%;
   font-size: 11px;
   line-height: 1.6;
-  border-bottom: 1px solid #DDD;
-  background-color: #EEE;
-  @include lightDark(background-color, #eee, #111);
-  @include lightDark(border-color, #ddd, #000);
+  border-bottom: 1px solid #CCC;
+  //background-color: var(--color-primary-light);
+  @include lightDark(border-color, #CCC, #000);
   flex: none;
   @include whenDark {
     button {
@@ -398,27 +397,6 @@ input[type=color] {
   height: auto;
 }
 
-.title-input.page-title {
-  font-size: 0.8em;
-  @include lightDark(background-color, #fff, #333);
-  .input {
-    border: 0;
-    margin-bottom: -1px;
-  }
-  input[type="text"] {
-    max-width: 840px;
-    margin: 0 auto;
-    border: none;
-    height: auto;
-  }
-}
-
-.page-title input {
-  display: block;
-  width: 100%;
-  font-size: 1.4em;
-}
-
 .description-input textarea {
   display: block;
   width: 100%;
@@ -428,11 +406,6 @@ input[type=color] {
   height: auto;
 }
 
-div[editor-type="markdown"] .title-input.page-title input[type="text"] {
-  max-width: 100%;
-  border-radius: 0;
-}
-
 .search-box {
   max-width: 100%;
   position: relative;

resources/sass/_pages.scss

@@ -21,21 +21,57 @@
 
 .page-editor-page-area {
   width: 100%;
-  max-width: 1140px;
   border-radius: 8px;
   box-shadow: $bs-card;
-  overflow: hidden;
+  background-color: #FFF;
 }
 
 .page-edit-toolbar {
   width: 100%;
-  max-width: 1140px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: minmax(max-content, 2fr) 1.5fr minmax(max-content, 2fr);
   align-items: center;
 }
 
+.page-editor-wysiwyg .page-edit-toolbar,
+.page-editor-wysiwyg .page-editor-page-area {
+  max-width: 1140px;
+}
+
+.page-editor-markdown .floating-toolbox {
+  position: relative;
+}
+
+.title-input.page-title {
+  font-size: 0.8em;
+  .input {
+    border: 0;
+    margin-bottom: -1px;
+  }
+  input[type="text"] {
+    max-width: 840px;
+    margin: 0 auto;
+    border: none;
+    height: auto;
+    display: block;
+    width: 100%;
+    font-size: 20px;
+    border-radius: 4px;
+  }
+  input[type="text"]:focus {
+    position: relative;
+    outline-offset: -1px;
+    outline: 1px dashed var(--color-primary);
+    box-shadow: $bs-card;
+    z-index: 50;
+  }
+}
+
+.page-editor-markdown .title-input.page-title input[type="text"] {
+  max-width: 100%;
+}
+
 body.tox-fullscreen .page-editor .edit-area,
 body.markdown-fullscreen .page-editor .edit-area {
   z-index: 12;
@@ -176,12 +212,12 @@ body.tox-fullscreen, body.markdown-fullscreen {
   max-height: 100%;
   border-radius: 8px;
   box-shadow: $bs-card;
-  position: fixed;
-  right: $-s;
   margin-bottom: auto;
+  margin-left: $-l;
+  position: absolute;
   &.open {
-    right: 0;
     position: relative;
+    right: 0;
     max-width: 480px;
     margin-bottom: 0;
   }
@@ -195,7 +231,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
     transition: background-color ease-in-out 180ms;
   }
   &.open .toolbox-toggle {
-    background-color: rgba(255, 0, 0, 0.29);
+    background-color: rgba(255, 0, 0, 0.20);
   }
   &.open .toolbox-toggle svg {
     transform: rotate(180deg);
@@ -211,28 +247,27 @@ body.tox-fullscreen, body.markdown-fullscreen {
     margin-right: -1px;
   }
   .tabs-inner {
-    //box-shadow: $bs-large;
     @include lightDark(background-color, #FFFFFF, #222);
-    //border-radius: 8px;
-    overflow: hidden;
   }
   .tabs svg {
     padding: 0;
     margin: 0;
   }
   .tabs-inner > button {
-    //border-block-end: 1px solid #CCC;
-    //@include lightDark(border-color, #CCC, #000);
     @include lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.5));
     display: block;
     cursor: pointer;
     padding: 10px $-xs;
-    font-size: 16px;
+    font-size: 18px;
     line-height: 1.6;
   }
-  &.open .tabs-inner > button.active {
+  .tabs-inner > button:hover,  &.open .tabs-inner > button.active {
     background-color: var(--color-primary-light);
-    color: var(--color-primary)
+    color: var(--color-primary);
+  }
+  &.open .tabs-inner > button.active {
+    border-inline-end: 1px solid var(--color-primary);
+    margin-inline-end: -1px;
   }
   h4 {
     font-size: 24px;

resources/sass/_tinymce.scss

@@ -12,6 +12,7 @@
 // Editor wrapper edits
 .tox.tox-tinymce {
   border-inline: 0;
+  border-bottom: 0;
 }
 
 // In editor body overrides

resources/views/pages/parts/form.blade.php

@@ -1,4 +1,4 @@
-<div component="page-editor" class="page-editor flex-fill flex"
+<div component="page-editor" class="page-editor page-editor-{{ $editor }} flex-fill flex"
      option:page-editor:drafts-enabled="{{ $draftsEnabled ? 'true' : 'false' }}"
      @if(config('services.drawio'))
         drawio-url="{{ is_string(config('services.drawio')) ? config('services.drawio') : 'https://embed.diagrams.net/?embed=1&proto=json&spin=1&configure=1' }}"
@@ -20,7 +20,7 @@
     {{--Header Toolbar--}}
     @include('pages.parts.editor-toolbar', ['model' => $model, 'editor' => $editor, 'isDraft' => $isDraft, 'draftsEnabled' => $draftsEnabled])
 
-    <div class="flex flex-fill mx-s mb-xs gap-m justify-center">
+    <div class="flex flex-fill mx-s mb-s justify-center">
         <div class="page-editor-page-area flex-container-column flex flex-fill">
             {{--Title input--}}
             <div class="title-input page-title clearfix">
@@ -48,7 +48,9 @@
             </div>
         </div>
 
-        @include('pages.parts.editor-toolbox')
+        <div class="relative flex-fill">
+            @include('pages.parts.editor-toolbox')
+        </div>
     </div>
 
     {{--Mobile Save Button--}}

resources/views/pages/parts/markdown-editor.blade.php

@@ -7,7 +7,7 @@ class="flex-fill flex code-fill">
 
     <div class="markdown-editor-wrap active flex-container-column">
         <div class="editor-toolbar flex-container-row items-stretch justify-space-between">
-            <div class="editor-toolbar-label text-mono px-m py-xs flex-container-row items-center flex">
+            <div class="editor-toolbar-label text-mono bold px-m py-xs flex-container-row items-center flex">
                 <span>{{ trans('entities.pages_md_editor') }}</span>
             </div>
             <div component="dropdown" class="buttons flex-container-row items-stretch">
@@ -44,7 +44,7 @@ class="flex-fill flex code-fill">
         <div refs="markdown-editor@divider" class="markdown-panel-divider flex-fill"></div>
         <div class="flex-container-column flex flex-fill">
             <div class="editor-toolbar">
-                <div class="editor-toolbar-label text-mono px-m py-xs">{{ trans('entities.pages_md_preview') }}</div>
+                <div class="editor-toolbar-label text-mono bold px-m py-xs">{{ trans('entities.pages_md_preview') }}</div>
             </div>
             <iframe src="about:blank"
                     refs="markdown-editor@display"