From 3f7a036905f7afed83a9bb4371d38895b205fa5d Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Wed, 24 Oct 2018 15:04:17 +0200 Subject: [PATCH] Integration UI refinements (#1059) 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 --- .../app/controllers/settings/integration.js | 2 +- .../components/modal-new-integration.hbs | 4 +- .../components/modal-webhook-form.hbs | 17 +-- .../app/templates/settings/integration.hbs | 112 ++++++++++-------- .../app/templates/settings/integrations.hbs | 2 +- .../admin/public/assets/icons/integration.svg | 2 +- 6 files changed, 75 insertions(+), 64 deletions(-) diff --git a/ghost/admin/app/controllers/settings/integration.js b/ghost/admin/app/controllers/settings/integration.js index c17d932702..856a9681a1 100644 --- a/ghost/admin/app/controllers/settings/integration.js +++ b/ghost/admin/app/controllers/settings/integration.js @@ -33,7 +33,7 @@ export default Controller.extend({ if (url) { let styles = [ `background-image: url(${url})`, - 'background-size: 100%', + 'background-size: 50%', 'background-position: 50%', 'background-repeat: no-repeat' ]; diff --git a/ghost/admin/app/templates/components/modal-new-integration.hbs b/ghost/admin/app/templates/components/modal-new-integration.hbs index 64f5a2e2ed..7400c847af 100644 --- a/ghost/admin/app/templates/components/modal-new-integration.hbs +++ b/ghost/admin/app/templates/components/modal-new-integration.hbs @@ -6,12 +6,12 @@
{{#gh-form-group errors=integration.errors hasValidated=integration.hasValidated property="name"}} - +
{{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="name"}} - + {{gh-text-input value=(readonly webhook.name) input=(action (mut webhook.name) value="target.value") focus-out=(action "validate" "name" target=webhook) id="new-webhook-name" name="name" - class="gh-input" + class="gh-input mt1" placeholder="Webhook name..." autofocus="autofocus" autocapitalize="off" @@ -24,15 +24,16 @@
{{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="event"}} - + {{one-way-select webhook.event options=availableEvents optionValuePath="event" optionLabelPath="name" optionTargetPath="event" + class="mt1" includeBlank=true - prompt="Select an event:" + prompt="Select an event" update=(action "selectEvent") id="new-webhook-event" name="event" @@ -44,14 +45,14 @@
{{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="targetUrl"}} - + {{gh-text-input value=(readonly webhook.targetUrl) input=(action (mut webhook.targetUrl) value="target.value") focus-out=(action "validate" "targetUrl" target=webhook) id="new-webhook-targetUrl" name="targetUrl" - class="gh-input" + class="gh-input mt1" placeholder="Webhook target URL..." autofocus="autofocus" autocapitalize="off" @@ -62,14 +63,14 @@
{{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="secret"}} - + {{gh-text-input value=(readonly webhook.secret) oninput=(action (mut webhook.secret) value="target.value") focus-out=(action "validate" "secret" target=webhook) id="new-webhook-secret" name="secret" - class="gh-input" + class="gh-input mt1" placeholder="Webhook secret..." autofocus="autofocus" autocapitalize="off" diff --git a/ghost/admin/app/templates/settings/integration.hbs b/ghost/admin/app/templates/settings/integration.hbs index 8ed8982e74..4afda1464b 100644 --- a/ghost/admin/app/templates/settings/integration.hbs +++ b/ghost/admin/app/templates/settings/integration.hbs @@ -11,13 +11,13 @@ -
-
+
+
-
+
{{#aspect-ratio-box class="flex items-center h-100" ratio="1/1" base="height"}} {{#unless integration.iconImage}} - {{svg-jar "integration" class="w-100"}} + {{svg-jar "integration" class="w14 h-auto stroke-darkgrey"}} {{/unless}} {{/aspect-ratio-box}} @@ -27,13 +27,13 @@ as |uploader| }} {{#if uploader.isUploading}} -
+
{{uploader.progressBar}}
{{else}}
-
+
{{#gh-validation-status-container class="flex flex-column w-100 mr3" errors=integration.errors @@ -60,14 +60,14 @@ {{gh-text-input id="integration_name" - class="gh-input" + class="gh-input mt1 mb1" type="text" value=(readonly integration.name) input=(action (mut integration.name) value="target.value") focus-out=(action "validate" "name" target=integration) 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 @@ -76,31 +76,31 @@ hasValidated=integration.hasValidated property="decription" }} - + {{gh-text-input id="integration_description" - class="gh-input" + class="gh-input mt1" type="text" value=(readonly integration.description) input=(action (mut integration.description) value="target.value") focus-out=(action "validate" "description" target=integration) 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}}
-
API Keys
-
+

API Keys

+
{{#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"}}
-
-
+
-
- +
+
+ +
{{/gh-validation-status-container}} @@ -125,10 +127,10 @@ {{#with integration.adminKey as |adminKey|}} {{#gh-validation-status-container class="flex flex-column w-100 ml3"}}
-
-
+
-
- +
+
+ +
{{/gh-validation-status-container}} {{/with}}
-
Webhooks
-
- - +

Webhooks

+
+
+ - - - - - + + + + + {{#each filteredWebhooks as |webhook|}} - - - - - - + + + + + {{else}} - - + {{/each}} + {{#if filteredWebhooks}} - + {{/if}}
NameEventURLLast triggeredNameEventURLLast triggered
{{webhook.name}}{{event-name webhook.event}}{{webhook.targetUrl}}{{or webhook.lastTriggeredAtUTC "Not triggered"}} -
+
{{webhook.name}}{{event-name webhook.event}}{{webhook.targetUrl}}{{or webhook.lastTriggeredAtUTC "Not triggered"}} +
{{#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}}
- No webhooks configured +
+ No webhooks configured + + {{#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}} +
- {{#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}}
- diff --git a/ghost/admin/app/templates/settings/integrations.hbs b/ghost/admin/app/templates/settings/integrations.hbs index 6ec65a8eda..b203a516f7 100644 --- a/ghost/admin/app/templates/settings/integrations.hbs +++ b/ghost/admin/app/templates/settings/integrations.hbs @@ -118,7 +118,7 @@
{{#unless integration.iconImage}} - {{svg-jar "integration" class="w-100"}} + {{svg-jar "integration" class="w-100 stroke-darkgrey"}} {{/unless}}
diff --git a/ghost/admin/public/assets/icons/integration.svg b/ghost/admin/public/assets/icons/integration.svg index bda5598c0b..302b3f0512 100644 --- a/ghost/admin/public/assets/icons/integration.svg +++ b/ghost/admin/public/assets/icons/integration.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file