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

Added disabled state with CTA for Zapier integration

Browse Source 
refs https://github.com/TryGhost/Team/issues/1157
This commit is contained in:
Djordje Vlaisavljevic 2022-10-05 15:36:44 +02:00
parent a499f866f3
commit 94aaa168cd
2 changed files with 37 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -256,15 +256,31 @@
opacity: 0.4;
}
.apps-card-app-disabled .apps-card-app-title-container {
display: flex;
}
.apps-card-app-disabled .apps-card-app-icon {
filter:grayscale(1);
opacity:0.3;
}
.apps-card-app-disabled .apps-card-meta svg {
margin-left: 4px;
width: 14px;
opacity: 0.9;
}
.apps-card-app-disabled .apps-card-meta path {
fill: #292d33;
}
.apps-card-app-disabled .apps-card-app-disabled-cta {
color: #30cf43;
margin-right: 28px;
font-weight: 600;
}
.apps-card-app-title {
margin: 0;
overflow: hidden;

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

@ -69,7 +69,26 @@
<section class="gh-main-section">
<h4 class="gh-main-section-header small">Built-in integrations</h4>
<div class="apps-grid">
{{#unless this.zapierDisabled}}
{{#if this.zapierDisabled}}
<div class="apps-grid-cell" data-test-app="zapier">
<LinkTo @route="pro">
<article class="apps-card-app apps-card-app-disabled">
<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">
<div class="apps-card-app-title-container"><h3 class="apps-card-app-title">Zapier</h3>{{svg-jar "lock-filled"}}</div>
<p class="apps-card-app-desc">Automation for your favorite apps</p>
</div>
</div>
<div class="gh-card-right">
<div class="apps-configured">
<button type="button" class="apps-card-app-disabled-cta">Upgrade</button>
</div>
</div>
</article>
</LinkTo>
</div>
{{else}}
<div class="apps-grid-cell" data-test-app="zapier">
<LinkTo @route="settings.integrations.zapier" data-test-link="zapier">
<article class="apps-card-app">
@ -89,7 +108,7 @@
</article>
</LinkTo>
</div>
{{/unless}}
{{/if}}
<div class="apps-grid-cell" data-test-app="slack">
<LinkTo @route="settings.integrations.slack" data-test-link="slack">