mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-29 15:12:58 +03:00
5a8753fb8f
refs https://github.com/TryGhost/Ghost/issues/12608 requires https://github.com/TryGhost/Ghost/pull/12635 - adds `/settings/themes/install` route with `source` and `ref` query params that match the API. Shows a confirmation modal when accessed asking to confirm installation and activation - does not allow Casper to be installed - warns if installing the theme will overwrite an existing one - follows similar process to zip uploads for error handling - adds install/preview links for Massively in the free themes showcase Co-authored-by: Sanne de Vries <sannedv@protonmail.com>
140 lines
6.4 KiB
Handlebars
140 lines
6.4 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-theme-directory-container">
|
|
<div class="theme-directory">
|
|
<a class="td-item" href="https://github.com/TryGhost/Massively" target="_blank" rel="noopener noreferrer">
|
|
<div class="td-item-screenshot relative">
|
|
<img style="object-fit:contain;" src="assets/img/themes/massively.jpg" alt="Massively 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="TryGhost/Massively"}}><span>Install</span></LinkTo>
|
|
<a href="https://massively.ghost.io" class="td-item-action gh-btn" target="_blank" rel="noopener"><span>Preview</span></a>
|
|
</div>
|
|
</div>
|
|
<div class="td-item-desc">
|
|
<div>Massively <span>— Free</span></div>
|
|
</div>
|
|
</a>
|
|
<a class="td-item" href="https://themeforest.net/item/nurui-multipurpose-ghost-blog-theme/22243886" target="_blank" rel="noopener noreferrer">
|
|
<div class="td-item-screenshot">
|
|
<img style="object-fit:contain;" src="assets/img/themes/nurui.jpg" alt="Nurui Theme" />
|
|
</div>
|
|
<div class="td-item-desc">
|
|
<div>Nurui <span>— Premium</span></div>
|
|
</div>
|
|
</a>
|
|
<a class="td-item" href="https://themeforest.net/item/pacific-big-bold-photographydriven-theme/19774541" target="_blank" rel="noopener noreferrer">
|
|
<div class="td-item-screenshot">
|
|
<img style="object-fit:contain;" src="assets/img/themes/pacific.jpg" alt="Pacific Theme" />
|
|
</div>
|
|
<div class="td-item-desc">
|
|
<div>Pacific <span>— Premium</span></div>
|
|
</div>
|
|
</a>
|
|
<a class="td-item" href="https://www.hauntedthemes.com/" target="_blank" rel="noopener noreferrer">
|
|
<div class="td-item-screenshot">
|
|
<img style="object-fit:contain;" src="assets/img/themes/farafra.jpg" alt="Farafra Theme" />
|
|
</div>
|
|
<div class="td-item-desc">
|
|
<div>Farafra <span>— Premium</span></div>
|
|
</div>
|
|
</a>
|
|
<a class="td-item" href="https://ghost.org/marketplace/" target="_blank" rel="noopener noreferrer">
|
|
<div class="td-item-empty">
|
|
{{svg-jar "circle-ellipsis" class="w5"}}
|
|
<h4 class="fw6 f6 pt3 pb1">More themes</h4>
|
|
<div class="midgrey f7">Explore more free and premium themes on our Marketplace</div>
|
|
</div>
|
|
</a>
|
|
<a class="td-item" href="https://themeforest.net/item/sente-magazine-ghost-blog-theme/21019644" target="_blank" rel="noopener noreferrer">
|
|
<div class="td-item-screenshot">
|
|
<img style="object-fit:contain;" src="assets/img/themes/sente.jpg" alt="Sente Theme" />
|
|
</div>
|
|
<div class="td-item-desc">
|
|
<div>Sente <span>— Premium</span></div>
|
|
</div>
|
|
</a>
|
|
</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}}
|
|
|
|
<GhTourItem @throbberId="upload-a-theme"
|
|
@target="#upload-theme"
|
|
@throbberAttachment="top middle"
|
|
@popoverTriangleClass="bottom"
|
|
/>
|