TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-01 13:54:35 +03:00
Code Issues Projects Releases Wiki Activity

Post Settings Menu - Step 1

Browse Source 
closes #3936
- Implement new PSM
- Hook up close action
- Automatically close when view is destroyed
- Close on click and when pressing ESC
This commit is contained in:
Fabian Becker 2014-09-04 15:56:07 +02:00
parent 00ebc9f9ab
commit 0e779e7c37
11 changed files with 175 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
ghost/admin/assets/sass/components/navigation.scss
View File

@ -19,7 +19,7 @@
width: 16px;
}
&.right-outlet-expanded {
body.right-outlet-expanded & {
transform: translate3d(-350px, 0px, 0px);
}
@ -160,6 +160,23 @@
}//.user-menu
body.right-outlet-expanded & {
.global-nav {
z-index: 700;
}
.nav-cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 700;
transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
transform: translate3d(-350px, 0px, 0px);
}
}
//
// Mobile
@ -283,5 +300,4 @@
}
}//.user-menu
}

6
ghost/admin/assets/sass/components/notifications.scss
View File

@ -11,6 +11,9 @@
left: 0;
z-index: 980;
width: 300px;
body.right-outlet-expanded & {
transform: translate3d(360px, 0px, 0px);
}
}
@media (max-width: 400px) {
@ -19,6 +22,9 @@
left: 0;
right: 0;
z-index: 9999;
body.right-outlet-expanded & {
transform: translate3d(100%, 0px, 0px);
}
}
}

4
ghost/admin/assets/sass/layouts/default.scss
View File

@ -34,7 +34,7 @@
transform: translate3d(260px, 0px, 0px);
}
&.right-outlet-expanded {
body.right-outlet-expanded & {
@media (max-width: 350px) {
transform: translate3d(-100%, 0px, 0px);
}
@ -66,7 +66,7 @@
-webkit-overflow-scrolling: touch;
transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
transform: translate3d(60px, 0px, 0px);
&.right-outlet-expanded {
body.right-outlet-expanded & {
transform: translate3d(0, 0px, 0px);
}
.outlet-pane {

8
ghost/admin/assets/sass/layouts/editor.scss
View File

@ -628,11 +628,6 @@ body.zen {
}
#entry-controls {
display: inline-block;
position: relative;
padding: 0;
z-index: 9000;
&.unsaved {
.post-settings-menu {
padding-bottom: 0;
@ -646,7 +641,6 @@ body.zen {
}
}
}
}
#entry-actions {
@ -839,4 +833,4 @@ body.zen {
.modal-markdown-help-table {
margin-top: 0;
}
}

10
ghost/admin/controllers/post-settings-menu.js
View File

@ -6,23 +6,25 @@ import boundOneWay from 'ghost/utils/bound-one-way';
var PostSettingsMenuController = Ember.ObjectController.extend({
init: function () {
this._super();
},
initializeObserver: function () {
// when creating a new post we want to observe the title
// to generate the post's slug
if (this.get('isNew')) {
this.addObserver('titleScratch', this, 'titleObserver');
}
},
}.observes('model'),
selectedAuthor: null,
initializeSelectedAuthor: Ember.observer('model', function () {
initializeSelectedAuthor: function () {
var self = this;
return this.get('author').then(function (author) {
self.set('selectedAuthor', author);
return author;
});
}).on('init'),
}.observes('model'),
changeAuthor: function () {
var author = this.get('author'),

17
ghost/admin/mixins/editor-route-base.js
View File

@ -4,6 +4,7 @@ import loadingIndicator from 'ghost/mixins/loading-indicator';
import editorShortcuts from 'ghost/utils/editor-shortcuts';
var EditorRouteBase = Ember.Mixin.create(styleBody, ShortcutsRoute, loadingIndicator, {
actions: {
save: function () {
this.get('controller').send('save');
@ -19,9 +20,25 @@ var EditorRouteBase = Ember.Mixin.create(styleBody, ShortcutsRoute, loadingIndic
//The actual functionality is implemented in utils/codemirror-shortcuts
codeMirrorShortcut: function (options) {
this.get('controller.codemirror').shortcut(options.type);
},
togglePostSettings: function () {
Ember.$('body').toggleClass('right-outlet-expanded');
},
closePostSettings: function () {
Ember.$('body').removeClass('right-outlet-expanded');
}
},
renderTemplate: function (controller, model) {
this._super();
this.render('post-settings-menu', {
into: 'application',
outlet: 'settings-menu',
model: model
});
},
shortcuts: editorShortcuts,
attachModelHooks: function (controller, model) {

5
ghost/admin/routes/application.js
View File

@ -29,6 +29,9 @@ var ApplicationRoute = Ember.Route.extend(SimpleAuth.ApplicationRouteMixin, Shor
this.get('popover').closePopovers();
this.get('notifications').closeAll();
// Close PSM if open
Ember.$('body').removeClass('right-outlet-expanded');
this.send('closeModal');
},
@ -83,7 +86,7 @@ var ApplicationRoute = Ember.Route.extend(SimpleAuth.ApplicationRouteMixin, Shor
},
closeModal: function () {
return this.disconnectOutlet({
this.disconnectOutlet({
outlet: 'modal',
parentView: 'application'
});

12
ghost/admin/templates/-publish-bar.hbs
View File

@ -2,17 +2,7 @@
{{render 'post-tags-input'}}
<div class="right">
<section id="entry-controls" {{bind-attr class="isNew:unsaved"}}>
{{#gh-popover-button popoverName="post-settings-menu" classNames="post-settings" title="Post Settings"}}
<span class="hidden">Post Settings</span>
{{/gh-popover-button}}
{{#gh-popover name="post-settings-menu" classNames="dropdown post-settings-menu"}}
<div class="dropdown-menu dropdown-triangle-bottom-right">
{{render "post-settings-menu" model}}
</div>
{{/gh-popover}}
</section>
<button type="button" class='post-settings' {{action "togglePostSettings"}}></button>
{{view "editor-save-button" id="entry-actions"}}
</div>

2
ghost/admin/templates/application.hbs
View File

@ -13,4 +13,6 @@
{{outlet modal}}
{{outlet settings-menu}}
</div>

160
ghost/admin/templates/post-settings-menu.hbs
View File

@ -1,52 +1,118 @@
<form>
<table class="plain">
<tbody>
<tr class="post-setting">
<td class="post-setting-label">
<label for="url">URL</label>
</td>
<td class="post-setting-field">
{{gh-blur-input class="post-setting-slug" id="url" value=slugValue name="post-setting-slug" action="updateSlug" placeholder=slugPlaceholder selectOnClick="true" stopEnterKeyDownPropagation="true"}}
</td>
</tr>
<tr class="post-setting">
<td class="post-setting-label">
<label for="pub-date">Pub Date</label>
</td>
<td class="post-setting-field">
{{gh-blur-input class="post-setting-date" value=publishedAtValue name="post-setting-date" action="setPublishedAt" placeholder=publishedAtPlaceholder stopEnterKeyDownPropagation="true"}}
</td>
</tr>
{{#unless session.user.isAuthor}}
<tr class="post-setting">
<td class="post-setting-label">
<label for="post-setting-author">Author</label>
</td>
<td class="post-setting-field">
<span class="gh-select">
{{view Ember.Select
name="post-setting-author"
content=authors
optionValuePath="content.id"
optionLabelPath="content.name"
selection=selectedAuthor}}
<div class="nav-cover" {{action "closePostSettings"}}></div>
<div id="entry-controls" {{bind-attr class=":right-outlet isNew:unsaved"}}>
<div class="post-settings-menu outlet-pane outlet-pane-in">
<div class="post-settings-header">
<h4>Post Settings</h4>
<button class="close icon-x post-settings-header-action" {{action "closePostSettings"}}><span class="hidden">Close</span></button>
</div>
<div class="post-settings-content">
<!--
<section class="image-uploader">
<span class="media">
<span class="hidden">Image Upload</span>
</span>
</td>
{{/unless}}
</tr>
<tr class="post-setting">
<td class="post-setting-label">
<label for="static-page" {{action "togglePage" bubbles="false"}}>Static Page</label>
</td>
<td class="post-setting-item">
<img class="js-upload-target" style="display: none;" src="">
<div class="description">Add image of <strong></strong></div>
</section>
-->
<form>
<div class="form-group">
<label for="blog-title">Post URL</label>
<span class="input-icon icon-link">
{{gh-blur-input class="post-setting-slug" id="url" value=slugValue name="post-setting-slug" action="updateSlug" placeholder=slugPlaceholder selectOnClick="true" stopEnterKeyDownPropagation="true"}}
</span>
</div>
<div class="form-group">
<label for="blog-title">Publish Date</label>
<span class="input-icon icon-calendar">
{{gh-blur-input class="post-setting-date" value=publishedAtValue name="post-setting-date" action="setPublishedAt" placeholder=publishedAtPlaceholder stopEnterKeyDownPropagation="true"}}
</span>
</div>
<div class="form-group for-select">
<label for="activeTheme">Author</label>
<span class="input-icon icon-user">
<span class="gh-select">
{{view Ember.Select
name="post-setting-author"
content=authors
optionValuePath="content.id"
optionLabelPath="content.name"
selection=selectedAuthor}}
</span>
</span>
</div>
<div class="form-group for-checkbox">
<label class="checkbox" for="static-page" {{action "togglePage" bubbles="false"}}>
{{input type="checkbox" name="static-page" id="static-page" class="post-setting-static-page" checked=page}}
<span class="input-toggle-component"></span>
<p>Static Page</p>
</label>
</td>
</tr>
</tbody>
</table>
</form>
<button type="button" class="delete" {{action "openModal" "delete-post" this}}>Delete This Post</button>
</div>
<!--
<ul class="nav-list nav-list-block">
<li class="nav-list-item">
<a href="#">
<b>Revision History</b>
<span>12 versions of this post by 3 people.</span>
</a>
</li>
<li class="nav-list-item">
<a href="#">
<b>Advanced Settings</b>
<span>Convert to a page, mark as featured.</span>
</a>
</li>
<li class="nav-list-item">
<a href="#">
<b>Meta Data</b>
<span>Extra content for SEO and social media.</span>
</a>
</li>
<li class="nav-list-item">
<a href="#">
<b>Custom App</b>
<span>Registered an advanced setting panel.</span>
</a>
</li>
</ul>
-->
<button type="button" class="btn btn-red icon-trash delete" {{action "openModal" "delete-post" this}}>Delete This Post</button>
</form>
</div><!-- .post-settings-content -->
</div><!-- .post-settings-menu -->
<!--
<div class="post-settings-menu outlet-pane outlet-pane-out-right">
<div class="post-settings-header subview">
<button class="back icon-chevron-left post-settings-header-action"><span class="hidden">Back</span></button>
<h4>Meta Data</h4>
</div>
<div class="post-settings-content">
<div class="form-group">
<label for="blog-title">Meta Title</label>
<input type="text" value="My Post is Super SEO Friendly" />
<p>Recommended: <b>70</b> characters. You’ve used <b class="green">43</b></p>
</div>
<div class="form-group">
<label for="blog-title">Meta Description</label>
<textarea>In this fascinating posts I explore the value of SEO meta descriptions and their impact on blogging. Don’t miss my stunning insights!</textarea>
<p>Recommended: <b>156</b> characters. You’ve used <b class="green">133</b></p>
</div>
<div class="form-group">
<label>Search Engine Result Preview</label>
<div class="seo-preview">
<div class="seo-preview-title">My Post is Super SEO Friendly</div>
<div class="seo-preview-link">myblog.com/this-is-my-post/</div>
<div class="seo-preview-description">In this fascinating posts I explore the value of SEO meta descriptions and their impact on blogging. Don’t miss my stunning insights!</div>
</div>
</div>
</div>
</div>
-->
</div>

6
ghost/admin/views/post-settings-menu-view.js → ghost/admin/views/post-settings-menu.js
View File

@ -7,7 +7,11 @@ var PostSettingsMenuView = Ember.View.extend({
publishedAtBinding: Ember.Binding.oneWay('controller.publishedAt'),
datePlaceholder: Ember.computed('controller.publishedAt', function () {
return formatDate(moment());
})
}),
animateOut: function () {
$('body').removeClass('right-outlet-expanded');
}.on('willDestroyElement')
});
export default PostSettingsMenuView;