TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 22:43:30 +03:00
Code Issues Projects Releases Wiki Activity

Wired up desktop/mobile toggle on design settings screen

Browse Source 
no issue

- ensured that we're only swapping classes on existing elements or inserting/removing elements around the iframe to avoid re-rendering and the associated loading+layout flash
This commit is contained in:
Kevin Ansfield 2021-10-13 13:22:49 +01:00
parent d63cfa472f
commit 7c2ba1c242
2 changed files with 42 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
ghost/admin/app/controllers/settings/design/index.js
View File

@ -1,6 +1,8 @@
import Controller from '@ember/controller';
import {action} from '@ember/object';
import {inject as service} from '@ember/service';
import {task} from 'ember-concurrency-decorators';
import {tracked} from '@glimmer/tracking';
export default class SettingsDesignIndexController extends Controller {
@service config;
@ -9,6 +11,21 @@ export default class SettingsDesignIndexController extends Controller {
@service settings;
@service themeManagement;
@tracked previewSize = 'desktop';
get isDesktopPreview() {
return this.previewSize === 'desktop';
}
get isMobilePreview() {
return this.previewSize === 'mobile';
}
@action
setPreviewSize(size) {
this.previewSize = size;
}
@task
*saveTask() {
try {

30
ghost/admin/app/templates/settings/design/index.hbs
View File

@ -3,8 +3,8 @@
<h2 class="gh-canvas-title">{{this.config.blogTitle}}</h2>
<section class="view-actions">
<div class="gh-contentfilter gh-btn-group">
<button type="button" class="gh-btn gh-design-preview-mode gh-btn-group-selected"><span>{{svg-jar "desktop"}}</span></button>
<button type="button" class="gh-btn gh-design-preview-mode"><span>{{svg-jar "mobile-phone"}}</span></button>
<button type="button" class="gh-btn gh-design-preview-mode {{if this.isDesktopPreview "gh-btn-group-selected"}}" {{on "click" (fn this.setPreviewSize "desktop")}}><span>{{svg-jar "desktop"}}</span></button>
<button type="button" class="gh-btn gh-design-preview-mode {{if this.isMobilePreview "gh-btn-group-selected"}}" {{on "click" (fn this.setPreviewSize "mobile")}}><span>{{svg-jar "mobile-phone"}}</span></button>
</div>
<GhTaskButton
@ -19,8 +19,28 @@
</GhCanvasHeader>
<div class="view-container">
<GhBrowserPreview @icon={{this.settings.icon}} @title={{this.config.blogTitle}}>
<GhHtmlIframe id="site-frame" class="site-frame gh-branding-settings-preview" @html={{this.themeManagement.previewHtml}} />
</GhBrowserPreview>
{{!-- changes only classes between desktop/mobile to avoid re-rendering iframe contents --}}
<div class="{{if this.isMobilePreview "gh-pe-mobile-container flex justify-center" "gh-browserpreview-previewcontainer"}}">
{{#if this.isDesktopPreview}}
<div class="gh-browserpreview-browser">
<div class="tabs">
<ul><li></li><li></li><li></li></ul>
<div>
{{#if @icon}}
<span class="favicon"><img src={{@icon}} alt="icon"></span>
{{else}}
<span class="favicon default">{{svg-jar "default-favicon"}}</span>
{{/if}}
<span class="site-title">{{@title}}</span>
</div>
</div>
</div>
{{/if}}
<div class="{{if this.isMobilePreview "gh-pe-mobile-bezel" "gh-browserpreview-iframecontainer"}}">
<div class="{{if this.isMobilePreview "gh-pe-mobile-screen"}}">
<GhHtmlIframe class={{if this.isMobilePreview "gh-post-preview-iframe" "site-frame"}} @html={{this.themeManagement.previewHtml}} />
</div>
</div>
</div>
</div>
</section>