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

Added desktop/mobile switch to <GhBrowserPreview> component

Browse source 
refs https://github.com/TryGhost/Team/issues/1310

- we had a `<GhBrowserPreview>` component but it wasn't being used everywhere because it's behaviour didn't match the mobile/desktop switch with no iframe re-render that we needed for some screens
- updated component to match all required behaviour
  - include a switch between desktop and mobile views
  - default fallbacks for `@title` and `@icon` arguments
- switched design settings themes over to using the component instead of repeating the same set of markup
This commit is contained in:
Kevin Ansfield 2022-02-04 10:28:11 +00:00
parent a05c9e4c76
commit 019b22caa1
4 changed files with 34 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
ghost/admin/app/components/gh-browser-preview.hbs
View file

@ -1,20 +1,23 @@
<div class="gh-browserpreview-previewcontainer" ...attributes>
{{!-- changes only classes between desktop/mobile to avoid re-rendering yielded contents --}}
<div class="{{if @isMobilePreview "gh-pe-mobile-container flex justify-center" "gh-browserpreview-previewcontainer"}}" ...attributes>
{{#unless @isMobilePreview}}
<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>
{{#if (or @icon this.settings.icon)}}
<span class="favicon"><img src={{or @icon this.settings.icon}} alt="icon"></span>
{{else}}
<span class="favicon default">{{svg-jar "default-favicon"}}</span>
{{/if}}
<span class="site-title">{{@title}}</span>
<span class="site-title">{{or @title this.settings.title}}</span>
</div>
</div>
</div>
<div class="gh-browserpreview-iframecontainer">
{{/unless}}
<div class="{{if @isMobilePreview "gh-pe-mobile-bezel" "gh-browserpreview-iframecontainer"}}">
<div class="{{if @isMobilePreview "gh-pe-mobile-screen"}}">
{{yield}}
</div>
</div>
</div>

6
ghost/admin/app/components/gh-browser-preview.js Normal file
View file

@ -0,0 +1,6 @@
import Component from '@glimmer/component';
import {inject as service} from '@ember/service';
export default class GhBrowserPreview extends Component {
@service settings;
}

26
ghost/admin/app/components/modals/design/view-theme.hbs
View file

@ -17,28 +17,8 @@
</GhCanvasHeader>
<section class="view-container">
{{!-- 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>
<GhBrowserPreview @isMobilePreview={{this.isMobilePreview}}>
<iframe class={{if this.isMobilePreview "gh-post-preview-iframe" "site-frame"}} src={{@data.theme.previewUrl}} title="{{@data.theme.name}} theme preview" />
</GhBrowserPreview>
</section>
</section>

29
ghost/admin/app/templates/settings/design/index.hbs
View file

@ -31,28 +31,11 @@
</GhCanvasHeader>
<div class="view-container">
{{!-- 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 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"}}">
<GhHtmlIframe class={{if this.isMobilePreview "gh-post-preview-iframe" "site-frame"}} @html={{this.themeManagement.previewHtml}} @pageId={{this.themeManagement.previewType}} />
</div>
</div>
</div>
<GhBrowserPreview @isMobilePreview={{this.isMobilePreview}}>
<GhHtmlIframe
class={{if this.isMobilePreview "gh-post-preview-iframe" "site-frame"}}
@html={{this.themeManagement.previewHtml}}
@pageId={{this.themeManagement.previewType}} />
</GhBrowserPreview>
</div>
</section>