Editor: Started toying with more singificant design update

diff --git a/resources/sass/_blocks.scss b/resources/sass/_blocks.scss
index ca6efbbe1690adb400a04b839ff8e1a301a8ad40..d63ed38025a4f315f9cbc3779be92ffc9d40ad7b 100644 (file)
--- a/resources/sass/_blocks.scss
+++ b/resources/sass/_blocks.scss
@@ -155,6 +155,7 @@
   margin-bottom: $-l;
   overflow: initial;
   min-height: 60vh;
+  border-radius: 8px;
   &.auto-height {
     min-height: 0;
   }

diff --git a/resources/sass/_header.scss b/resources/sass/_header.scss
index 4a4c70401b1f7ca2db6d1ed4c7cde3f6d90037b7..e2daae437b6e9e7fe081e369119061e31477f6da 100644 (file)
--- a/resources/sass/_header.scss
+++ b/resources/sass/_header.scss
@@ -364,43 +364,4 @@ header .search-box.search-active:focus-within {
 .faded span.faded-text {
   display: inline-block;
   padding: $-s;
-}
-
-.action-buttons .text-button {
-  display: inline-block;
-  padding: $-xs $-s;
-  &:last-child {
-    padding-inline-end: 0;
-  }
-  &:first-child {
-    padding-inline-start: 0;
-  }
-}
-
-
-.action-buttons .dropdown-container:last-child a {
-  padding-inline-end: 0;
-  padding-inline-start: $-s;
-}
-.action-buttons {
-  text-align: end;
-  &.text-left {
-    text-align: start;
-    .text-button {
-      padding-inline-end: $-m;
-      padding-inline-start: 0;
-    }
-  }
-  &.text-center {
-    text-align: center;
-  }
-}
-
-@include smaller-than($m) {
-  .action-buttons .text-button {
-    padding: $-xs $-xs;
-  }
-  .action-buttons .dropdown-container:last-child a {
-    padding-inline-start: $-xs;
-  }
 }
\ No newline at end of file

diff --git a/resources/sass/_pages.scss b/resources/sass/_pages.scss
index c3a4b3b4402b698d998df63d55727907b116ee42..dd88a6b7b899c98efab3dc9680133b849f08d6ed 100755 (executable)
--- a/resources/sass/_pages.scss
+++ b/resources/sass/_pages.scss
@@ -19,8 +19,21 @@
   }
 }
 
-.page-edit-toolbar .text-button {
-  font-size: $fs-m;
+.page-editor-page-area {
+  width: 100%;
+  max-width: 1140px;
+  border-radius: 8px;
+  box-shadow: $bs-card;
+  overflow: hidden;
+}
+
+.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;
 }
 
 body.tox-fullscreen .page-editor .edit-area,
@@ -155,18 +168,25 @@ body.tox-fullscreen, body.markdown-fullscreen {
 
 // Attribute form
 .floating-toolbox {
-  //border-left: 1px solid #CCC;
   @include lightDark(background-color, #FFF, #222);
-  @include lightDark(border-color, #DDD, #000);
-  right: $-xl*2;
-  width: 40px;
   overflow: hidden;
   align-items: stretch;
   flex-direction: row;
   display: flex;
-  min-height: 0;
+  max-height: 100%;
+  border-radius: 8px;
+  box-shadow: $bs-card;
+  position: fixed;
+  right: $-s;
+  margin-bottom: auto;
   &.open {
-    width: 480px;
+    right: 0;
+    position: relative;
+    max-width: 480px;
+    margin-bottom: 0;
+  }
+  &:not(.open) .toolbox-tab-content {
+    display: none !important;
   }
   .toolbox-toggle svg {
     transition: transform ease-in-out 180ms;
@@ -185,7 +205,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
     position: relative;
   }
   .tabs {
-    border: 1px solid #CCC;
+    border-right: 1px solid #DDD;
     width: 40px;
     flex: 0 1 auto;
     margin-right: -1px;
@@ -210,9 +230,9 @@ body.tox-fullscreen, body.markdown-fullscreen {
     font-size: 16px;
     line-height: 1.6;
   }
-  &.open .tabs > button.active {
-    @include lightDark(color, #444, #EEE);
-    background-color: rgba(0, 0, 0, 0.1);
+  &.open .tabs-inner > button.active {
+    background-color: var(--color-primary-light);
+    color: var(--color-primary)
   }
   h4 {
     font-size: 24px;
@@ -249,7 +269,6 @@ body.tox-fullscreen, body.markdown-fullscreen {
   display: none;
   overflow-y: auto;
   padding-bottom: 45px;
-  border-block-start: 1px solid #CCC;
 }
 
 .suggestion-box {

diff --git a/resources/views/pages/parts/editor-toolbar.blade.php b/resources/views/pages/parts/editor-toolbar.blade.php
index ccc92794e39ddbb88d4589b3a353872a85741c87..d25f6a0a402bbecfca66796667ce72530aa97507 100644 (file)
--- a/resources/views/pages/parts/editor-toolbar.blade.php
+++ b/resources/views/pages/parts/editor-toolbar.blade.php
@@ -1,97 +1,116 @@
-<div class="primary-background-light toolbar page-edit-toolbar px-l">
-    <div class="grid third no-break v-center">
+<div class="toolbar page-edit-toolbar py-xs">
 
-        <div class="action-buttons text-left px-m py-xs">
+    <div>
+        <div class="inline block">
             <a href="{{ $isDraft ? $page->getParent()->getUrl() : $page->getUrl() }}"
-               class="text-button text-link">@icon('back')<span class="hide-under-l">{{ trans('common.back') }}</span></a>
+               class="icon-list-item text-link"><span>@icon('back')</span><span class="hide-under-l">{{ trans('common.back') }}</span></a>
         </div>
+    </div>
 
-        <div class="text-center px-m">
-            <div component="dropdown"
-                 option:dropdown:move-menu="true"
-                 class="dropdown-container draft-display text {{ $draftsEnabled ? '' : 'hidden' }}">
-                <button type="button" refs="dropdown@toggle" aria-haspopup="true" aria-expanded="false" title="{{ trans('entities.pages_edit_draft_options') }}" class="text-link text-button py-s px-m"><span refs="page-editor@draftDisplay" class="faded-text"></span>&nbsp; @icon('more')</button>
+    <div class="text-center">
+        <div component="dropdown"
+             option:dropdown:move-menu="true"
+             class="dropdown-container  draft-display text {{ $draftsEnabled ? '' : 'hidden' }}">
+            <div class="flex-container-row items-center justify-center">
+                <button type="button"
+                        refs="dropdown@toggle"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                        title="{{ trans('entities.pages_edit_draft_options') }}"
+                        class="text-link icon-list-item">
+                    <span>@icon('time')</span>
+                    <span><span refs="page-editor@draftDisplay" class="faded-text"></span>&nbsp; @icon('more')</span>
+                </button>
                 @icon('check-circle', ['class' => 'text-pos draft-notification svg-icon', 'refs' => 'page-editor@draftDisplayIcon'])
-                <ul refs="dropdown@menu" class="dropdown-menu" role="menu">
+            </div>
+            <ul refs="dropdown@menu" class="dropdown-menu" role="menu">
+                <li>
+                    <button refs="page-editor@saveDraft" type="button" class="text-pos icon-item">
+                        @icon('save')
+                        <div>{{ trans('entities.pages_edit_save_draft') }}</div>
+                    </button>
+                </li>
+                @if($isDraft)
                     <li>
-                        <button refs="page-editor@saveDraft" type="button" class="text-pos icon-item">
-                            @icon('save')
-                            <div>{{ trans('entities.pages_edit_save_draft') }}</div>
-                        </button>
+                        <a href="{{ $model->getUrl('/delete') }}" class="text-neg icon-item">
+                            @icon('delete')
+                            {{ trans('entities.pages_edit_delete_draft') }}
+                        </a>
                     </li>
-                    @if($isDraft)
-                        <li>
-                            <a href="{{ $model->getUrl('/delete') }}" class="text-neg icon-item">
-                                @icon('delete')
-                                {{ trans('entities.pages_edit_delete_draft') }}
-                            </a>
-                        </li>
-                    @endif
-                    <li refs="page-editor@discard-draft-wrap" {{ $isDraftRevision ? '' : 'hidden' }}>
-                        <button refs="page-editor@discard-draft" type="button" class="text-warn icon-item">
-                            @icon('cancel')
-                            <div>{{ trans('entities.pages_edit_discard_draft') }}</div>
-                        </button>
+                @endif
+                <li refs="page-editor@discard-draft-wrap" {{ $isDraftRevision ? '' : 'hidden' }}>
+                    <button refs="page-editor@discard-draft" type="button" class="text-warn icon-item">
+                        @icon('cancel')
+                        <div>{{ trans('entities.pages_edit_discard_draft') }}</div>
+                    </button>
+                </li>
+                <li refs="page-editor@delete-draft-wrap" {{ $isDraftRevision ? '' : 'hidden' }}>
+                    <button refs="page-editor@delete-draft" type="button" class="text-neg icon-item">
+                        @icon('delete')
+                        <div>{{ trans('entities.pages_edit_delete_draft') }}</div>
+                    </button>
+                </li>
+                @if(userCan('editor-change'))
+                    <li>
+                        <hr>
                     </li>
-                    <li refs="page-editor@delete-draft-wrap" {{ $isDraftRevision ? '' : 'hidden' }}>
-                        <button refs="page-editor@delete-draft" type="button" class="text-neg icon-item">
-                            @icon('delete')
-                            <div>{{ trans('entities.pages_edit_delete_draft') }}</div>
-                        </button>
+                    <li>
+                        @if($editor === 'wysiwyg')
+                            <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=markdown-clean" refs="page-editor@changeEditor" class="icon-item">
+                                @icon('swap-horizontal')
+                                <div>
+                                    {{ trans('entities.pages_edit_switch_to_markdown') }}
+                                    <br>
+                                    <small>{{ trans('entities.pages_edit_switch_to_markdown_clean') }}</small>
+                                </div>
+                            </a>
+                            <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=markdown-stable" refs="page-editor@changeEditor" class="icon-item">
+                                @icon('swap-horizontal')
+                                <div>
+                                    {{ trans('entities.pages_edit_switch_to_markdown') }}
+                                    <br>
+                                    <small>{{ trans('entities.pages_edit_switch_to_markdown_stable') }}</small>
+                                </div>
+                            </a>
+                        @else
+                            <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=wysiwyg" refs="page-editor@changeEditor" class="icon-item">
+                                @icon('swap-horizontal')
+                                <div>{{ trans('entities.pages_edit_switch_to_wysiwyg') }}</div>
+                            </a>
+                        @endif
                     </li>
-                    @if(userCan('editor-change'))
-                        <li>
-                            <hr>
-                        </li>
-                        <li>
-                            @if($editor === 'wysiwyg')
-                                <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=markdown-clean" refs="page-editor@changeEditor" class="icon-item">
-                                    @icon('swap-horizontal')
-                                    <div>
-                                        {{ trans('entities.pages_edit_switch_to_markdown') }}
-                                        <br>
-                                        <small>{{ trans('entities.pages_edit_switch_to_markdown_clean') }}</small>
-                                    </div>
-                                </a>
-                                <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=markdown-stable" refs="page-editor@changeEditor" class="icon-item">
-                                    @icon('swap-horizontal')
-                                    <div>
-                                        {{ trans('entities.pages_edit_switch_to_markdown') }}
-                                        <br>
-                                        <small>{{ trans('entities.pages_edit_switch_to_markdown_stable') }}</small>
-                                    </div>
-                                </a>
-                            @else
-                                <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=wysiwyg" refs="page-editor@changeEditor" class="icon-item">
-                                    @icon('swap-horizontal')
-                                    <div>{{ trans('entities.pages_edit_switch_to_wysiwyg') }}</div>
-                                </a>
-                            @endif
-                        </li>
-                    @endif
-                </ul>
-            </div>
+                @endif
+            </ul>
         </div>
+    </div>
 
-        <div class="action-buttons px-m py-xs">
-            <div component="dropdown"
-                 option:dropdown:move-menu="true"
-                 class="dropdown-container">
-                <button refs="dropdown@toggle" type="button" aria-haspopup="true" aria-expanded="false" class="text-link text-button">@icon('edit') <span refs="page-editor@changelogDisplay">{{ trans('entities.pages_edit_set_changelog') }}</span></button>
-                <ul refs="dropdown@menu" class="wide dropdown-menu">
-                    <li class="px-l py-m">
-                        <p class="text-muted pb-s">{{ trans('entities.pages_edit_enter_changelog_desc') }}</p>
-                        <input refs="page-editor@changelogInput"
-                               name="summary"
-                               id="summary-input"
-                               type="text"
-                               placeholder="{{ trans('entities.pages_edit_enter_changelog') }}" />
-                    </li>
-                </ul>
-                <span>{{-- Prevents button jumping on menu show --}}</span>
-            </div>
+    <div class="flex-container-row justify-flex-end gap-x-m items-center">
+        <div component="dropdown"
+             option:dropdown:move-menu="true"
+             class="dropdown-container">
+            <button refs="dropdown@toggle" type="button" aria-haspopup="true" aria-expanded="false" class="icon-list-item text-link">
+                <span>@icon('edit')</span>
+                <span refs="page-editor@changelogDisplay">{{ trans('entities.pages_edit_set_changelog') }}</span>
+            </button>
+            <ul refs="dropdown@menu" class="wide dropdown-menu">
+                <li class="px-l py-m">
+                    <p class="text-muted pb-s">{{ trans('entities.pages_edit_enter_changelog_desc') }}</p>
+                    <input refs="page-editor@changelogInput"
+                           name="summary"
+                           id="summary-input"
+                           type="text"
+                           placeholder="{{ trans('entities.pages_edit_enter_changelog') }}" />
+                </li>
+            </ul>
+            <span>{{-- Prevents button jumping on menu show --}}</span>
+        </div>
 
-            <button type="submit" id="save-button" class="float-left text-link text-button text-pos-hover hide-under-m">@icon('save')<span>{{ trans('entities.pages_save') }}</span></button>
+        <div class="inline block">
+            <button type="submit" id="save-button"
+                    class="icon-list-item hide-under-m text-pos fill-width">
+                <span>@icon('save')</span>
+                <span>{{ trans('entities.pages_save') }}</span>
+            </button>
         </div>
     </div>
 </div>
\ No newline at end of file

diff --git a/resources/views/pages/parts/form.blade.php b/resources/views/pages/parts/form.blade.php
index 56f249baa0e54be90084b2343a1b977d58c446d8..861f2c59ccc23dd6e7b4022cc3103ae455027cd6 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 bg-white"
+<div component="page-editor" class="page-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,27 +20,32 @@
     {{--Header Toolbar--}}
     @include('pages.parts.editor-toolbar', ['model' => $model, 'editor' => $editor, 'isDraft' => $isDraft, 'draftsEnabled' => $draftsEnabled])
 
-    {{--Title input--}}
-    <div class="title-input page-title clearfix">
-        <div refs="page-editor@titleContainer" class="input">
-            @include('form.text', ['name' => 'name', 'model' => $model, 'placeholder' => trans('entities.pages_title')])
-        </div>
-    </div>
+    <div class="flex flex-fill mx-s mb-xs gap-m justify-center">
+        <div class="page-editor-page-area flex-container-column flex flex-fill">
+            {{--Title input--}}
+            <div class="title-input page-title clearfix">
+                <div refs="page-editor@titleContainer" class="input">
+                    @include('form.text', ['name' => 'name', 'model' => $model, 'placeholder' => trans('entities.pages_title')])
+                </div>
+            </div>
+
+            <div class="flex-fill flex">
+                {{--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>
 
+            </div>
         </div>
 
         @include('pages.parts.editor-toolbox')