Ghost/ghost/admin/app/components/gh-members-recipient-select.hbs
Kevin Ansfield 67505f838c Added first pass of recipient options to new publish flow
closes https://github.com/TryGhost/Team/issues/1585

- adds newsletter select, free/paid checkboxes, and specific label select to the email recipients area in publish flow
- updated `PublishOptions`
  - `willEmail` getter now takes into account the recipient filter so when free+paid+specific are all unchecked the flow corresponds to email not being sent
  - save task passes through the real recipient filter
  - added `fullRecipientFilter` for use in count fetchers so the selected newsletter is taken into account whilst we use `recipientFilter` as the main filter value
- fixed issues with dropdowns being cut off
  - `{{liquid-if}}` uses `overflow: hidden` to make it's animation work, this means any popups that are larger than the expanded option size are cut off
  - switched away from rendering the selects inline so they aren't limited by parent container size
  - fixed `z-index` issues to they appear on top of the modal
2022-05-05 11:18:49 +01:00

76 lines
3.1 KiB
Handlebars

<div class="gh-publishmenu-send-to-option">
<p>Free members <span class="gh-publishmenu-emailcount" data-test-email-count="free-members">{{this.freeMemberCountLabel}}</span></p>
<div class="for-switch x-small {{if @disabled "disabled"}}">
<label class="switch" for="send-email-to-free">
<input
id="send-email-to-free"
type="checkbox"
class="gh-input post-settings-featured"
checked={{this.isFreeChecked}}
disabled={{@disabled}}
aria-label="Free members toggle"
{{on "change" (fn this.toggleFilter "status:free")}}
data-test-checkbox="free-members"
>
<span class="input-toggle-component"></span>
</label>
</div>
</div>
{{#if this.isPaidAvailable}}
<div class="gh-publishmenu-send-to-option">
<p>Paid members <span class="gh-publishmenu-emailcount" data-test-email-count="paid-members">{{this.paidMemberCountLabel}}</span></p>
<div class="for-switch x-small {{if @disabled "disabled"}}">
<label class="switch" for="send-email-to-paid">
<input
id="send-email-to-paid"
type="checkbox"
class="gh-input post-settings-featured"
checked={{this.isPaidChecked}}
disabled={{@disabled}}
aria-label="Paid members toggle"
{{on "change" (fn this.toggleFilter "status:-free")}}
data-test-checkbox="paid-members"
>
<span class="input-toggle-component"></span>
</label>
</div>
</div>
{{/if}}
{{#if this.specificOptions}}
<div class="gh-publishmenu-send-to-option">
<p>Specific people</p>
<div class="for-switch x-small {{if @disabled "disabled"}}">
<label class="switch" for="send-email-to-specific">
<input
id="send-email-to-specific"
type="checkbox"
class="gh-input post-settings-featured"
checked={{this.isSpecificChecked}}
disabled={{@disabled}}
aria-label="Specific people toggle"
{{on "change" this.toggleSpecificFilter}}
data-test-checkbox="paid-members"
>
<span class="input-toggle-component"></span>
</label>
</div>
</div>
{{#if this.isSpecificChecked}}
<GhTokenInput
@class="select-members select-members-recipient"
@dropdownClass={{@dropdownClass}}
@options={{this.specificOptions}}
@selected={{this.selectedSpecificOptions}}
@disabled={{@disabled}}
@searchMessage="All labels selected"
@optionsComponent="power-select/options"
@allowCreation={{false}}
@renderInPlace={{this.renderInPlace}}
@onChange={{this.selectSpecificOptions}}
as |option|
>
{{option.name}}
</GhTokenInput>
{{/if}}
{{/if}}