Ghost/ghost/admin/app/templates/post-settings-menu.hbs

152 lines
7.5 KiB
Handlebars
Raw Normal View History

{{#gh-tabs-manager selected="showSubview" id="entry-controls" 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>Post Settings</h4>
<button class="close icon-x settings-menu-header-action" {{action "closeMenus"}}><span class="hidden">Close</span></button>
</div>
<div class="settings-menu-content">
{{gh-image-uploader-with-preview
image=model.image
text="Add post image"
update=(action "setCoverImage")
remove=(action "clearCoverImage")
}}
<form>
<div class="form-group">
<label for="url">Post URL</label>
{{#if model.isPublished}}
<a class="post-view-link" target="_blank" href="{{model.absoluteUrl}}">
View post <i class="icon-external"></i>
</a>
{{else}}
<a class="post-view-link" target="_blank" href="{{model.previewUrl}}">
Preview <i class="icon-external"></i>
</a>
{{/if}}
<span class="input-icon icon-link">
{{gh-input slugValue class="post-setting-slug" id="url" name="post-setting-slug" focusOut=(action "updateSlug" slugValue) stopEnterKeyDownPropagation="true" update=(action (mut slugValue))}}
</span>
{{gh-url-preview slug=slugValue tagName="p" classNames="description"}}
</div>
{{#gh-form-group errors=model.errors property="post-setting-date"}}
Scheduler UI refs TryGhost/Ghost#6413 and TryGhost/Ghost#6870 needs TryGhost/Ghost#6861 - **Post Settings Menu (PSM)**:'Publish Date' input accepts a date from now, min. 2 minutes to allow scheduler processing on the server. Also, there will always be some delay between typing the date and clicking on the 'Schedule Post' button. If the user types a future date for an already published post, the date will be reseted and he sees the message, that the post needs to be unpublished first. Once, the date is accepted, the label will change to 'Scheduled Date'. - adds a CP 'timeScheduled' to post model, which will return `true` if the publish time is currently in the future. - **Changes to the button flow in editor**: - if the the CP `timeScheduled` returns true, a different drop-down-menu will be shown: 'Schedule Post' replaces 'Publish Now' and 'Unschedule' replaces 'Unpublish'. - Covering the _edge cases_, especially when a scheduled post is about to be published, while the user is in the editor. - First, a new CP `scheduleCountdown` will return the remaining time, when the estimated publish time is 15 minutes from now. A notification with this live-ticker is shown next to the save button. Once, we reach a 2 minutes limit, another CP `statusFreeze` will return true and causes the save button to only show `Unschedule` in a red state, until we reach the publish time - Once the publish time is reached, a CP `scheduledWillPublish` causes the buttons and the existing code to pretend we're already dealing with a publish post. At the moment, there's no way to make a background-fetch of the now serverside-scheduled post model from the server, so Ember doesn't know about the changed state at that time. - Changes in the editor, which are done during this 'status freeze'-process will be saved back correctly, once the user hits 'Update Post' after the buttons changed back. A click on 'Unpublish' will change the status back to a draft. - The user will get a regular 'toaster' notification that the post has been published. - adds CP `isScheduled` for scheduled posts - adds CP `offset` to component `gh-posts-list-item` and helper `gh-format-time-scheduled` to show schedule date in content overview. - sets timeout in `gh-spin-button` to 10ms for `Ember.testing` - changes error message in `gh-editor-base-controller` to be in one line, seperated with a `:` TODOs: - [x] new sort order for posts (1. scheduled, 2. draft, 3. published) (refs TryGhost/Ghost#6932) - [ ] Move posts sorting from posts controller to model and refactor to use `Ember.comparable` mixin - [x] Flows for draft -> scheduled -> published like described in TryGhost/Ghost#6870 incl. edge cases and button behaviour - [x] Tests - [x] new PSM behaviour for time/date in future - [x] display publishedAt date with timezone offset on posts overview
2016-02-02 10:04:40 +03:00
{{#if model.timeScheduled}}
<label for="post-setting-date">Scheduled Date</label>
{{else}}
<label for="post-setting-date">Publish Date</label>
{{/if}}
{{gh-datetime-input
value=model.publishedAtUTC
update=(action "setPublishedAtUTC")
inputClass="post-setting-date"
inputId="post-setting-date"
inputName="post-setting-date"
}}
{{gh-error-message errors=model.errors property="post-setting-date"}}
{{/gh-form-group}}
<div class="form-group">
<label for="tag-input">Tags</label>
{{gh-selectize
id="tag-input"
multiple=true
selection=model.tags
content=availableTags
optionValuePath="content.uuid"
optionLabelPath="content.name"
openOnFocus=false
create-item="addTag"
remove-item="removeTag"
plugins="remove_button, drag_drop"}}
</div>
{{#unless session.user.isAuthor}}
<div class="form-group for-select">
<label for="author-list">Author</label>
<span class="input-icon icon-user">
<span class="gh-select" tabindex="0">
{{gh-select-native
name="post-setting-author"
id="author-list"
content=authors
optionValuePath="id"
optionLabelPath="name"
selection=selectedAuthor
action="changeAuthor"
}}
</span>
</span>
</div>
{{/unless}}
<ul class="nav-list nav-list-block">
{{#gh-tab tagName="li" classNames="nav-list-item"}}
<button type="button">
<b>Meta Data</b>
<span>Extra content for SEO and social media.</span>
</button>
2015-05-13 01:49:11 +03:00
<i class="icon-arrow-right"></i>
{{/gh-tab}}
</ul>
<div class="form-group for-checkbox">
<label class="checkbox" for="static-page" {{action "togglePage" bubbles="false"}}>
{{one-way-checkbox model.page type="checkbox" name="static-page" id="static-page" class="gh-input post-setting-static-page" update=(action (mut model.page))}}
<span class="input-toggle-component"></span>
<p>Turn this post into a static page</p>
</label>
<label class="checkbox" for="featured" {{action "toggleFeatured" bubbles="false"}}>
{{one-way-checkbox model.featured type="checkbox" name="featured" id="featured" class="gh-input post-setting-featured" update=(action (mut model.featured))}}
<span class="input-toggle-component"></span>
<p>Feature this post</p>
</label>
</div>
</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">
{{#gh-tab-pane}}
{{#if isViewingSubview}}
<div class="settings-menu-header subview">
2015-05-18 19:30:59 +03:00
<button {{action "closeSubview"}} class="back icon-arrow-left settings-menu-header-action"><span class="hidden">Back</span></button>
<h4>Meta Data</h4>
2015-05-18 19:30:59 +03:00
<div style="width:23px;">{{!flexbox space-between}}</div>
</div>
<div class="settings-menu-content">
<form {{action "discardEnter" on="submit"}}>
{{#gh-form-group errors=model.errors hasValidated=model.hasValidated property="metaTitle"}}
<label for="meta-title">Meta Title</label>
{{gh-input metaTitleScratch class="post-setting-meta-title" id="meta-title" name="post-setting-meta-title" focusOut=(action "setMetaTitle" metaTitleScratch) stopEnterKeyDownPropagation="true" update=(action (mut metaTitleScratch))}}
<p>Recommended: <b>70</b> characters. Youve used {{gh-count-down-characters metaTitleScratch 70}}</p>
{{gh-error-message errors=model.errors property="metaTitle"}}
{{/gh-form-group}}
{{#gh-form-group errors=model.errors hasValidated=model.hasValidated property="metaDescription"}}
<label for="meta-description">Meta Description</label>
{{gh-textarea metaDescriptionScratch class="post-setting-meta-description" id="meta-description" name="post-setting-meta-description" focusOut=(action "setMetaDescription" metaDescriptionScratch) stopEnterKeyDownPropagation="true" update=(action (mut metaDescriptionScratch))}}
<p>Recommended: <b>156</b> characters. Youve used {{gh-count-down-characters metaDescriptionScratch 156}}</p>
{{gh-error-message errors=model.errors property="metaDescription"}}
{{/gh-form-group}}
<div class="form-group">
<label>Search Engine Result Preview</label>
<div class="seo-preview">
<div class="seo-preview-title">{{seoTitle}}</div>
<div class="seo-preview-link">{{seoURL}}</div>
<div class="seo-preview-description">{{seoDescription}}</div>
</div>
</div>
</form>
</div>{{! .settings-menu-content }}
{{/if}}
{{/gh-tab-pane}}
</div>
</div>
{{/gh-tabs-manager}}