tqt/Ghost-Admin
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost-Admin.git synced 2023-12-14 02:33:04 +01:00
Code Issues Releases Wiki Activity

Zapier templates update (#1783)

Browse source 
- updated Zapier templates page to show the most relevant Zaps instead of the latest
- fixed design regression in Slack, Amp and Unsplash integration pages
This commit is contained in:
Peter Zimon 2020-11-25 11:31:15 +01:00 committed by GitHub
parent bca926b5ee
commit 4a9144e118
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 262 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
app/styles/layouts/apps.css
View file

@ -390,3 +390,56 @@
.new-webhook-cell:hover {
background: var(--whitegrey-l2);
}
/* Zapier templates */
/* ---------------------------------------------------------- */
.gh-settings-zapier-templates .apps-grid-cell:hover {
background: var(--white);
}
.zapier-template-link:hover {
border-color: #f04600;
}
.zapier-template-link span {
transition: all 0.2s ease;
transition-property: color;
}
.zapier-template-link:hover span {
color: #f04600;
}
.gh-settings-zapier-templates .apps-card-app-title {
margin-left: 8px;
white-space: unset;
}
.gh-settings-zapier-templates .apps-card-app {
height: 68px;
}
.gh-settings-zapier-templates .gh-card-right {
display: flex;
flex-direction: column;
justify-content: center;
}
.zapier-footer,
.zapier-footer a {
display: flex;
justify-content: flex-end;
align-items: center;
color: var(--midgrey);
font-size: 1.3rem;
}
.zapier-footer figure {
margin: 0 0 2px;
width: 47px;
height: 47px;
background-position: 50%;
background-size: cover;
background-repeat: no-repeat;
border-radius: 15%;
}

9
app/styles/layouts/settings.css
View file

@ -896,3 +896,12 @@ p.theme-validation-details {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.gh-setting-amp-liquid {
padding-left: 40px;
padding-right: 40px;
}
.gh-setting-unsplash-checkbox {
margin-bottom: 0;
}

8
app/templates/settings/integration.hbs
View file

@ -94,7 +94,7 @@
<table class="ma0 mt5" style="table-layout: fixed">
<tbody>
<tr>
<td class="pa3 pl0 fw7 f8 w35 v-top">Content API Key</td>
<td class="pa3 pl0 fw7 f8 w35 v-top">Content API key</td>
<td class="pa0 bb b--lightgrey">
<div class="pt3 pb3 relative flex items-center {{unless this.copyContentKey.isRunning "hide-child-instant"}}">
<span class="midlightgrey truncate" data-test-text="content-key">
@ -119,7 +119,7 @@
</td>
</tr>
<tr>
<td class="pa3 pl0 w50 fw7 f8 w35 v-top">Admin API Key</td>
<td class="pa3 pl0 w50 fw7 f8 w35 v-top">Admin API key</td>
<td class="pa0 bb b--lightgrey">
<div class="pt3 pb3 relative flex items-center {{unless this.copyAdminKey.isRunning "hide-child-instant"}}">
<span class="midlightgrey truncate" data-test-text="admin-key">
@ -139,7 +139,7 @@
</div>
</div>
{{#if (eq this.regeneratedKeyType this.integration.adminKey.type)}}
<div class="green nt3 mb2"> Admin API Key was successfully regenerated </div>
<div class="green nt3 mb2"> Admin API key was successfully regenerated </div>
{{/if}}
</td>
</tr>
@ -234,7 +234,7 @@
</table>
</div>
<button class="gh-btn gh-btn-red gh-btn-icon mb15 mt15" {{action "confirmIntegrationDeletion"}}>
<span> Delete Integration </span>
<span> Delete integration </span>
</button>
</section>

6
app/templates/settings/integrations/amp.hbs
View file

@ -31,7 +31,7 @@
</section>
<div class="gh-setting-header gh-first-header">AMP configuration</div>
<div class="flex flex-column br4 shadow-1 bg-grouped-table pa8 mt2">
<div class="flex flex-column br4 shadow-1 bg-grouped-table pa5 mt2">
<div class="gh-setting-first">
<div class="gh-setting-content">
<div class="gh-setting-title">Enable AMP</div>
@ -53,8 +53,8 @@
</div>
</div>
</div>
{{#liquid-if this.settings.amp}}
<div class="gh-setting-last">
{{#liquid-if this.settings.amp class="nl5 nr5"}}
<div class="gh-setting-last gh-setting-amp-liquid">
<div class="gh-setting-content gh-setting-content--no-action">
<div class="gh-setting-title">Google Analytics Tracking ID</div>
<div class="gh-setting-desc">Tracks AMP traffic in Google Analytics, find your ID <a href="https://ghost.org/faq/how-to-find-your-google-analytics-tracking-id/">here</a></div>

2
app/templates/settings/integrations/slack.hbs
View file

@ -33,7 +33,7 @@
<form class="app-config-form" id="slack-settings" novalidate="novalidate" {{action "save" on="submit"}}>
<div class="gh-setting-header gh-first-header">Slack configuration</div>
<div class="flex flex-column br4 shadow-1 bg-grouped-table pa8 mt2">
<div class="flex flex-column br4 shadow-1 bg-grouped-table pa5 mt2">
<div class="gh-setting-first">
<div class="gh-setting-content gh-setting-content--no-action">
<div class="gh-setting-title">Webhook URL</div>

4
app/templates/settings/integrations/unsplash.hbs
View file

@ -31,14 +31,14 @@
</section>
<div class="gh-setting-header gh-first-header">Unsplash configuration</div>
<div class="flex flex-column br4 shadow-1 bg-grouped-table pa8 pb4 mt2">
<div class="flex flex-column br4 shadow-1 bg-grouped-table pa5 mt2">
<div class="gh-setting-first gh-setting-last" id="unsplash-toggle">
<div class="gh-setting-content">
<div class="gh-setting-title">Enable Unsplash</div>
<div class="gh-setting-desc">Enable <a href="https://unsplash.com" target="_blank">Unsplash</a> image integration for your posts</div>
</div>
<div class="gh-setting-action">
<div class="form-group right">
<div class="form-group right gh-setting-unsplash-checkbox">
<div class="for-checkbox">
<label for="isActive" class="checkbox">
<input

168
app/templates/settings/integrations/zapier.hbs
View file

@ -24,7 +24,7 @@
<table class="ma0 shadow-1 bg-grouped-table br3" style="table-layout: fixed">
<tbody>
<tr class="bb b--lightgrey">
<td class="pa3 w50 fw7 v-top">Admin API Key</td>
<td class="pa3 w50 fw7 v-top">Admin API key</td>
<td class="pa0">
<div class="pa3 relative flex items-center {{unless this.copyAdminKey.isRunning "hide-child-instant"}}">
<span class="midgrey truncate" data-test-text="admin-key">
@ -75,15 +75,169 @@
<div class="mt12" id="zapier-toggle">
<div class="gh-setting-content gh-setting-content--no-action">
<div class="gh-setting-title">Zapier Templates</div>
<div class="gh-setting-title">Zapier templates</div>
<div class="gh-setting-desc mt1">Explore pre-built templates for common automation tasks</div>
<div class="gh-setting-content-extended">
<div id="zapier-templates">
{{!-- we don't want the script loading during tests because it errors --}}
{{#unless this.isTesting}}
<script src="https://zapier.com/apps/embed/widget.js?services=ghost&container=true&limit=10&html_id=zapier-templates"></script>
{{/unless}}
<div class="apps-grid gh-settings-zapier-templates">
<div class="apps-grid-cell">
<article class="apps-card-app">
<div class="apps-card-left">
<div class="flex items-center">
{{svg-jar "ghost-squircle" class="w8 h8"}}
{{svg-jar "arrow-right" class="fill-midgrey w4 ml2"}}
<figure class="apps-card-app-icon" style="background-image:url(assets/img/twitter.svg);background-size:32px;"></figure>
</div>
<div class="apps-card-meta">
<h3 class="apps-card-app-title">Share new posts to Twitter</h3>
</div>
</div>
<div class="gh-card-right">
<a href="https://zapier.com/app/editor/template/50909" target="_blank" rel="noopener" class="gh-btn gh-btn-outline zapier-template-link"><span>Use this Zap</span></a>
</div>
</article>
</div>
<div class="apps-grid-cell">
<article class="apps-card-app">
<div class="apps-card-left">
<div class="flex items-center">
{{svg-jar "ghost-squircle" class="w8 h8"}}
{{svg-jar "arrow-right" class="fill-midgrey w4 ml2"}}
<figure class="apps-card-app-icon" style="background-image:url(assets/img/slackicon.png);background-size:30px;"></figure>
</div>
<div class="apps-card-meta">
<h3 class="apps-card-app-title">Share scheduled posts with your team in Slack</h3>
</div>
</div>
<div class="gh-card-right">
<a href="https://zapier.com/app/editor/template/359499" target="_blank" rel="noopener" class="gh-btn gh-btn-outline zapier-template-link"><span>Use this Zap</span></a>
</div>
</article>
</div>
<div class="apps-grid-cell">
<article class="apps-card-app">
<div class="apps-card-left">
<div class="flex items-center">
{{svg-jar "ghost-squircle" class="w8 h8"}}
{{svg-jar "arrow-right" class="fill-midgrey w4 ml2"}}
<figure class="apps-card-app-icon" style="background-image:url(assets/img/patreon.svg);background-size:28px;"></figure>
</div>
<div class="apps-card-meta">
<h3 class="apps-card-app-title">Connect Patreon to your Ghost membership site</h3>
</div>
</div>
<div class="gh-card-right">
<a href="https://zapier.com/app/editor/template/75801" target="_blank" rel="noopener" class="gh-btn gh-btn-outline zapier-template-link"><span>Use this Zap</span></a>
</div>
</article>
</div>
<div class="apps-grid-cell">
<article class="apps-card-app">
<div class="apps-card-left">
<div class="flex items-center">
{{svg-jar "ghost-squircle" class="w8 h8"}}
{{svg-jar "arrow-right" class="fill-midgrey w4 ml2"}}
<figure class="apps-card-app-icon" style="background-image:url(assets/img/zero-bounce.png);background-size:30px;"></figure>
</div>
<div class="apps-card-meta">
<h3 class="apps-card-app-title">Protect email delivery with email verification</h3>
</div>
</div>
<div class="gh-card-right">
<a href="https://zapier.com/app/editor/template/359415" target="_blank" rel="noopener" class="gh-btn gh-btn-outline zapier-template-link"><span>Use this Zap</span></a>
</div>
</article>
</div>
<div class="apps-grid-cell">
<article class="apps-card-app">
<div class="apps-card-left">
<div class="flex items-center">
{{svg-jar "ghost-squircle" class="w8 h8"}}
{{svg-jar "arrow-right" class="fill-midgrey w4 ml2"}}
<figure class="apps-card-app-icon" style="background-image:url(assets/img/paypal.svg);background-size:26px;"></figure>
</div>
<div class="apps-card-meta">
<h3 class="apps-card-app-title">Add members for successful sales in PayPal</h3>
</div>
</div>
<div class="gh-card-right">
<a href="https://zapier.com/app/editor/template/184423" target="_blank" rel="noopener" class="gh-btn gh-btn-outline zapier-template-link"><span>Use this Zap</span></a>
</div>
</article>
</div>
<div class="apps-grid-cell">
<article class="apps-card-app">
<div class="apps-card-left">
<div class="flex items-center">
{{svg-jar "ghost-squircle" class="w8 h8"}}
{{svg-jar "arrow-right" class="fill-midgrey w4 ml2"}}
<figure class="apps-card-app-icon" style="background-image:url(assets/img/paypal.svg);background-size:26px;"></figure>
</div>
<div class="apps-card-meta">
<h3 class="apps-card-app-title">Unsubscribe members who cancel a subscription in PayPal</h3>
</div>
</div>
<div class="gh-card-right">
<a href="https://zapier.com/app/editor/template/359348" target="_blank" rel="noopener" class="gh-btn gh-btn-outline zapier-template-link"><span>Use this Zap</span></a>
</div>
</article>
</div>
<div class="apps-grid-cell">
<article class="apps-card-app">
<div class="apps-card-left">
<div class="flex items-center">
{{svg-jar "ghost-squircle" class="w8 h8"}}
{{svg-jar "arrow-right" class="fill-midgrey w4 ml2"}}
<figure class="apps-card-app-icon" style="background-image:url(assets/img/google-docs.svg);background-size:22px;"></figure>
</div>
<div class="apps-card-meta">
<h3 class="apps-card-app-title">Send new post drafts from Google Docs to Ghost</h3>
</div>
</div>
<div class="gh-card-right">
<a href="https://zapier.com/app/editor/template/50924" target="_blank" rel="noopener" class="gh-btn gh-btn-outline zapier-template-link"><span>Use this Zap</span></a>
</div>
</article>
</div>
<div class="apps-grid-cell">
<article class="apps-card-app">
<div class="apps-card-left">
<div class="flex items-center">
{{svg-jar "ghost-squircle" class="w8 h8"}}
{{svg-jar "arrow-right" class="fill-midgrey w4 ml2"}}
<figure class="apps-card-app-icon" style="background-image:url(assets/img/typeform.svg);background-size:32px;"></figure>
</div>
<div class="apps-card-meta">
<h3 class="apps-card-app-title">Survey new members using Typeform</h3>
</div>
</div>
<div class="gh-card-right">
<a href="https://zapier.com/app/editor/template/359407" target="_blank" rel="noopener" class="gh-btn gh-btn-outline zapier-template-link"><span>Use this Zap</span></a>
</div>
</article>
</div>
<div class="apps-grid-cell">
<article class="apps-card-app">
<div class="apps-card-left">
<div class="flex items-center">
{{svg-jar "ghost-squircle" class="w8 h8"}}
{{svg-jar "arrow-right" class="fill-midgrey w4 ml2"}}
<figure class="apps-card-app-icon" style="background-image:url(assets/img/mailchimp.svg);background-size:32px;"></figure>
</div>
<div class="apps-card-meta">
<h3 class="apps-card-app-title">Sync email subscribers in Ghost + Mailchimp</h3>
</div>
</div>
<div class="gh-card-right">
<a href="https://zapier.com/app/editor/template/359342" target="_blank" rel="noopener" class="gh-btn gh-btn-outline zapier-template-link"><span>Use this Zap</span></a>
</div>
</article>
</div>
</div>
<div class="zapier-footer">
<a href="https://zapier.com/apps/ghost/integrations?utm_medium=partner_api&utm_source=widget&utm_campaign=Widget" target="_blank" rel="noopener"><span>See more Ghost integrations powered by</span> <figure style="background-image:url(assets/img/zapier-logo.svg); background-size: 42px;"></figure></a>
</div>
</div>
</div>
</div>

7
public/assets/icons/ghost-squircle.svg Normal file
View file

@ -0,0 +1,7 @@
<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M200 400C256.003 400 323.694 397.091 360 360C395.302 323.934 400 254.454 400 200C400 144.687 396.291 76.206 360 40C323.82 3.90529 255.143 0 200 0C144.832 0 76.1835 3.87661 40 40C3.73759 76.2022 0 144.711 0 200C0 255.967 2.94993 323.699 40 360C76.0716 395.342 145.511 400 200 400Z" fill="#15212A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M136.317 242.721C136.317 240.509 138.105 238.716 140.324 238.716H183.369C185.582 238.716 187.376 240.511 187.376 242.721V260.526C187.376 262.738 185.588 264.531 183.369 264.531H140.324C138.111 264.531 136.317 262.736 136.317 260.526V242.721ZM212.902 242.721C212.902 240.509 214.688 238.716 216.906 238.716H259.924C262.136 238.716 263.928 240.511 263.928 242.721V260.526C263.928 262.738 262.142 264.531 259.924 264.531H216.906C214.695 264.531 212.902 262.736 212.902 260.526V242.721Z" fill="#F6F8FA"/>
<path d="M259.945 187.088H140.279C138.07 187.088 136.279 188.879 136.279 191.088V208.903C136.279 211.112 138.07 212.903 140.279 212.903H259.945C262.154 212.903 263.945 211.112 263.945 208.903V191.088C263.945 188.879 262.154 187.088 259.945 187.088Z" fill="#F6F8FA"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M136.317 139.467C136.317 137.256 138.116 135.462 140.314 135.462H208.915C211.122 135.462 212.912 137.257 212.912 139.467V157.271C212.912 159.483 211.113 161.276 208.915 161.276H140.314C138.107 161.276 136.317 159.481 136.317 157.271V139.467Z" fill="#F6F8FA"/>
<path d="M259.96 135.462H242.432C240.223 135.462 238.432 137.253 238.432 139.462V157.275C238.432 159.484 240.223 161.275 242.432 161.275H259.96C262.169 161.275 263.96 159.484 263.96 157.275V139.462C263.96 137.253 262.169 135.462 259.96 135.462Z" fill="#F6F8FA"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

17
public/assets/img/google-docs.svg Normal file
View file

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1818.2 2500" style="enable-background:new 0 0 1818.2 2500;" xml:space="preserve">
<style type="text/css">
.st0{fill:#4285F4;}
.st1{fill:#F1F1F1;}
.st2{fill:#A1C2FA;}
</style>
<g>
<path class="st0" d="M1136.4,0H170.4C79.6,0,0,79.5,0,170.5v2159.1c0,90.9,79.5,170.5,170.5,170.5h1477.3
c90.9,0,170.5-79.5,170.5-170.5V681.8l-397.7-284.1L1136.4,0z"/>
<path class="st1" d="M454.5,1818.2h909.1v-113.6H454.6L454.5,1818.2L454.5,1818.2z M454.5,2045.5h681.8v-113.6H454.5V2045.5z
M454.5,1250v113.6h909.1V1250H454.5z M454.5,1590.9h909.1v-113.6H454.6L454.5,1590.9L454.5,1590.9z"/>
<path class="st2" d="M1136.4,0v511.4c0,90.9,79.5,170.4,170.4,170.4h511.4L1136.4,0z"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 967 B

1
public/assets/img/patreon.svg Normal file
View file

@ -0,0 +1 @@
<svg height="546px" version="1.1" viewBox="0 0 569 546" width="569px" xmlns="http://www.w3.org/2000/svg"><title>Patreon logo</title><g fill="rgb(255, 66, 77)"><circle cx="362.589996" cy="204.589996" data-fill="1" r="204.589996"></circle><rect data-fill="1" height="545.799988" width="100" x="0" y="0"></rect></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 318 B

1
public/assets/img/paypal.svg Normal file
View file

@ -0,0 +1 @@
<svg width="152" height="179" viewBox="0 0 152 179" xmlns="http://www.w3.org/2000/svg"><title>paypal-seeklogo.com</title><g fill="none" fill-rule="evenodd"><path d="M136.492 45.453c2.179-13.894-.015-23.348-7.53-31.911C120.688 4.114 105.741.075 86.617.075H31.105c-3.909 0-7.237 2.844-7.846 6.705L.144 153.36c-.456 2.892 1.779 5.507 4.707 5.507h34.27l-2.365 15c-.399 2.53 1.556 4.818 4.118 4.818H69.76c3.419 0 6.33-2.488 6.863-5.865l.283-1.468 5.442-34.507.351-1.907c.532-3.377 3.443-5.865 6.862-5.865h4.322c27.984 0 49.896-11.37 56.299-44.25 2.675-13.74 1.292-25.208-5.783-33.27-2.14-2.439-4.802-4.455-7.907-6.1" fill="#238EC2"/><path d="M136.492 45.453c2.179-13.894-.015-23.348-7.53-31.911C120.688 4.114 105.741.075 86.617.075H31.105c-3.909 0-7.237 2.844-7.846 6.705L.144 153.36c-.456 2.892 1.779 5.507 4.707 5.507h34.27l8.609-54.588-.267 1.711c.609-3.86 3.909-6.704 7.817-6.704h16.288c31.989 0 57.037-12.996 64.356-50.582.217-1.113.402-2.191.568-3.251" fill="#20274F"/><path d="M56.978 45.638c.366-2.323 1.856-4.224 3.863-5.186.912-.437 1.931-.68 3-.68h43.514c5.155 0 9.961.337 14.356 1.045 1.256.202 2.478.435 3.665.698 1.187.264 2.339.558 3.455.885.558.162 1.106.333 1.646.512 2.157.717 4.166 1.562 6.015 2.541 2.179-13.894-.015-23.348-7.53-31.911C120.688 4.114 105.741.075 86.617.075H31.105c-3.909 0-7.237 2.844-7.846 6.705L.144 153.36c-.456 2.892 1.779 5.507 4.707 5.507h34.27L56.978 45.638" fill="#253667"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
public/assets/img/twitter.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 8.2 KiB

1
public/assets/img/zapier-logo.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
public/assets/img/zero-bounce.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 16 KiB