accordion toggles for settings sections

This commit is contained in:
Kevin Ansfield 2017-02-21 12:28:05 +00:00
parent 09d4ffb1fe
commit 099cc91a90
6 changed files with 38 additions and 13 deletions

View File

@ -13,6 +13,7 @@
<div class="gh-setting-content">
<div class="gh-setting-title">Title &amp; description</div>
<div class="gh-setting-desc">The details used to identify your publication around the web</div>
{{#liquid-if pubInfoOpen}}
<div class="gh-setting-content-extended">
{{#gh-form-group errors=model.errors hasValidated=model.hasValidated property="title"}}
{{gh-input model.title type="text" focusOut=(action "validate" "title" target=model) update=(action (mut model.title)) data-test-title-input=true}}
@ -26,24 +27,27 @@
<p>Used in your theme, meta data and search results</p>
{{/gh-form-group}}
</div>
{{/liquid-if}}
</div>
<div class="gh-setting-action">
<button type="button" class="gh-btn gh-btn-hover-blue"><span>Close</span></button>
<button type="button" class="gh-btn gh-btn-hover-blue" {{action (toggle "pubInfoOpen" this)}} data-test-toggle-pub-info><span>{{if pubInfoOpen "Close" "Open"}}</span></button>
</div>
</div>
<div class="gh-setting">
<div class="gh-setting-content">
<div class="gh-setting-title">Site timezone</div>
<div class="gh-setting-desc">Set the time and date of your publication, used for all published posts</div>
{{#liquid-if timezoneOpen}}
<div class="gh-setting-content-extended">
{{gh-timezone-select
activeTimezone=model.activeTimezone
availableTimezones=availableTimezones
update=(action "setTimezone")}}
</div>
{{/liquid-if}}
</div>
<div class="gh-setting-action">
<button type="button" class="gh-btn gh-btn-hover-blue"><span>Close</span></button>
<button type="button" class="gh-btn gh-btn-hover-blue" {{action (toggle "timezoneOpen" this)}} data-test-toggle-timezone><span>{{if timezoneOpen "Close" "Open"}}</span></button>
</div>
</div>
@ -114,6 +118,7 @@
<div class="gh-setting-content">
<div class="gh-setting-title">Social accounts</div>
<div class="gh-setting-desc">Link your social accounts for full structured data and rich card support</div>
{{#liquid-if socialOpen}}
<div class="gh-setting-content-extended">
{{#gh-form-group errors=model.errors hasValidated=model.hasValidated property="facebook"}}
<input value={{model.facebook}} oninput={{action (mut _scratchFacebook) value="target.value"}} {{action "validateFacebookUrl" on="focusOut"}} type="url" class="gh-input" placeholder="https://www.facebook.com/ghost" autocorrect="off" data-test-facebook-input />
@ -126,9 +131,10 @@
<p>URL of your publication's Twitter profile</p>
{{/gh-form-group}}
</div>
{{/liquid-if}}
</div>
<div class="gh-setting-action">
<button type="button" class="gh-btn gh-btn-hover-blue"><span>Close</span></button>
<button type="button" class="gh-btn gh-btn-hover-blue" {{action (toggle "socialOpen" this)}} data-test-toggle-social><span>{{if socialOpen "Close" "Open"}}</span></button>
</div>
</div>

View File

@ -90,6 +90,9 @@ module.exports = function (defaults) {
optional: ['es6.spec.symbols'],
includePolyfill: true
},
'ember-composable-helpers': {
only: ['toggle']
},
outputPaths: {
app: {
js: assetLocation('ghost.js'),

View File

@ -63,6 +63,7 @@
"ember-cli-sri": "2.1.1",
"ember-cli-test-loader": "1.1.1",
"ember-cli-uglify": "1.2.0",
"ember-composable-helpers": "2.0.0",
"ember-concurrency": "0.7.19",
"ember-data": "2.11.1",
"ember-data-filter": "1.13.0",

View File

@ -11,6 +11,7 @@ import destroyApp from '../helpers/destroy-app';
import {invalidateSession, authenticateSession} from 'ghost-admin/tests/helpers/ember-simple-auth';
import Mirage from 'ember-cli-mirage';
import sinon from 'sinon';
import testSelector from 'ember-test-selectors';
describe('Acceptance: Editor', function() {
let application;
@ -196,6 +197,7 @@ describe('Acceptance: Editor', function() {
// go to settings to change the timezone
visit('/settings/general');
click(testSelector('toggle-timezone'));
andThen(() => {
expect(currentURL(), 'currentURL for settings')

View File

@ -85,6 +85,7 @@ describe('Acceptance: Settings - General', function () {
expect(find(testSelector('dated-permalinks-checkbox')).prop('checked'), 'date permalinks checkbox').to.be.false;
});
click(testSelector('toggle-pub-info'));
fillIn(testSelector('title-input'), 'New Blog Title');
click(testSelector('save-button'));
@ -147,6 +148,7 @@ describe('Acceptance: Settings - General', function () {
it('renders timezone selector correctly', function () {
visit('/settings/general');
click(testSelector('toggle-timezone'));
andThen(() => {
expect(currentURL(), 'currentURL').to.equal('/settings/general');
@ -195,9 +197,13 @@ describe('Acceptance: Settings - General', function () {
expect(find(testSelector('password-error')).text().trim(), 'present password error')
.to.equal('');
});
});
it('handles social blog settings correctly', function () {
visit('/settings/general');
click(testSelector('toggle-social'));
// validates a facebook url correctly
andThen(() => {
// loads fixtures and performs transform
expect(find(testSelector('facebook-input')).val(), 'initial facebook value')

View File

@ -1364,7 +1364,7 @@ commander@2.8.x:
dependencies:
graceful-readlink ">= 1.0.0"
commander@^2.1.0, commander@^2.5.0, commander@^2.6.0, commander@^2.9.0:
commander@^2.5.0, commander@^2.6.0, commander@^2.9.0:
version "2.9.0"
resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
dependencies:
@ -2260,6 +2260,13 @@ ember-composable-helpers@^1.1.2:
broccoli-funnel "^1.0.1"
ember-cli-babel "^5.1.7"
ember-composable-helpers@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/ember-composable-helpers/-/ember-composable-helpers-2.0.0.tgz#8ca13c36c33b15f7d2ded05e9e1c9587814cee5a"
dependencies:
broccoli-funnel "^1.0.1"
ember-cli-babel "^5.1.7"
ember-concurrency@0.7.19, ember-concurrency@^0.7.15:
version "0.7.19"
resolved "https://registry.yarnpkg.com/ember-concurrency/-/ember-concurrency-0.7.19.tgz#095f2ede1b56ab068958cac5b55e77b9de67e1c6"
@ -4212,13 +4219,20 @@ js-tokens@^3.0.0:
version "3.0.1"
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.1.tgz#08e9f132484a2c45a30907e9dc4d5567b7f114d7"
js-yaml@3.6.1, js-yaml@3.x, js-yaml@^3.2.5, js-yaml@^3.2.7, js-yaml@^3.5.1, js-yaml@^3.6.1:
js-yaml@3.6.1, js-yaml@3.x, js-yaml@^3.2.5, js-yaml@^3.6.1:
version "3.6.1"
resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.6.1.tgz#6e5fe67d8b205ce4d22fad05b7781e8dadcc4b30"
dependencies:
argparse "^1.0.7"
esprima "^2.6.0"
js-yaml@^3.2.7, js-yaml@^3.5.1, js-yaml@~3.7.0:
version "3.7.0"
resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
dependencies:
argparse "^1.0.7"
esprima "^2.6.0"
js-yaml@~3.5.2:
version "3.5.5"
resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.5.5.tgz#0377c38017cabc7322b0d1fbcd25a491641f2fbe"
@ -4226,13 +4240,6 @@ js-yaml@~3.5.2:
argparse "^1.0.2"
esprima "^2.6.0"
js-yaml@~3.7.0:
version "3.7.0"
resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
dependencies:
argparse "^1.0.7"
esprima "^2.6.0"
jsbn@~0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.0.tgz#650987da0dd74f4ebf5a11377a2aa2d273e97dfd"