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
This commit is contained in:
Peter Zimon
Kevin Ansfield
parent
d7facd5c61
commit
5f6d9d2c89
|
|
@ -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'
|
||||
];
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@
|
|||
<div class="modal-body">
|
||||
<fieldset>
|
||||
{{#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"
|
||||
value={{integration.name}}
|
||||
oninput={{action "updateName" value="target.value"}}
|
||||
id="new-integration-name"
|
||||
class="gh-input"
|
||||
class="gh-input mt1"
|
||||
placeholder="Integration name..."
|
||||
name="integration-name"
|
||||
autofocus="autofocus"
|
||||
|
|
|
|||
|
|
@ -6,14 +6,14 @@
|
|||
<div class="modal-body">
|
||||
<fieldset>
|
||||
{{#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
|
||||
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 @@
|
|||
</fieldset>
|
||||
<fieldset>
|
||||
{{#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">
|
||||
{{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 @@
|
|||
</fieldset>
|
||||
<fieldset>
|
||||
{{#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
|
||||
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 @@
|
|||
</fieldset>
|
||||
<fieldset>
|
||||
{{#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
|
||||
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"
|
||||
|
|
|
|||
|
|
@ -11,13 +11,13 @@
|
|||
</section>
|
||||
</header>
|
||||
|
||||
<div class="flex flex-row">
|
||||
<div class="flex flex-column mr8">
|
||||
<div class="flex">
|
||||
<div class="flex flex-column mr8 items-start">
|
||||
<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"}}
|
||||
{{#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}}
|
||||
<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}}
|
||||
</div>
|
||||
{{else}}
|
||||
<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"}}
|
||||
>
|
||||
Upload
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
{{/gh-uploader}}
|
||||
</figure>
|
||||
</div>
|
||||
<div class="flex flex-column flex-grow-1">
|
||||
<div class="flex-auto">
|
||||
{{#gh-validation-status-container
|
||||
class="flex flex-column w-100 mr3"
|
||||
errors=integration.errors
|
||||
|
|
@ -60,14 +60,14 @@
|
|||
<label for="integration_name">Name</label>
|
||||
{{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"
|
||||
}}
|
||||
<label for="integration_description">Description</label>
|
||||
<label for="integration_description" class="mt3">Description</label>
|
||||
{{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}}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="gh-setting-header">API Keys</div>
|
||||
<div class="flex flex-row">
|
||||
<h4 class="mt15 midgrey f7 fw4 pb2 bb b--whitegrey">API Keys</h4>
|
||||
<div class="flex flex-row mt5">
|
||||
{{#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">
|
||||
<label for="content_key" class="flex-grow-1">
|
||||
<label for="content_key" class="flex-grow-1 darkgrey fw7 f8">
|
||||
Content API Key
|
||||
</label>
|
||||
<span class="db">
|
||||
<span class="db f8 midgrey">
|
||||
{{#if copyContentKey.isRunning}}
|
||||
Copied to clipboard
|
||||
{{else}}
|
||||
|
|
@ -108,16 +108,18 @@
|
|||
{{/if}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="relative hide-child">
|
||||
<div class="relative hide-child mt1">
|
||||
<input id="content_key"
|
||||
class="gh-input"
|
||||
class="w-100 pa3 bg-whitegrey-l2 midlightgrey ba b--whitegrey br3"
|
||||
type="text"
|
||||
value={{contentKey.secret}}
|
||||
disabled="true"
|
||||
data-test-input="content_key">
|
||||
|
||||
<div class="absolute top-1 right-1 pt1 pr2 pb1 pl2 bg-white child">
|
||||
<button type="button" {{action (perform copyContentKey)}}>Copy</button>
|
||||
<div class="absolute top-0 right-1">
|
||||
<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>
|
||||
{{/gh-validation-status-container}}
|
||||
|
|
@ -125,10 +127,10 @@
|
|||
{{#with integration.adminKey as |adminKey|}}
|
||||
{{#gh-validation-status-container class="flex flex-column w-100 ml3"}}
|
||||
<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
|
||||
</label>
|
||||
<span class="db">
|
||||
<span class="db f8 midgrey">
|
||||
{{#if copyAdminKey.isRunning}}
|
||||
Copied to clipboard
|
||||
{{else}}
|
||||
|
|
@ -136,70 +138,78 @@
|
|||
{{/if}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="relative hide-child">
|
||||
<div class="relative hide-child mt1">
|
||||
<input id="admin_key"
|
||||
class="gh-input"
|
||||
class="w-100 pa3 bg-whitegrey-l2 midlightgrey ba b--whitegrey br3"
|
||||
type="text"
|
||||
value={{adminKey.secret}}
|
||||
disabled="true"
|
||||
data-test-input="admin_key">
|
||||
|
||||
<div class="absolute top-1 right-1 pt1 pr2 pb1 pl2 bg-white child">
|
||||
<button type="button" {{action (perform copyAdminKey)}}>Copy</button>
|
||||
<div class="absolute top-0 right-1">
|
||||
<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>
|
||||
{{/gh-validation-status-container}}
|
||||
{{/with}}
|
||||
</div>
|
||||
|
||||
<div class="gh-setting-header">Webhooks</div>
|
||||
<div class="mb10 ba br3 b--lightgrey">
|
||||
<table class="ma0">
|
||||
<thead class="bb b--lightgrey">
|
||||
<h4 class="mt15 midgrey f7 fw4">Webhooks</h4>
|
||||
<div class="ba br3 b--lightgrey mt4">
|
||||
<table class="ma0 w-100">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="pa3 br3 br--bottom br--right bg-lightgrey-l1">Name</th>
|
||||
<th class="pa3 bg-lightgrey-l1">Event</th>
|
||||
<th class="pa3 bg-lightgrey-l1">URL</th>
|
||||
<th class="pa3 bg-lightgrey-l1">Last triggered</th>
|
||||
<th class="pa3 br3 br--top br--left bg-lightgrey-l1"></th>
|
||||
<th class="pa2 pl3 midlightgrey fw4 f8 bg-whitegrey-l2 br3 br--top br--left fw6">Name</th>
|
||||
<th class="pa2 pl3 midlightgrey fw4 f8 bg-whitegrey-l2 br3 fw6">Event</th>
|
||||
<th class="pa2 pl3 midlightgrey fw4 f8 bg-whitegrey-l2 br3 fw6">URL</th>
|
||||
<th class="pa2 pl3 midlightgrey fw4 f8 bg-whitegrey-l2 br3 fw6">Last triggered</th>
|
||||
<th class="pa2 pl3 bg-whitegrey-l2 br3 br--top br--right"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each filteredWebhooks as |webhook|}}
|
||||
<tr class="hide-child">
|
||||
<td class="pa3">{{webhook.name}}</td>
|
||||
<td class="pa3">{{event-name webhook.event}}</td>
|
||||
<td class="pa3">{{webhook.targetUrl}}</td>
|
||||
<td class="pa3">{{or webhook.lastTriggeredAtUTC "Not triggered"}}</td>
|
||||
<td class="w1 pa3 nowrap">
|
||||
<div class="child">
|
||||
<tr class="hide-child bt b--whitegrey f7">
|
||||
<td class="pa2 pl3">{{webhook.name}}</td>
|
||||
<td class="pa2 pl3">{{event-name webhook.event}}</td>
|
||||
<td class="pa2 pl3">{{webhook.targetUrl}}</td>
|
||||
<td class="pa2 pl3">{{or webhook.lastTriggeredAtUTC "Not triggered"}}</td>
|
||||
<td class="w1 pa2 pl3 nowrap">
|
||||
<div class="child flex items-center">
|
||||
{{#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}}
|
||||
<button {{action "confirmWebhookDeletion" webhook}}>
|
||||
{{svg-jar "trash" class="w4 fill-red"}}
|
||||
{{svg-jar "trash" class="w6 fill-red pa1"}}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{else}}
|
||||
<tr>
|
||||
<td colspan="4" class="pa3">
|
||||
No webhooks configured
|
||||
<tr class="bt b--whitegrey">
|
||||
<td colspan="5" class="pa5 pt15 pb15 tc midgrey f7">
|
||||
<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>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
{{#if filteredWebhooks}}
|
||||
<tfoot class="bt b--lightgrey">
|
||||
<tr>
|
||||
<td colspan="4" class="pa3">
|
||||
{{#link-to "settings.integration.webhooks.new" integration}}+ Add webhook{{/link-to}}
|
||||
<td colspan="5" class="pa3 f7">
|
||||
{{#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>
|
||||
</tr>
|
||||
</tfoot>
|
||||
{{/if}}
|
||||
</table>
|
||||
</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>
|
||||
</button>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@
|
|||
<div class="apps-card-left">
|
||||
<figure class="apps-card-app-icon flex items-center" style={{integration-icon-style integration}}>
|
||||
{{#unless integration.iconImage}}
|
||||
{{svg-jar "integration" class="w-100"}}
|
||||
{{svg-jar "integration" class="w-100 stroke-darkgrey"}}
|
||||
{{/unless}}
|
||||
</figure>
|
||||
<div class="apps-card-meta">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 871 B |
Loading…
Reference in New Issue