Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-17 23:44:39 -05:00
Code Issues Activity

Added post-settings menu with edit permalink field

Browse source 
closes #370
- Added new Backbone view for post settings menu
- Moved sass styles to global.scss for post settings menu items
- Added field to change post slug (permalink) using existing slug
  validation
This commit is contained in:
ericterpstra 2013-09-13 12:29:08 -05:00
parent 93bedd764c
commit 89b1ecd6f2
7 changed files with 200 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
ghost/admin/assets/sass/layouts/editor.scss
View file

@ -521,7 +521,15 @@ body.zen {
}
#entry-settings {
#entry-controls {
@include box-sizing(border-box);
display: inline-block;
position: relative;
padding: 0;
z-index: 1;
}
.entry-settings {
@include icon($i-settings, 1.1em){vertical-align: 0;};
@include box-sizing(border-box);
display: inline-block;
@ -535,9 +543,9 @@ body.zen {
}
}
#entry-settings-menu {
.entry-settings-menu {
position: absolute;
bottom: 50px;
bottom: 40px;
right: -5px;
}

7
ghost/admin/assets/sass/layouts/manage.scss
View file

@ -232,7 +232,7 @@
ul {
position: absolute;
top:15px;
right:-15px;
right:-10px;
}
}
@ -241,11 +241,6 @@
margin-right:7px;
padding: 5px;
}
.post-settings {
@include icon($i-settings, 14px);
padding: 5px;
margin-right: -5px;
}
img {
width:100%;

53
ghost/admin/assets/sass/modules/global.scss
View file

@ -831,6 +831,59 @@ nav {
@extend %menu-right;
}
/* ==========================================================================
Post Settings
========================================================================== */
.post-setting {
min-width: 260px;
border-bottom: 1px solid #35393b;
&:first-child {
margin-top: -6px;
}
input {
width: 100%;
background: none;
border: none;
color: #e2edf2;
line-height: 1.68em;
}
}
.post-setting-label {
float: left;
width: 26%;
text-align: right;
padding: 10px 2%;
border-right: 1px solid #35393b;
}
.post-setting-field {
float: left;
width: 64%;
padding: 8px 2%;
input:focus {
outline: none;
}
}
.post-settings {
@include icon($i-settings, 14px);
padding: 5px;
/* margin-right: -5px;*/
}
.post-setting-calendar {
@include icon-after($i-calendar, 18px);
width: 18px;
height: 18px;
position: absolute;
margin-top: -25px; /* This doesn't work in FF */
right: 10px;
}
/* ==========================================================================
Notifications

16
ghost/admin/tpl/preview.hbs
View file

@ -10,6 +10,22 @@
<a class="post-edit" href="#"><span class="hidden">Edit Post</span></a>
<a class="post-settings" href="#" data-toggle=".menu-drop-right"><span class="hidden">Post Settings</span></a>
<ul class="menu-drop-right overlay">
<li class="post-setting">
<div class="post-setting-label">
<label for="url">URL</label>
</div>
<div class="post-setting-field">
<input class="post-setting-slug" type="text" value="{{{slug}}}">
</div>
</li>
<!--<li class="post-setting">
<div class="post-setting-label">
<label for="url">Pub Date</label>
</div>
<div class="post-setting-field">
<input class="post-setting-date" type="text" value=""><span class="post-setting-calendar"></span>
</div>
</li>-->
<li><a href="#" class="delete">Delete</a></li>
</ul>
</section>

53
ghost/admin/views/blog.js
View file

@ -114,7 +114,6 @@
activeId: null,
events: {
'click .post-controls .delete' : 'deletePost',
'click .post-controls .post-edit' : 'editPost'
},
@ -129,53 +128,6 @@
}
},
deletePost: function (e) {
e.preventDefault();
var self = this;
this.addSubview(new Ghost.Views.Modal({
model: {
options: {
close: false,
confirm: {
accept: {
func: function () {
self.model.destroy({
wait: true
}).then(function () {
Ghost.notifications.addItem({
type: 'success',
message: 'Your post has been deleted.',
status: 'passive'
});
}, function () {
Ghost.notifications.addItem({
type: 'error',
message: 'Your post could not be deleted. Please try again.',
status: 'passive'
});
});
},
text: "Yes"
},
reject: {
func: function () {
return true;
},
text: "No"
}
},
type: "action",
style: ["wide", "centered"],
animation: 'fade'
},
content: {
template: 'blank',
title: 'Are you sure you want to delete this post?'
}
}
}));
},
editPost: function (e) {
e.preventDefault();
// for now this will disable "open in new tab", but when we have a Router implemented
@ -194,6 +146,11 @@
this.$('.wrapper').on('click', 'a', function (e) {
$(e.currentTarget).attr('target', '_blank');
});
if (this.model !== 'undefined') {
this.addSubview(new Ghost.View.PostSettings({el: $('.post-controls'), model: this.model})).render();
}
Ghost.temporary.initToggles(this.$el);
return this;
}

1
ghost/admin/views/editor.js
View file

@ -41,6 +41,7 @@
initialize: function () {
this.addSubview(new Ghost.View.EditorTagWidget({el: this.$('#entry-tags'), model: this.model})).render();
this.addSubview(new ActionsWidget({el: this.$('#entry-actions'), model: this.model})).render();
this.addSubview(new Ghost.View.PostSettings({el: $('#entry-controls'), model: this.model})).render();
},
render: function () { return this; }

113
ghost/admin/views/post-settings.js Normal file
View file

@ -0,0 +1,113 @@
// The Post Settings Menu available in the content preview screen, as well as the post editor.
/*global window, document, $, _, Backbone, Ghost */
(function () {
"use strict";
Ghost.View.PostSettings = Ghost.View.extend({
events: {
'blur .post-setting-slug' : 'editSlug',
'click .post-setting-slug' : 'selectSlug',
'click .delete' : 'deletePost'
},
render: function () {
var slug = this.model ? this.model.get('slug') : '';
//var pubDate = this.model.get('published_at');
//pubDate = moment(pubDate).format('DD MMM YY');
$('.post-setting-slug').val(slug);
//$('.post-setting-date').val(pubDate);
},
selectSlug: function (e) {
e.currentTarget.select();
},
editSlug: function (e) {
e.preventDefault();
var self = this,
slug = self.model.get('slug'),
slugEl = e.currentTarget,
newSlug = slugEl.value;
// Ignore empty or unchanged slugs
if (newSlug.length === 0 || slug === newSlug) {
slugEl.value = slug === undefined ? '' : slug;
return;
}
this.model.save({
slug: newSlug
}, {
success : function (model, response, options) {
// Repopulate slug in case it changed on the server (e.g. 'new-slug-2')
slugEl.value = model.get('slug');
},
error : function (model, xhr) {
Ghost.notifications.addItem({
type: 'error',
message: Ghost.Views.Utils.getRequestErrorMessage(xhr),
status: 'passive'
});
}
});
},
deletePost: function (e) {
e.preventDefault();
var self = this;
this.addSubview(new Ghost.Views.Modal({
model: {
options: {
close: false,
confirm: {
accept: {
func: function () {
self.model.destroy({
wait: true
}).then(function () {
// Redirect to content screen if deleting post from editor.
if (window.location.pathname.indexOf('editor') > -1) {
window.location = '/ghost/content/';
}
Ghost.notifications.addItem({
type: 'success',
message: 'Your post has been deleted.',
status: 'passive'
});
}, function () {
Ghost.notifications.addItem({
type: 'error',
message: 'Your post could not be deleted. Please try again.',
status: 'passive'
});
});
},
text: "Yes"
},
reject: {
func: function () {
return true;
},
text: "No"
}
},
type: "action",
style: ["wide", "centered"],
animation: 'fade'
},
content: {
template: 'blank',
title: 'Are you sure you want to delete this post?'
}
}
}));
}
});
}());