Editor: Started attempts to improve design elements

diff --git a/lang/en/entities.php b/lang/en/entities.php
index 4468cd68f9017c3a56224a74462b926b8bc3d4c7..cfb5aae1a78c4218f43f9ad12de8b75838099279 100644 (file)
--- a/lang/en/entities.php
+++ b/lang/en/entities.php
@@ -295,6 +295,7 @@ return [
     'pages_is_template' => 'Page Template',
 
     // Editor Sidebar
     'pages_is_template' => 'Page Template',
 
     // Editor Sidebar

+    'toggle_sidebar' => 'Toggle Sidebar',

     'page_tags' => 'Page Tags',
     'chapter_tags' => 'Chapter Tags',
     'book_tags' => 'Book Tags',
     'page_tags' => 'Page Tags',
     'chapter_tags' => 'Chapter Tags',
     'book_tags' => 'Book Tags',

diff --git a/resources/sass/_pages.scss b/resources/sass/_pages.scss
index fbac1de07c774215888f1f424cdd4bd9cf812d10..c3a4b3b4402b698d998df63d55727907b116ee42 100755 (executable)
--- a/resources/sass/_pages.scss
+++ b/resources/sass/_pages.scss
@@ -19,6 +19,10 @@
   }
 }
 
   }
 }
 

+.page-edit-toolbar .text-button {
+  font-size: $fs-m;
+}
+

 body.tox-fullscreen .page-editor .edit-area,
 body.markdown-fullscreen .page-editor .edit-area {
   z-index: 12;
 body.tox-fullscreen .page-editor .edit-area,
 body.markdown-fullscreen .page-editor .edit-area {
   z-index: 12;


@@ -151,17 +155,15 @@ body.tox-fullscreen, body.markdown-fullscreen {
 
 // Attribute form
 .floating-toolbox {
 
 // Attribute form
 .floating-toolbox {

-  border: 1px solid #DDD;
-  @include lightDark(background-color, #fff, #222);
+  //border-left: 1px solid #CCC;
+  @include lightDark(background-color, #FFF, #222);

   @include lightDark(border-color, #DDD, #000);
   right: $-xl*2;
   @include lightDark(border-color, #DDD, #000);
   right: $-xl*2;

-  width: 48px;
+  width: 40px;

   overflow: hidden;
   align-items: stretch;
   flex-direction: row;
   display: flex;
   overflow: hidden;
   align-items: stretch;
   flex-direction: row;
   display: flex;

-  transition: width ease-in-out 180ms;
-  margin-top: -1px;

   min-height: 0;
   &.open {
     width: 480px;
   min-height: 0;
   &.open {
     width: 480px;


@@ -183,24 +185,30 @@ body.tox-fullscreen, body.markdown-fullscreen {
     position: relative;
   }
   .tabs {
     position: relative;
   }
   .tabs {

-    display: block;
-    border-inline-end: 1px solid #DDD;
-    @include lightDark(border-color, #ddd, #000);
-    width: 48px;
+    border: 1px solid #CCC;
+    width: 40px;

     flex: 0 1 auto;
     flex: 0 1 auto;

+    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 svg {
     padding: 0;
     margin: 0;
   }

-  .tabs > button {
-    @include lightDark(color, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
+  .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;
     display: block;
     cursor: pointer;

-    padding: $-s $-m;
+    padding: 10px $-xs;

     font-size: 16px;
     line-height: 1.6;
     font-size: 16px;
     line-height: 1.6;

-    border-bottom: 1px solid rgba(255, 255, 255, 0.3);

   }
   &.open .tabs > button.active {
     @include lightDark(color, #444, #EEE);
   }
   &.open .tabs > button.active {
     @include lightDark(color, #444, #EEE);


@@ -241,6 +249,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
   display: none;
   overflow-y: auto;
   padding-bottom: 45px;
   display: none;
   overflow-y: auto;
   padding-bottom: 45px;

+  border-block-start: 1px solid #CCC;

 }
 
 .suggestion-box {
 }
 
 .suggestion-box {

diff --git a/resources/sass/_tinymce.scss b/resources/sass/_tinymce.scss
index 13b6f676b695380b4e4833d50e4c223f4691a4ab..e55b0bde7c5c6bd13ced3e63c7286a95b4cfb231 100644 (file)
--- a/resources/sass/_tinymce.scss
+++ b/resources/sass/_tinymce.scss
@@ -9,6 +9,11 @@
   z-index: 100;
 }
 
   z-index: 100;
 }
 

+// Editor wrapper edits
+.tox.tox-tinymce {
+  border-inline: 0;
+}
+

 // In editor body overrides
 .page-content.mce-content-body {
   padding-block-start: 1rem;
 // In editor body overrides
 .page-content.mce-content-body {
   padding-block-start: 1rem;

diff --git a/resources/views/pages/edit.blade.php b/resources/views/pages/edit.blade.php
index 98adc849c26a12c73bb00aed4387f575ede80d1c..841b275037bac5bf42f060c90cb1b7ab1faa51d0 100644 (file)
--- a/resources/views/pages/edit.blade.php
+++ b/resources/views/pages/edit.blade.php
@@ -10,7 +10,6 @@
 
             @if(!$isDraft) {{ method_field('PUT') }} @endif
             @include('pages.parts.form', ['model' => $page])
 
             @if(!$isDraft) {{ method_field('PUT') }} @endif
             @include('pages.parts.form', ['model' => $page])

-            @include('pages.parts.editor-toolbox')

         </form>
     </div>
     
         </form>
     </div>
     

diff --git a/resources/views/pages/parts/editor-toolbar.blade.php b/resources/views/pages/parts/editor-toolbar.blade.php
index 3b438de7c35e6516d82fda08a14c37a89bca0e6c..ccc92794e39ddbb88d4589b3a353872a85741c87 100644 (file)
--- a/resources/views/pages/parts/editor-toolbar.blade.php
+++ b/resources/views/pages/parts/editor-toolbar.blade.php
@@ -1,4 +1,4 @@
-<div class="primary-background-light toolbar page-edit-toolbar">
+<div class="primary-background-light toolbar page-edit-toolbar px-l">

     <div class="grid third no-break v-center">
 
         <div class="action-buttons text-left px-m py-xs">
     <div class="grid third no-break v-center">
 
         <div class="action-buttons text-left px-m py-xs">

diff --git a/resources/views/pages/parts/editor-toolbox.blade.php b/resources/views/pages/parts/editor-toolbox.blade.php
index 08e61e082a49d965e030ccf366abb25424f7ae07..4ecac26a58903da5a16b33bef15dba5a4a507d90 100644 (file)
--- a/resources/views/pages/parts/editor-toolbox.blade.php
+++ b/resources/views/pages/parts/editor-toolbox.blade.php
@@ -1,15 +1,17 @@
 <div component="editor-toolbox" class="floating-toolbox">
 
 <div component="editor-toolbox" class="floating-toolbox">
 

-    <div class="tabs primary-background-light">
-        <button type="button" refs="editor-toolbox@toggle" aria-expanded="false" class="toolbox-toggle">@icon('caret-left-circle')</button>
-        <button type="button" refs="editor-toolbox@tab-button" data-tab="tags" title="{{ trans('entities.page_tags') }}" class="active">@icon('tag')</button>
-        @if(userCan('attachment-create-all'))
-            <button type="button" refs="editor-toolbox@tab-button" data-tab="files" title="{{ trans('entities.attachments') }}">@icon('attach')</button>
-        @endif
-        <button type="button" refs="editor-toolbox@tab-button" data-tab="templates" title="{{ trans('entities.templates') }}">@icon('template')</button>
-        @if($comments->enabled())
-            <button type="button" refs="editor-toolbox@tab-button" data-tab="comments" title="{{ trans('entities.comments') }}">@icon('comment')</button>
-        @endif
+    <div class="tabs flex-container-column justify-flex-start">
+        <div class="tabs-inner flex-container-column justify-center">
+            <button type="button" refs="editor-toolbox@toggle" title="{{ trans('entities.toggle_sidebar') }}" aria-expanded="false" class="toolbox-toggle">@icon('caret-left-circle')</button>
+            <button type="button" refs="editor-toolbox@tab-button" data-tab="tags" title="{{ trans('entities.page_tags') }}" class="active">@icon('tag')</button>
+            @if(userCan('attachment-create-all'))
+                <button type="button" refs="editor-toolbox@tab-button" data-tab="files" title="{{ trans('entities.attachments') }}">@icon('attach')</button>
+            @endif
+            <button type="button" refs="editor-toolbox@tab-button" data-tab="templates" title="{{ trans('entities.templates') }}">@icon('template')</button>
+            @if($comments->enabled())
+                <button type="button" refs="editor-toolbox@tab-button" data-tab="comments" title="{{ trans('entities.comments') }}">@icon('comment')</button>
+            @endif
+        </div>

     </div>
 
     <div refs="editor-toolbox@tab-content" data-tab-content="tags" class="toolbox-tab-content">
     </div>
 
     <div refs="editor-toolbox@tab-content" data-tab-content="tags" class="toolbox-tab-content">

diff --git a/resources/views/pages/parts/form.blade.php b/resources/views/pages/parts/form.blade.php
index 6d59afe33daa9ac2abae8652ea1e0e7f41b257ba..56f249baa0e54be90084b2343a1b977d58c446d8 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 flex-fill flex bg-white"

      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' }}"
      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' }}"


@@ -27,19 +27,23 @@
         </div>
     </div>
 
         </div>
     </div>
 

-    {{--Editors--}}
-    <div class="edit-area flex-fill flex">
+    <div class="flex-fill flex">
+        {{--Editors--}}
+        <div class="edit-area flex-fill flex">

 
 

-        {{--WYSIWYG Editor--}}
-        @if($editor === 'wysiwyg')
-            @include('pages.parts.wysiwyg-editor', ['model' => $model])
-        @endif
+            {{--WYSIWYG Editor--}}
+            @if($editor === 'wysiwyg')
+                @include('pages.parts.wysiwyg-editor', ['model' => $model])
+            @endif

 
 

-        {{--Markdown Editor--}}
-        @if($editor === 'markdown')
-            @include('pages.parts.markdown-editor', ['model' => $model])
-        @endif
+            {{--Markdown Editor--}}
+            @if($editor === 'markdown')
+                @include('pages.parts.markdown-editor', ['model' => $model])
+            @endif

 
 

+        </div>
+
+        @include('pages.parts.editor-toolbox')

     </div>
 
     {{--Mobile Save Button--}}
     </div>
 
     {{--Mobile Save Button--}}