Changelog: Tweaked spacing, count and element referencing

During review of #5663

diff --git a/resources/js/components/page-editor.js b/resources/js/components/page-editor.js
index 2a155f37fb8aea3d37ee3ec7f2ef5d764086568e..54245350489e7fd96aab9342af84227e9b283c1f 100644 (file)
--- a/resources/js/components/page-editor.js
+++ b/resources/js/components/page-editor.js
@@ -25,6 +25,7 @@ export class PageEditor extends Component {
         this.draftDisplayIcon = this.$refs.draftDisplayIcon;
         this.changelogInput = this.$refs.changelogInput;
         this.changelogDisplay = this.$refs.changelogDisplay;
         this.draftDisplayIcon = this.$refs.draftDisplayIcon;
         this.changelogInput = this.$refs.changelogInput;
         this.changelogDisplay = this.$refs.changelogDisplay;

+        this.changelogCounter = this.$refs.changelogCounter;

         this.changeEditorButtons = this.$manyRefs.changeEditor || [];
         this.switchDialogContainer = this.$refs.switchDialog;
         this.deleteDraftDialogContainer = this.$refs.deleteDraftDialog;
         this.changeEditorButtons = this.$manyRefs.changeEditor || [];
         this.switchDialogContainer = this.$refs.switchDialog;
         this.deleteDraftDialogContainer = this.$refs.deleteDraftDialog;


@@ -77,8 +78,7 @@ export class PageEditor extends Component {
         const updateChangelogDebounced = debounce(this.updateChangelogDisplay.bind(this), 300, false);
         this.changelogInput.addEventListener('input', () => {
             const count = this.changelogInput.value.length;
         const updateChangelogDebounced = debounce(this.updateChangelogDisplay.bind(this), 300, false);
         this.changelogInput.addEventListener('input', () => {
             const count = this.changelogInput.value.length;

-            const counterEl = document.getElementById('changelog-count');
-            if (counterEl) counterEl.innerText = `${count} / 250`;
+            this.changelogCounter.innerText = `${count} / 180`;

             updateChangelogDebounced();
         });
 
             updateChangelogDebounced();
         });
 

diff --git a/resources/views/pages/parts/editor-toolbar.blade.php b/resources/views/pages/parts/editor-toolbar.blade.php
index deddc3cd321f3dfdf36322420a5ac07de5e561a9..2dfbe9e6982fd09eaa164dfce273c8f5dc0013a9 100644 (file)
--- a/resources/views/pages/parts/editor-toolbar.blade.php
+++ b/resources/views/pages/parts/editor-toolbar.blade.php
@@ -104,17 +104,17 @@
                 <span refs="page-editor@changelogDisplay">{{ trans('entities.pages_edit_set_changelog') }}</span>
             </button>
             <ul refs="dropdown@menu" class="wide dropdown-menu">
                 <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">
+                <li class="px-m py-s">

                     <p class="text-muted pb-s">{{ trans('entities.pages_edit_enter_changelog_desc') }}</p>
                     <textarea
                         refs="page-editor@changelogInput"
                         name="summary"
                         id="summary-input"
                         rows="2"
                     <p class="text-muted pb-s">{{ trans('entities.pages_edit_enter_changelog_desc') }}</p>
                     <textarea
                         refs="page-editor@changelogInput"
                         name="summary"
                         id="summary-input"
                         rows="2"

-                        maxlength="250"
+                        maxlength="180"

                         placeholder="{{ trans('entities.pages_edit_enter_changelog') }}"
                     ></textarea>
                         placeholder="{{ trans('entities.pages_edit_enter_changelog') }}"
                     ></textarea>

-                    <small class="text-muted mt-xs" id="changelog-count">0 / 250</small>
+                    <small refs="page-editor@changelogCounter" class="text-muted mt-xs">0 / 180</small>

                 </li>
             </ul>
             <span>{{-- Prevents button jumping on menu show --}}</span>
                 </li>
             </ul>
             <span>{{-- Prevents button jumping on menu show --}}</span>