Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Updated design settings page

Browse source 
Refs https://github.com/TryGhost/Team/issues/1045
This commit is contained in:
Sanne de Vries 2021-09-23 10:16:22 +02:00
parent 1ce3e370d1
commit 182f5c91b6
4 changed files with 65 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
ghost/admin/app/routes/design.js
View file

@ -1,10 +1,13 @@
import AuthenticatedRoute from 'ghost-admin/routes/authenticated';
import {action} from '@ember/object';
import {inject as service} from '@ember/service';
export default class DashboardRoute extends AuthenticatedRoute {
@service feature;
@service settings;
previewIframe = null;
beforeModel() {
super.beforeModel(...arguments);
@ -26,4 +29,18 @@ export default class DashboardRoute extends AuthenticatedRoute {
mainClasses: ['gh-main-wide']
};
}
@action
registerPreviewIframe(element) {
this.previewIframe = element;
}
@action
replacePreviewContents(html) {
if (this.previewIframe) {
this.previewIframe.contentWindow.document.open();
this.previewIframe.contentWindow.document.write(html);
this.previewIframe.contentWindow.document.close();
}
}
}

21
ghost/admin/app/styles/layouts/settings.css
View file

@ -1318,6 +1318,7 @@ p.theme-validation-details {
margin: 32px 68px 68px;
}
.gh-design-settings-previewcontainer .site-frame,
.gh-branding-settings-previewcontainer .site-frame,
.gh-launch-wizard-preview {
width: 133.33333%;
@ -1390,6 +1391,26 @@ p.theme-validation-details {
/* Design (Labs)
/* ---------------------------------------------------- */
.gh-design-settings-left {
flex-grow: 1;
background: none;
}
.gh-design-settings-right {
flex-grow: 3;
display: flex;
flex-direction: column;
align-items: stretch;
height: 50vh;
min-height: 480px;
margin-left: 80px;
}
.gh-expandable-block.gh-active-theme {
border: 1px solid var(--list-color-divider);
border-radius: var(--border-radius);
}
.gh-design-settings-tabs {
width: 100%;
margin-bottom: 48px;

2
ghost/admin/app/templates/settings.hbs
View file

@ -20,7 +20,7 @@
<span class="blue">{{svg-jar "paint-palette"}}</span>
<div>
<h4>Design</h4>
<p>Customize the way your site looks</p>
<p>Customize your site and manage themes</p>
</div>
</LinkTo>
{{else}}

32
ghost/admin/app/templates/settings/design.hbs
View file

@ -5,15 +5,35 @@
<span>{{svg-jar "arrow-right"}}</span>
Design
</h2>
<section class="view-actions">
<LinkTo class="gh-btn gh-btn-action-icon" @route="settings.design.advanced"><span>Advanced</span></LinkTo>
<LinkTo class="gh-btn gh-btn-primary" @route="settings.design.change-theme"><span>Change theme</span></LinkTo>
</section>
</GhCanvasHeader>
<section class="view-container">
<ul>
<li><LinkTo @route="settings.design.customize">Customize</LinkTo></li>
<li><LinkTo @route="settings.design.change-theme">Change theme</LinkTo></li>
<li><LinkTo @route="settings.design.advanced">Advanced theme options</LinkTo></li>
</ul>
<section class="view-container flex">
<section class="gh-expandable gh-design-settings-left">
<h4 class="gh-main-section-header small bn">Active theme</h4>
<div class="gh-expandable-block gh-active-theme">
<div class="gh-expandable-header">
<div>
<h4 class="gh-expandable-title">Casper</h4>
<p class="gh-expandable-description">
Version 1.14.0
</p>
</div>
<LinkTo class="gh-btn gh-btn-green" @route="settings.design.customize"><span>Customize design &rarr;</span></LinkTo>
</div>
</div>
</section>
<section class="gh-design-settings-right">
<GhBrowserPreview class="gh-design-settings-previewcontainer" @icon={{this.settings.icon}} @title={{this.config.blogTitle}}>
<GhSiteIframe @src={{this.previewSrc}} @guid={{this.previewGuid}} {{did-insert this.registerPreviewIframe}}></GhSiteIframe>
</GhBrowserPreview>
</section>
</section>
</section>
{{outlet}}