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

Added desktop/mobile toggle to view-theme screen

Browse Source 
refs https://github.com/TryGhost/Team/issues/1149

- re-used same desktop/mobile toggle that the main design settings screen uses
This commit is contained in:
Kevin Ansfield 2021-10-18 17:22:36 +01:00
parent e0842183c0
commit 3f0dbb0e8b
2 changed files with 44 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
ghost/admin/app/components/modals/design/view-theme.hbs
View File

@ -7,13 +7,38 @@
</h2>
<section class="view-actions">
<div class="gh-contentfilter gh-btn-group">
<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>
<button type="button" class="gh-btn gh-btn-primary" {{on "click" this.installTheme}}><span>Use {{@data.theme.name}}</span></button>
</section>
</GhCanvasHeader>
<section class="view-container">
<GhBrowserPreview class="gh-theme-previewcontainer" @title={{@data.theme.name}}>
<iframe src={{@data.theme.previewUrl}} class="site-frame gh-branding-settings-preview"></iframe>
</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 gh-theme-previewcontainer"}}">
{{#if this.isDesktopPreview}}
<div class="gh-browserpreview-browser">
<div class="tabs">
<ul><li></li><li></li><li></li></ul>
<div>
{{#if this.settings.icon}}
<span class="favicon"><img src={{this.settings.icon}} alt="icon"></span>
{{else}}
<span class="favicon default">{{svg-jar "default-favicon"}}</span>
{{/if}}
<span class="site-title">{{this.settings.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"}}">
<iframe class={{if this.isMobilePreview "gh-post-preview-iframe" "site-frame"}} src={{@data.theme.previewUrl}} />
</div>
</div>
</div>
</section>
</section>

16
ghost/admin/app/components/modals/design/view-theme.js
View File

@ -1,11 +1,22 @@
import Component from '@glimmer/component';
import {action} from '@ember/object';
import {inject as service} from '@ember/service';
import {tracked} from '@glimmer/tracking';
export default class ViewThemeModalComponent extends Component {
@service modals;
@service router;
@tracked previewSize = 'desktop';
get isDesktopPreview() {
return this.previewSize === 'desktop';
}
get isMobilePreview() {
return this.previewSize === 'mobile';
}
willDestroy() {
super.willDestroy(...arguments);
@ -27,4 +38,9 @@ export default class ViewThemeModalComponent extends Component {
}
});
}
@action
setPreviewSize(size) {
this.previewSize = size;
}
}