mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-25 09:03:12 +03:00
Updated integrations and Zapier page
This commit is contained in:
Peter Zimon
parent
78d23a2544
commit
1b60ded48f
@ -13,16 +13,14 @@
|
||||
/* Main Layout
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.integrations-wrapper {
|
||||
background: linear-gradient(315deg,var(--whitegrey-l1),var(--whitegrey-l2));
|
||||
padding: var(--main-layout-area-padding) 0;
|
||||
}
|
||||
|
||||
.integrations-directory {
|
||||
display: grid;
|
||||
justify-content: space-between;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
||||
grid-gap: 25px;
|
||||
background: var(--whitegrey-l1);
|
||||
padding: 24px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.id-item {
|
||||
@ -107,21 +105,6 @@
|
||||
}
|
||||
|
||||
/* Built-in integrations */
|
||||
|
||||
.apps-grid-container {
|
||||
margin: 2vw 0 0;
|
||||
}
|
||||
|
||||
.apps-grid-title {
|
||||
display: block;
|
||||
margin: 1vw 0 5px 1px;
|
||||
color: var(--midlightgrey);
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.35px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.apps-first-header,
|
||||
.apps-first-header .apps-grid-title {
|
||||
margin-top: 0px;
|
||||
@ -131,9 +114,6 @@
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: flex-start;
|
||||
border-radius: 5px;
|
||||
background: var(--white);
|
||||
box-shadow: var(--shadow-1);
|
||||
}
|
||||
|
||||
.apps-grid-note {
|
||||
@ -167,9 +147,9 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
padding: 16px 16px;
|
||||
padding: 16px 4px;
|
||||
height: 65px;
|
||||
border-top: var(--lightgrey) 1px solid;
|
||||
border-bottom: var(--whitegrey) 1px solid;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
@ -190,21 +170,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.apps-grid-cell:first-of-type {
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
}
|
||||
|
||||
.apps-grid-cell:last-of-type {
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.apps-grid-cell:first-of-type .apps-card-app {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.apps-card-left {
|
||||
.apps-card-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@ -335,26 +305,27 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Slack
|
||||
/* Details
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.app-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
margin-bottom: 30px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
position: relative;
|
||||
flex: 0 0 48px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
flex: 1 0 56px;
|
||||
width: 56px;
|
||||
min-width: 56px;
|
||||
height: 56px;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
border-radius: 10%;
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
.app-icon img {
|
||||
@ -362,17 +333,17 @@
|
||||
}
|
||||
|
||||
.app-cell h3 {
|
||||
margin: 0;
|
||||
color: var(--darkgrey);
|
||||
font-size: 2.4rem;
|
||||
font-weight: 500;
|
||||
margin: 4px 0 0;
|
||||
color: var(--black);
|
||||
font-size: 2.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.app-cell p {
|
||||
margin: 0;
|
||||
margin-bottom: 5px;
|
||||
color: var(--midgrey);
|
||||
font-size: 1.6rem;
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
@ -393,6 +364,35 @@
|
||||
border-color: rgb(223, 225, 227);
|
||||
}
|
||||
|
||||
.app-api-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -3px;
|
||||
}
|
||||
|
||||
.app-button-regenerate {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid var(--lightgrey);
|
||||
border-radius: 3px;
|
||||
padding: 4px 8px;
|
||||
margin-right: 8px;
|
||||
background: var(--white);
|
||||
}
|
||||
|
||||
.app-button-copy {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: var(--black);
|
||||
font-size: 1.2rem;
|
||||
padding: 4px 12px;
|
||||
color: var(--white);
|
||||
font-weight: 500;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
||||
/* Custom Integrations
|
||||
/* ---------------------------------------------------------- */
|
||||
@ -423,6 +423,10 @@
|
||||
color: #f04600;
|
||||
}
|
||||
|
||||
.gh-settings-zapier-templates {
|
||||
margin-top: -25px;
|
||||
}
|
||||
|
||||
.gh-settings-zapier-templates .apps-card-app-title {
|
||||
margin-left: 8px;
|
||||
white-space: unset;
|
||||
|
||||
@ -975,13 +975,30 @@
|
||||
.gh-main-section-block .heading {
|
||||
font-size: 1.7rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: .2px;
|
||||
color: var(--black);
|
||||
border-bottom: 1px solid var(--whitegrey);
|
||||
padding: 8px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gh-main-section .heading.bn {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.gh-main-section .description,
|
||||
.gh-main-section-block .description {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
color: var(--darkgrey);
|
||||
border-bottom: 1px solid var(--whitegrey);
|
||||
padding: 2px 0 8px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gh-main-section .heading + .description {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.gh-main-section.columns-2 {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
@ -1002,11 +1019,10 @@
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.gh-main-section-block.bt { border-top: 1px solid var(--whitegrey-l1); }
|
||||
.gh-main-section-block.br { border-right: 1px solid var(--whitegrey-l1); }
|
||||
.gh-main-section-block.bb { border-bottom: 1px solid var(--whitegrey-l1); }
|
||||
.gh-main-section-block.bl { border-left: 1px solid var(--whitegrey-l1); }
|
||||
|
||||
.gh-main-section-block.bt { border-top: 1px solid var(--whitegrey); }
|
||||
.gh-main-section-block.br { border-right: 1px solid var(--whitegrey); }
|
||||
.gh-main-section-block.bb { border-bottom: 1px solid var(--whitegrey); }
|
||||
.gh-main-section-block.bl { border-left: 1px solid var(--whitegrey); }
|
||||
|
||||
.gh-canvas-title {
|
||||
display: flex;
|
||||
|
||||
@ -92,3 +92,32 @@ table td,
|
||||
top: 1px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Plain list tables */
|
||||
.table.list,
|
||||
table.list td {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.table.list .data-label,
|
||||
table.list .data-label {
|
||||
color: var(--midgrey);
|
||||
font-weight: 400;
|
||||
font-size: 1.4rem;
|
||||
white-space: nowrap;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.table.list .data,
|
||||
table.list .data {
|
||||
color: var(--darkgrey);
|
||||
font-weight: 500;
|
||||
font-size: 1.4rem;
|
||||
padding: 8px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.table.list .data.highlight-hover:hover,
|
||||
table.list .data.highlight-hover:hover {
|
||||
background: var(--whitegrey-l1);
|
||||
}
|
||||
@ -5,8 +5,8 @@
|
||||
</h2>
|
||||
</GhCanvasHeader>
|
||||
|
||||
<div class="integrations-wrapper">
|
||||
<div class="integrations-directory gh-main-width">
|
||||
<div class="gh-main-width gh-main-section">
|
||||
<div class="integrations-directory">
|
||||
<a class="id-item" href="https://ghost.org/integrations/disqus/" target="_blank" rel="noopener noreferrer">
|
||||
<div class="id-item-logo id-disqus">
|
||||
<img class="w-100 h-100" style="object-fit:contain;" src="assets/img/disqus.svg" alt="Disqus Icon" />
|
||||
@ -59,197 +59,192 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gh-main-width">
|
||||
<section class="apps-grid-container">
|
||||
|
||||
{{!-- TODO: move fully to spirit and normalize spacing --}}
|
||||
<span class="apps-grid-title pb1">Built-in integrations</span>
|
||||
<div class="apps-grid">
|
||||
<div class="apps-grid-cell" data-test-app="zapier">
|
||||
<LinkTo @route="integrations.zapier" data-test-link="zapier">
|
||||
<article class="apps-card-app">
|
||||
<div class="apps-card-left">
|
||||
<figure class="apps-card-app-icon" style="background-image:url(assets/img/zapier.svg);background-size:36px;"></figure>
|
||||
<div class="apps-card-meta">
|
||||
<h3 class="apps-card-app-title">Zapier</h3>
|
||||
<p class="apps-card-app-desc">Automation for your favourite apps</p>
|
||||
</div>
|
||||
<section class="gh-main-width gh-main-section">
|
||||
<h4 class="heading">Built-in integrations</h4>
|
||||
<div class="apps-grid">
|
||||
<div class="apps-grid-cell" data-test-app="zapier">
|
||||
<LinkTo @route="integrations.zapier" data-test-link="zapier">
|
||||
<article class="apps-card-app">
|
||||
<div class="apps-card-left">
|
||||
<figure class="apps-card-app-icon" style="background-image:url(assets/img/zapier.svg);background-size:36px;"></figure>
|
||||
<div class="apps-card-meta">
|
||||
<h3 class="apps-card-app-title">Zapier</h3>
|
||||
<p class="apps-card-app-desc">Automation for your favourite apps</p>
|
||||
</div>
|
||||
<div class="gh-card-right">
|
||||
<div class="apps-configured">
|
||||
</div>
|
||||
<div class="gh-card-right">
|
||||
<div class="apps-configured">
|
||||
<span data-test-app-status>Configure</span>
|
||||
{{svg-jar "arrow-right"}}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</LinkTo>
|
||||
</div>
|
||||
|
||||
<div class="apps-grid-cell" data-test-app="slack">
|
||||
<LinkTo @route="integrations.slack" data-test-link="slack">
|
||||
<article class="apps-card-app">
|
||||
<div class="apps-card-left">
|
||||
<figure class="apps-card-app-icon" style="background-image:url(assets/img/slackicon.png); background-size: 36px;"></figure>
|
||||
<div class="apps-card-meta">
|
||||
<h3 class="apps-card-app-title">Slack</h3>
|
||||
<p class="apps-card-app-desc">A messaging app for teams</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-card-right">
|
||||
<div class="apps-configured">
|
||||
{{#if this.settings.slack.isActive}}
|
||||
<span class="gh-badge" data-test-app-status>Active</span>
|
||||
{{else}}
|
||||
<span data-test-app-status>Configure</span>
|
||||
{{svg-jar "arrow-right"}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{svg-jar "arrow-right"}}
|
||||
</div>
|
||||
</article>
|
||||
</LinkTo>
|
||||
</div>
|
||||
|
||||
<div class="apps-grid-cell" data-test-app="slack">
|
||||
<LinkTo @route="integrations.slack" data-test-link="slack">
|
||||
<article class="apps-card-app">
|
||||
<div class="apps-card-left">
|
||||
<figure class="apps-card-app-icon" style="background-image:url(assets/img/slackicon.png); background-size: 36px;"></figure>
|
||||
<div class="apps-card-meta">
|
||||
<h3 class="apps-card-app-title">Slack</h3>
|
||||
<p class="apps-card-app-desc">A messaging app for teams</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-card-right">
|
||||
<div class="apps-configured">
|
||||
{{#if this.settings.slack.isActive}}
|
||||
<span class="gh-badge" data-test-app-status>Active</span>
|
||||
{{else}}
|
||||
<span data-test-app-status>Configure</span>
|
||||
{{/if}}
|
||||
{{svg-jar "arrow-right"}}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</LinkTo>
|
||||
</div>
|
||||
|
||||
<div class="apps-grid-cell" data-test-app="amp">
|
||||
<LinkTo @route="integrations.amp" data-test-link="amp">
|
||||
<article class="apps-card-app">
|
||||
<div class="apps-card-left">
|
||||
<figure class="apps-card-app-icon" style="background-image:url(assets/img/amp.svg); background-size: 36px;"></figure>
|
||||
<div class="apps-card-meta">
|
||||
<h3 class="apps-card-app-title">AMP</h3>
|
||||
<p class="apps-card-app-desc">Google Accelerated Mobile Pages</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-card-right">
|
||||
<div class="apps-configured">
|
||||
{{#if this.settings.amp}}
|
||||
<span class="gh-badge" data-test-app-status>Active</span>
|
||||
{{else}}
|
||||
<span data-test-app-status>Configure</span>
|
||||
{{/if}}
|
||||
{{svg-jar "arrow-right"}}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</LinkTo>
|
||||
</div>
|
||||
|
||||
<div class="apps-grid-cell" data-test-app="unsplash">
|
||||
<LinkTo @route="integrations.unsplash" data-test-link="unsplash">
|
||||
<article class="apps-card-app">
|
||||
<div class="apps-card-left">
|
||||
<figure class="apps-card-app-icon id-unsplash" style="background-image:url(assets/icons/unsplash.svg); background-size:30px;"></figure>
|
||||
<div class="apps-card-meta">
|
||||
<h3 class="apps-card-app-title">Unsplash</h3>
|
||||
<p class="apps-card-app-desc">Beautiful, free photos</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-card-right">
|
||||
<div class="apps-configured">
|
||||
{{#if this.settings.unsplash.isActive}}
|
||||
<span class="gh-badge" data-test-app-status>Active</span>
|
||||
{{else}}
|
||||
<span data-test-app-status>Configure</span>
|
||||
{{/if}}
|
||||
{{svg-jar "arrow-right"}}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</LinkTo>
|
||||
</div>
|
||||
<div class="apps-grid-cell" data-test-app="firstpromoter">
|
||||
<LinkTo @route="integrations.firstpromoter" data-test-link="firstpromoter">
|
||||
<article class="apps-card-app">
|
||||
<div class="apps-card-left">
|
||||
<figure class="apps-card-app-icon id-unsplash" style="background-image:url(assets/icons/firstpromoter.png); background-size:30px;"></figure>
|
||||
<div class="apps-card-meta">
|
||||
<h3 class="apps-card-app-title">FirstPromoter</h3>
|
||||
<p class="apps-card-app-desc">Launch your member referral program</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-card-right">
|
||||
<div class="apps-configured">
|
||||
{{#if this.settings.firstpromoter}}
|
||||
<span class="gh-badge" data-test-app-status>Active</span>
|
||||
{{else}}
|
||||
<span data-test-app-status>Configure</span>
|
||||
{{/if}}
|
||||
{{svg-jar "arrow-right"}}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</LinkTo>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="apps-grid-container">
|
||||
|
||||
<span class="apps-grid-title pb1">Custom integrations</span>
|
||||
<div class="apps-grid">
|
||||
{{#each this.integrations as |integration|}}
|
||||
<div class="apps-grid-cell" data-test-custom-integration>
|
||||
<LinkTo @route="integration" @model={{integration}} data-test-integration={{integration.id}}>
|
||||
<article class="apps-card-app">
|
||||
<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="nudge-left--6 w9 stroke-darkgrey"}}
|
||||
{{/unless}}
|
||||
</figure>
|
||||
<div class="apps-card-meta">
|
||||
<h3 class="apps-card-app-title" data-test-text="name">
|
||||
{{integration.name}}
|
||||
</h3>
|
||||
<p class="apps-card-app-desc" data-test-text="description">
|
||||
{{integration.description}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-card-right">
|
||||
<div class="apps-configured">
|
||||
<span>Configure</span>
|
||||
{{svg-jar "arrow-right"}}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</LinkTo>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="flex flex-column justify-center items-center mih30 miw-100" data-test-blank="custom-integrations">
|
||||
{{#if this.fetchIntegrations.isRunning}}
|
||||
<div class="gh-loading-spinner"></div>
|
||||
{{else}}
|
||||
<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>
|
||||
<LinkTo @route="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>
|
||||
</LinkTo>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</article>
|
||||
</LinkTo>
|
||||
</div>
|
||||
|
||||
{{#if this.integrations}}
|
||||
<div class="apps-grid-cell new-integration-cell">
|
||||
<LinkTo @route="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 class="apps-grid-cell" data-test-app="amp">
|
||||
<LinkTo @route="integrations.amp" data-test-link="amp">
|
||||
<article class="apps-card-app">
|
||||
<div class="apps-card-left">
|
||||
<figure class="apps-card-app-icon" style="background-image:url(assets/img/amp.svg); background-size: 36px;"></figure>
|
||||
<div class="apps-card-meta">
|
||||
<h3 class="apps-card-app-title">AMP</h3>
|
||||
<p class="apps-card-app-desc">Google Accelerated Mobile Pages</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="gh-card-right">
|
||||
<div class="apps-configured">
|
||||
{{#if this.settings.amp}}
|
||||
<span class="gh-badge" data-test-app-status>Active</span>
|
||||
{{else}}
|
||||
<span data-test-app-status>Configure</span>
|
||||
{{/if}}
|
||||
{{svg-jar "arrow-right"}}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</LinkTo>
|
||||
</div>
|
||||
|
||||
<div class="apps-grid-cell" data-test-app="unsplash">
|
||||
<LinkTo @route="integrations.unsplash" data-test-link="unsplash">
|
||||
<article class="apps-card-app">
|
||||
<div class="apps-card-left">
|
||||
<figure class="apps-card-app-icon id-unsplash" style="background-image:url(assets/icons/unsplash.svg); background-size:30px;"></figure>
|
||||
<div class="apps-card-meta">
|
||||
<h3 class="apps-card-app-title">Unsplash</h3>
|
||||
<p class="apps-card-app-desc">Beautiful, free photos</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-card-right">
|
||||
<div class="apps-configured">
|
||||
{{#if this.settings.unsplash.isActive}}
|
||||
<span class="gh-badge" data-test-app-status>Active</span>
|
||||
{{else}}
|
||||
<span data-test-app-status>Configure</span>
|
||||
{{/if}}
|
||||
{{svg-jar "arrow-right"}}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</LinkTo>
|
||||
</div>
|
||||
<div class="apps-grid-cell" data-test-app="firstpromoter">
|
||||
<LinkTo @route="integrations.firstpromoter" data-test-link="firstpromoter">
|
||||
<article class="apps-card-app">
|
||||
<div class="apps-card-left">
|
||||
<figure class="apps-card-app-icon id-unsplash" style="background-image:url(assets/icons/firstpromoter.png); background-size:30px;"></figure>
|
||||
<div class="apps-card-meta">
|
||||
<h3 class="apps-card-app-title">FirstPromoter</h3>
|
||||
<p class="apps-card-app-desc">Launch your member referral program</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-card-right">
|
||||
<div class="apps-configured">
|
||||
{{#if this.settings.firstpromoter}}
|
||||
<span class="gh-badge" data-test-app-status>Active</span>
|
||||
{{else}}
|
||||
<span data-test-app-status>Configure</span>
|
||||
{{/if}}
|
||||
{{svg-jar "arrow-right"}}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</LinkTo>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="gh-main-width gh-main-section">
|
||||
<h4 class="heading">Custom integrations</h4>
|
||||
<div class="apps-grid">
|
||||
{{#each this.integrations as |integration|}}
|
||||
<div class="apps-grid-cell" data-test-custom-integration>
|
||||
<LinkTo @route="integration" @model={{integration}} data-test-integration={{integration.id}}>
|
||||
<article class="apps-card-app">
|
||||
<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="nudge-left--6 w9 stroke-darkgrey"}}
|
||||
{{/unless}}
|
||||
</figure>
|
||||
<div class="apps-card-meta">
|
||||
<h3 class="apps-card-app-title" data-test-text="name">
|
||||
{{integration.name}}
|
||||
</h3>
|
||||
<p class="apps-card-app-desc" data-test-text="description">
|
||||
{{integration.description}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-card-right">
|
||||
<div class="apps-configured">
|
||||
<span>Configure</span>
|
||||
{{svg-jar "arrow-right"}}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</LinkTo>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<div class="flex flex-column justify-center items-center mih30 miw-100" data-test-blank="custom-integrations">
|
||||
{{#if this.fetchIntegrations.isRunning}}
|
||||
<div class="gh-loading-spinner"></div>
|
||||
{{else}}
|
||||
<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>
|
||||
<LinkTo @route="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>
|
||||
</LinkTo>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/each}}
|
||||
|
||||
{{#if this.integrations}}
|
||||
<div class="apps-grid-cell new-integration-cell">
|
||||
<LinkTo @route="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>
|
||||
</LinkTo>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
@ -7,76 +7,72 @@
|
||||
</h2>
|
||||
</GhCanvasHeader>
|
||||
|
||||
<section class="view-container bt b--lightgrey-d1 pt5">
|
||||
<section class="app-grid">
|
||||
<div class="app-cell">
|
||||
<div class="bg-white mr3 display flex items-center justify-center br-pill shadow-1 pa3 dark-no-shadow">
|
||||
<section class="view-container gh-main-width">
|
||||
<section class="gh-main-section no-heading">
|
||||
<div class="gh-main-section-block app-detail-heading app-grid">
|
||||
<div class="app-cell">
|
||||
<img class="app-icon" src="assets/img/zapier.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-cell">
|
||||
<h3>Zapier</h3>
|
||||
<p>Automation for your favourite apps</p>
|
||||
<div class="app-cell">
|
||||
<h3>Zapier</h3>
|
||||
<p>Automation for your favourite apps</p>
|
||||
|
||||
<table class="list">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="data-label">Admin API key</td>
|
||||
<td class="data highlight-hover">
|
||||
<div class="relative flex items-center {{unless this.copyAdminKey.isRunning "hide-child-instant"}}">
|
||||
<span class="truncate" data-test-text="admin-key">
|
||||
{{this.integration.adminKey.secret}}
|
||||
</span>
|
||||
<div class="app-api-buttons child">
|
||||
<button type="button" {{action "confirmRegenerateKeyModal" this.integration.adminKey}} class="app-button-regenerate" data-tooltip="Regenerate">
|
||||
{{svg-jar "reload" class="w4 h4 stroke-midgrey"}}
|
||||
</button>
|
||||
<button type="button" {{action (perform this.copyAdminKey)}} class="app-button-copy">
|
||||
{{#if this.copyAdminKey.isRunning}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied
|
||||
{{else}}
|
||||
Copy
|
||||
{{/if}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{{#if (eq this.regeneratedKeyType this.integration.adminKey.type)}}
|
||||
<div class="green nt3 mb2 pl3"> Admin API Key was successfully regenerated </div>
|
||||
{{/if}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="data-label">API URL</td>
|
||||
<td class="data highlight-hover">
|
||||
<div class="relative flex items-center {{unless this.copyApiUrl.isRunning "hide-child-instant"}}">
|
||||
<span data-test-text="api-url">
|
||||
{{this.apiUrl}}
|
||||
</span>
|
||||
<div class="app-api-buttons child">
|
||||
<button type="button" {{action (perform this.copyApiUrl)}} class="app-button-copy">
|
||||
{{#if this.copyApiUrl.isRunning}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2"}} Copied
|
||||
{{else}}
|
||||
Copy
|
||||
{{/if}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="m15 mt4">
|
||||
<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="pa0">
|
||||
<div class="pa3 relative flex items-center {{unless this.copyAdminKey.isRunning "hide-child-instant"}}">
|
||||
<span class="midgrey truncate" data-test-text="admin-key">
|
||||
{{this.integration.adminKey.secret}}
|
||||
</span>
|
||||
<div class="absolute top-2 right-2 flex items-stretch child">
|
||||
<button type="button" {{action "confirmRegenerateKeyModal" this.integration.adminKey}} class="ba b--lightgrey-d1 br3 pa1 pl2 pr2 flex items-center mr2 bg-white" data-tooltip="Regenerate">
|
||||
{{svg-jar "reload" class="w4 h4 stroke-midgrey"}}
|
||||
</button>
|
||||
<button type="button" {{action (perform this.copyAdminKey)}} class="bg-black-70 f8 pa1 pr3 pl3 br3 white fw4 flex items-center">
|
||||
{{#if this.copyAdminKey.isRunning}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied
|
||||
{{else}}
|
||||
Copy
|
||||
{{/if}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{{#if (eq this.regeneratedKeyType this.integration.adminKey.type)}}
|
||||
<div class="green nt3 mb2 pl3"> Admin API Key was successfully regenerated </div>
|
||||
{{/if}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pa3 w50 fw7">API URL</td>
|
||||
<td class="pa0 truncate">
|
||||
<div class="pa3 relative truncate {{unless this.copyApiUrl.isRunning "hide-child-instant"}}">
|
||||
<span class="midgrey" data-test-text="api-url">
|
||||
{{this.apiUrl}}
|
||||
</span>
|
||||
<div class="absolute top-1 right-2">
|
||||
<div class="pt1 pr3 pb1 pl3 bg-black-70 child br3 f8 nudge-top--4 nudge-right--1">
|
||||
<button type="button" {{action (perform this.copyApiUrl)}} class="white fw4 flex items-center">
|
||||
{{#if this.copyApiUrl.isRunning}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2"}} Copied
|
||||
{{else}}
|
||||
Copy
|
||||
{{/if}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="mt12" id="zapier-toggle">
|
||||
<section id="zapier-toggle" class="gh-main-section">
|
||||
<h4 class="heading bn">Zapier templates</h4>
|
||||
<p class="description">Explore pre-built templates for common automation tasks</p>
|
||||
<div class="gh-setting-content gh-setting-content--no-action">
|
||||
<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 class="apps-grid gh-settings-zapier-templates">
|
||||
<div class="apps-grid-cell">
|
||||
@ -240,7 +236,7 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user