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

Integration UI refinements (#1059)

Browse source 
no issue
* Integration detail page design refinements
* Fixing error message layout on integration detail screen
* Heading details
* Margin refinements
* Refine webhooks modal
* Lines and font sizes
* Replace integrations icon
This commit is contained in:
Peter Zimon 2018-10-24 15:04:17 +02:00 • committed by Kevin Ansfield
parent e7a8be81ef
commit 3f7a036905
6 changed files with 75 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ghost/admin/app/controllers/settings/integration.js
View file

@ -33,7 +33,7 @@ export default Controller.extend({
if (url) { if (url) {
let styles = [ let styles = [
`background-image: url(${url})`, `background-image: url(${url})`,
'background-size: 100%', 'background-size: 50%',
'background-position: 50%', 'background-position: 50%',
'background-repeat: no-repeat' 'background-repeat: no-repeat'
]; ];

4
ghost/admin/app/templates/components/modal-new-integration.hbs
View file

@ -6,12 +6,12 @@
<div class="modal-body"> <div class="modal-body">
<fieldset> <fieldset>
{{#gh-form-group errors=integration.errors hasValidated=integration.hasValidated property="name"}} {{#gh-form-group errors=integration.errors hasValidated=integration.hasValidated property="name"}}
<label for="new-integration-name">Name</label> <label for="new-integration-name" class="fw6">Name</label>
<input type="text" <input type="text"
value={{integration.name}} value={{integration.name}}
oninput={{action "updateName" value="target.value"}} oninput={{action "updateName" value="target.value"}}
id="new-integration-name" id="new-integration-name"
class="gh-input" class="gh-input mt1"
placeholder="Integration name..." placeholder="Integration name..."
name="integration-name" name="integration-name"
autofocus="autofocus" autofocus="autofocus"

17
ghost/admin/app/templates/components/modal-webhook-form.hbs
View file

@ -6,14 +6,14 @@
<div class="modal-body"> <div class="modal-body">
<fieldset> <fieldset>
{{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="name"}} {{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="name"}}
<label for="new-webhook-name">Name</label> <label for="new-webhook-name" class="fw6">Name</label>
{{gh-text-input {{gh-text-input
value=(readonly webhook.name) value=(readonly webhook.name)
input=(action (mut webhook.name) value="target.value") input=(action (mut webhook.name) value="target.value")
focus-out=(action "validate" "name" target=webhook) focus-out=(action "validate" "name" target=webhook)
id="new-webhook-name" id="new-webhook-name"
name="name" name="name"
class="gh-input" class="gh-input mt1"
placeholder="Webhook name..." placeholder="Webhook name..."
autofocus="autofocus" autofocus="autofocus"
autocapitalize="off" autocapitalize="off"
@ -24,15 +24,16 @@
</fieldset> </fieldset>
<fieldset> <fieldset>
{{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="event"}} {{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="event"}}
<label for="new-webhook-event">Event</label> <label for="new-webhook-event" class="fw6">Event</label>
<span class="gh-select"> <span class="gh-select">
{{one-way-select webhook.event {{one-way-select webhook.event
options=availableEvents options=availableEvents
optionValuePath="event" optionValuePath="event"
optionLabelPath="name" optionLabelPath="name"
optionTargetPath="event" optionTargetPath="event"
class="mt1"
includeBlank=true includeBlank=true
prompt="Select an event:" prompt="Select an event"
update=(action "selectEvent") update=(action "selectEvent")
id="new-webhook-event" id="new-webhook-event"
name="event" name="event"
@ -44,14 +45,14 @@
</fieldset> </fieldset>
<fieldset> <fieldset>
{{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="targetUrl"}} {{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="targetUrl"}}
<label for="new-webhook-targetUrl">Target URL</label> <label for="new-webhook-targetUrl" class="fw6">Target URL</label>
{{gh-text-input {{gh-text-input
value=(readonly webhook.targetUrl) value=(readonly webhook.targetUrl)
input=(action (mut webhook.targetUrl) value="target.value") input=(action (mut webhook.targetUrl) value="target.value")
focus-out=(action "validate" "targetUrl" target=webhook) focus-out=(action "validate" "targetUrl" target=webhook)
id="new-webhook-targetUrl" id="new-webhook-targetUrl"
name="targetUrl" name="targetUrl"
class="gh-input" class="gh-input mt1"
placeholder="Webhook target URL..." placeholder="Webhook target URL..."
autofocus="autofocus" autofocus="autofocus"
autocapitalize="off" autocapitalize="off"
@ -62,14 +63,14 @@
</fieldset> </fieldset>
<fieldset> <fieldset>
{{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="secret"}} {{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="secret"}}
<label for="new-webhook-secret">Secret</label> <label for="new-webhook-secret" class="fw6">Secret</label>
{{gh-text-input {{gh-text-input
value=(readonly webhook.secret) value=(readonly webhook.secret)
oninput=(action (mut webhook.secret) value="target.value") oninput=(action (mut webhook.secret) value="target.value")
focus-out=(action "validate" "secret" target=webhook) focus-out=(action "validate" "secret" target=webhook)
id="new-webhook-secret" id="new-webhook-secret"
name="secret" name="secret"
class="gh-input" class="gh-input mt1"
placeholder="Webhook secret..." placeholder="Webhook secret..."
autofocus="autofocus" autofocus="autofocus"
autocapitalize="off" autocapitalize="off"

112
ghost/admin/app/templates/settings/integration.hbs
View file

@ -11,13 +11,13 @@
</section> </section>
</header> </header>
<div class="flex flex-row"> <div class="flex">
<div class="flex flex-column mr8"> <div class="flex flex-column mr8 items-start">
<label>Icon</label> <label>Icon</label>
<figure class="relative flex items-center h-100 ma0 br4 hide-child" style={{iconImageStyle}}> <figure class="relative flex items-center h-100 ma0 br4 hide-child ba b--whitegrey-d2 pa8 mt1" style={{iconImageStyle}}>
{{#aspect-ratio-box class="flex items-center h-100" ratio="1/1" base="height"}} {{#aspect-ratio-box class="flex items-center h-100" ratio="1/1" base="height"}}
{{#unless integration.iconImage}} {{#unless integration.iconImage}}
{{svg-jar "integration" class="w-100"}} {{svg-jar "integration" class="w14 h-auto stroke-darkgrey"}}
{{/unless}} {{/unless}}
{{/aspect-ratio-box}} {{/aspect-ratio-box}}
@ -27,13 +27,13 @@
as |uploader| as |uploader|
}} }}
{{#if uploader.isUploading}} {{#if uploader.isUploading}}
<div class="absolute w-100 h-100 br4 bg-black-70 flex items-center"> <div class="absolute top-0 left-0 w-100 h-100 br4 bg-black-70 flex items-center">
{{uploader.progressBar}} {{uploader.progressBar}}
</div> </div>
{{else}} {{else}}
<button <button
type="button" type="button"
class="child absolute w-100 h-100 br4 b white text-center bg-black-70" class="child absolute top-0 left-0 w-100 h-100 br4 b white text-center bg-black-70 f8"
{{action "triggerIconFileDialog"}} {{action "triggerIconFileDialog"}}
> >
Upload Upload
@ -50,7 +50,7 @@
{{/gh-uploader}} {{/gh-uploader}}
</figure> </figure>
</div> </div>
<div class="flex flex-column flex-grow-1"> <div class="flex-auto">
{{#gh-validation-status-container {{#gh-validation-status-container
class="flex flex-column w-100 mr3" class="flex flex-column w-100 mr3"
errors=integration.errors errors=integration.errors
@ -60,14 +60,14 @@
<label for="integration_name">Name</label> <label for="integration_name">Name</label>
{{gh-text-input {{gh-text-input
id="integration_name" id="integration_name"
class="gh-input" class="gh-input mt1 mb1"
type="text" type="text"
value=(readonly integration.name) value=(readonly integration.name)
input=(action (mut integration.name) value="target.value") input=(action (mut integration.name) value="target.value")
focus-out=(action "validate" "name" target=integration) focus-out=(action "validate" "name" target=integration)
data-test-input="name" data-test-input="name"
}} }}
{{gh-error-message errors=integration.errors property="name" data-test-error="name"}} {{gh-error-message errors=integration.errors property="name" data-test-error="name" class="ma0"}}
{{/gh-validation-status-container}} {{/gh-validation-status-container}}
{{#gh-validation-status-container {{#gh-validation-status-container
@ -76,31 +76,31 @@
hasValidated=integration.hasValidated hasValidated=integration.hasValidated
property="decription" property="decription"
}} }}
<label for="integration_description">Description</label> <label for="integration_description" class="mt3">Description</label>
{{gh-text-input {{gh-text-input
id="integration_description" id="integration_description"
class="gh-input" class="gh-input mt1"
type="text" type="text"
value=(readonly integration.description) value=(readonly integration.description)
input=(action (mut integration.description) value="target.value") input=(action (mut integration.description) value="target.value")
focus-out=(action "validate" "description" target=integration) focus-out=(action "validate" "description" target=integration)
data-test-input="description" data-test-input="description"
}} }}
{{gh-error-message errors=integration.errors property="description" data-test-error="description"}} {{gh-error-message errors=integration.errors property="description" data-test-error="description" class="ma0"}}
{{/gh-validation-status-container}} {{/gh-validation-status-container}}
</div> </div>
</div> </div>
</form> </form>
<div class="gh-setting-header">API Keys</div> <h4 class="mt15 midgrey f7 fw4 pb2 bb b--whitegrey">API Keys</h4>
<div class="flex flex-row"> <div class="flex flex-row mt5">
{{#with integration.contentKey as |contentKey|}} {{#with integration.contentKey as |contentKey|}}
{{#gh-validation-status-container class="flex flex-column w-100 mr3"}} {{#gh-validation-status-container class="flex flex-column w-100 mr5"}}
<div class="flex"> <div class="flex">
<label for="content_key" class="flex-grow-1"> <label for="content_key" class="flex-grow-1 darkgrey fw7 f8">
Content API Key Content API Key
</label> </label>
<span class="db"> <span class="db f8 midgrey">
{{#if copyContentKey.isRunning}} {{#if copyContentKey.isRunning}}
Copied to clipboard Copied to clipboard
{{else}} {{else}}
@ -108,16 +108,18 @@
{{/if}} {{/if}}
</span> </span>
</div> </div>
<div class="relative hide-child"> <div class="relative hide-child mt1">
<input id="content_key" <input id="content_key"
class="gh-input" class="w-100 pa3 bg-whitegrey-l2 midlightgrey ba b--whitegrey br3"
type="text" type="text"
value={{contentKey.secret}} value={{contentKey.secret}}
disabled="true" disabled="true"
data-test-input="content_key"> data-test-input="content_key">
<div class="absolute top-1 right-1 pt1 pr2 pb1 pl2 bg-white child"> <div class="absolute top-0 right-1">
<button type="button" {{action (perform copyContentKey)}}>Copy</button> <div class="pt1 pr3 pb1 pl3 bg-black-70 child br3 f8 nudge-top--6 nudge-right--1">
<button type="button" {{action (perform copyContentKey)}} class="white fw4">Copy</button>
</div>
</div> </div>
</div> </div>
{{/gh-validation-status-container}} {{/gh-validation-status-container}}
@ -125,10 +127,10 @@
{{#with integration.adminKey as |adminKey|}} {{#with integration.adminKey as |adminKey|}}
{{#gh-validation-status-container class="flex flex-column w-100 ml3"}} {{#gh-validation-status-container class="flex flex-column w-100 ml3"}}
<div class="flex"> <div class="flex">
<label for="admin_key" class="flex-grow-1"> <label for="admin_key" class="flex-grow-1 darkgrey fw7 f8">
Admin API Key Admin API Key
</label> </label>
<span class="db"> <span class="db f8 midgrey">
{{#if copyAdminKey.isRunning}} {{#if copyAdminKey.isRunning}}
Copied to clipboard Copied to clipboard
{{else}} {{else}}
@ -136,70 +138,78 @@
{{/if}} {{/if}}
</span> </span>
</div> </div>
<div class="relative hide-child"> <div class="relative hide-child mt1">
<input id="admin_key" <input id="admin_key"
class="gh-input" class="w-100 pa3 bg-whitegrey-l2 midlightgrey ba b--whitegrey br3"
type="text" type="text"
value={{adminKey.secret}} value={{adminKey.secret}}
disabled="true" disabled="true"
data-test-input="admin_key"> data-test-input="admin_key">
<div class="absolute top-1 right-1 pt1 pr2 pb1 pl2 bg-white child"> <div class="absolute top-0 right-1">
<button type="button" {{action (perform copyAdminKey)}}>Copy</button> <div class="pt1 pr3 pb1 pl3 bg-black-70 child br3 f8 nudge-top--6 nudge-right--1">
<button type="button" {{action (perform copyAdminKey)}} class="white fw4">Copy</button>
</div>
</div> </div>
</div> </div>
{{/gh-validation-status-container}} {{/gh-validation-status-container}}
{{/with}} {{/with}}
</div> </div>
<div class="gh-setting-header">Webhooks</div> <h4 class="mt15 midgrey f7 fw4">Webhooks</h4>
<div class="mb10 ba br3 b--lightgrey"> <div class="ba br3 b--lightgrey mt4">
<table class="ma0"> <table class="ma0 w-100">
<thead class="bb b--lightgrey"> <thead>
<tr> <tr>
<th class="pa3 br3 br--bottom br--right bg-lightgrey-l1">Name</th> <th class="pa2 pl3 midlightgrey fw4 f8 bg-whitegrey-l2 br3 br--top br--left fw6">Name</th>
<th class="pa3 bg-lightgrey-l1">Event</th> <th class="pa2 pl3 midlightgrey fw4 f8 bg-whitegrey-l2 br3 fw6">Event</th>
<th class="pa3 bg-lightgrey-l1">URL</th> <th class="pa2 pl3 midlightgrey fw4 f8 bg-whitegrey-l2 br3 fw6">URL</th>
<th class="pa3 bg-lightgrey-l1">Last triggered</th> <th class="pa2 pl3 midlightgrey fw4 f8 bg-whitegrey-l2 br3 fw6">Last triggered</th>
<th class="pa3 br3 br--top br--left bg-lightgrey-l1"></th> <th class="pa2 pl3 bg-whitegrey-l2 br3 br--top br--right"></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{{#each filteredWebhooks as |webhook|}} {{#each filteredWebhooks as |webhook|}}
<tr class="hide-child"> <tr class="hide-child bt b--whitegrey f7">
<td class="pa3">{{webhook.name}}</td> <td class="pa2 pl3">{{webhook.name}}</td>
<td class="pa3">{{event-name webhook.event}}</td> <td class="pa2 pl3">{{event-name webhook.event}}</td>
<td class="pa3">{{webhook.targetUrl}}</td> <td class="pa2 pl3">{{webhook.targetUrl}}</td>
<td class="pa3">{{or webhook.lastTriggeredAtUTC "Not triggered"}}</td> <td class="pa2 pl3">{{or webhook.lastTriggeredAtUTC "Not triggered"}}</td>
<td class="w1 pa3 nowrap"> <td class="w1 pa2 pl3 nowrap">
<div class="child"> <div class="child flex items-center">
{{#link-to "settings.integration.webhooks.edit" integration webhook}} {{#link-to "settings.integration.webhooks.edit" integration webhook}}
{{svg-jar "koenig/kg-thin-edit" class="w4 fill-black-80"}} {{svg-jar "pen" class="w6 h-auto fill-midgrey pa1 mr1"}}
{{/link-to}} {{/link-to}}
<button {{action "confirmWebhookDeletion" webhook}}> <button {{action "confirmWebhookDeletion" webhook}}>
{{svg-jar "trash" class="w4 fill-red"}} {{svg-jar "trash" class="w6 fill-red pa1"}}
</button> </button>
</div> </div>
</td> </td>
</tr> </tr>
{{else}} {{else}}
<tr> <tr class="bt b--whitegrey">
<td colspan="4" class="pa3"> <td colspan="5" class="pa5 pt15 pb15 tc midgrey f7">
No webhooks configured <span class="db">No webhooks configured</span>
<span class="dib mt1">
{{#link-to "settings.integration.webhooks.new" integration classNames="flex items-center"}}{{svg-jar "add" class="w3 h-auto fill-blue mr1"}} Add webhook{{/link-to}}
</span>
</td> </td>
</tr> </tr>
{{/each}} {{/each}}
</tbody> </tbody>
{{#if filteredWebhooks}}
<tfoot class="bt b--lightgrey"> <tfoot class="bt b--lightgrey">
<tr> <tr>
<td colspan="4" class="pa3"> <td colspan="5" class="pa3 f7">
{{#link-to "settings.integration.webhooks.new" integration}}+ Add webhook{{/link-to}} {{#link-to "settings.integration.webhooks.new" integration classNames="flex items-center"}}{{svg-jar "add" class="w3
h-auto fill-blue mr1"}} Add webhook{{/link-to}}
</td> </td>
</tr> </tr>
</tfoot> </tfoot>
{{/if}}
</table> </table>
</div> </div>
<button class="gh-btn gh-btn-red gh-btn-icon" {{action "confirmIntegrationDeletion"}}> <button class="gh-btn gh-btn-red gh-btn-icon mb15 mt15" {{action "confirmIntegrationDeletion"}}>
<span> Delete Integration </span> <span> Delete Integration </span>
</button> </button>
</section> </section>

2
ghost/admin/app/templates/settings/integrations.hbs
View file

@ -118,7 +118,7 @@
<div class="apps-card-left"> <div class="apps-card-left">
<figure class="apps-card-app-icon flex items-center" style={{integration-icon-style integration}}> <figure class="apps-card-app-icon flex items-center" style={{integration-icon-style integration}}>
{{#unless integration.iconImage}} {{#unless integration.iconImage}}
{{svg-jar "integration" class="w-100"}} {{svg-jar "integration" class="w-100 stroke-darkgrey"}}
{{/unless}} {{/unless}}
</figure> </figure>
<div class="apps-card-meta"> <div class="apps-card-meta">

2
ghost/admin/public/assets/icons/integration.svg
View file

@ -1 +1 @@
<svg width="48" height="40" viewBox="0 0 48 40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path stroke-opacity=".012" stroke="#000" stroke-width="0" d="M0-4h48v48H0z"/><g stroke="#54666D" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M5 1.002h38c2.667 0 4 1.333 4 4v30c0 2.667-1.333 4-4 4H5c-2.667 0-4-1.333-4-4v-30c0-2.667 1.333-4 4-4zM1 11.002h46"/><path d="M6.048 5.502c.333 0 .5.167.5.5 0 .333-.167.5-.5.5-.333 0-.5-.167-.5-.5 0-.138.048-.256.146-.354.098-.098.216-.147.354-.146M10.048 5.502c.333 0 .5.167.5.5 0 .333-.167.5-.5.5-.333 0-.5-.167-.5-.5 0-.138.048-.256.146-.354.098-.098.216-.147.354-.146M14.048 5.502c.333 0 .5.167.5.5 0 .333-.167.5-.5.5-.333 0-.5-.167-.5-.5 0-.138.048-.256.146-.354.098-.098.216-.147.354-.146M26 24.002c0 1.333-.667 2-2 2s-2-.667-2-2 .667-2 2-2 2 .667 2 2z"/><path d="M25.698 16.266l.59 1.936c.24.79.761 1.093 1.566.908l1.962-.456c.856-.192 1.503.092 1.94.853.437.76.357 1.462-.24 2.105l-1.374 1.482c-.56.605-.56 1.21 0 1.816l1.374 1.482c.597.643.677 1.345.24 2.105-.437.761-1.084 1.045-1.94.853l-1.962-.456c-.804-.184-1.326.12-1.566.908l-.59 1.936c-.25.848-.816 1.272-1.7 1.272s-1.45-.424-1.7-1.272l-.59-1.936c-.24-.789-.762-1.092-1.566-.908l-1.962.456c-.856.192-1.503-.092-1.94-.853-.437-.76-.357-1.462.24-2.105l1.374-1.482c.56-.605.56-1.21 0-1.816l-1.374-1.482c-.597-.643-.677-1.345-.24-2.105.437-.761 1.084-1.045 1.94-.853l1.962.456c.805.185 1.327-.118 1.566-.908l.59-1.936c.25-.848.816-1.272 1.7-1.272s1.45.424 1.7 1.272z"/></g></g></svg> <svg width="46" height="43" viewBox="0 0 46 43" xmlns="http://www.w3.org/2000/svg"><g stroke="#000" fill="none" fill-rule="evenodd"><path stroke-opacity=".012" stroke-width="0" d="M-1-3h48v48H-1z"/><g stroke-linecap="round" stroke-linejoin="round"><path d="M32.932 6.574c.713.428 1.069 1.057 1.068 1.888v9.278l-11 7.076-11-7.076V8.462c0-.831.355-1.46 1.068-1.888l8.8-5.28c.755-.453 1.51-.453 2.264 0l8.8 5.28zM23 13.816v11"/><path d="M34 31.416l-11-6.6 11-7.076 10 6.426c.669.435 1.002 1.052 1 1.85v8.124c.002.798-.331 1.415-1 1.85l-8.8 5.66c-.793.51-1.587.51-2.38 0L23 35.34V24.816M34 31.416V42M23 24.816V35.34l-9.8 6.31c-.793.51-1.587.51-2.38 0l-8.8-5.66c-.678-.43-1.018-1.047-1.02-1.85v-8.124c-.002-.798.331-1.415 1-1.85l10-6.426 11 7.076-11 6.6M12 31.416L1.262 24.974M12 31.416V42M23 13.816L12.282 7.384M33.718 7.384L23 13.816M44.738 24.974L34 31.416"/></g></g></svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 871 B