From a12b60e1ad764fc42915993713df11f85aa8774e Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Sun, 8 Oct 2023 15:04:07 +0100 Subject: [PATCH] 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--}}