Editors: Tightened up new design, adjusted for MD editor

diff --git a/resources/sass/_forms.scss b/resources/sass/_forms.scss
index 2e534d60f081c59fae421414a0675b86ca052861..25d03f71cb5a9418fda482deb545fb0372a30b0d 100644 (file)
--- a/resources/sass/_forms.scss
+++ b/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;

diff --git a/resources/sass/_pages.scss b/resources/sass/_pages.scss
index dd88a6b7b899c98efab3dc9680133b849f08d6ed..d8de6b50f6ce346efc10c01392e431a6633309c0 100755 (executable)
--- a/resources/sass/_pages.scss
+++ b/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;

diff --git a/resources/sass/_tinymce.scss b/resources/sass/_tinymce.scss
index e55b0bde7c5c6bd13ced3e63c7286a95b4cfb231..7450f601684084536fddd77497d1963b4c1d8bf7 100644 (file)
--- a/resources/sass/_tinymce.scss
+++ b/resources/sass/_tinymce.scss
@@ -12,6 +12,7 @@
 // Editor wrapper edits
 .tox.tox-tinymce {
   border-inline: 0;
+  border-bottom: 0;
 }
 
 // In editor body overrides

diff --git a/resources/views/pages/parts/form.blade.php b/resources/views/pages/parts/form.blade.php
index 861f2c59ccc23dd6e7b4022cc3103ae455027cd6..6731d357990eb25e2d74724251fdc7e051431a1c 100644 (file)
--- a/resources/views/pages/parts/form.blade.php
+++ b/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--}}

diff --git a/resources/views/pages/parts/markdown-editor.blade.php b/resources/views/pages/parts/markdown-editor.blade.php
index 18a418f106e797dd3aa923f4fcaf63e3414d4fd0..ac62443f9859dd76fed93019bd38b1aa5b40b55b 100644 (file)
--- a/resources/views/pages/parts/markdown-editor.blade.php
+++ b/resources/views/pages/parts/markdown-editor.blade.php
@@ -7,7 +7,7 @@
 
     <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 @@
         <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"