Ghost/ghost/admin/app/templates/settings/theme.hbs
Sanne de Vries e9e169fdfc Improved theme directory
No ref

- Moved from 5-column to 4-column grid
- Moved Marketplace link out of the grid
- Improved hover animation
2021-03-02 18:22:41 +01:00

103 lines
4.3 KiB
Handlebars

<section class="gh-canvas">
<GhCanvasHeader class="gh-canvas-header">
<h2 class="gh-canvas-title" data-test-screen-title>
<LinkTo @route="settings">Settings</LinkTo>
<span>{{svg-jar "arrow-right"}}</span>
Theme
</h2>
</GhCanvasHeader>
{{#if this.showLeaveSettingsModal}}
<GhFullscreenModal @modal="leave-settings"
@confirm={{action "leaveSettings"}}
@close={{action "toggleLeaveSettingsModal"}}
@modifier="action wide" />
{{/if}}
<section class="view-container">
<div class="gh-setting-header gh-first-header flex justify-between">
<span>Ghost theme directory</span>
<a href="https://ghost.org/marketplace/" target="_blank" rel="noopener noreferrer" class="gh-td-marketplace">
<span>View more {{svg-jar "arrow-right-small"}}</span>
</a>
</div>
<div class="gh-theme-directory-container">
<div class="theme-directory">
{{#each this.marketplaceThemes as |theme|}}
<a class="td-item" href={{theme.url}} target="_blank" rel="noopener noreferrer">
<div class="td-item-screenshot relative">
<img style="object-fit:contain;" src={{theme.image}} alt="{{theme.name}} Theme" />
<div class="td-item-overlay">
<LinkTo class="td-item-action gh-btn gh-btn-black mb4" @route="settings.theme.install" @query={{hash source="github" ref=theme.ref}}><span>Install</span></LinkTo>
<a href={{theme.previewUrl}} class="td-item-action gh-btn" target="_blank" rel="noopener"><span>Preview</span></a>
</div>
</div>
<div class="td-item-desc">
<div>{{theme.name}}</div>
<span>• {{theme.category}}</span>
</div>
</a>
{{/each}}
</div>
</div>
<div class="gh-setting-header">Installed Themes</div>
<div class="gh-themes-container">
<GhThemeTable
@themes={{this.themes}}
@activateTheme={{action "activateTheme"}}
@downloadTheme={{action "downloadTheme"}}
@deleteTheme={{action "deleteTheme"}} />
<div class="flex justify-between mt6">
<LinkTo id="upload-theme" @route="settings.theme.uploadtheme" class="gh-btn gh-btn-green" data-test-button="uploadtheme">
<span>Upload a theme</span>
</LinkTo>
<a href="https://ghost.org/docs/themes/" target=_"blank" rel="noopener noreferrer" class="gh-btn gh-btn-outline">
<span>Theme developer docs</span>
</a>
</div>
{{#if this.showDeleteThemeModal}}
<GhFullscreenModal @modal="delete-theme"
@model={{hash
theme=this.themeToDelete
download=(action "downloadTheme" this.themeToDelete)
}}
@close={{action "hideDeleteThemeModal"}}
@confirm={{action "deleteTheme"}}
@modifier="action wide" />
{{/if}}
{{#if this.showThemeWarningsModal}}
<GhFullscreenModal @modal="theme-warnings"
@model={{hash
title="Activation successful"
warnings=this.themeWarnings
errors=this.themeErrors
canActivate=true
}}
@close={{action "hideThemeWarningsModal"}}
@modifier="action wide" />
{{/if}}
{{#if this.showThemeErrorsModal}}
<GhFullscreenModal @modal="theme-warnings"
@model={{hash
title="Activation failed"
errors=this.themeErrors
fatalErrors=this.themeFatalErrors
canActivate=false
}}
@close={{action "hideThemeWarningsModal"}}
@modifier="action wide" />
{{/if}}
</div>
</section>
</section>
{{outlet}}