From a12b60e1ad764fc42915993713df11f85aa8774e Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Sun, 8 Oct 2023 15:04:07 +0100 Subject: [PATCH 1/5] Editor: Started attempts to improve design elements --- lang/en/entities.php | 1 + resources/sass/_pages.scss | 35 ++++++++++++------- resources/sass/_tinymce.scss | 5 +++ resources/views/pages/edit.blade.php | 1 - .../pages/parts/editor-toolbar.blade.php | 2 +- .../pages/parts/editor-toolbox.blade.php | 22 ++++++------ resources/views/pages/parts/form.blade.php | 26 ++++++++------ 7 files changed, 56 insertions(+), 36 deletions(-) diff --git a/lang/en/entities.php b/lang/en/entities.php index 4468cd68f..cfb5aae1a 100644 --- a/lang/en/entities.php +++ b/lang/en/entities.php @@ -295,6 +295,7 @@ return [ 'pages_is_template' => 'Page Template', // Editor Sidebar + 'toggle_sidebar' => 'Toggle Sidebar', '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 fbac1de07..c3a4b3b44 100755 --- 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; @@ -151,17 +155,15 @@ body.tox-fullscreen, body.markdown-fullscreen { // 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; - width: 48px; + width: 40px; 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; @@ -183,24 +185,30 @@ body.tox-fullscreen, body.markdown-fullscreen { 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; + 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 > 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; - padding: $-s $-m; + padding: 10px $-xs; 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); @@ -241,6 +249,7 @@ 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/sass/_tinymce.scss b/resources/sass/_tinymce.scss index 13b6f676b..e55b0bde7 100644 --- a/resources/sass/_tinymce.scss +++ b/resources/sass/_tinymce.scss @@ -9,6 +9,11 @@ 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; diff --git a/resources/views/pages/edit.blade.php b/resources/views/pages/edit.blade.php index 98adc849c..841b27503 100644 --- 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]) - @include('pages.parts.editor-toolbox') diff --git a/resources/views/pages/parts/editor-toolbar.blade.php b/resources/views/pages/parts/editor-toolbar.blade.php index 3b438de7c..ccc92794e 100644 --- a/resources/views/pages/parts/editor-toolbar.blade.php +++ b/resources/views/pages/parts/editor-toolbar.blade.php @@ -1,4 +1,4 @@ -
+
diff --git a/resources/views/pages/parts/editor-toolbox.blade.php b/resources/views/pages/parts/editor-toolbox.blade.php index 08e61e082..4ecac26a5 100644 --- a/resources/views/pages/parts/editor-toolbox.blade.php +++ b/resources/views/pages/parts/editor-toolbox.blade.php @@ -1,15 +1,17 @@
-
- - - @if(userCan('attachment-create-all')) - - @endif - - @if($comments->enabled()) - - @endif +
+
+ + + @if(userCan('attachment-create-all')) + + @endif + + @if($comments->enabled()) + + @endif +
diff --git a/resources/views/pages/parts/form.blade.php b/resources/views/pages/parts/form.blade.php index 6d59afe33..56f249baa 100644 --- a/resources/views/pages/parts/form.blade.php +++ b/resources/views/pages/parts/form.blade.php @@ -1,4 +1,4 @@ -
- {{--Editors--}} -
+
+ {{--Editors--}} +
- {{--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 +
+ + @include('pages.parts.editor-toolbox')
{{--Mobile Save Button--}} From 45c74090929338323d72787a90a66391e554805e Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Fri, 13 Oct 2023 17:33:11 +0100 Subject: [PATCH 2/5] Editor: Started toying with more singificant design update --- resources/sass/_blocks.scss | 1 + resources/sass/_header.scss | 39 ---- resources/sass/_pages.scss | 45 +++-- .../pages/parts/editor-toolbar.blade.php | 191 ++++++++++-------- resources/views/pages/parts/form.blade.php | 41 ++-- 5 files changed, 161 insertions(+), 156 deletions(-) diff --git a/resources/sass/_blocks.scss b/resources/sass/_blocks.scss index ca6efbbe1..d63ed3802 100644 --- 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 4a4c70401..e2daae437 100644 --- 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 c3a4b3b44..dd88a6b7b 100755 --- 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 ccc92794e..d25f6a0a4 100644 --- a/resources/views/pages/parts/editor-toolbar.blade.php +++ b/resources/views/pages/parts/editor-toolbar.blade.php @@ -1,97 +1,116 @@ -
-
+
-
+
+
@icon('back'){{ trans('common.back') }} + class="icon-list-item text-link">@icon('back'){{ trans('common.back') }}
+
-
-
- +
+
+
+ @icon('check-circle', ['class' => 'text-pos draft-notification svg-icon', 'refs' => 'page-editor@draftDisplayIcon']) -
+ +
+
+ +
+
+ +
    +
  • +

    {{ trans('entities.pages_edit_enter_changelog_desc') }}

    + +
    • +
+ {{-- Prevents button jumping on menu show --}}
-
-
- -
    -
  • -

    {{ trans('entities.pages_edit_enter_changelog_desc') }}

    - -
    • -
- {{-- Prevents button jumping on menu show --}} -
- - +
+
\ 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 56f249baa..861f2c59c 100644 --- a/resources/views/pages/parts/form.blade.php +++ b/resources/views/pages/parts/form.blade.php @@ -1,4 +1,4 @@ -
$model, 'editor' => $editor, 'isDraft' => $isDraft, 'draftsEnabled' => $draftsEnabled]) - {{--Title input--}} -
-
- @include('form.text', ['name' => 'name', 'model' => $model, 'placeholder' => trans('entities.pages_title')]) -
-
+
+
+ {{--Title input--}} +
+
+ @include('form.text', ['name' => 'name', 'model' => $model, 'placeholder' => trans('entities.pages_title')]) +
+
-
- {{--Editors--}} -
+
+ {{--Editors--}} +
- {{--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 +
+ +
@include('pages.parts.editor-toolbox') From 8c10959339f602052c3aa6d126b29a8273992e72 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Sat, 14 Oct 2023 16:33:48 +0100 Subject: [PATCH 3/5] Editors: Tightened up new design, adjusted for MD editor --- resources/sass/_forms.scss | 33 +--------- resources/sass/_pages.scss | 65 ++++++++++++++----- resources/sass/_tinymce.scss | 1 + resources/views/pages/parts/form.blade.php | 8 ++- .../pages/parts/markdown-editor.blade.php | 4 +- 5 files changed, 61 insertions(+), 50 deletions(-) diff --git a/resources/sass/_forms.scss b/resources/sass/_forms.scss index 2e534d60f..25d03f71c 100644 --- 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 dd88a6b7b..d8de6b50f 100755 --- 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 e55b0bde7..7450f6016 100644 --- 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 861f2c59c..6731d3579 100644 --- a/resources/views/pages/parts/form.blade.php +++ b/resources/views/pages/parts/form.blade.php @@ -1,4 +1,4 @@ -
$model, 'editor' => $editor, 'isDraft' => $isDraft, 'draftsEnabled' => $draftsEnabled]) -
+
{{--Title input--}}
@@ -48,7 +48,9 @@
- @include('pages.parts.editor-toolbox') +
+ @include('pages.parts.editor-toolbox') +
{{--Mobile Save Button--}} diff --git a/resources/views/pages/parts/markdown-editor.blade.php b/resources/views/pages/parts/markdown-editor.blade.php index 18a418f10..ac62443f9 100644 --- a/resources/views/pages/parts/markdown-editor.blade.php +++ b/resources/views/pages/parts/markdown-editor.blade.php @@ -7,7 +7,7 @@
-
+
{{ trans('entities.pages_md_editor') }}
@@ -44,7 +44,7 @@
-
{{ trans('entities.pages_md_preview') }}
+
{{ trans('entities.pages_md_preview') }}