Ghost/ghost/admin/app/components/modals/design/theme-errors.hbs
Kevin Ansfield 715ee08100 Added advanced theme settings modal
refs https://github.com/TryGhost/Team/issues/1111

Extracted functionality for listing, downloading, activating, and deleting from the theme controller/template into separate components and services so that they are more composable/reusable in different situations.

- moved theme activation to a new `theme-management` service that uses the `modals` service to open the theme warnings modal or limits upgrade modal as required
  - the activate process is a task so that consumers can store a reference to the task instance and cancel it to close any related warning/limit modals (eg, when navigating away from the route or closing the modal that kicked off the process)
- created new-pattern modals for custom theme limit upgrade, theme errors, and delete confirmation so that we can treat them as promises and close where needed from parent
- duplicated theme table component as `<GhThemeTableLabs>` with an actions redesign and a refactor to handle download, activation, and deletion itself making use of the new theme-management service and modals
- fixed some oddities with design modal's transition/modal close handling by simplifying the async behaviour and being more explicit
- added advanced design modal that contains the new theme table component and linked to it from footer of design modal's sidebar
2021-10-05 20:44:27 +01:00

67 lines
2.6 KiB
Handlebars

<div class="modal-content">
<div class="theme-validation-container" data-test-modal="theme-errors">
<header class="modal-header">
<h1 data-test-theme-warnings-title>
{{#unless @data.canActivate}}
{{@data.title}}
{{else}}
{{@data.title}} with {{#if @data.errors}}errors{{else}}warnings{{/if}}
{{/unless}}
</h1>
</header>
<button type="button" class="close" title="Close" {{on "click" @close}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
<div class="modal-body">
{{#if @data.fatalErrors}}
<div>
<h2 class="mb0 mt4 f5 fw6 red">Fatal Errors</h2>
<p class="mb2 red">Must-fix to activate theme</p>
</div>
<ul class="pa0" data-test-theme-fatal-errors>
{{#each @data.fatalErrors as |error|}}
<li class="theme-validation-item theme-fatal-error">
<GhThemeErrorLi @error={{error}} />
</li>
{{/each}}
</ul>
{{/if}}
{{#if @data.errors}}
<div>
<h2 class="mb0 mt4 f5 fw6">Errors</h2>
<p class="mb2">Highly recommended to fix, functionality <span>could</span> be restricted</p>
</div>
<ul class="pa0" data-test-theme-errors>
{{#each @data.errors as |error|}}
<li class="theme-validation-item theme-error">
<GhThemeErrorLi @error={{error}} />
</li>
{{/each}}
</ul>
{{/if}}
{{#if (and @data.warnings (or @data.fatalErrors @data.errors))}}
<div>
<h2 class="mb0 mt4 f5 fw6">Warnings</h2>
</div>
{{/if}}
{{#if @data.warnings}}
<ul class="pa0" data-test-theme-warnings>
{{#each @data.warnings as |error|}}
<li class="theme-validation-item theme-warning">
<GhThemeErrorLi @error={{error}} />
</li>
{{/each}}
</ul>
{{/if}}
</div>
</div>
<div class="modal-footer">
<button type="button" {{on "click" @close}} class="gh-btn" data-test-modal-close-button>
<span>Ok</span>
</button>
</div>
</div>