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

Updated browser and mobile post previews

Browse Source 
Refs https://github.com/TryGhost/Team/issues/1621
This commit is contained in:
Sanne de Vries 2022-05-13 14:19:22 +01:00
parent ff437752de
commit 52cfae0522
6 changed files with 83 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ghost/admin/app/components/editor-labs/modals/preview.hbs
View File

@ -40,19 +40,19 @@
<GhLoadingSpinner />
{{else}}
{{#if (eq this.tab "browser")}}
<Modals::PostPreview::Browser @post={{@data.post}} />
<EditorLabs::Modals::Preview::Browser @post={{@data.post}} />
{{/if}}
{{#if (and (eq this.tab "mobile"))}}
<Modals::PostPreview::Mobile @post={{@data.post}} />
<EditorLabs::Modals::Preview::Mobile @post={{@data.post}} />
{{/if}}
{{#if (and (eq this.tab "email") @data.post.isPost)}}
<Modals::PostPreview::Email @post={{@data.post}} />
<EditorLabs::Modals::Preview::Email @post={{@data.post}} />
{{/if}}
{{#if (eq this.tab "social")}}
<Modals::PostPreview::Social @post={{@data.post}} />
<EditorLabs::Modals::Preview::Social @post={{@data.post}} />
{{/if}}
{{/if}}
</div>

39
ghost/admin/app/components/editor-labs/modals/preview/browser.hbs
View File

@ -1,23 +1,30 @@
<div class="gh-post-preview-browser-container">
<iframe class="gh-pe-iframe" src={{@post.previewUrl}}></iframe>
</div>
<div class="gh-post-preview-browser-footer">
<span class="mr3 nowrap fw6 f8 darkgrey">Share preview privately</span>
<div class="gh-post-preview-url-container truncate">
<span class="db truncate w-90">{{@post.previewUrl}}</span>
</div>
<button type="button" {{on "click" (perform this.copyPreviewUrl)}} class="gh-btn gh-btn-green gh-btn-icon gh-post-preview-copy-url-trigger">
<span>
{{#if this.copyPreviewUrl.isRunning}}
Copied!
<div class="gh-browserpreview-previewcontainer gh-post-preview-browser">
<div class="gh-browserpreview-browser">
<div class="tabs">
<ul><li></li><li></li><li></li></ul>
<div>
{{#if (or @icon this.settings.icon)}}
<span class="favicon"><img src={{or @icon this.settings.icon}} alt="icon"></span>
{{else}}
copy
<span class="favicon default">{{svg-jar "default-favicon"}}</span>
{{/if}}
<span class="db truncate w-90">{{@post.previewUrl}}</span>
<button type="button" {{on "click" (perform this.copyPreviewUrl)}} class="gh-post-preview-url">
<span class="green-d1">
{{#if this.copyPreviewUrl.isRunning}}
{{svg-jar "check-circle" class="check v-mid mr1 ml2"}} Copied
{{else}}
{{svg-jar "copy" class="w4 ml3 v-mid fill-darkgrey"}}
{{/if}}
</span>
</button>
<div>
<a href={{@post.previewUrl}} target="_blank" rel="noopener noreferrer" class="gh-btn gh-btn-editor gh-btn-icon gh-btn-icon-right gh-btn-external">
<span>Open in new tab {{svg-jar "external"}}</span>
<a href={{@post.previewUrl}} target="_blank" rel="noopener noreferrer" class="gh-publish-preview-newtab">
{{svg-jar "external"}}
</a>
</div>
</div>
</div>
<div class="gh-browserpreview-iframecontainer">
<iframe class="gh-pe-iframe" src={{@post.previewUrl}}></iframe>
</div>
</div>

20
ghost/admin/app/components/editor-labs/modals/preview/mobile.hbs
View File

@ -5,23 +5,3 @@
</div>
</div>
</div>
<div class="gh-post-preview-browser-footer">
<span class="mr3 nowrap fw6 f8 darkgrey">Share preview privately</span>
<div class="gh-post-preview-url-container truncate">
<span class="db truncate w-90">{{@post.previewUrl}}</span>
</div>
<button type="button" {{on "click" (perform this.copyPreviewUrl)}} class="gh-btn gh-btn-green gh-btn-icon gh-post-preview-copy-url-trigger">
<span>
{{#if this.copyPreviewUrl.isRunning}}
Copied!
{{else}}
copy
{{/if}}
</span>
</button>
<div>
<a href={{@post.previewUrl}} target="_blank" rel="noopener noreferrer" class="gh-btn gh-btn-editor gh-btn-icon gh-btn-icon-right gh-btn-external">
<span>Open in new tab {{svg-jar "external"}}</span>
</a>
</div>
</div>

2
ghost/admin/app/styles/components/browser-preview.css
View File

@ -61,7 +61,7 @@
overflow: hidden;
text-overflow: ellipsis;
margin: -7px 6px -15px;
padding: 8px 12px;
padding: 8px 16px;
display: flex;
align-items: center;
font-size: 1.25rem;

56
ghost/admin/app/styles/layouts/post-preview.css
View File

@ -46,17 +46,20 @@
fill: var(--midgrey);
}
.gh-btn-external {
margin-left: 2rem;
.gh-publish-preview-newtab {
display: inherit;
margin-top: 2px;
margin-left: 1.6rem;
}
.gh-btn-external svg {
width: 12px;
.gh-publish-preview-newtab svg {
width: 14px;
fill: var(--darkgrey);
}
.gh-btn-external svg path {
stroke: none;
.gh-publish-preview-newtab svg path {
stroke-width: .8px;
stroke: var(--darkgrey);
}
/* Browser preview */
@ -75,6 +78,45 @@
border: none;
}
.gh-post-preview-browser {
margin: 0 40px 40px;
}
.gh-post-preview-browser .gh-pe-iframe {
width: 100%;
height: 100%;
border: none;
}
.gh-post-preview-browser .tabs div {
width: 360px;
color: var(--middarkgrey);
font-weight: 400;
}
.gh-post-preview-url {
display: flex;
align-items: center;
flex-shrink: 0;
height: 32px;
border-color: transparent;
box-shadow: none;
color: var(--darkgrey);
font-size: 1.25rem;
font-weight: 500;
letter-spacing: .2px;
}
.gh-post-preview-url .check {
width: 14px;
margin-top: -1px;
}
.gh-post-preview-url .check path {
stroke-width: 2.4px;
stroke: var(--green-d1);
}
.gh-post-preview-url-container {
position: relative;
display: flex;
@ -117,7 +159,7 @@
/* Mobile preview */
.gh-post-preview-iframe {
transform: scale(0.8);
transform: scale(0.84);
transform-origin: 0 0;
width: 361px;
height: 786px;

4
ghost/admin/app/styles/layouts/preview-email.css
View File

@ -149,8 +149,8 @@
flex-direction: column;
flex-grow: 1;
align-items: center;
background: var(--whitegrey-l1);
padding: 30px 30px 45px;
background: var(--white);
padding: 8vmin 30px 30px;
height: calc(100vh - 119px);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;