TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-26 12:21:36 +03:00
Code Issues Projects Releases Wiki Activity

Updated integrations UI (#1086)

Browse Source 
no issue

Updated custom integrations section for a more balanced and consistent design:
- removed green "New custom integration" button and added a fixed bottom row in the custom integrations list
- added "Custom integrations" heading to the list
- synced webhooks design with this pattern
This commit is contained in:
Peter Zimon 2019-01-28 13:53:48 +01:00 committed by Kevin Ansfield
parent c763b3218e
commit c4a8a1cbaa
4 changed files with 72 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
ghost/admin/app/styles/layouts/apps.css
View File

@ -133,8 +133,9 @@
.apps-grid-cell {
flex: 1 1 100%;
}
.apps-grid-cell:hover {
background: color-mod(var(--lightgrey) l(+5%));
background: color-mod(var(--lightgrey) l(+6%) s(-2%));
}
.apps-card-app {
@ -148,11 +149,21 @@
transition: background 0.3s ease;
}
.new-integration-cell .apps-card-app {
padding: 10px 14px;
height: auto;
}
@media (max-width: 500px) {
.apps-card-app {
min-height: 75px;
height: auto;
}
.new-integration-cell .apps-card-app {
min-height: auto;
height: auto;
}
}
.apps-grid-cell:first-of-type .apps-card-app {
@ -229,7 +240,7 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 1.7rem;
font-size: 1.75rem;
line-height: 1.15em;
font-weight: bold;
}
@ -276,6 +287,7 @@
margin-top: 15px;
width: 100%;
}
/* Slack
/* ---------------------------------------------------------- */
@ -333,3 +345,14 @@
.app-config-form > .gh-btn-grey:focus {
border-color: rgb(223, 225, 227);
}
/* Custom Integrations
/* ---------------------------------------------------------- */
.new-webhook-cell td {
padding: 0;
}
.new-webhook-cell:hover {
background: color-mod(var(--lightgrey) l(+6%) s(-2%));
}

30
ghost/admin/app/templates/settings/integration.hbs
View File

@ -17,7 +17,7 @@
<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="w14 h14 stroke-darkgrey"}}
{{svg-jar "integration" class="w14 h14"}}
{{/unless}}
{{/aspect-ratio-box}}
@ -191,22 +191,32 @@
{{else}}
<tr class="bt b--whitegrey" data-test-webhooks-blank-slate>
<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" data-test-link="add-webhook"}}
{{svg-jar "add" class="w3 h3 fill-blue mr1"}} Add webhook
<div class="flex flex-column items-center">
<p class="ma0 pa0 tc midgrey lh-title mt2">
No webhooks configured
</p>
{{#link-to "settings.integration.webhooks.new" integration classNames="flex items-center"
data-test-link="add-webhook"}}
<div class="flex items-center pa2 pt1">
{{svg-jar "add" class="w3 h3 fill-blue-d1"}}
<span class="ml1 blue">Add webhook</span>
</div>
{{/link-to}}
</span>
</div>
</td>
</tr>
{{/each}}
</tbody>
{{#if filteredWebhooks}}
<tfoot class="bt b--lightgrey">
<tr>
<td colspan="5" class="pa3 f7">
{{#link-to "settings.integration.webhooks.new" integration classNames="flex items-center" data-test-link="add-webhook"}}
{{svg-jar "add" class="w3 h3 fill-blue mr1"}} Add webhook
<tr class="new-webhook-cell">
<td colspan="5">
{{#link-to "settings.integration.webhooks.new" integration classNames="flex items-center"
data-test-link="add-webhook"}}
<div class="pa3 f7">
{{svg-jar "add" class="w3 h3 fill-blue-d1"}}
<span class="ml1 blue">Add webhook</span>
</div>
{{/link-to}}
</td>
</tr>

37
ghost/admin/app/templates/settings/integrations.hbs
View File

@ -156,13 +156,8 @@
</section>
<section class="apps-grid-container pt6">
<div class="flex flex-row items-center pb2">
<span class="dib flex-grow-1 midgrey">Custom integrations</span>
{{#link-to "settings.integrations.new" class="gh-btn gh-btn-green" data-test-button="new-integration"}}
<span>Add custom integration</span>
{{/link-to}}
</div>
<span class="apps-grid-title pb2">Custom integrations</span>
<div class="apps-grid">
{{#each integrations as |integration|}}
<div class="apps-grid-cell" data-test-custom-integration>
@ -193,17 +188,37 @@
{{/link-to}}
</div>
{{else}}
<div class="flex flex-column justify-center items-center mih40 miw-100" data-test-blank="custom-integrations">
<div class="flex flex-column justify-center items-center mih30 miw-100" data-test-blank="custom-integrations">
{{#if fetchIntegrations.isRunning}}
<div class="gh-loading-spinner"></div>
{{else}}
<p class="ma0 pa0 tc midgrey lh-title">
Create your own custom Ghost integrations<br>
with dedicated API keys & webhooks
</p>
<div class="flex flex-column items-center pa5 pt15 pb15">
<p class="ma0 pa0 tc midgrey lh-title mt2">
Create your own custom Ghost integrations with dedicated API keys & webhooks
</p>
{{#link-to "settings.integrations.new" class="" data-test-button="new-integration"}}
<div class="flex items-center pa2 pt1">
{{svg-jar "add" class="w3 h3 fill-blue-d1"}}
<span class="db ml1 blue nudge-bottom--1">Add custom integration</span>
</div>
{{/link-to}}
</div>
{{/if}}
</div>
{{/each}}
{{#if integrations}}
<div class="apps-grid-cell new-integration-cell">
{{#link-to "settings.integrations.new" class="" data-test-button="new-integration"}}
<article class="apps-card-app">
<div class="flex items-center">
{{svg-jar "add" class="w3 h3 fill-blue-d1"}}
<span class="db ml1 blue nudge-bottom--1 fw4">Add custom integration</span>
</div>
</article>
{{/link-to}}
</div>
{{/if}}
</div>
</section>
</section>

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

@ -1 +1 @@
<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>
<svg width="46" height="43" viewBox="0 0 46 43" xmlns="http://www.w3.org/2000/svg"><g stroke="#343f44" 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: 871 B

After

Width:  |  Height:  |  Size: 874 B