Ghost/ghost/admin/app/components/gh-date-time-picker.hbs
Kevin Ansfield 43d417858a Switched publish flow dropdowns to expanding blocks and added publish time options
refs https://github.com/TryGhost/Team/issues/1542

- moved publish-flow modal into `components/editor-labs/modals/publish-flow` as we have enough editor-related components to keep them in one place
- updated publish flow design to use expanding blocks in place of dropdowns
  - added `openSection` property in publish-flow modal and associated action for toggling sections
  - moved "publish at" option into a separate component to keep publish-flow modal cleaner (keeps option-specific actions out of the main modal component)
  - used `{{liquid-if}}` to animate the expanding blocks
- added schedule time properties to `PublishOptions`
  - kept "is scheduled" and "scheduled at" separate so it's possible to keep the selected schedule time across selecting/deselecting the option to schedule
  - ensures schedule date is kept to the minimum 5-minute in the future across option changes
  - updated publish-management to reset the scheduled option to "Right now" when the publish-flow modal is opened if a schedule time was previously set but is now in the past
2022-04-27 18:21:01 +01:00

44 lines
1.8 KiB
Handlebars

<div class="gh-date-time-picker" data-test-component="gh-date-time-picker">
<PowerDatepicker
@selected={{this._date}}
@center={{this._date}}
@onSelect={{action "setDateInternal" value="date"}}
@renderInPlace={{this.renderInPlaceWithFallback}}
@disabled={{this.disabled}} as |dp|
>
<dp.Trigger @tabindex="-1" data-test-date-time-picker-datepicker>
<div class="gh-date-time-picker-date {{if this.dateError "error"}}">
<input type="text"
placeholder={{this.dateFormat}}
value={{readonly this.dateValue}}
disabled={{this.disabled}}
{{on "input" (fn this.onDateInput dp)}}
{{on "blur" this.onDateBlur}}
{{on "keydown" (fn this.onDateKeydown dp)}}
data-test-date-time-picker-date-input>
{{svg-jar "calendar"}}
</div>
</dp.Trigger>
<dp.Content class="dropdown-menu">
<dp.Nav />
<dp.Days @minDate={{this._minDate}} @maxDate={{this._maxDate}} @weekdayFormat="min" />
</dp.Content>
</PowerDatepicker>
<div class="gh-date-time-picker-time {{if this.hasError "error"}}">
<input
type="text"
value={{this._time}}
disabled={{this.disabled}}
{{on "change" this.updateTimeValue}}
{{on "blur" (fn this.setTimeInternal this._time)}}
{{did-insert this.registerTimeInput}}
data-test-date-time-picker-time-input
>
<small class="gh-date-time-picker-timezone" data-test-date-time-picker-timezone>({{this.timezone}})</small>
</div>
</div>
{{#if this.hasError}}
<div class="gh-date-time-picker-error" data-test-date-time-picker-error>{{this.dateError}}{{this.timeError}}</div>
{{/if}}