Ghost/ghost/admin/app/components/gh-nav-menu/design.hbs
Kevin Ansfield 7251b1acac Added acceptance tests for new design screen
no issue

- moved navigation settings tests from old settings/design tests to a separate file and unskipped them
- added happy-path acceptance tests for
  - rendering design screen
  - installing an official theme from the themes list
  - uploading a custom theme
2021-11-01 17:48:49 +00:00

56 lines
3.2 KiB
Handlebars

<div class="flex flex-column h-100" {{css-transition "gh-nav-contextual"}} data-test-nav-menu="design" ...attributes>
<header class="gh-nav-header">
<LinkTo @route="settings" class="gh-nav-menu-back-button">{{svg-jar "arrow-left-small"}} Settings</LinkTo>
</header>
<section class="gh-nav-body gh-nav-design">
<div class="gh-nav-top" {{on "click" this.transitionBackToIndex}}>
<div class="gh-nav-list gh-nav-main">
<LinkTo @route="settings.design" class="gh-nav-menu-title" @current-when="settings.design.index" {{on "click" this.closeAllSections}}>Site design</LinkTo>
{{#let (eq this.openSection "brand") as |isOpen|}}
<button class="gh-nav-design-tab {{if isOpen "active"}}" type="button" {{on "click" (fn this.toggleSection "brand")}} data-test-nav-toggle="general">
{{svg-jar "paintbrush"}} Brand
<span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
</button>
{{#liquid-if isOpen}}
<div class="gh-nav-design-settings" data-test-nav-group="general">
<Settings::Design::GeneralSettingsForm
@updatePreview={{perform this.themeManagement.updatePreviewHtmlTask}}
/>
</div>
{{/liquid-if}}
{{/let}}
{{#each this.customThemeSettings.settingGroups as |group|}}
{{#let (eq this.openSection group.key) as |isOpen|}}
<button class="gh-nav-design-tab {{if isOpen "active"}}" type="button" {{on "click" (fn this.toggleSection group.key)}}>
{{svg-jar group.icon}} {{group.name}}
<span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
</button>
{{#liquid-if isOpen}}
<div class="gh-nav-design-settings" data-test-nav-group={{group.key}}>
<Settings::Design::ThemeSettingsForm
@themeSettings={{group.settings}}
@updatePreview={{perform this.themeManagement.updatePreviewHtmlTask}}
/>
</div>
{{/liquid-if}}
{{/let}}
{{/each}}
</div>
</div>
<div class="gh-nav-bottom">
<div class="gh-change-theme">
<LinkTo class="gh-nav-design-tab" @route="settings.design.change-theme" {{on "click" this.closeAllSections}} data-test-nav="change-theme">
<div>
<span>Change theme</span>
<span class="active-theme" data-test-text="current-theme">Current: {{this.activeTheme.name}}{{#if this.activeTheme.package.version}} - v{{this.activeTheme.package.version}}{{/if}}</span>
</div>
<div class="gh-nav-design-tabicon">{{svg-jar "sync"}}</div>
</LinkTo>
</div>
</div>
</section>
</div>