Document the live preview in the web Notification editor - #932
promptless-for-oss wants to merge 4 commits into
Conversation
Add an 'Editing a Notification' subsection to web_notifications.rst describing how the editor's preview panel updates as you type the Heading, Message, and Action Button Text fields, and how empty fields behave in the preview (mautic/mautic#16928).
|
|
||
| Editing a Notification | ||
| ====================== | ||
| When you open or create a Notification under Web Notifications, the editor shows a live preview panel beside the **Heading**, **Message**, and **Action Button Text** fields. As you enter text in them, Mautic updates the matching elements in the preview, so you can see how the Notification looks without saving and reopening it. |
There was a problem hiding this comment.
Mautic.activatePreviewPanelUpdate() binds an input handler to the heading/message/button fields and writes each typed value into the matching preview element live, confirming the live-update behavior described.
| ====================== | ||
| When you open or create a Notification under Web Notifications, the editor shows a live preview panel beside the **Heading**, **Message**, and **Action Button Text** fields. As you enter text in them, Mautic updates the matching elements in the preview, so you can see how the Notification looks without saving and reopening it. | ||
|
|
||
| When a field is empty, the preview shows default text instead. An empty **Heading** shows 'Notification' and an empty **Message** shows 'You have a new message'. When **Action Button Text** is empty, the action button doesn't appear in the preview. |
There was a problem hiding this comment.
preview.html.twig defaults heading/message to translated placeholders (mautic.notification.preview.notification / .message) when empty, and toggles a hide class on the button preview element when notification.button is empty, confirming the empty-field defaulting and action-button-hidden behavior.
| ====================== | ||
| When you open or create a Notification under Web Notifications, the editor shows a live preview panel beside the **Heading**, **Message**, and **Action Button Text** fields. As you enter text in them, Mautic updates the matching elements in the preview, so you can see how the Notification looks without saving and reopening it. | ||
|
|
||
| When a field is empty, the preview shows default text instead. An empty **Heading** shows 'Notification' and an empty **Message** shows 'You have a new message'. When **Action Button Text** is empty, the action button doesn't appear in the preview. |
There was a problem hiding this comment.
Translation strings mautic.notification.preview.notification="Notification" and mautic.notification.preview.message="You have a new message" are the exact default placeholder text shown in the preview when Heading/Message are empty.
|
|
||
| Editing a Notification | ||
| ====================== | ||
| When you open or create a Notification under Web Notifications, the editor shows a live preview panel beside the **Heading**, **Message**, and **Action Button Text** fields. As you enter text in them, Mautic updates the matching elements in the preview, so you can see how the Notification looks without saving and reopening it. |
There was a problem hiding this comment.
Form field labels: mautic.notification.form.heading="Heading", mautic.notification.form.message="Message", mautic.notification.form.button="Action Button Text" (not "Action button" — see correction).
|
Thanks for the review! We're addressing your requested changes — the Vale sentence-case warning on the section title and the spacing between the title underline and the first paragraph. We'll update the PR shortly. |
|
Confirmed against the product source that "Notification" is capitalized throughout the UI, so we'll wrap the heading in a Vale off/on block (rather than lowercasing it) to clear the sentence-case warning, and add the missing blank line between the underline and the first paragraph. Applying both fixes now. |
…k line Reviewer adiati98 on PR mautic#932: - Wrap the 'Editing a Notification' heading in a .. vale off/on block so Vale's sentence-case rule does not flag it; 'Notification' is a capitalized proper noun in the Mautic UI. - Add a blank line between the heading underline and the first paragraph.
|
Thanks @adiati98 — both points are addressed in this PR.
Vale now runs clean on the file (0 errors, 0 warnings). |
2 participants
Open in Promptless
The web Notification editor now updates its preview panel in real time as you type. This adds an "Editing a Notification" subsection to the Web notifications page describing how the Heading, Message, and Action Button Text fields update the preview as you enter text — so you can see how a Notification will look without saving and reopening it — and how the preview behaves when those fields are empty (Heading and Message revert to their default text; an empty Action Button Text hides the action button). The page previously covered only OneSignal setup and sending, with no description of the notification content editor.
Trigger Events