TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-01 13:54:35 +03:00
Code Issues Projects Releases Wiki Activity
e7a8be81ef
Ghost/ghost/admin/app/templates/settings/integrations.hbs

159 lines
7.9 KiB
Handlebars
Raw Normal View History

Re-jigged integrations routes to support nested modal route no issue - moves integration routes around to match ember's concept of nested routes (nested routes reflect nested UI not nested URLs) - sets us up for having a `settings.integrations.new` modal route that sits on top of the index screen
2018-10-04 01:08:00 +03:00
<section class="gh-canvas">
<header class="gh-canvas-header">
<h2 class="gh-canvas-title" data-test-screen-title>Integrations</h2>
</header>
<section class="apps-grid-container">
{{!-- TODO: move fully to spirit and normalize spacing --}}
<span class="apps-grid-title pb2">Built-in integrations</span>
<div class="apps-grid">
<div class="apps-grid-cell" data-test-app="slack">
{{#link-to "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)"></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 settings.slack.isActive}}
<span class="green" data-test-app-status>Active</span>
{{else}}
<span data-test-app-status>Configure</span>
{{/if}}
{{svg-jar "arrow-right"}}
</div>
</div>
</article>
{{/link-to}}
</div>
<div class="apps-grid-cell" data-test-app="amp">
{{#link-to "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/ampicon.png)"></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 settings.amp}}
<span class="green" data-test-app-status>Active</span>
{{else}}
<span data-test-app-status>Configure</span>
{{/if}}
{{svg-jar "arrow-right"}}
</div>
</div>
</article>
{{/link-to}}
</div>
<div class="apps-grid-cell" data-test-app="unsplash">
{{#link-to "settings.integrations.unsplash" data-test-link="unsplash"}}
<article class="apps-card-app">
<div class="apps-card-left">
<figure class="apps-card-app-icon" style="background-image:url(assets/img/unsplashicon.png);background-size:45px;"></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 settings.unsplash.isActive}}
<span class="green" data-test-app-status>Active</span>
{{else}}
<span data-test-app-status>Configure</span>
{{/if}}
{{svg-jar "arrow-right"}}
</div>
</div>
</article>
{{/link-to}}
</div>
<div class="apps-grid-cell" data-test-app="zapier">
{{#link-to "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/zapiericon.png);background-size:45px;"></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>
<div class="gh-card-right">
<div class="apps-configured">
<span data-test-app-status>Configure</span>
{{svg-jar "arrow-right"}}
</div>
</div>
</article>
{{/link-to}}
</div>
</div>
</section>
Added initial custom integrations UI (#1051) refs https://github.com/TryGhost/Ghost/issues/9865, https://github.com/TryGhost/Ghost/issues/9942 - `integration`, `api-key`, and `webhook` models and respective mirage mocks - moves integration routes around to match ember's concept of nested routes (nested routes reflect nested UI not nested URLs) - adds custom integrations list to integrations screen - adds custom integration screen - allow editing of integration details - show list of webhooks - webhook creation modal NB: the `enableDeveloperExperiments` flag needs to be enabled in the `config.development.json` file for the custom integrations UI to be displayed until it's out of development.
2018-10-18 02:18:29 +03:00
{{#if config.enableDeveloperExperiments}}
<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>
<div class="apps-grid">
{{#each integrations as |integration|}}
<div class="apps-grid-cell" data-test-custom-integration>
{{#link-to "settings.integration" 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="w-100"}}
{{/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>
{{/link-to}}
</div>
{{else}}
<div class="flex flex-column justify-center items-center mih40 miw-100" data-test-blank="custom-integrations">
{{#if fetchIntegrations.isRunning}}
<div class="gh-loading-spinner"></div>
{{else}}
<p class="ma0 pa0 tc midgrey">
Use API keys and webhooks to create custom integrations.<br>
No custom integrations.
</p>
{{/if}}
</div>
{{/each}}
</div>
</section>
{{/if}}
Re-jigged integrations routes to support nested modal route no issue - moves integration routes around to match ember's concept of nested routes (nested routes reflect nested UI not nested URLs) - sets us up for having a `settings.integrations.new` modal route that sits on top of the index screen
2018-10-04 01:08:00 +03:00
</section>
{{outlet}}
Reference in New Issue Copy Permalink