mirror of
https://github.com/TryGhost/Ghost-Admin.git
synced 2023-12-14 02:33:04 +01:00
495 lines
30 KiB
Handlebars
495 lines
30 KiB
Handlebars
<div class="settings-menu-container">
|
||
<div id="entry-controls">
|
||
<div class="{{if isViewingSubview 'settings-menu-pane-out-left' 'settings-menu-pane-in'}} settings-menu settings-menu-pane">
|
||
<div class="settings-menu-header">
|
||
<h4>{{capitalize post.displayName}} Settings</h4>
|
||
<button class="close settings-menu-header-action" {{action "closeMenus" target=ui}} data-test-close-settings-menu>
|
||
{{svg-jar "close"}}<span class="hidden">Close</span>
|
||
</button>
|
||
</div>
|
||
<div class="settings-menu-content">
|
||
{{gh-image-uploader-with-preview
|
||
image=post.featureImage
|
||
text=(concat "Upload " post.displayName " image")
|
||
allowUnsplash=true
|
||
update=(action "setCoverImage")
|
||
remove=(action "clearCoverImage")
|
||
}}
|
||
<form>
|
||
<div class="form-group">
|
||
<label for="url">{{capitalize post.displayName}} URL</label>
|
||
{{!-- new posts don't have a preview link --}}
|
||
{{#unless post.isNew}}
|
||
{{#if post.isPublished}}
|
||
<a class="post-view-link" target="_blank" href="{{post.url}}">
|
||
View {{post.displayName}} {{svg-jar "external"}}
|
||
</a>
|
||
{{else}}
|
||
<a class="post-view-link" target="_blank" href="{{post.previewUrl}}">
|
||
Preview {{svg-jar "external"}}
|
||
</a>
|
||
{{/if}}
|
||
{{/unless}}
|
||
|
||
<div class="gh-input-icon gh-icon-link">
|
||
{{svg-jar "link"}}
|
||
{{gh-text-input
|
||
class="post-setting-slug"
|
||
id="url"
|
||
name="post-setting-slug"
|
||
value=(readonly slugValue)
|
||
input=(action (mut slugValue) value="target.value")
|
||
focus-out=(action "updateSlug" slugValue)
|
||
stopEnterKeyDownPropagation=true}}
|
||
</div>
|
||
{{gh-url-preview slug=slugValue tagName="p" classNames="description"}}
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
{{#if (or post.isDraft post.isPublished post.pastScheduledTime)}}
|
||
<label>Publish Date</label>
|
||
{{else}}
|
||
<label>Scheduled Date</label>
|
||
{{/if}}
|
||
{{gh-date-time-picker
|
||
date=post.publishedAtBlogDate
|
||
time=post.publishedAtBlogTime
|
||
setDate=(action "setPublishedAtBlogDate")
|
||
setTime=(action "setPublishedAtBlogTime")
|
||
errors=post.errors
|
||
dateErrorProperty="publishedAtBlogDate"
|
||
timeErrorProperty="publishedAtBlogTime"
|
||
maxDate='now'
|
||
disabled=post.isScheduled
|
||
static=true
|
||
}}
|
||
{{#unless (or post.isDraft post.isPublished post.pastScheduledTime)}}
|
||
<p>Use the publish menu to re-schedule</p>
|
||
{{/unless}}
|
||
</div>
|
||
|
||
{{#unless session.user.isContributor}}
|
||
<div class="form-group">
|
||
<label for="tag-input">Tags</label>
|
||
{{gh-psm-tags-input post=post triggerId="tag-input"}}
|
||
</div>
|
||
{{/unless}}
|
||
|
||
|
||
{{#if feature.members}}
|
||
{{#if showVisibilityInput}}
|
||
<div class="form-group">
|
||
<label for="visibility-input">Post access</label>
|
||
{{gh-psm-visibility-input post=post triggerId="visibility-input"}}
|
||
</div>
|
||
{{/if}}
|
||
{{/if}}
|
||
|
||
|
||
{{#gh-form-group errors=post.errors hasValidated=post.hasValidated property="customExcerpt"}}
|
||
<label for="custom-excerpt">Excerpt</label>
|
||
{{gh-textarea
|
||
class="post-setting-custom-excerpt"
|
||
id="custom-excerpt"
|
||
name="post-setting-custom-excerpt"
|
||
value=(readonly customExcerptScratch)
|
||
input=(action (mut customExcerptScratch) value="target.value")
|
||
focus-out=(action "setCustomExcerpt" customExcerptScratch)
|
||
stopEnterKeyDownPropagation="true"
|
||
data-test-field="custom-excerpt"}}
|
||
{{gh-error-message errors=post.errors property="customExcerpt" data-test-error="custom-excerpt"}}
|
||
{{/gh-form-group}}
|
||
|
||
{{#unless session.user.isAuthorOrContributor}}
|
||
{{#gh-form-group class="for-select" errors=post.errors hasValidated=post.hasValidated property="authors" data-test-input="authors"}}
|
||
<label for="author-list">Authors</label>
|
||
{{gh-psm-authors-input selectedAuthors=post.authors updateAuthors=(action "changeAuthors") triggerId="author-list"}}
|
||
{{gh-error-message errors=post.errors property="authors" data-test-error="authors"}}
|
||
{{/gh-form-group}}
|
||
{{/unless}}
|
||
|
||
<ul class="nav-list nav-list-block">
|
||
<li class="nav-list-item" {{action "showSubview" "meta-data"}} data-test-button="meta-data">
|
||
<button type="button">
|
||
<b>Meta Data</b>
|
||
<span>Extra content for search engines</span>
|
||
</button>
|
||
{{svg-jar "arrow-right"}}
|
||
</li>
|
||
<li class="nav-list-item" {{action "showSubview" "twitter-data"}} data-test-button="twitter-data">
|
||
<button type="button">
|
||
<b>Twitter Card</b>
|
||
<span>Customise structured data for Twitter</span>
|
||
</button>
|
||
{{svg-jar "arrow-right"}}
|
||
</li>
|
||
<li class="nav-list-item" {{action "showSubview" "facebook-data"}} data-test-button="facebook-data">
|
||
<button type="button">
|
||
<b>Facebook Card</b>
|
||
<span>Customise Open Graph data</span>
|
||
</button>
|
||
{{svg-jar "arrow-right"}}
|
||
</li>
|
||
{{#if (and this.feature.members (eq this.post.displayName "post"))}}
|
||
<li class="nav-list-item" {{action "showSubview" "email-settings"}} data-test-button="email-settings">
|
||
<button type="button">
|
||
<b>Email Settings</b>
|
||
<span>Customise Email Settings</span>
|
||
</button>
|
||
{{svg-jar "arrow-right"}}
|
||
</li>
|
||
{{/if}}
|
||
<li class="nav-list-item" {{action "showSubview" "codeinjection"}} data-test-button="codeinjection">
|
||
<button type="button">
|
||
<b>Code Injection</b>
|
||
<span>Add styles/scripts to the header & footer</span>
|
||
</button>
|
||
{{svg-jar "arrow-right"}}
|
||
</li>
|
||
</ul>
|
||
|
||
{{#unless this.session.user.isAuthorOrContributor}}
|
||
<div class="form-group for-checkbox">
|
||
<label class="checkbox" for="featured" {{action "toggleFeatured" bubbles="false"}}>
|
||
<input
|
||
type="checkbox"
|
||
checked={{post.featured}}
|
||
class="gh-input post-settings-featured"
|
||
onclick={{action (mut post.featured) value="target.checked"}}
|
||
data-test-checkbox="featured"
|
||
>
|
||
<span class="input-toggle-component"></span>
|
||
<p>Feature this {{post.displayName}}</p>
|
||
</label>
|
||
</div>
|
||
{{/unless}}
|
||
|
||
{{gh-psm-template-select
|
||
post=post
|
||
onTemplateSelect=(action (mut post.customTemplate))}}
|
||
|
||
{{#unless post.isNew}}
|
||
<button type="button" class="gh-btn gh-btn-hover-red gh-btn-icon settings-menu-delete-button" {{action "deletePost"}}><span>{{svg-jar "trash"}} Delete {{capitalize post.displayName}}</span></button>
|
||
{{/unless}}
|
||
|
||
</form>
|
||
</div>{{! .settings-menu-content }}
|
||
</div>{{! .post-settings-menu }}
|
||
|
||
<div class="{{if isViewingSubview 'settings-menu-pane-in' 'settings-menu-pane-out-right'}} settings-menu settings-menu-pane">
|
||
<div class="active">
|
||
{{#if isViewingSubview}}
|
||
{{#if (eq subview "meta-data")}}
|
||
<div class="settings-menu-header subview">
|
||
<button {{action "closeSubview"}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
|
||
<h4>Meta Data</h4>
|
||
<div style="width:23px;"></div>
|
||
</div>
|
||
|
||
<div class="settings-menu-content">
|
||
<form {{action "discardEnter" on="submit"}}>
|
||
{{#gh-form-group errors=post.errors hasValidated=post.hasValidated property="metaTitle"}}
|
||
<label for="meta-title">Meta Title</label>
|
||
{{gh-text-input
|
||
class="post-setting-meta-title"
|
||
id="meta-title"
|
||
name="post-setting-meta-title"
|
||
value=(readonly metaTitleScratch)
|
||
input=(action (mut metaTitleScratch) value="target.value")
|
||
focus-out=(action "setMetaTitle" metaTitleScratch)
|
||
stopEnterKeyDownPropagation=true
|
||
data-test-field="meta-title"}}
|
||
<p>Recommended: <b>70</b> characters. You’ve used {{gh-count-down-characters metaTitleScratch 70}}</p>
|
||
{{gh-error-message errors=post.errors property="meta-title"}}
|
||
{{/gh-form-group}}
|
||
|
||
{{#gh-form-group errors=post.errors hasValidated=post.hasValidated property="metaDescription"}}
|
||
<label for="meta-description">Meta Description</label>
|
||
{{gh-textarea
|
||
class="post-setting-meta-description"
|
||
id="meta-description"
|
||
name="post-setting-meta-description"
|
||
value=(readonly metaDescriptionScratch)
|
||
input=(action (mut metaDescriptionScratch) value="target.value")
|
||
focus-out=(action "setMetaDescription" metaDescriptionScratch)
|
||
stopEnterKeyDownPropagation="true"
|
||
data-test-field="meta-description"}}
|
||
<p>Recommended: <b>156</b> characters. You’ve used {{gh-count-down-characters metaDescriptionScratch 156}}</p>
|
||
{{gh-error-message errors=post.errors property="meta-description"}}
|
||
{{/gh-form-group}}
|
||
|
||
{{#gh-form-group errors=post.errors hasValidated=post.hasValidated property="canonicalUrl"}}
|
||
<label for="canonicalUrl">Canonical URL</label>
|
||
{{gh-text-input
|
||
class="post-setting-canonicalUrl"
|
||
name="post-setting-canonicalUrl"
|
||
value=(readonly canonicalUrlScratch)
|
||
input=(action (mut canonicalUrlScratch) value="target.value")
|
||
focus-out=(action "setCanonicalUrl" canonicalUrlScratch)
|
||
stopEnterKeyDownPropagation="true"
|
||
data-test-field="canonicalUrl"}}
|
||
{{gh-error-message errors=post.errors property="canonicalUrl"}}
|
||
{{/gh-form-group}}
|
||
|
||
<div class="form-group">
|
||
<label>Search Engine Result Preview</label>
|
||
<div class="seo-preview">
|
||
<div class="seo-preview-title">{{truncate seoTitle 70}}</div>
|
||
<div class="seo-preview-link">{{truncate seoURL 70}}</div>
|
||
<div class="seo-preview-description">{{truncate seoDescription 300}}</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
{{/if}}
|
||
|
||
{{#if (eq subview "twitter-data")}}
|
||
<div class="settings-menu-header subview">
|
||
<button {{action "closeSubview"}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
|
||
<h4>Twitter Card</h4>
|
||
<div style="width:23px;"></div>
|
||
</div>
|
||
|
||
<div class="settings-menu-content">
|
||
|
||
<form {{action "discardEnter" on="submit"}}>
|
||
{{gh-image-uploader-with-preview
|
||
image=post.twitterImage
|
||
text="Add Twitter image"
|
||
allowUnsplash=true
|
||
update=(action "setTwitterImage")
|
||
remove=(action "clearTwitterImage")
|
||
}}
|
||
{{#gh-form-group errors=post.errors hasValidated=post.hasValidated property="twitterTitle"}}
|
||
<label for="twitter-title">Twitter Title</label>
|
||
{{gh-text-input
|
||
class="post-setting-twitter-title"
|
||
id="twitter-title"
|
||
name="post-setting-twitter-title"
|
||
placeholder=(truncate twitterTitle 40)
|
||
value=(readonly twitterTitleScratch)
|
||
input=(action (mut twitterTitleScratch) value="target.value")
|
||
focus-out=(action "setTwitterTitle" twitterTitleScratch)
|
||
stopEnterKeyDownPropagation=true
|
||
data-test-field="twitter-title"}}
|
||
{{gh-error-message errors=post.errors property="twitterTitle" data-test-error="twitter-title"}}
|
||
{{/gh-form-group}}
|
||
|
||
{{#gh-form-group errors=post.errors hasValidated=post.hasValidated property="twitterDescription"}}
|
||
<label for="twitter-description">Twitter Description</label>
|
||
{{gh-textarea
|
||
class="post-setting-twitter-description"
|
||
id="twitter-description"
|
||
name="post-setting-twitter-description"
|
||
placeholder=(truncate twitterDescription 155)
|
||
stopEnterKeyDownPropagation="true"
|
||
value=(readonly twitterDescriptionScratch)
|
||
input=(action (mut twitterDescriptionScratch) value="target.value")
|
||
focus-out=(action "setTwitterDescription" twitterDescriptionScratch)
|
||
data-test-field="twitter-description"}}
|
||
{{gh-error-message errors=post.errors property="twitterDescription" data-test-error="twitter-description"}}
|
||
{{/gh-form-group}}
|
||
|
||
<div class="form-group">
|
||
<label>Preview</label>
|
||
<div class="gh-twitter-preview">
|
||
{{#if twitterImage}}
|
||
<div class="gh-twitter-preview-image" style={{background-image-style twitterImage}}></div>
|
||
{{/if}}
|
||
<div class="gh-twitter-preview-content">
|
||
<div class="gh-twitter-preview-title">{{twitterTitle}}</div>
|
||
<div class="gh-twitter-preview-description">{{truncate twitterDescription 155}}</div>
|
||
<div class="gh-twitter-preview-footer">
|
||
<div class="gh-twitter-preview-footer-left">
|
||
{{config.blogDomain}}
|
||
</div>
|
||
<div class="gh-twitter-preview-footer-right">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</form>
|
||
</div>
|
||
{{/if}}
|
||
|
||
{{#if (eq subview "email-settings")}}
|
||
<div class="settings-menu-header subview">
|
||
<button {{action "closeSubview"}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
|
||
<h4>Email Settings</h4>
|
||
<div style="width:23px;"></div>
|
||
</div>
|
||
|
||
<div class="settings-menu-content">
|
||
<form {{action "discardEnter" on="submit"}}>
|
||
{{#gh-form-group errors=post.errors hasValidated=post.hasValidated property="emailSubject"}}
|
||
<label for="og-title">Subject</label>
|
||
{{gh-text-input
|
||
class="post-setting-email-subject"
|
||
id="email-subject"
|
||
name="post-setting-email-subject"
|
||
placeholder=(truncate emailSubject 40)
|
||
value=(readonly emailSubjectScratch)
|
||
input=(action (mut emailSubjectScratch) value="target.value")
|
||
focus-out=(action "setEmailSubject" emailSubjectScratch)
|
||
stopEnterKeyDownPropagation=true
|
||
data-test-field="email-subject"}}
|
||
{{gh-error-message errors=post.errors property="emailSubject" data-test-error="email-subject"}}
|
||
{{/gh-form-group}}
|
||
<div class="form-group">
|
||
<label>Test and Preview</label>
|
||
{{gh-text-input
|
||
class="post-setting-email-test"
|
||
id="email-test"
|
||
name="post-setting-email-test"
|
||
placeholder=(truncate 'noreply@example.com' 40)
|
||
value=(readonly emailTestScratch)
|
||
input=(action (mut emailTestScratch) value="target.value")
|
||
stopEnterKeyDownPropagation=true
|
||
data-test-field="email-test"}}
|
||
<button type="button" class="gh-btn gh-btn-icon w-100 mt4 mb4"
|
||
onclick={{action "sendTestEmail"}} data-test-button="send-test-email">
|
||
<span>
|
||
Send Test Email
|
||
</span>
|
||
</button>
|
||
<button type="button" class="gh-btn gh-btn-icon"
|
||
onclick={{action "toggleEmailPreview"}} data-test-button="toggle-email-preview">
|
||
<span>
|
||
Preview email in browser
|
||
</span>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
{{/if}}
|
||
|
||
{{#if (eq subview "facebook-data")}}
|
||
<div class="settings-menu-header subview">
|
||
<button {{action "closeSubview"}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
|
||
<h4>Facebook Card</h4>
|
||
<div style="width:23px;"></div>
|
||
</div>
|
||
|
||
<div class="settings-menu-content">
|
||
<form {{action "discardEnter" on="submit"}}>
|
||
{{gh-image-uploader-with-preview
|
||
image=post.ogImage
|
||
text="Add Facebook image"
|
||
allowUnsplash=true
|
||
update=(action "setOgImage")
|
||
remove=(action "clearOgImage")
|
||
}}
|
||
{{#gh-form-group errors=post.errors hasValidated=post.hasValidated property="ogTitle"}}
|
||
<label for="og-title">Facebook Title</label>
|
||
{{gh-text-input
|
||
class="post-setting-og-title"
|
||
id="og-title"
|
||
name="post-setting-og-title"
|
||
placeholder=(truncate facebookTitle 40)
|
||
value=(readonly ogTitleScratch)
|
||
input=(action (mut ogTitleScratch) value="target.value")
|
||
focus-out=(action "setOgTitle" ogTitleScratch)
|
||
stopEnterKeyDownPropagation=true
|
||
data-test-field="og-title"}}
|
||
{{gh-error-message errors=post.errors property="ogTitle" data-test-error="og-title"}}
|
||
{{/gh-form-group}}
|
||
|
||
{{#gh-form-group errors=post.errors hasValidated=post.hasValidated property="ogDescription"}}
|
||
<label for="og-description">Facebook Description</label>
|
||
{{gh-textarea
|
||
class="post-setting-og-description"
|
||
id="og-description"
|
||
name="post-setting-og-description"
|
||
placeholder=(truncate facebookDescription 160)
|
||
value=(readonly ogDescriptionScratch)
|
||
input=(action (mut ogDescriptionScratch) value="target.value")
|
||
focus-out=(action "setOgDescription" ogDescriptionScratch)
|
||
stopEnterKeyDownPropagation="true"
|
||
data-test-field="og-description"}}
|
||
{{gh-error-message errors=post.errors property="ogDescription" data-test-error="og-description"}}
|
||
{{/gh-form-group}}
|
||
|
||
<div class="form-group">
|
||
<label>Preview</label>
|
||
<div class="gh-og-preview">
|
||
{{#if facebookImage}}
|
||
<div class="gh-og-preview-image" style={{background-image-style facebookImage}}></div>
|
||
{{/if}}
|
||
<div class="gh-og-preview-content">
|
||
<div class="gh-og-preview-title">{{truncate facebookTitle 88}}</div>
|
||
<div class="gh-og-preview-description">{{truncate facebookDescription 300}}</div>
|
||
<div class="gh-og-preview-footer">
|
||
<div class="gh-og-preview-footer-left">
|
||
{{config.blogDomain}} <span class="gh-og-preview-footer-left-divider">|</span> by <span class="gh-og-preview-footer-author">{{author-names post.authors}}</span>
|
||
</div>
|
||
<div class="gh-og-preview-footer-right">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</form>
|
||
</div>
|
||
{{/if}}
|
||
|
||
{{#if (eq subview "codeinjection")}}
|
||
<div class="settings-menu-header subview">
|
||
<button {{action "closeSubview"}} class="back settings-menu-header-action" data-test-button="close-psm-subview">{{svg-jar "arrow-left"}}<span class="hidden">Back</span></button>
|
||
<h4>Code Injection</h4>
|
||
<div style="width:23px;"></div>
|
||
</div>
|
||
|
||
<div class="settings-menu-content settings-menu-content-codeinjection">
|
||
<form {{action "discardEnter" on="submit"}}>
|
||
{{#gh-form-group errors=post.errors hasValidated=post.hasValidated property="codeinjectionHead"}}
|
||
<label for="codeinjection-head">{{capitalize post.displayName}} Header <code>\{{ghost_head}}</code></label>
|
||
{{gh-cm-editor codeinjectionHeadScratch
|
||
id="post-setting-codeinjection-head"
|
||
class="post-setting-codeinjection"
|
||
name="post-setting-codeinjection-head"
|
||
focusOut=(action "setHeaderInjection" codeinjectionHeadScratch)
|
||
stopEnterKeyDownPropagation="true"
|
||
update=(action (mut codeinjectionHeadScratch))
|
||
data-test-field="codeinjection-head"}}
|
||
{{gh-error-message errors=post.errors property="codeinjectionHead" data-test-error="codeinjection-head"}}
|
||
{{/gh-form-group}}
|
||
|
||
{{#gh-form-group errors=post.errors hasValidated=post.hasValidated property="codeinjectionFoot"}}
|
||
<label for="codeinjection-foot">{{capitalize post.displayName}} Footer <code>\{{ghost_foot}}</code></label>
|
||
{{gh-cm-editor codeinjectionFootScratch
|
||
id="post-setting-codeinjection-foot"
|
||
class="post-setting-codeinjection"
|
||
name="post-setting-codeinjection-foot"
|
||
focusOut=(action "setFooterInjection" codeinjectionFootScratch)
|
||
stopEnterKeyDownPropagation="true"
|
||
update=(action (mut codeinjectionFootScratch))
|
||
data-test-field="codeinjection-foot"}}
|
||
{{gh-error-message errors=post.errors property="codeinjectionFoot" data-test-error="codeinjection-foot"}}
|
||
{{/gh-form-group}}
|
||
</form>
|
||
</div>
|
||
{{/if}}
|
||
{{/if}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{!--
|
||
_showThrobbers is on a timer so that throbbers don't get positioned until
|
||
the slide-in animation has finished and it gets toggled when the meta
|
||
pane is shown
|
||
--}}
|
||
{{#if _showThrobbers}}
|
||
{{#unless this.session.user.isAuthorOrContributor}}
|
||
{{gh-tour-item "featured-post"
|
||
target="label[for='featured'] p"
|
||
throbberAttachment="middle middle"
|
||
throbberOffset="0px -20px"
|
||
popoverTriangleClass="bottom-right"
|
||
}}
|
||
{{/unless}}
|
||
{{/if}}
|