2021-10-18 18:43:02 +03:00
|
|
|
<section class="gh-canvas gh-design">
|
2021-10-11 17:24:46 +03:00
|
|
|
<GhCanvasHeader class="gh-canvas-header">
|
2021-10-15 18:59:47 +03:00
|
|
|
<h2 class="gh-canvas-title">Site design</h2>
|
2021-10-11 17:24:46 +03:00
|
|
|
<section class="view-actions">
|
2021-10-14 19:01:12 +03:00
|
|
|
<div class="gh-select gh-design-page-preview-mode">
|
|
|
|
<OneWaySelect
|
|
|
|
@value={{this.themeManagement.previewType}}
|
|
|
|
@options={{this.themeManagement.availablePreviewTypes}}
|
|
|
|
@optionValuePath="name"
|
|
|
|
@optionLabelPath="label"
|
|
|
|
@optionTargetPath="name"
|
|
|
|
@update={{this.themeManagement.setPreviewType}}
|
|
|
|
/>
|
|
|
|
{{svg-jar "arrow-down-small"}}
|
2021-10-13 18:06:49 +03:00
|
|
|
</div>
|
|
|
|
|
2021-10-11 17:24:46 +03:00
|
|
|
<div class="gh-contentfilter gh-btn-group">
|
2021-10-13 15:22:49 +03:00
|
|
|
<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>
|
2021-10-11 17:24:46 +03:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<GhTaskButton
|
|
|
|
@buttonText="Save changes"
|
2021-10-12 17:19:27 +03:00
|
|
|
@task={{this.saveTask}}
|
2021-10-11 17:24:46 +03:00
|
|
|
@successText="Saved"
|
|
|
|
@runningText="Saving"
|
|
|
|
@class="gh-btn gh-btn-primary gh-btn-icon"
|
|
|
|
data-test-button="save-settings"
|
|
|
|
/>
|
|
|
|
</section>
|
|
|
|
</GhCanvasHeader>
|
|
|
|
|
2021-10-12 17:23:55 +03:00
|
|
|
<div class="view-container">
|
2021-10-13 15:22:49 +03:00
|
|
|
{{!-- 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>
|
2021-10-14 17:58:29 +03:00
|
|
|
{{#if this.settings.icon}}
|
|
|
|
<span class="favicon"><img src={{this.settings.icon}} alt="icon"></span>
|
2021-10-13 15:22:49 +03:00
|
|
|
{{else}}
|
|
|
|
<span class="favicon default">{{svg-jar "default-favicon"}}</span>
|
|
|
|
{{/if}}
|
2021-10-14 17:58:29 +03:00
|
|
|
<span class="site-title">{{this.settings.title}}</span>
|
2021-10-13 15:22:49 +03:00
|
|
|
</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>
|
2021-10-11 17:24:46 +03:00
|
|
|
</div>
|
|
|
|
</section>
|