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/js/components/editor-toolbox.js b/resources/js/components/editor-toolbox.js index 4d3c0ae75..ddb4ff39c 100644 --- a/resources/js/components/editor-toolbox.js +++ b/resources/js/components/editor-toolbox.js @@ -8,6 +8,7 @@ export class EditorToolbox extends Component { this.buttons = this.$manyRefs.tabButton; this.contentElements = this.$manyRefs.tabContent; this.toggleButton = this.$refs.toggle; + this.editorWrapEl = this.container.closest('.page-editor'); this.setupListeners(); @@ -30,8 +31,9 @@ export class EditorToolbox extends Component { toggle() { this.container.classList.toggle('open'); - const expanded = this.container.classList.contains('open') ? 'true' : 'false'; - this.toggleButton.setAttribute('aria-expanded', expanded); + const isOpen = this.container.classList.contains('open'); + this.toggleButton.setAttribute('aria-expanded', isOpen ? 'true' : 'false'); + this.editorWrapEl.classList.toggle('toolbox-open', isOpen); } setActiveTab(tabName, openToolbox = false) { 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/_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/_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 fbac1de07..13d67ec24 100755 --- a/resources/sass/_pages.scss +++ b/resources/sass/_pages.scss @@ -8,6 +8,8 @@ flex: 1; flex-direction: column; z-index: 10; + overflow: hidden; + border-radius: 0 0 8px 8px; } .mce-tinymce { @@ -19,6 +21,69 @@ } } +.page-editor-page-area { + width: 100%; + border-radius: 8px; + box-shadow: $bs-card; + @include lightDark(background-color, #FFF, #333) +} + +.page-edit-toolbar { + width: 100%; + margin: 0 auto; + display: grid; + grid-template-columns: minmax(max-content, 2fr) 1.5fr minmax(max-content, 2fr); + align-items: center; +} + +@include larger-than($xxl) { + .page-editor-wysiwyg .page-edit-toolbar, + .page-editor-wysiwyg .page-editor-page-area { + max-width: 1140px; + } + + .page-editor-wysiwyg .floating-toolbox { + position: absolute; + } +} + +@include smaller-than($m) { + .page-edit-toolbar { + display: flex; + flex-direction: row; + justify-content: space-between; + } +} + +.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: 8px; + } + 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; @@ -35,8 +100,7 @@ body.tox-fullscreen, body.markdown-fullscreen { overflow-x: scroll; overflow-y: visible; } - .page-edit-toolbar .grid.third { - display: block; + .page-edit-toolbar { white-space: nowrap; > div { display: inline-block; @@ -48,10 +112,10 @@ body.tox-fullscreen, body.markdown-fullscreen { position: fixed; z-index: 30; border-radius: 50%; - width: 56px; - height: 56px; - font-size: 24px; - right: $-m; + width: 52px; + height: 52px; + font-size: 26px; + right: $-xs; bottom: $-s; box-shadow: $bs-hover; background-color: currentColor; @@ -149,22 +213,27 @@ body.tox-fullscreen, body.markdown-fullscreen { } } -// Attribute form +// Page editor sidebar toolbox .floating-toolbox { - border: 1px solid #DDD; - @include lightDark(background-color, #fff, #222); - @include lightDark(border-color, #DDD, #000); - right: $-xl*2; - width: 48px; + @include lightDark(background-color, #FFF, #222); overflow: hidden; align-items: stretch; flex-direction: row; display: flex; - transition: width ease-in-out 180ms; - margin-top: -1px; - min-height: 0; + max-height: 100%; + border-radius: 8px; + box-shadow: $bs-card; + margin-bottom: auto; + margin-left: $-l; + position: relative; &.open { - width: 480px; + position: relative; + right: 0; + max-width: 480px; + margin-bottom: 0; + } + &:not(.open) .toolbox-tab-content { + display: none !important; } .toolbox-toggle svg { transition: transform ease-in-out 180ms; @@ -173,7 +242,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); @@ -183,28 +252,34 @@ 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-right: 1px solid #DDD; + @include lightDark(border-right-color, #DDD, #000); + width: 40px; flex: 0 1 auto; + margin-right: -1px; + } + .tabs-inner { + @include lightDark(background-color, #FFFFFF, #222); } .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 { + @include lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.5)); display: block; cursor: pointer; - padding: $-s $-m; - font-size: 16px; + padding: 10px $-xs; + font-size: 18px; line-height: 1.6; - border-bottom: 1px solid rgba(255, 255, 255, 0.3); } - &.open .tabs > button.active { - @include lightDark(color, #444, #EEE); - background-color: rgba(0, 0, 0, 0.1); + .tabs-inner > button:hover, &.open .tabs-inner > button.active { + background-color: var(--color-primary-light); + 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; @@ -237,6 +312,33 @@ body.tox-fullscreen, body.markdown-fullscreen { } } +@include smaller-than($xxl) { + .floating-toolbox { + margin-left: $-s; + } +} + +@include smaller-than($s) { + .page-editor-page-area-wrap { + margin: 4px !important; + } + .floating-toolbox { + margin-left: 4px; + } + .floating-toolbox .tabs { + width: 32px; + } + .floating-toolbox .tabs-inner > button { + font-size: 12px; + } + .page-edit-toolbar { + padding-block: 0 !important; + } + .page-editor.toolbox-open .page-editor-page-area { + display: none; + } +} + .toolbox-tab-content { display: none; overflow-y: auto; diff --git a/resources/sass/_tinymce.scss b/resources/sass/_tinymce.scss index 13b6f676b..7450f6016 100644 --- a/resources/sass/_tinymce.scss +++ b/resources/sass/_tinymce.scss @@ -9,6 +9,12 @@ z-index: 100; } +// Editor wrapper edits +.tox.tox-tinymce { + border-inline: 0; + border-bottom: 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..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/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..e2c839cd2 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--}} +
+ + {{--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 + +
+ +
-
- - {{--Editors--}} -
- - {{--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 +
+ @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') }}