Clean up settings/general screen

Closes #345
- added blog description to general screen
- removed content screen from sidebar
- removed beforeRender from settings front end
- removed content screen from tests
This commit is contained in:
Sebastian Gierlinger 2013-09-08 22:11:52 +02:00
parent 61e5212fd7
commit e51a14ee90
6 changed files with 20 additions and 98 deletions

View File

@ -2,15 +2,8 @@
(function () { (function () {
"use strict"; "use strict";
// Set the url manually and id to '0' to force PUT requests
Ghost.Models.Settings = Backbone.Model.extend({ Ghost.Models.Settings = Backbone.Model.extend({
url: Ghost.settings.apiRoot + '/settings', url: Ghost.settings.apiRoot + '/settings'
id: "0",
defaults: {
title: 'My Blog',
description: '',
email: 'admin@tryghost.org'
}
}); });
}()); }());

View File

@ -58,11 +58,6 @@
</div> </div>
<div class="form-group">
<label for="blog-description"><strong>Home Page Description</strong></label>
<textarea id="blog-description">{{description}}</textarea>
</div>
</fieldset> </fieldset>
</form> </form>

View File

@ -13,44 +13,32 @@
<p>How your blog name appears on the site</p> <p>How your blog name appears on the site</p>
</div> </div>
<div class="form-group">
<label for="blog-description"><strong>Blog Description</strong></label>
<textarea id="blog-description">{{description}}</textarea>
<p>Display a short description below the blog title</p>
</div>
<div class="form-group"> <div class="form-group">
<label><strong>Blog Logo</strong></label> <label><strong>Blog Logo</strong></label>
{{#if logo}} {{#if logo}}
<a class="js-modal-logo"><img src="{{logo}}" alt="logo"></a> <a class="js-modal-logo"><img id="blog-logo" src="{{logo}}" alt="logo"></a>
{{else}} {{else}}
<a class="button-add js-modal-logo" href="#">Upload Image</a> <a class="button-add js-modal-logo" href="#">Upload Image</a>
{{/if}} {{/if}}
<p>Display a logo on your site in place of blog title</p> <p>Display a logo on your site in place of blog title</p>
</div> </div>
<div class="form-group">
<label><strong>Blog Icon</strong></label>
{{#if icon}}
<a class="js-modal-icon"><img src="{{icon}}" alt="icon"></a>
{{else}}
<a class="button-add js-modal-icon" href="#">Upload Image</a>
{{/if}}
<p>The icon for your blog, used in your browser tab and elsewhere</p>
</div>
<div class="form-group"> <div class="form-group">
<label for="email-address"><strong>Email Address</strong></label> <label for="email-address"><strong>Email Address</strong></label>
<input id="email-address" name="general[email-address]" type="email" value="{{email}}"> <input id="email-address" name="general[email-address]" type="email" value="{{email}}">
<p>Address to use for <a href="#">admin notifications</a></p> <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>
<div class="form-group"> <div class="form-group">
<label for="url-structure"><strong>URL Structure</strong></label> <label for="postsPerPage"><strong>Posts per page</strong></label>
<select id="url-structure" name="general[urlstructure]"> <input id="postsPerPage" name="general[postsPerPage]" type="number" value="{{postsPerPage}}">
<option value="post-name">Simple Post Name</option> <p>Number of posts per page displayed</p>
<option value="date-based">Date Based</option>
<option value="number based">Number Based</option>
<option value="custom">Custom...</option>
</select>
</div> </div>
<div class="form-group"> <div class="form-group">
@ -60,24 +48,10 @@
<option value="{{name}}" {{#if active}}selected{{/if}}>{{name}}</option> <option value="{{name}}" {{#if active}}selected{{/if}}>{{name}}</option>
{{/each}} {{/each}}
</select> </select>
</div> <p>Select a theme for your blog</p>
<div class="form-group">
<label for="postsPerPage"><strong>Posts per page</strong></label>
<input id="postsPerPage" name="general[postsPerPage]" type="number" value="{{postsPerPage}}">
<p>Number of posts per page displayed</p>
</div> </div>
</fieldset> </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> </form>
</section> </section>

View File

@ -4,7 +4,6 @@
<nav class="settings-menu"> <nav class="settings-menu">
<ul> <ul>
<li class="general"><a href="#general">General</a></li> <li class="general"><a href="#general">General</a></li>
<li class="publishing"><a href="#content">Content</a></li>
<li class="users"><a href="#user">User</a></li> <li class="users"><a href="#user">User</a></li>
</ul> </ul>
</nav> </nav>

View File

@ -160,12 +160,13 @@
var themes = this.model.get('availableThemes'); var themes = this.model.get('availableThemes');
this.model.unset('availableThemes'); this.model.unset('availableThemes');
this.model.save({ this.model.save({
id: 0, //workaround to use put
title: this.$('#blog-title').val(), title: this.$('#blog-title').val(),
description: $('#blog-description').val(),
logo: this.$('#blog-logo').attr("src"),
email: this.$('#email-address').val(), email: this.$('#email-address').val(),
logo: this.$('#logo').attr("src"), postsPerPage: this.$('#postsPerPage').val(),
icon: this.$('#icon').attr("src"), activeTheme: this.$('#activeTheme').val()
activeTheme: this.$('#activeTheme').val(),
postsPerPage: this.$('#postsPerPage').val()
}, { }, {
success: this.saveSuccess, success: this.saveSuccess,
error: this.saveError error: this.saveError
@ -226,12 +227,6 @@
}, },
templateName: 'settings/general', templateName: 'settings/general',
beforeRender: function () {
var settings = this.model.toJSON();
this.$('#blog-title').val(settings.title);
this.$('#email-address').val(settings.email);
},
afterRender: function () { afterRender: function () {
this.$('.js-drop-zone').upload(); this.$('.js-drop-zone').upload();
Settings.Pane.prototype.afterRender.call(this); Settings.Pane.prototype.afterRender.call(this);
@ -256,12 +251,8 @@
this.model.set({availableThemes: themes}); this.model.set({availableThemes: themes});
}, },
templateName: 'settings/content', templateName: 'settings/content'
beforeRender: function () {
var settings = this.model.toJSON();
this.$('#blog-description').val(settings.description);
}
}); });
// ### User profile // ### User profile
@ -340,17 +331,6 @@
templateName: 'settings/user-profile', templateName: 'settings/user-profile',
beforeRender: function () {
var user = this.model.toJSON();
this.$('#user-name').val(user.full_name);
this.$('#user-email').val(user.email_address);
this.$('#user-location').val(user.location);
this.$('#user-website').val(user.url);
this.$('#user-bio').val(user.bio);
this.$('#user-profile-picture').attr('src', user.profile_picture);
this.$('#user-cover-picture').attr('src', user.cover_picture);
},
afterRender: function () { afterRender: function () {
var self = this; var self = this;
Countable.live(document.getElementById('user-bio'), function (counter) { Countable.live(document.getElementById('user-bio'), function (counter) {

View File

@ -1,6 +1,6 @@
/*globals casper, __utils__, url */ /*globals casper, __utils__, url */
casper.test.begin("Settings screen is correct", 19, function suite(test) { casper.test.begin("Settings screen is correct", 15, function suite(test) {
test.filename = "settings_test.png"; test.filename = "settings_test.png";
casper.start(url + "ghost/settings", function testTitleAndUrl() { casper.start(url + "ghost/settings", function testTitleAndUrl() {
@ -22,31 +22,12 @@ casper.test.begin("Settings screen is correct", 19, function suite(test) {
}, "loaded content is general screen"); }, "loaded content is general screen");
}); });
// test the publishing / content tab
casper.thenClick('.settings-menu .publishing');
casper.waitForSelector('#content', 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");
}, function onTimeOut() {
test.fail('Content screen failed to load');
});
// test the user tab // test the user tab
casper.thenClick('.settings-menu .users'); casper.thenClick('.settings-menu .users');
casper.waitForSelector('#user', function then() { casper.waitForSelector('#user', function then() {
test.assertEval(function testGeneralIsNotActive() { test.assertEval(function testGeneralIsNotActive() {
return !document.querySelector('.settings-menu .general').classList.contains('active'); return !document.querySelector('.settings-menu .general').classList.contains('active');
}, "general tab is not marked active"); }, "general tab is not marked active");
test.assertEval(function testContentIsNotActive() {
return !document.querySelector('.settings-menu .publishing').classList.contains('active');
}, "content tab is marked active");
test.assertEval(function testUserIsActive() { test.assertEval(function testUserIsActive() {
return document.querySelector('.settings-menu .users').classList.contains('active'); return document.querySelector('.settings-menu .users').classList.contains('active');
}, "user tab is marked active"); }, "user tab is marked active");