mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-21 01:41:46 +03:00
2c498ab193
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
97 lines
5.9 KiB
Handlebars
97 lines
5.9 KiB
Handlebars
<section class="gh-canvas">
|
|
<GhCanvasHeader class="gh-canvas-header sticky">
|
|
<div class="flex flex-column">
|
|
<div class="gh-canvas-breadcrumb">
|
|
<LinkTo @route="settings">
|
|
Settings
|
|
</LinkTo>
|
|
{{svg-jar "arrow-right-small"}}
|
|
<LinkTo @route="settings.integrations" data-test-link="integrations-back">
|
|
Integrations
|
|
</LinkTo>
|
|
{{svg-jar "arrow-right-small"}} Slack
|
|
</div>
|
|
</div>
|
|
<section class="view-actions">
|
|
<GhTaskButton @task={{this.saveTask}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-save-button={{true}} />
|
|
</section>
|
|
</GhCanvasHeader>
|
|
|
|
<section class="view-container">
|
|
<section class="gh-main-section app-grid">
|
|
<div class="gh-main-section-block app-detail-heading app-grid">
|
|
<div class="app-cell">
|
|
<img class="app-icon" src="assets/img/slackicon.png" />
|
|
</div>
|
|
<div class="app-cell">
|
|
<h3>Slack</h3>
|
|
<p>A messaging app for teams</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="gh-main-section">
|
|
<h4 class="gh-main-section-header small bn">Slack configuration</h4>
|
|
<div class="gh-main-section-block">
|
|
<div class="gh-main-section-content grey">
|
|
<form class="app-config-form" id="slack-settings" novalidate="novalidate" {{action "save" on="submit"}}>
|
|
|
|
<div class="gh-main-section-block">
|
|
<div class="gh-setting-first">
|
|
<div class="gh-setting-content gh-setting-content--no-action">
|
|
<div class="gh-setting-title">Webhook URL</div>
|
|
<div class="gh-setting-desc">Automatically send newly published posts to a channel in Slack or any Slack-compatible service like Discord or Mattermost.</div>
|
|
<div class="gh-setting-content-extended">
|
|
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="slackUrl">
|
|
<GhTextInput
|
|
@placeholder="https://hooks.slack.com/services/..."
|
|
@name="slack_url"
|
|
@value={{readonly this.settings.slackUrl}}
|
|
@input={{action (mut this.settings.slackUrl) value="target.value"}}
|
|
@focus-out={{action "validate" "slackUrl" target=this.settings}}
|
|
@keyEvents={{hash
|
|
Enter=(action "save")
|
|
}}
|
|
data-test-slack-url-input={{true}}
|
|
/>
|
|
{{#unless this.settings.errors}}
|
|
<p>Set up a new incoming webhook <a href="https://my.slack.com/apps/new/A0F7XDUAZ-incoming-webhooks" target="_blank" rel="noopener noreferrer">here</a>, and grab the URL.</p>
|
|
{{else}}
|
|
<GhErrorMessage @errors={{this.settings.errors}} @property="slackUrl" data-test-error="slack-url" />
|
|
{{/unless}}
|
|
</GhFormGroup>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<div class="gh-setting-content-extended">
|
|
<GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="username">
|
|
<GhTextInput
|
|
@placeholder="Ghost"
|
|
@name="slack_username"
|
|
@value={{readonly this.settings.slackUsername}}
|
|
@input={{action (mut this.settings.slackUsername) value="target.value"}}
|
|
@keyEvents={{hash
|
|
Enter=(action "save")
|
|
}}
|
|
data-test-slack-username-input={{true}}
|
|
/>
|
|
{{#if this.settings.errors}}
|
|
<GhErrorMessage @errors={{this.settings.errors}} @property="slackUsername" />
|
|
{{/if}}
|
|
</GhFormGroup>
|
|
</div>
|
|
<GhTaskButton @buttonText="Send test notification" @task={{this.sendTestNotification}} @successText="Sent" @class="gh-btn gh-btn-icon" @disabled={{this.testNotificationDisabled}} data-test-send-notification-button="true" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</section>
|