770f657ae9
ref DES-228 This PR updates messaging and error handling in order to make Ghost calmer and friendlier. High level summary of the changes: - Removed all onBlur validation in Settings -> now it’s possible to just click around without being warned to fill mandatory fields - Removed lot of technical errors like `ValidationError: Validation (isEmpty) failed for locale` - Completely removed the red background toast notifications, it was aggressive and raw esp. on the top - Removed some unnecessary notifications (e.g. when removing a webhook, the removal already communicates the result) - Now we show field errors on submitting forms, and in case of an error we show a “Retry” button in Settings too. This allowed to remove a lot of unnecessary error messages, like the big error message on the top, plus it’s consistent with the patterns outside Settings. - Notification style is white now with filled color icons which makes everything much calmer and more refined. - Removes redundant copy (e.g. "successful(ly)") from notifications --------- Co-authored-by: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
37 lines
1.6 KiB
Handlebars
37 lines
1.6 KiB
Handlebars
<article class="gh-notification gh-notification-passive {{this.typeClass}}" {{on "animationend" this.closeOnFadeOut}} ...attributes>
|
|
<div class="gh-notification-content" data-test-text="notification-content">
|
|
<div class="gh-notification-header">
|
|
<div class="gh-notification-icon">
|
|
{{#if @message.icon}}
|
|
{{svg-jar @message.icon}}
|
|
{{else}}
|
|
{{#if (eq @message.type "success")}}
|
|
{{svg-jar "check-circle-filled"}}
|
|
{{else if (eq @message.type "error")}}
|
|
{{svg-jar "warning-circle-filled"}}
|
|
{{else if (eq @message.type "warn")}}
|
|
{{svg-jar "warning-circle-filled"}}
|
|
{{else}}
|
|
{{svg-jar "check-circle-filled"}}
|
|
{{/if}}
|
|
{{/if}}
|
|
</div>
|
|
<div>
|
|
<span class="gh-notification-title">{{@message.message}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{#if (or @message.description @message.actions)}}
|
|
<div class="gh-notification-details">
|
|
{{#if @message.description}}
|
|
<p>{{@message.description}}</p>
|
|
{{/if}}
|
|
{{#if @message.actions}}
|
|
<span class="gh-notification-actions">{{@message.actions}}</span>
|
|
{{/if}}
|
|
</div>
|
|
{{/if}}
|
|
<button class="gh-notification-close" data-test-button="close-notification" type="button" {{on "click" this.closeNotification}}>
|
|
{{svg-jar "close"}}<span class="hidden">Close</span>
|
|
</button>
|
|
</article> |