Ghost/ghost/admin/app/templates/settings/general.hbs
Kevin Ansfield 9d67980a7e Refactor modals
refs #5798, closes #5018
- adds new `gh-fullscreen-modal` component - modals are now specified in-context so that they can have deeper interaction with their surrounding components/controller/route, i.e. a modal component can be a thin confirm/deny wrapper over the underlying controller action keeping all context-sensitive logic in one place
- adds spin-buttons to all modals with async behaviour
- adds/improves behaviour of inline-validation in modals
- improves re-authenticate modal to properly handle validation and authentication errors
2016-01-12 20:53:08 +00:00

120 lines
6.2 KiB
Handlebars

<section class="gh-view">
<header class="view-header">
{{#gh-view-title openMobileMenu="openMobileMenu"}}<span>General</span>{{/gh-view-title}}
<section class="view-actions">
{{#gh-spin-button class="btn btn-blue" action="save" submitting=submitting}}Save{{/gh-spin-button}}
</section>
</header>
<section class="view-content">
<form id="settings-general" novalidate="novalidate">
<fieldset>
{{#gh-form-group errors=model.errors hasValidated=model.hasValidated property="title"}}
<label for="blog-title">Blog Title</label>
{{gh-input id="blog-title" class="gh-input" name="general[title]" type="text" value=model.title focusOut=(action "validate" "title")}}
{{gh-error-message errors=model.errors property="title"}}
<p>The name of your blog</p>
{{/gh-form-group}}
{{#gh-form-group errors=model.errors hasValidated=model.hasValidated property="description" class="description-container"}}
<label for="blog-description">Blog Description</label>
{{gh-textarea id="blog-description" class="gh-input" name="general[description]" value=model.description focusOut=(action "validate" "description")}}
{{gh-error-message errors=model.errors property="description"}}
<p>
Describe what your blog is about
{{gh-count-characters model.description}}
</p>
{{/gh-form-group}}
</fieldset>
<div class="form-group">
<label>Blog Logo</label>
{{#if model.logo}}
<img class="blog-logo" src="{{model.logo}}" alt="logo" role="button" {{action "toggleUploadLogoModal"}}>
{{else}}
<button type="button" class="btn btn-green js-modal-logo" {{action "toggleUploadLogoModal"}}>Upload Image</button>
{{/if}}
<p>Display a sexy logo for your publication</p>
{{#if showUploadLogoModal}}
{{gh-fullscreen-modal "upload-image"
model=(hash model=model imageProperty="logo")
close=(action "toggleUploadLogoModal")
modifier="action wide"}}
{{/if}}
</div>
<div class="form-group">
<label>Blog Cover</label>
{{#if model.cover}}
<img class="blog-cover" src="{{model.cover}}" alt="cover photo" role="button" {{action "toggleUploadCoverModal"}}>
{{else}}
<button type="button" class="btn btn-green js-modal-cover" {{action "toggleUploadCoverModal"}}>Upload Image</button>
{{/if}}
<p>Display a cover image on your site</p>
{{#if showUploadCoverModal}}
{{gh-fullscreen-modal "upload-image"
model=(hash model=model imageProperty="cover")
close=(action "toggleUploadCoverModal")
modifier="action wide"}}
{{/if}}
</div>
<fieldset>
<div class="form-group">
<label for="postsPerPage">Posts per page</label>
{{! `pattern` brings up numeric keypad allowing any number of digits}}
{{gh-input id="postsPerPage" class="gh-input" name="general[postsPerPage]" focus-out="checkPostsPerPage" value=model.postsPerPage min="1" max="1000" type="number" pattern="[0-9]*"}}
<p>How many posts should be displayed on each page</p>
</div>
<div class="form-group for-checkbox">
<label for="permalinks">Dated Permalinks</label>
<label class="checkbox" for="permalinks">
{{input id="permalinks" class="gh-input" name="general[permalinks]" type="checkbox" checked=isDatedPermalinks}}
<span class="input-toggle-component"></span>
<p>Include the date in your post URLs</p>
</label>
</div>
<div class="form-group for-select">
<label for="activeTheme">Theme</label>
<span class="gh-select" data-select-text="{{selectedTheme.label}}" tabindex="0">
{{gh-select-native
id="activeTheme"
name="general[activeTheme]"
content=themes
optionValuePath="name"
optionLabelPath="label"
selection=selectedTheme
action="setTheme"
}}
</span>
<p>Select a theme for your blog</p>
</div>
<div class="form-group for-checkbox">
<label for="isPrivate">Make this blog private</label>
<label class="checkbox" for="isPrivate">
{{input id="isPrivate" name="general[isPrivate]" type="checkbox"
checked=model.isPrivate}}
<span class="input-toggle-component"></span>
<p>Enable password protection</p>
</label>
</div>
{{#if model.isPrivate}}
{{#gh-form-group errors=model.errors hasValidated=model.hasValidated property="password"}}
{{gh-input name="general[password]" type="text" value=model.password focusOut=(action "validate" "password")}}
{{gh-error-message errors=model.errors property="password"}}
<p>This password will be needed to access your blog. All search engine optimization and social features are now disabled. This password is stored in plaintext.</p>
{{/gh-form-group}}
{{/if}}
</fieldset>
</form>
</section>
</section>