TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-21 01:41:46 +03:00
Code Issues Projects Releases Wiki Activity
096dffb817
Ghost/ghost/admin/app/templates/settings/integrations.hbs

274 lines
14 KiB
Handlebars
Raw Normal View History

Added Integrations as a subpage of Settings - Restructured Admin so that Integrations becomes a subpage of Settings.
2021-10-18 15:46:29 +03:00
<section class="gh-canvas">
<GhCanvasHeader class="gh-canvas-header">
Updated breadcrumb and title style across admin Refs https://www.notion.so/ghost/Switch-breadcrumb-style-513a624c0e0d490ca39a2fdb97a6971a - Separating out the breadcrumbs and the title makes it easier to navigate back on multiple levels for nested pages. - Avoids very long titles, as it doesn't include breadcrumbs anymore
2022-10-04 08:35:29 +03:00
<div class="flex flex-column">
<div class="gh-canvas-breadcrumb">
<LinkTo @route="settings">
Settings
</LinkTo>
{{svg-jar "arrow-right-small"}} Integrations
</div>
<h2 class="gh-canvas-title" data-test-screen-title>
Integrations
</h2>
</div>
Added Integrations as a subpage of Settings - Restructured Admin so that Integrations becomes a subpage of Settings.
2021-10-18 15:46:29 +03:00
</GhCanvasHeader>
Refactored custom integration creation and limits modals refs https://github.com/TryGhost/Team/issues/559 - switched to new ember-promise-modals pattern - removed controller and template in favor of opening modals directly from the route - removed unused `mousedown` event handlers - they are only necessary when an input blur would trigger validation errors - fixed Enter key not triggering create action by adding an `{{on-key "Enter"}}` event handler to the name input - fixed scroll not resetting to top of integrations screens when navigating between them by adding `{{scroll-top}}` element modifier to the main content sections
2022-01-13 16:16:13 +03:00
<div class="gh-main-section" {{scroll-top}}>
Added Integrations as a subpage of Settings - Restructured Admin so that Integrations becomes a subpage of Settings.
2021-10-18 15:46:29 +03:00
<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" />
</div>
<div class="f8 mt1">Disqus</div>
</a>
<a class="id-item" href="https://ghost.org/integrations/google/" target="_blank" rel="noopener noreferrer">
<div class="id-item-logo id-analytics">
<img class="w-100 h-100" style="object-fit:contain;padding:1px 0;" src="assets/img/google-analytics.png" alt="Google Analytics Icon" />
</div>
<div class="f8 mt1">Analytics</div>
</a>
<a class="id-item" href="https://ghost.org/integrations/ulysses/" target="_blank" rel="noopener noreferrer">
<div class="id-item-logo id-ulysses">
<img class="w-100 h-100" style="object-fit:contain;" src="assets/img/ulysses.png" alt="Ulysses Icon" />
</div>
<div class="f8 mt1">Ulysses</div>
</a>
<a class="id-item" href="https://ghost.org/integrations/typeform/" target="_blank" rel="noopener noreferrer">
<div class="id-item-logo id-typeform">
<img class="w-100 h-100" style="object-fit:contain;" src="assets/img/typeform.svg" alt="Typeform Icon" />
</div>
<div class="f8 mt1">Typeform</div>
</a>
<a class="id-item" href="https://ghost.org/integrations/buffer/" target="_blank" rel="noopener noreferrer">
<div class="id-item-logo id-buffer">
<img class="w-100 h-100" style="object-fit:contain;padding:1px 0;" src="assets/img/buffer.png" alt="Buffer Icon" />
</div>
<div class="f8 mt1">Buffer</div>
</a>
<a class="id-item" href="https://ghost.org/integrations/plausible/" target="_blank" rel="noopener noreferrer">
<div class="id-item-logo id-plausible">
<img class="w-100 h-100" style="object-fit:contain;padding:1px 0;" src="assets/img/plausible.png" alt="Plausible Icon" />
</div>
<div class="f8 mt1">Plausible</div>
</a>
<a class="id-item" href="https://ghost.org/integrations/github/" target="_blank" rel="noopener noreferrer">
<div class="id-item-logo id-github">
<img class="w-100 h-100" style="object-fit:contain;" src="assets/img/github.svg" alt="GitHub Icon" />
</div>
<div class="f8 mt1">GitHub</div>
</a>
<a class="id-item" href="https://ghost.org/integrations/" target="_blank" rel="noopener noreferrer">
<div class="id-item-logo id-more">
{{svg-jar "circle-ellipsis" class="w5"}}
</div>
<div class="f8 mt1">More</div>
</a>
</div>
</div>
<section class="gh-main-section">
<h4 class="gh-main-section-header small">Built-in integrations</h4>
<div class="apps-grid">
Added disabled state with CTA for Zapier integration refs https://github.com/TryGhost/Team/issues/1157
2022-10-05 16:36:44 +03:00
{{#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}}
Added Integrations as a subpage of Settings - Restructured Admin so that Integrations becomes a subpage of Settings.
2021-10-18 15:46:29 +03:00
<div class="apps-grid-cell" data-test-app="zapier">
<LinkTo @route="settings.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 favorite apps</p>
</div>
</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>
Added disabled state with CTA for Zapier integration refs https://github.com/TryGhost/Team/issues/1157
2022-10-05 16:36:44 +03:00
{{/if}}
Added Integrations as a subpage of Settings - Restructured Admin so that Integrations becomes a subpage of Settings.
2021-10-18 15:46:29 +03:00
<div class="apps-grid-cell" data-test-app="slack">
<LinkTo @route="settings.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="settings.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="settings.integrations.unsplash" data-test-link="unsplash">
<article class="apps-card-app">
<div class="apps-card-left">
Cleaned up non-inlined usage of svg icons No issue
2022-08-31 18:47:20 +03:00
<figure class="apps-card-app-icon id-unsplash" style="background-image:url(assets/img/unsplash.svg); background-size:30px;"></figure>
Added Integrations as a subpage of Settings - Restructured Admin so that Integrations becomes a subpage of Settings.
2021-10-18 15:46:29 +03:00
<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}}
<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="settings.integrations.firstpromoter" data-test-link="firstpromoter">
<article class="apps-card-app">
<div class="apps-card-left">
Cleaned up non-inlined usage of svg icons No issue
2022-08-31 18:47:20 +03:00
<figure class="apps-card-app-icon id-unsplash" style="background-image:url(assets/img/firstpromoter.png); background-size:36px;"></figure>
Added Integrations as a subpage of Settings - Restructured Admin so that Integrations becomes a subpage of Settings.
2021-10-18 15:46:29 +03:00
<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-section">
<h4 class="gh-main-section-header small">Custom integrations</h4>
<div class="apps-grid">
{{#each this.integrations as |integration|}}
<div class="apps-grid-cell" data-test-custom-integration>
<LinkTo @route="settings.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 bb b--whitegrey" 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 mb4">
Create your own custom Ghost integrations with dedicated API keys & webhooks
</p>
<LinkTo @route="settings.integrations.new" class="gh-btn gh-btn-green gh-btn-icon" data-test-button="new-integration">
Cleaned up icon styles Refs https://www.notion.so/ghost/Unify-icons-across-Admin-7e3d124d5db34c63beccca029af595e7 - Reduced duplicate plus icons - Replaced fill trash, info and pen icons by stroke icons - Removed fill styles from default button classes - Removed launch-wizard css
2022-09-02 18:56:02 +03:00
<span>{{svg-jar "plus"}} Add custom integration</span>
Added Integrations as a subpage of Settings - Restructured Admin so that Integrations becomes a subpage of Settings.
2021-10-18 15:46:29 +03:00
</LinkTo>
</div>
{{/if}}
</div>
{{/each}}
</div>
{{#if this.integrations}}
{{!-- <div class="apps-grid-cell new-integration-cell"> --}}
<div class="mt5">
<LinkTo @route="settings.integrations.new" class="gh-btn gh-btn-green gh-btn-icon" data-test-button="new-integration">
Cleaned up icon styles Refs https://www.notion.so/ghost/Unify-icons-across-Admin-7e3d124d5db34c63beccca029af595e7 - Reduced duplicate plus icons - Replaced fill trash, info and pen icons by stroke icons - Removed fill styles from default button classes - Removed launch-wizard css
2022-09-02 18:56:02 +03:00
<span>{{svg-jar "plus"}} Add custom integration</span>
Added Integrations as a subpage of Settings - Restructured Admin so that Integrations becomes a subpage of Settings.
2021-10-18 15:46:29 +03:00
</LinkTo>
</div>
{{!-- </div> --}}
{{/if}}
</section>
</section>
{{outlet}}
Reference in New Issue Copy Permalink