mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-24 14:43:08 +03:00
Merge pull request #330 from ErisDS/settings-backbone-refactor
Backbone template cleanup
This commit is contained in:
Hannah Wolfe
commit
b4e0a7144b
11
core/client/tpl/settings/appearance.hbs
Normal file
11
core/client/tpl/settings/appearance.hbs
Normal file
@ -0,0 +1,11 @@
|
||||
<section id="appearance" class="settings-content">
|
||||
<header>
|
||||
<h2 class="title">Appearance</h2>
|
||||
</header>
|
||||
<section class="content">
|
||||
<h6 class="sub">Raw json be here</h6>
|
||||
<p>Active theme: {{json settings.activeTheme}}</p>
|
||||
<p>Available themes: {{json availableThemes}}</p>
|
||||
<p>Available plugins: {{json availablePlugins}}</p>
|
||||
</section>
|
||||
</section>
|
||||
69
core/client/tpl/settings/content.hbs
Normal file
69
core/client/tpl/settings/content.hbs
Normal file
@ -0,0 +1,69 @@
|
||||
<header>
|
||||
<h2 class="title">Content</h2>
|
||||
<section class="page-actions">
|
||||
<button class="button-save">Save</button>
|
||||
</section>
|
||||
</header>
|
||||
<section class="content">
|
||||
<form id="settings-content">
|
||||
<fieldset>
|
||||
<div class="form-group">
|
||||
<label for="typography"><strong>Typography</strong></label>
|
||||
<select id="typography" name="content[typography]">
|
||||
<option value="post-name">Lato (Light)</option>
|
||||
</select>
|
||||
<p>Sexy sans-serif font that will make your toes tickle.</p>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" value="1" name="content[type-load-google]"/> Load fonts directly from Google
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label><strong>Post Options</strong></label>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" name="content[display-post-meta]" value="1" /> Display Post Meta
|
||||
</label>
|
||||
<p>Post Author / Date / Views</p>
|
||||
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" name="content[show-author]" value="1" /> Show Author Box After Post
|
||||
</label>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" name="content[comments]" value="1" /> Enable Comments
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<hr />
|
||||
|
||||
<fieldset>
|
||||
<div class="form-group">
|
||||
<label for="seo-title"><strong>SEO Title Pattern</strong></label>
|
||||
<input id="seo-title" name="content[seo-title]" type="text" value="[Post Name] - [Site Title]" />
|
||||
<p>The pattern used to display your title tags</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="seo-description"><strong>SEO Description Pattern</strong></label>
|
||||
<input id="seo-description" name="content[seo-description]" type="text" value="Auto" />
|
||||
<p>The pattern used to display your meta descriptions</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label><strong>Google+</strong></label>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" name="content[google-profile]" value="1" /> Connect to author profile on Google
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="blog-description"><strong>Home Page Description</strong></label>
|
||||
<textarea id="blog-description">{{description}}</textarea>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
|
||||
</form>
|
||||
</section>
|
||||
60
core/client/tpl/settings/general.hbs
Normal file
60
core/client/tpl/settings/general.hbs
Normal file
@ -0,0 +1,60 @@
|
||||
<header>
|
||||
<h2 class="title">General</h2>
|
||||
<section class="page-actions">
|
||||
<button class="button-save">Save</button>
|
||||
</section>
|
||||
</header>
|
||||
<section class="content">
|
||||
<form id="settings-general">
|
||||
<fieldset>
|
||||
<div class="form-group">
|
||||
<label><strong>Blog Title</strong></label>
|
||||
<input id="blog-title" name="general[title]" type="text" value="{{title}}" />
|
||||
<p>How your blog name appears on the site</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label><strong>Blog Logo</strong></label>
|
||||
<img src="/public/img/logo.png" alt="logo" height="38" width="381"/>
|
||||
<p>Display a logo on your site in place of blog title</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label><strong>Blog Icon</strong></label>
|
||||
<img src="/public/img/test-icon.png" alt="logo" height="38" width="38"/>
|
||||
<p>The icon for your blog, used in your browser tab and elsewhere</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email-address"><strong>Email Address</strong></label>
|
||||
<input id="email-address" name="general[email-address]" type="text" value="{{email}}" />
|
||||
<p>Address to use for <a href="#">admin notifications</a></p>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" value="1" name="general[public-email]" /> Show my email address on my public profile
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="url-structure"><strong>URL Structure</strong></label>
|
||||
<select id="url-structure" name="general[urlstructure]">
|
||||
<option value="post-name">Simple Post Name</option>
|
||||
<option value="date-based">Date Based</option>
|
||||
<option value="number based">Number Based</option>
|
||||
<option value="custom">Custom...</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<hr />
|
||||
|
||||
<fieldset>
|
||||
<div class="form-group">
|
||||
<label for="timezone"><strong>Time Zone</strong></label>
|
||||
<select id="timezone" name="general[timezone]">
|
||||
<option value="1">Vienna (UTC+1)</option>
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</section>
|
||||
241
core/client/tpl/settings/plugins.hbs
Normal file
241
core/client/tpl/settings/plugins.hbs
Normal file
@ -0,0 +1,241 @@
|
||||
<!-- id should be plugins-->
|
||||
<header>
|
||||
<h2 class="title">Plugins</h2>
|
||||
<section class="page-actions">
|
||||
<button class="button-add">Add Plugin</button>
|
||||
</section>
|
||||
</header>
|
||||
<section class="content">
|
||||
<section class="plugin-section">
|
||||
<header class="plugin-section-header">
|
||||
<h3>Updates</h3>
|
||||
</header>
|
||||
<table class="plugin-section-table">
|
||||
<tbody>
|
||||
<tr class="plugin-section-item">
|
||||
<td>
|
||||
<figure class="plugin-icon">
|
||||
|
||||
</figure>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-title plugin-info">Ghost SEO</span>
|
||||
<span class="plugin-download-progress" data-complete="45">
|
||||
<span style="width: 45%"></span>
|
||||
</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info">Yoast</span>
|
||||
<span class="plugin-sub-info">yoast.com</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info">v 0.1.13</span>
|
||||
<span class="plugin-sub-info">3 weeks ago</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info rating">
|
||||
<span class="active"></span>
|
||||
<span class="active"></span>
|
||||
<span class="active"></span>
|
||||
<span class="active"></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<span class="plugin-sub-info">48,200 users</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<button class="button-delete button-cancel">Cancel</button>
|
||||
</section>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="plugin-section-item">
|
||||
<td>
|
||||
<figure class="plugin-icon">
|
||||
|
||||
</figure>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-title plugin-info">Ghost SEO</span>
|
||||
<span class="plugin-sub-info">The #1 content marketing plugin for Ghost.</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info">Yoast</span>
|
||||
<span class="plugin-sub-info">yoast.com</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info">v 0.1.13</span>
|
||||
<span class="plugin-sub-info">3 weeks ago</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info rating">
|
||||
<span class="active"></span>
|
||||
<span class="active"></span>
|
||||
<span class="active"></span>
|
||||
<span class="active"></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<span class="plugin-sub-info">48,200 users</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<button class="button-save">Update</button>
|
||||
</section>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<footer class="plugin-section-footer">
|
||||
<button class="button-alt button-update-all">Update All</button>
|
||||
</footer>
|
||||
</section>
|
||||
<section class="plugin-section">
|
||||
<header class="plugin-section-header">
|
||||
<h3>Active Plugins</h3>
|
||||
</header>
|
||||
<table class="plugin-section-table">
|
||||
<tbody>
|
||||
<tr class="plugin-section-item">
|
||||
<td>
|
||||
<figure class="plugin-icon">
|
||||
|
||||
</figure>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-title plugin-info">Ghost SEO</span>
|
||||
<span class="plugin-sub-info">The #1 content marketing plugin for Ghost.</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info">Yoast</span>
|
||||
<span class="plugin-sub-info">yoast.com</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info">v 0.1.13</span>
|
||||
<span class="plugin-sub-info">3 weeks ago</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info rating">
|
||||
<span class="active"></span>
|
||||
<span class="active"></span>
|
||||
<span class="active"></span>
|
||||
<span class="active"></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<span class="plugin-sub-info">48,200 users</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<a href="#" class="plugin-settings-icon"></a>
|
||||
</section>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="plugin-section-item">
|
||||
<td>
|
||||
<figure class="plugin-icon">
|
||||
|
||||
</figure>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-title plugin-info">Ghost SEO</span>
|
||||
<span class="plugin-sub-info">The #1 content marketing plugin for Ghost.</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info">Yoast</span>
|
||||
<span class="plugin-sub-info">yoast.com</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info">v 0.1.13</span>
|
||||
<span class="plugin-sub-info">3 weeks ago</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info rating">
|
||||
<span class="active"></span>
|
||||
<span class="active"></span>
|
||||
<span class="active"></span>
|
||||
<span class="active"></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<span class="plugin-sub-info">48,200 users</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<a href="#" class="plugin-settings-icon"></a>
|
||||
</section>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="plugin-section">
|
||||
<header class="plugin-section-header">
|
||||
<h3>Inactive Plugins</h3>
|
||||
</header>
|
||||
<table class="plugin-section-table">
|
||||
<tbody>
|
||||
<tr class="plugin-section-item inactive">
|
||||
<td>
|
||||
<figure class="plugin-icon">
|
||||
|
||||
</figure>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-title plugin-info">Ghost SEO</span>
|
||||
<span class="plugin-sub-info">The #1 content marketing plugin for Ghost.</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info">Yoast</span>
|
||||
<span class="plugin-sub-info">yoast.com</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info">v 0.1.13</span>
|
||||
<span class="plugin-sub-info">3 weeks ago</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info rating">
|
||||
<span class="active"></span>
|
||||
<span class="active"></span>
|
||||
<span class="active"></span>
|
||||
<span class="active"></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<span class="plugin-sub-info">48,200 users</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<button class="button-add">Activate</button>
|
||||
</section>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</section>
|
||||
9
core/client/tpl/settings/sidebar.hbs
Normal file
9
core/client/tpl/settings/sidebar.hbs
Normal file
@ -0,0 +1,9 @@
|
||||
<header>
|
||||
<h1 class="title">Settings</h1>
|
||||
</header>
|
||||
<nav class="settings-menu">
|
||||
<ul>
|
||||
<li class="general"><a href="#general">General</a></li>
|
||||
<li class="publishing"><a href="#content">Content</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
57
core/client/tpl/settings/users.hbs
Normal file
57
core/client/tpl/settings/users.hbs
Normal file
@ -0,0 +1,57 @@
|
||||
<section id="users" class="settings-content">
|
||||
<header>
|
||||
<h2 class="title">Users</h2>
|
||||
<section class="page-actions">
|
||||
<button class="button-add">New User</button>
|
||||
</section>
|
||||
</header>
|
||||
<section class="content">
|
||||
<section id="users-pending" class="user-group">
|
||||
<header class="user-group-header"><h3>Invited Users</h3></header>
|
||||
<ul class="users">
|
||||
<li class="user">
|
||||
<figure class="user-image invite"></figure>
|
||||
<section class="user-meta">
|
||||
<h4 class="user-name">Some Name</h4>
|
||||
<span class="user-last-seen">Invitation Sent: 7 hours ago</span>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section id="users-active" class="user-group">
|
||||
<header class="user-group-header">
|
||||
<h3>Active Users</h3>
|
||||
|
||||
<form class="user-search">
|
||||
<label>
|
||||
<i class="search-icon"></i>
|
||||
<input class="user-search-input" type="text"/>
|
||||
</label>
|
||||
</form>
|
||||
</header>
|
||||
|
||||
<ul class="users">
|
||||
<li class="user">
|
||||
<figure class="user-image">
|
||||
<img src="/public/img/user.jpg" alt="user"/>
|
||||
</figure>
|
||||
<section class="user-meta">
|
||||
<h4 class="user-name">Some Name</h4>
|
||||
<span class="user-last-seen">Last Seen: 7 hours ago</span>
|
||||
</section>
|
||||
<span class="user-role admin">Admin</span>
|
||||
</li>
|
||||
<li class="user">
|
||||
<figure class="user-image">
|
||||
<img src="/public/img/user.jpg" alt="user"/>
|
||||
</figure>
|
||||
<section class="user-meta">
|
||||
<h4 class="user-name">Some Name</h4>
|
||||
<span class="user-last-seen">Last Seen: 2 days ago</span>
|
||||
</section>
|
||||
<span class="user-role editor">Editor</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
@ -2,7 +2,41 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
Ghost.View = Backbone.View.extend({
|
||||
Ghost.TemplateView = Backbone.View.extend({
|
||||
templateName: "widget",
|
||||
|
||||
template: function (data) {
|
||||
return JST[this.templateName](data);
|
||||
},
|
||||
|
||||
templateData: function () {
|
||||
if (this.model) {
|
||||
return this.model.toJSON();
|
||||
}
|
||||
|
||||
if (this.collection) {
|
||||
return this.collection.toJSON();
|
||||
}
|
||||
|
||||
return {};
|
||||
},
|
||||
|
||||
render: function () {
|
||||
if (_.isFunction(this.beforeRender)) {
|
||||
this.beforeRender();
|
||||
}
|
||||
|
||||
this.$el.html(this.template(this.templateData()));
|
||||
|
||||
if (_.isFunction(this.afterRender)) {
|
||||
this.afterRender();
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
Ghost.View = Ghost.TemplateView.extend({
|
||||
|
||||
// Adds a subview to the current view, which will
|
||||
// ensure its removal when this view is removed,
|
||||
@ -42,36 +76,6 @@
|
||||
|
||||
});
|
||||
|
||||
Ghost.TemplateView = Ghost.View.extend({
|
||||
templateName: "widget",
|
||||
|
||||
template: function (data) {
|
||||
return JST[this.templateName](data);
|
||||
},
|
||||
|
||||
templateData: function () {
|
||||
if (this.model) {
|
||||
return this.model.toJSON();
|
||||
}
|
||||
|
||||
if (this.collection) {
|
||||
return this.collection.toJSON();
|
||||
}
|
||||
|
||||
return {};
|
||||
},
|
||||
|
||||
render: function () {
|
||||
this.$el.html(this.template(this.templateData()));
|
||||
|
||||
if (_.isFunction(this.afterRender)) {
|
||||
this.afterRender();
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* This is the view to generate the markup for the individual
|
||||
* notification. Will be included into #flashbar.
|
||||
|
||||
@ -111,15 +111,9 @@
|
||||
|
||||
templateName: "list-item",
|
||||
|
||||
template: function (data) {
|
||||
return JST[this.templateName](data);
|
||||
},
|
||||
|
||||
render: function () {
|
||||
this.$el.html(this.template(_.extend({active: this.active}, this.model.toJSON())));
|
||||
return this;
|
||||
templateData: function () {
|
||||
return _.extend({active: this.active}, this.model.toJSON());
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Content preview
|
||||
@ -182,14 +176,10 @@
|
||||
|
||||
templateName: "preview",
|
||||
|
||||
template: function (data) {
|
||||
return JST[this.templateName](data);
|
||||
},
|
||||
|
||||
render: function () {
|
||||
if (this.activeId) {
|
||||
this.model = this.collection.get(this.activeId);
|
||||
this.$el.html(this.template(this.model.toJSON()));
|
||||
this.$el.html(this.template(this.templateData()));
|
||||
}
|
||||
this.$('.wrapper').on('click', 'a', function (e) {
|
||||
$(e.currentTarget).attr('target', '_blank');
|
||||
@ -200,4 +190,4 @@
|
||||
|
||||
});
|
||||
|
||||
}());
|
||||
}());
|
||||
@ -137,12 +137,7 @@
|
||||
|
||||
templateName: "widget",
|
||||
|
||||
template: function (data) {
|
||||
return JST[this.templateName](data);
|
||||
},
|
||||
|
||||
render: function () {
|
||||
this.$el.html(this.template(this.model.toJSON()));
|
||||
afterRender: function () {
|
||||
if (!this.model.attributes.settings.enabled) {
|
||||
this.$(".widget-content").html(this.addSubview(new WidgetContent({model: this.model})).render().el);
|
||||
} else {
|
||||
@ -160,11 +155,6 @@
|
||||
|
||||
template: function (data) {
|
||||
return JST['widgets/' + this.model.attributes.content.template](data);
|
||||
},
|
||||
|
||||
render: function () {
|
||||
this.$el.html(this.template(this.model.toJSON()));
|
||||
return this;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
@ -41,14 +41,16 @@
|
||||
initialize: function () {
|
||||
this.addSubview(new TagWidget({el: this.$('#entry-categories'), model: this.model})).render();
|
||||
this.addSubview(new ActionsWidget({el: this.$('#entry-actions'), model: this.model})).render();
|
||||
}
|
||||
},
|
||||
|
||||
render: function () { return this; }
|
||||
|
||||
});
|
||||
|
||||
// The Tag UI area associated with a post
|
||||
// ----------------------------------------
|
||||
TagWidget = Ghost.View.extend({
|
||||
|
||||
render: function () { return this; }
|
||||
});
|
||||
|
||||
// The Publish, Queue, Publish Now buttons
|
||||
@ -372,9 +374,9 @@
|
||||
}
|
||||
}
|
||||
}));
|
||||
}
|
||||
},
|
||||
|
||||
render: function () { return this; }
|
||||
});
|
||||
|
||||
|
||||
|
||||
}());
|
||||
|
||||
@ -15,13 +15,8 @@
|
||||
$(window).trigger('resize');
|
||||
},
|
||||
|
||||
template: function (data) {
|
||||
return JST[this.templateName](data);
|
||||
},
|
||||
|
||||
render: function () {
|
||||
afterRender: function () {
|
||||
var self = this;
|
||||
this.$el.html(this.template());
|
||||
|
||||
$(window).on('resize', _.debounce(function (e) {
|
||||
$(".js-login-container").center();
|
||||
@ -78,15 +73,6 @@
|
||||
this.render();
|
||||
},
|
||||
|
||||
template: function (data) {
|
||||
return JST[this.templateName](data);
|
||||
},
|
||||
|
||||
render: function () {
|
||||
this.$el.html(this.template());
|
||||
return this;
|
||||
},
|
||||
|
||||
submitHandler: function (event) {
|
||||
event.preventDefault();
|
||||
var email = this.$el.find('.email').val(),
|
||||
|
||||
@ -25,6 +25,7 @@
|
||||
// ---------------
|
||||
Settings.Sidebar = Ghost.View.extend({
|
||||
initialize: function (options) {
|
||||
this.render();
|
||||
this.menu = this.$('.settings-menu');
|
||||
this.showContent(options.pane || 'general');
|
||||
},
|
||||
@ -42,19 +43,21 @@
|
||||
|
||||
showContent: function (id) {
|
||||
Backbone.history.navigate('/settings/' + id);
|
||||
if (this.pane && '#' + id === this.pane.el) {
|
||||
if (this.pane && id === this.pane.el.id) {
|
||||
return;
|
||||
}
|
||||
_.result(this.pane, 'destroy');
|
||||
this.setActive(id);
|
||||
this.pane = new Settings[id]({ model: this.model });
|
||||
this.pane = new Settings[id]({ el: '.settings-content', model: this.model });
|
||||
this.pane.render();
|
||||
},
|
||||
|
||||
setActive: function (id) {
|
||||
this.menu.find('li').removeClass('active');
|
||||
this.menu.find('a[href=#' + id + ']').parent().addClass('active');
|
||||
}
|
||||
},
|
||||
|
||||
templateName: 'settings/sidebar'
|
||||
});
|
||||
|
||||
// Content panes
|
||||
@ -65,17 +68,18 @@
|
||||
this.undelegateEvents();
|
||||
},
|
||||
|
||||
render: function () {
|
||||
afterRender: function () {
|
||||
this.$el.attr('id', this.id);
|
||||
this.$el.addClass('active');
|
||||
}
|
||||
});
|
||||
|
||||
// TODO: render templates on the client
|
||||
// TODO: use some kind of data-binding for forms
|
||||
|
||||
// ### General settings
|
||||
Settings.general = Settings.Pane.extend({
|
||||
el: '#general',
|
||||
id: "general",
|
||||
|
||||
events: {
|
||||
'click .button-save': 'saveSettings'
|
||||
},
|
||||
@ -107,26 +111,28 @@
|
||||
});
|
||||
},
|
||||
|
||||
render: function () {
|
||||
templateName: 'settings/general',
|
||||
|
||||
beforeRender: function () {
|
||||
var settings = this.model.toJSON();
|
||||
this.$('#blog-title').val(settings.title);
|
||||
this.$('#email-address').val(settings.email);
|
||||
Settings.Pane.prototype.render.call(this);
|
||||
}
|
||||
});
|
||||
|
||||
// ### Content settings
|
||||
Settings.content = Settings.Pane.extend({
|
||||
el: '#content',
|
||||
id: 'content',
|
||||
events: {
|
||||
'click .button-save': 'saveSettings'
|
||||
},
|
||||
saveSettings: function () {
|
||||
var self = this;
|
||||
this.model.save({
|
||||
description: this.$('#blog-description').val()
|
||||
}, {
|
||||
success: function () {
|
||||
this.addSubview(new Ghost.Views.NotificationCollection({
|
||||
self.addSubview(new Ghost.Views.NotificationCollection({
|
||||
model: [{
|
||||
type: 'success',
|
||||
message: 'Saved',
|
||||
@ -136,7 +142,7 @@
|
||||
|
||||
},
|
||||
error: function () {
|
||||
this.addSubview(new Ghost.Views.NotificationCollection({
|
||||
self.addSubview(new Ghost.Views.NotificationCollection({
|
||||
model: [{
|
||||
type: 'error',
|
||||
message: 'Something went wrong, not saved :(',
|
||||
@ -147,10 +153,11 @@
|
||||
});
|
||||
},
|
||||
|
||||
render: function () {
|
||||
templateName: 'settings/content',
|
||||
|
||||
beforeRender: function () {
|
||||
var settings = this.model.toJSON();
|
||||
this.$('#blog-description').val(settings.description);
|
||||
Settings.Pane.prototype.render.call(this);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -1,444 +1,8 @@
|
||||
{{!< default}}
|
||||
<div class="wrapper">
|
||||
<aside class="settings-sidebar" role="complementary">
|
||||
<header>
|
||||
<h1 class="title">Settings</h1>
|
||||
</header>
|
||||
<nav class="settings-menu">
|
||||
<ul>
|
||||
<li class="general"><a href="#general">General</a></li>
|
||||
<li class="publishing"><a href="#content">Content</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</aside>
|
||||
<section id="general" class="settings-content">
|
||||
<header>
|
||||
<h2 class="title">General</h2>
|
||||
<section class="page-actions">
|
||||
<button class="button-save">Save</button>
|
||||
</section>
|
||||
</header>
|
||||
<section class="content">
|
||||
{{#with settings}}
|
||||
<form id="settings-general">
|
||||
<fieldset>
|
||||
<div class="form-group">
|
||||
<label><strong>Blog Title</strong></label>
|
||||
<input id="blog-title" name="general[title]" type="text" value="{{title}}" />
|
||||
<p>How your blog name appears on the site</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label><strong>Blog Logo</strong></label>
|
||||
<img src="/public/img/logo.png" alt="logo" height="38" width="381"/>
|
||||
<p>Display a logo on your site in place of blog title</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label><strong>Blog Icon</strong></label>
|
||||
<img src="/public/img/test-icon.png" alt="logo" height="38" width="38"/>
|
||||
<p>The icon for your blog, used in your browser tab and elsewhere</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email-address"><strong>Email Address</strong></label>
|
||||
<input id="email-address" name="general[email-address]" type="text" value="{{email}}" />
|
||||
<p>Address to use for <a href="#">admin notifications</a></p>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" value="1" name="general[public-email]" /> Show my email address on my public profile
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="url-structure"><strong>URL Structure</strong></label>
|
||||
<select id="url-structure" name="general[urlstructure]">
|
||||
<option value="post-name">Simple Post Name</option>
|
||||
<option value="date-based">Date Based</option>
|
||||
<option value="number based">Number Based</option>
|
||||
<option value="custom">Custom...</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<hr />
|
||||
|
||||
<fieldset>
|
||||
<div class="form-group">
|
||||
<label for="timezone"><strong>Time Zone</strong></label>
|
||||
<select id="timezone" name="general[timezone]">
|
||||
<option value="1">Vienna (UTC+1)</option>
|
||||
</select>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
{{/with}}
|
||||
</form>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section id="content" class="settings-content">
|
||||
<header>
|
||||
<h2 class="title">Content</h2>
|
||||
<section class="page-actions">
|
||||
<button class="button-save">Save</button>
|
||||
</section>
|
||||
</header>
|
||||
<section class="content">
|
||||
<form id="settings-content">
|
||||
<fieldset>
|
||||
<div class="form-group">
|
||||
<label for="typography"><strong>Typography</strong></label>
|
||||
<select id="typography" name="content[typography]">
|
||||
<option value="post-name">Lato (Light)</option>
|
||||
</select>
|
||||
<p>Sexy sans-serif font that will make your toes tickle.</p>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" value="1" name="content[type-load-google]"/> Load fonts directly from Google
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label><strong>Post Options</strong></label>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" name="content[display-post-meta]" value="1" /> Display Post Meta
|
||||
</label>
|
||||
<p>Post Author / Date / Views</p>
|
||||
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" name="content[show-author]" value="1" /> Show Author Box After Post
|
||||
</label>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" name="content[comments]" value="1" /> Enable Comments
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<hr />
|
||||
|
||||
<fieldset>
|
||||
<div class="form-group">
|
||||
<label for="seo-title"><strong>SEO Title Pattern</strong></label>
|
||||
<input id="seo-title" name="content[seo-title]" type="text" value="[Post Name] - [Site Title]" />
|
||||
<p>The pattern used to display your title tags</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="seo-description"><strong>SEO Description Pattern</strong></label>
|
||||
<input id="seo-description" name="content[seo-description]" type="text" value="Auto" />
|
||||
<p>The pattern used to display your meta descriptions</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label><strong>Google+</strong></label>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" name="content[google-profile]" value="1" /> Connect to author profile on Google
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="blog-description"><strong>Home Page Description</strong></label>
|
||||
<textarea id="blog-description"></textarea>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
|
||||
</form>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section id="users" class="settings-content">
|
||||
<header>
|
||||
<h2 class="title">Users</h2>
|
||||
<section class="page-actions">
|
||||
<button class="button-add">New User</button>
|
||||
</section>
|
||||
</header>
|
||||
<section class="content">
|
||||
<section id="users-pending" class="user-group">
|
||||
<header class="user-group-header"><h3>Invited Users</h3></header>
|
||||
<ul class="users">
|
||||
<li class="user">
|
||||
<figure class="user-image invite"></figure>
|
||||
<section class="user-meta">
|
||||
<h4 class="user-name">Some Name</h4>
|
||||
<span class="user-last-seen">Invitation Sent: 7 hours ago</span>
|
||||
</section>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section id="users-active" class="user-group">
|
||||
<header class="user-group-header">
|
||||
<h3>Active Users</h3>
|
||||
|
||||
<form class="user-search">
|
||||
<label>
|
||||
<i class="search-icon"></i>
|
||||
<input class="user-search-input" type="text"/>
|
||||
</label>
|
||||
</form>
|
||||
</header>
|
||||
|
||||
<ul class="users">
|
||||
<li class="user">
|
||||
<figure class="user-image">
|
||||
<img src="/public/img/user.jpg" alt="user"/>
|
||||
</figure>
|
||||
<section class="user-meta">
|
||||
<h4 class="user-name">Some Name</h4>
|
||||
<span class="user-last-seen">Last Seen: 7 hours ago</span>
|
||||
</section>
|
||||
<span class="user-role admin">Admin</span>
|
||||
</li>
|
||||
<li class="user">
|
||||
<figure class="user-image">
|
||||
<img src="/public/img/user.jpg" alt="user"/>
|
||||
</figure>
|
||||
<section class="user-meta">
|
||||
<h4 class="user-name">Some Name</h4>
|
||||
<span class="user-last-seen">Last Seen: 2 days ago</span>
|
||||
</section>
|
||||
<span class="user-role editor">Editor</span>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section id="appearance" class="settings-content">
|
||||
<header>
|
||||
<h2 class="title">Appearance</h2>
|
||||
</header>
|
||||
<section class="content">
|
||||
<h6 class="sub">Raw json be here</h6>
|
||||
<p>Active theme: {{json settings.activeTheme}}</p>
|
||||
<p>Available themes: {{json availableThemes}}</p>
|
||||
<p>Available plugins: {{json availablePlugins}}</p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section id="plugins" class="settings-content">
|
||||
<header>
|
||||
<h2 class="title">Plugins</h2>
|
||||
<section class="page-actions">
|
||||
<button class="button-add">Add Plugin</button>
|
||||
</section>
|
||||
</header>
|
||||
<section class="content">
|
||||
<section class="plugin-section">
|
||||
<header class="plugin-section-header">
|
||||
<h3>Updates</h3>
|
||||
</header>
|
||||
<table class="plugin-section-table">
|
||||
<tbody>
|
||||
<tr class="plugin-section-item">
|
||||
<td>
|
||||
<figure class="plugin-icon">
|
||||
|
||||
</figure>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-title plugin-info">Ghost SEO</span>
|
||||
<span class="plugin-download-progress" data-complete="45">
|
||||
<span style="width: 45%"></span>
|
||||
</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info">Yoast</span>
|
||||
<span class="plugin-sub-info">yoast.com</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info">v 0.1.13</span>
|
||||
<span class="plugin-sub-info">3 weeks ago</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info rating">
|
||||
<span class="active"></span><span class="active"></span><span class="active"></span><span class="active"></span><span></span>
|
||||
</span>
|
||||
<span class="plugin-sub-info">48,200 users</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<button class="button-delete button-cancel">Cancel</button>
|
||||
</section>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="plugin-section-item">
|
||||
<td>
|
||||
<figure class="plugin-icon">
|
||||
|
||||
</figure>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-title plugin-info">Ghost SEO</span>
|
||||
<span class="plugin-sub-info">The #1 content marketing plugin for Ghost.</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info">Yoast</span>
|
||||
<span class="plugin-sub-info">yoast.com</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info">v 0.1.13</span>
|
||||
<span class="plugin-sub-info">3 weeks ago</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info rating">
|
||||
<span class="active"></span><span class="active"></span><span class="active"></span><span class="active"></span><span></span>
|
||||
</span>
|
||||
<span class="plugin-sub-info">48,200 users</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<button class="button-save">Update</button>
|
||||
</section>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<footer class="plugin-section-footer">
|
||||
<button class="button-alt button-update-all">Update All</button>
|
||||
</footer>
|
||||
</section>
|
||||
<section class="plugin-section">
|
||||
<header class="plugin-section-header">
|
||||
<h3>Active Plugins</h3>
|
||||
</header>
|
||||
<table class="plugin-section-table">
|
||||
<tbody>
|
||||
<tr class="plugin-section-item">
|
||||
<td>
|
||||
<figure class="plugin-icon">
|
||||
|
||||
</figure>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-title plugin-info">Ghost SEO</span>
|
||||
<span class="plugin-sub-info">The #1 content marketing plugin for Ghost.</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info">Yoast</span>
|
||||
<span class="plugin-sub-info">yoast.com</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info">v 0.1.13</span>
|
||||
<span class="plugin-sub-info">3 weeks ago</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info rating">
|
||||
<span class="active"></span><span class="active"></span><span class="active"></span><span class="active"></span><span></span>
|
||||
</span>
|
||||
<span class="plugin-sub-info">48,200 users</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<a href="#" class="plugin-settings-icon"></a>
|
||||
</section>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="plugin-section-item">
|
||||
<td>
|
||||
<figure class="plugin-icon">
|
||||
|
||||
</figure>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-title plugin-info">Ghost SEO</span>
|
||||
<span class="plugin-sub-info">The #1 content marketing plugin for Ghost.</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info">Yoast</span>
|
||||
<span class="plugin-sub-info">yoast.com</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info">v 0.1.13</span>
|
||||
<span class="plugin-sub-info">3 weeks ago</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info rating">
|
||||
<span class="active"></span><span class="active"></span><span class="active"></span><span class="active"></span><span></span>
|
||||
</span>
|
||||
<span class="plugin-sub-info">48,200 users</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<a href="#" class="plugin-settings-icon"></a>
|
||||
</section>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="plugin-section">
|
||||
<header class="plugin-section-header">
|
||||
<h3>Inactive Plugins</h3>
|
||||
</header>
|
||||
<table class="plugin-section-table">
|
||||
<tbody>
|
||||
<tr class="plugin-section-item inactive">
|
||||
<td>
|
||||
<figure class="plugin-icon">
|
||||
|
||||
</figure>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-title plugin-info">Ghost SEO</span>
|
||||
<span class="plugin-sub-info">The #1 content marketing plugin for Ghost.</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info">Yoast</span>
|
||||
<span class="plugin-sub-info">yoast.com</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info">v 0.1.13</span>
|
||||
<span class="plugin-sub-info">3 weeks ago</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<span class="plugin-info rating">
|
||||
<span class="active"></span><span class="active"></span><span class="active"></span><span class="active"></span><span></span>
|
||||
</span>
|
||||
<span class="plugin-sub-info">48,200 users</span>
|
||||
</section>
|
||||
</td>
|
||||
<td>
|
||||
<section class="plugin-meta">
|
||||
<button class="button-add">Activate</button>
|
||||
</section>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
<section class="settings-content"></section>
|
||||
</div>
|
||||
@ -18,14 +18,14 @@ casper.test.begin("Content screen is correct", 9, function suite(test) {
|
||||
});
|
||||
|
||||
casper.then(function testActiveItem() {
|
||||
casper.test.assertEquals(casper.evaluate(function () {
|
||||
casper.test.assertEvalEquals(function () {
|
||||
return document.querySelector('.content-list-content li').className;
|
||||
}), "active", "first item is active");
|
||||
}, "active", "first item is active");
|
||||
|
||||
}).thenClick(".content-list-content li:nth-child(2) a", function then() {
|
||||
casper.test.assertEquals(casper.evaluate(function () {
|
||||
casper.test.assertEvalEquals(function () {
|
||||
return document.querySelectorAll('.content-list-content li')[1].className;
|
||||
}), "active", "second item is active");
|
||||
}, "active", "second item is active");
|
||||
});
|
||||
|
||||
// TODO: finish testing delete
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/*globals casper, __utils__, url */
|
||||
|
||||
casper.test.begin("Settings screen is correct", 3, function suite(test) {
|
||||
casper.test.begin("Settings screen is correct", 12, function suite(test) {
|
||||
|
||||
casper.test.filename = "settings_test.png";
|
||||
|
||||
@ -11,8 +11,28 @@ casper.test.begin("Settings screen is correct", 3, function suite(test) {
|
||||
|
||||
casper.then(function testViews() {
|
||||
test.assertExists(".wrapper", "Settings main view is present");
|
||||
test.assertExists(".settings-sidebar", "Settings sidebar view is present");
|
||||
test.assertExists(".settings-menu", "Settings menu is present");
|
||||
test.assertExists(".wrapper", "Settings main view is present");
|
||||
test.assertExists(".settings-content", "Settings content view is present");
|
||||
test.assertEval(function testGeneralIsActive() {
|
||||
return document.querySelector('.settings-menu .general').classList.contains('active');
|
||||
}, "general tab is marked active");
|
||||
test.assertEval(function testContentIsGeneral() {
|
||||
return document.querySelector('.settings-content').id === 'general';
|
||||
}, "loaded content is general screen");
|
||||
});
|
||||
|
||||
// TODO: real settings tests
|
||||
casper.thenClick('.settings-menu .publishing', function then() {
|
||||
test.assertEval(function testGeneralIsNotActive() {
|
||||
return !document.querySelector('.settings-menu .general').classList.contains('active');
|
||||
}, "general tab is not marked active");
|
||||
test.assertEval(function testContentIsActive() {
|
||||
return document.querySelector('.settings-menu .publishing').classList.contains('active');
|
||||
}, "content tab is marked active");
|
||||
test.assertEval(function testContentIsContent() {
|
||||
return document.querySelector('.settings-content').id === 'content';
|
||||
}, "loaded content is contentß screen");
|
||||
});
|
||||
|
||||
casper.run(function () {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user