Ghost/ghost/admin/app/components/modal-upload-theme.hbs
Marco Zehe 59fcc567f1 🐛 Fixed various Close buttons throughout the UI. (#1585)
refs TryGhost/Ghost#11863

Some `a`tags with `href` attributes that are empty are used as buttons, but since the href is not linkifying anything, they appear as text nodes to assistive technologies. Give them a `"button"` role so it is guaranteed that assistive technologies will pick them up as actionable controls.
2020-05-28 17:11:21 +01:00

141 lines
6.2 KiB
Handlebars

<div class="theme-validation-container">
<header class="modal-header" data-test-modal="upload-theme">
<h1>
{{#if this.theme}}
{{#if this.hasWarningsOrErrors}}
Upload successful with {{#if this.validationErrors}}errors{{else}}warnings{{/if}}
{{else}}
Upload successful!
{{/if}}
{{else if (or this.validationErrors this.fatalValidationErrors)}}
Invalid theme
{{else}}
Upload a theme
{{/if}}
</h1>
</header>
<a class="close" href="#" role="button" title="Close" {{action "closeModal"}}>{{svg-jar "close"}}<span class="hidden">Close</span></a>
<div class="modal-body">
{{#if this.theme}}
{{#if this.hasWarningsOrErrors}}
<p>
{{#if this.canActivateTheme}}
The theme <strong>"{{this.themeName}}"</strong> was uploaded successfully but we detected some {{#if this.validationErrors}}errors{{else}}warnings{{/if}}. You are still able to activate and use the theme but it is recommended to fix these {{#if this.validationErrors}}errors{{else}}warnings{{/if}} before you do so.
{{else}}
The theme <strong>"{{this.themeName}}"</strong> was uploaded successfully but we detected some
{{#if this.validationErrors}}errors{{else}}warnings{{/if}}.
{{/if}}
</p>
{{#if this.validationErrors}}
<div>
<h2 class="mb0 mt4 f5 fw6">Errors</h2>
<p class="mb2">Highly recommended to fix, functionality <strong>could</strong> be restricted</p>
</div>
<ul class="pa0">
{{#each this.validationErrors as |error|}}
<li class="theme-validation-item theme-error">
<GhThemeErrorLi @error={{error}} />
</li>
{{/each}}
</ul>
{{/if}}
{{#if this.validationWarnings}}
<div>
<h2 class="mb0 mt4 f5 fw6">Warnings</h2>
</div>
<ul class="pa0">
{{#each this.validationWarnings as |error|}}
<li class="theme-validation-item theme-warning">
<GhThemeErrorLi @error={{error}} />
</li>
{{/each}}
</ul>
{{/if}}
{{else}}
<p>
"{{this.themeName}}" uploaded successfully.
{{#if this.canActivateTheme}}Do you want to activate it now?{{/if}}
</p>
{{/if}}
{{else if this.displayOverwriteWarning}}
<p>
The theme folder <strong>"{{this.fileThemeName}}"</strong> already exists. Do you want to overwrite it?
</p>
{{else if (or this.validationErrors this.fatalValidationErrors)}}
<p>
This theme is invalid and cannot be activated. Fix the following errors and re-upload the theme.
</p>
{{#if this.fatalValidationErrors}}
<div>
<h2 class="mb0 mt4 f5 fw6">Fatal Errors</h2>
<p class="mb2">Must-fix to activate theme</p>
</div>
<ul class="pa0">
{{#each this.fatalValidationErrors as |error|}}
<li class="theme-validation-item theme-fatal-error">
<GhThemeErrorLi @error={{error}} />
</li>
{{/each}}
</ul>
{{/if}}
{{#if this.validationErrors}}
<div>
<h2 class="mb0 mt4 f5 fw6">Errors</h2>
<p class="mb2">Highly recommended to fix, functionality <strong>could</strong> be restricted</p>
</div>
<ul class="pa0">
{{#each this.validationErrors as |error|}}
<li class="theme-validation-item theme-error">
<GhThemeErrorLi @error={{error}} />
</li>
{{/each}}
</ul>
{{/if}}
{{else}}
<GhFileUploader
@url={{this.uploadUrl}}
@paramName="file"
@accept={{this.accept}}
@labelText="Click to select or drag-and-drop your theme zip file here."
@validate={{action "validateTheme"}}
@uploadStarted={{action "uploadStarted"}}
@uploadFinished={{action "uploadFinished"}}
@uploadSuccess={{action "uploadSuccess"}}
@uploadFailed={{action "uploadFailed"}}
@listenTo="themeUploader" />
{{/if}}
</div>
</div>
<div class="modal-footer">
<div class="flex items-center justify-between {{if (or this.displayOverwriteWarning this.canActivateTheme this.validationErrors this.fatalValidationErrors) "flex-auto"}}">
<button {{action "closeModal"}} disabled={{this.closeDisabled}} class="gh-btn" data-test-close-button>
<span>{{#if this.theme}}Close{{else}}Cancel{{/if}}</span>
</button>
<div class="flex items-center">
{{#if this.displayOverwriteWarning}}
<button {{action "confirmOverwrite"}} class="gh-btn gh-btn-red" data-test-overwrite-button>
<span>Overwrite</span>
</button>
{{/if}}
{{#if this.canActivateTheme}}
<button {{action "activate"}} class="gh-btn" data-test-activate-now-button>
<span>Activate{{#if this.validationErrors}} with errors{{/if}}</span>
</button>
{{/if}}
{{#if (or this.validationErrors this.fatalValidationErrors)}}
<button {{action "reset"}} class="gh-btn gh-btn-blue ml2" data-test-try-again-button>
<span>Retry</span>
</button>
{{/if}}
</div>
</div>
</div>