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

Refined integrations UI

Browse Source
This commit is contained in:
Peter Zimon 2021-02-12 14:58:56 +01:00
parent 0f12e39d90
commit 4839da5047
8 changed files with 74 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -313,7 +313,7 @@
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
margin-top: 12px;
margin-top: 24px;
}
.app-icon {
@ -489,6 +489,10 @@
font-weight: 600;
}
.app-custom-api-table {
margin-bottom: 0;
}
.app-custom-api-table .data-label {
width: 200px;
width: 160px;
}

1
ghost/admin/app/styles/layouts/settings.css
View File

@ -204,6 +204,7 @@
letter-spacing: 0.3px;
font-size: 1.3rem;
font-weight: 400;
margin: 4px 0 12px;
}
.gh-setting-error {

2
ghost/admin/app/styles/patterns/buttons.css
View File

@ -25,7 +25,7 @@
.gh-btn-grey span {
display: block;
overflow: hidden;
padding: 0 14px 1px;
padding: 0 14px;
height: 34px;
font-size: 1.35rem;
line-height: 34px;

6
ghost/admin/app/templates/integrations/amp.hbs
View File

@ -33,9 +33,9 @@
<div class="gh-main-section">
<h4 class="gh-main-section-header small bn">AMP configuration</h4>
<section class="gh-main-section-block">
<div class="gh-main-section-content grey padding-top-s columns-2">
<div class="gh-main-section-content grey padding-top-s">
<div>
<div class="gh-setting">
<div class="gh-setting-first">
<div class="gh-setting-content">
<div class="gh-setting-title">Enable AMP</div>
<div class="gh-setting-desc">Enable <a href="https://ampproject.org" target="_blank">Google Accelerated Mobile Pages</a> for your posts</div>
@ -62,7 +62,7 @@
<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/help/how-to-find-your-google-analytics-tracking-id/">here</a></div>
<div class="gh-setting-content-extended">
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="ampGtagId">
<GhFormGroup @class="no-margin" @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="ampGtagId">
<GhTextInput
@placeholder="UA-XXXXXXX-X"
@name="amp_gtag_id"

8
ghost/admin/app/templates/integrations/firstpromoter.hbs
View File

@ -33,9 +33,9 @@
<div class="gh-main-section">
<h4 class="gh-main-section-header small bn">FirstPromoter configuration</h4>
<section class="gh-main-section-block">
<div class="gh-main-section-content grey padding-top-s columns-2">
<div class="gh-main-section-content grey padding-top-s">
<div>
<div class="gh-setting">
<div class="gh-setting-first {{unless this.settings.firstpromoter "gh-setting-last"}}">
<div class="gh-setting-content">
<div class="gh-setting-title">Enable FirstPromoter</div>
<div class="gh-setting-desc">Enable <a href="https://firstpromoter.com/?fpr=ghost&fp_sid=admin" target="_blank">FirstPromoter</a> for tracking referrals</div>
@ -57,12 +57,12 @@
</div>
</div>
{{#liquid-if this.settings.firstpromoter class=""}}
<div class="gh-setting gh-setting-firstpromoter-liquid">
<div class="gh-setting-last gh-setting-firstpromoter-liquid">
<div class="gh-setting-content gh-setting-content--no-action">
<div class="gh-setting-title">FirstPromoter Account ID</div>
<div class="gh-setting-desc"> Affiliate and referral tracking, find your ID <a href="https://ghost.org/help/firstpromoter-id/">here</a></div>
<div class="gh-setting-content-extended">
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="firstpromoterId">
<GhFormGroup @class="no-margin" @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="firstpromoterId">
<GhTextInput
@placeholder="XXXXXXXX"
@name="firstpromoter_id"

2
ghost/admin/app/templates/integrations/slack.hbs
View File

@ -63,7 +63,7 @@
</div>
</div>
</div>
<div class="gh-setting">
<div class="gh-setting-last">
<div class="gh-setting-content gh-setting-content--no-action">
<div class="gh-setting-title">Username</div>
<div class="gh-setting-desc">The username to display messages from</div>

2
ghost/admin/app/templates/integrations/unsplash.hbs
View File

@ -34,7 +34,7 @@
<h4 class="gh-main-section-header small bn">Unsplash configuration</h4>
<div class="gh-main-section-block">
<div class="gh-main-section-content grey">
<div class="gh-setting" id="unsplash-toggle">
<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>

111
ghost/admin/app/templates/integrations/zapier.hbs
View File

@ -8,63 +8,66 @@
</GhCanvasHeader>
<section class="view-container">
<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 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}}
<section class="gh-main-section no-heading">
<div class="gh-main-section-block">
<div class="gh-main-section-content app-detail-heading app-grid">
<div class="app-cell">
<img class="app-icon" src="assets/img/zapier.svg" />
</div>
<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>
{{/if}}
</button>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
{{#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>
</div>
</section>