From 714485c6a62eecbfb90d0a124776a25218035488 Mon Sep 17 00:00:00 2001 From: ro Date: Mon, 12 May 2025 14:58:32 -0600 Subject: [PATCH] cleaned up meta ui, made editor display contextual there were some nagging space issues in the new meta ui layout, so those were addressed. it'll will probably change a billion more times, but it's starting from a solid place the text editor ui now only display when text is selected and goes away after an operation has been completed or when text is deselected, making the overall page editing experience streamlined --- public/assets/css/dash/page-editor.css | 30 +++++++++++-------- .../dash/app/controllers/PageEditor.js | 30 ++++++++++++++++++- .../assets/scripts/dash/app/ui/TextEditor.js | 2 ++ resources/views/back/page.blade.php | 7 +++-- resources/views/includes/editor.blade.php | 2 +- 5 files changed, 53 insertions(+), 18 deletions(-) diff --git a/public/assets/css/dash/page-editor.css b/public/assets/css/dash/page-editor.css index 0f402c5..3fb5e6d 100644 --- a/public/assets/css/dash/page-editor.css +++ b/public/assets/css/dash/page-editor.css @@ -13,7 +13,8 @@ section.meta { z-index: 500; border-radius: 3px; transition: all 0.2s linear; - /* JUST FOR TESTING, ADD FINAL TO ATOMIC */ + font-size: 0.8em; + color: var(--primary); } /* FILE MANAGER */ @@ -34,13 +35,13 @@ main > section > div.file-manager > div.file-drop { align-items: center; justify-content: center; width: 100%; - min-height: 100px; + min-height: 108px; color: var(--white); background: var(--primary); vertical-align: middle; - border-radius: 5px; + border-radius: 3px; max-width: 900px; - margin: 10px auto; + margin: 0 auto; } main > section > div.file-manager > div.page-images-list, @@ -69,19 +70,19 @@ main > section > div.file-manager > div.page-images-list > div > div.item-progre background: var(--primary); } -main > section.text-editor > div.text-editor-control button { +main > div.text-editor-control button { border-radius: 0; } -main > section.text-editor > div.text-editor-control button > i { +main > div.text-editor-control button > i { font-size: 1.6em; } -main > section.text-editor > div.text-editor-control > button:nth-child(1) { +main > div.text-editor-control > button:nth-child(1) { border-radius: 3px 0 0 3px; } -main > section.text-editor > div.text-editor-control > button:nth-child(10) { +main > div.text-editor-control > button:nth-child(10) { border-radius: 0 3px 3px 0; } @@ -131,9 +132,7 @@ main > section > div.file-manager > div.page-files-list > div.audio-item > audio /* PAGE META */ main > section > div.page-meta { - padding: 10px; - font-size: 0.8em; - color: var(--primary); + padding: 0 10px; } main div.page-meta textarea#post-title-text { @@ -211,9 +210,14 @@ main section.text-editor .icon-hide { visibility: hidden; } -main > section.text-editor > div.text-editor-control { +main > div.text-editor-control { display: grid; - grid-template-columns: repeat(10, 1fr); + grid-template-columns: repeat(8, 1fr); + position: absolute; + z-index: 400; + left: 35px; + top: 105px; + transition: all 0.2s linear; } .control-freeze { diff --git a/public/assets/scripts/dash/app/controllers/PageEditor.js b/public/assets/scripts/dash/app/controllers/PageEditor.js index 39d1b75..9364d37 100644 --- a/public/assets/scripts/dash/app/controllers/PageEditor.js +++ b/public/assets/scripts/dash/app/controllers/PageEditor.js @@ -18,7 +18,8 @@ export default class PostEditor { //-------------------------- constructor() { this.processing = false; - let self = 'this'; + this.textSelected = false; + let self = this; this.cr = new ContentRequest(null, document.getElementById('notify-progress')); this.mr = new Maintenance(null, null); this.urlPieces = document.URL.split('/'); @@ -38,6 +39,33 @@ export default class PostEditor { .querySelector('.file-manager') .getAttribute('data-layout'); } + + let textEdit = document.getElementById('edit'); + let control = document.querySelector('.text-editor-control'); + textEdit.addEventListener('select', e => { + if (!self.textSelected) { + self.textSelected = true; + control.classList.remove('hide-el'); + control.classList.add('show-grid'); + } + }); + + textEdit.addEventListener('click', e => { + if (self.textSelected) { + self.textSelected = false; + control.classList.add('hide-el'); + control.classList.remove('show-grid'); + } + }); + + textEdit.addEventListener('blur', e => { + if (self.textSelected) { + self.textSelected = false; + control.classList.add('hide-el'); + control.classList.remove('show-grid'); + } + }); + if (document.getElementById('edit')) { this.editor = new TextEditor( document.getElementById('edit'), diff --git a/public/assets/scripts/dash/app/ui/TextEditor.js b/public/assets/scripts/dash/app/ui/TextEditor.js index e846a4e..0971315 100644 --- a/public/assets/scripts/dash/app/ui/TextEditor.js +++ b/public/assets/scripts/dash/app/ui/TextEditor.js @@ -25,6 +25,7 @@ class TextEditor extends EventEmitter { document.body.addEventListener('scroll', e => { var fixLimit = scrollLimit; //console.log('POSITION', document.body.scrollTop + ' : ' + fixLimit); + /** if (document.body.scrollTop + 5 >= fixLimit) { document .querySelector('.text-editor-control') @@ -34,6 +35,7 @@ class TextEditor extends EventEmitter { .querySelector('.text-editor-control') .classList.remove('control-freeze'); } + **/ }); document.getElementById('edit').addEventListener('input', e => { let result_element = document.querySelector('#highlight-content'); diff --git a/resources/views/back/page.blade.php b/resources/views/back/page.blade.php index 113a6fc..8ff2f47 100644 --- a/resources/views/back/page.blade.php +++ b/resources/views/back/page.blade.php @@ -2,8 +2,10 @@ @section('title', 'The Dash | Editing '. $editTitle) @section('main-content') + @include('includes.editor')
+ ADD ATTACHMENTS @if($feature == '')
@@ -48,13 +50,13 @@ @include('includes.options')
- UPDATED + UPDATED
{{$updated}}
- CREATED + CREATED
{{$date}} @@ -68,7 +70,6 @@
- @include('includes.editor')
diff --git a/resources/views/includes/editor.blade.php b/resources/views/includes/editor.blade.php index f7da5a3..7cddfac 100644 --- a/resources/views/includes/editor.blade.php +++ b/resources/views/includes/editor.blade.php @@ -1,4 +1,4 @@ -
+