open-vault/ui/app/templates/components/calendar-widget.hbs
Angel Garbarino ccba717a93
Calendar widget tooltip (#13937)
* first tooltip for next year disabled

* workable for left tooltip

* styling

* make dry

* forgot this one

* remove right tooltip

* clean up

* bug fix

* add bullets when two error messages in one

* fix to isAfter on range comparisons

* remove

* update message per design

* only warning for startTime

* fix for firefox
2022-02-10 09:43:40 -07:00

98 lines
3.4 KiB
Handlebars

<BasicDropdown @class="popup-menu" @horizontalPosition="auto-right" @verticalPosition="below" as |D|>
<D.Trigger
data-test-popup-menu-trigger="true"
class={{concat "toolbar-link" (if D.isOpen " is-active")}}
@htmlTag="button"
>
{{@startTimeDisplay}}
-
{{@endTimeDisplay}}
<Chevron @direction="down" @isButton={{true}} />
</D.Trigger>
<D.Content class="popup-menu-content calendar-content">
<nav class="box menu">
<div class="calendar-title is-subtitle-gray">DATE OPTIONS</div>
<ul class="menu-list">
<li class="action">
<button
class="link link-plain has-text-weight-semibold is-ghost"
type="button"
{{on "click" (fn this.selectCurrentBillingPeriod D)}}
>
Current billing period
</button>
</li>
<li class="action">
<button
class={{concat "link link-plain has-text-weight-semibold is-ghost" (if this.showCalendar " is-active")}}
type="button"
{{on "click" this.toggleShowCalendar}}
>
<div class="level is-mobile">
<span class="level-left">Custom end month</span>
<Chevron class="has-text-grey-light level-right" />
</div>
</button>
</li>
</ul>
</nav>
{{#if this.showCalendar}}
<div class="calendar-widget-container">
<div class="select-year">
<button
id="previous-year"
type="button"
class="button is-transparent"
disabled={{this.disablePastYear}}
{{on "click" this.subYear}}
>
<Chevron
@direction="left"
@size="s"
class="has-text-grey"
{{on "mouseover" this.addTooltip}}
{{on "mouseleave" this.removeTooltip}}
/>
</button>
<p>{{this.displayYear}}</p>
<button
type="button"
class={{concat "button is-transparent " (if (or this.tooltipTarget) "negative-margin" "padding-right")}}
disabled={{this.disableFutureYear}}
{{on "click" this.addYear}}
>
<Chevron @direction="right" @size="s" class="has-text-grey" />
</button>
{{#if this.tooltipTarget}}
{{! Component must be in curly bracket notation }}
{{! template-lint-disable no-curly-component-invocation }}
{{#modal-dialog
tagName="div"
tetherTarget=this.tooltipTarget
targetAttachment="top right"
attachment="top middle"
offset="150px 0"
}}
<div class={{"calendar-tooltip"}}>
<p>{{this.tooltipText}}</p>
</div>
<div class="chart-tooltip-arrow"></div>
{{/modal-dialog}}
{{/if}}
</div>
<div {{did-insert this.disableMonths}} class="calendar-widget-grid calendar-widget">
{{#each @arrayOfMonths as |month index|}}
<button
type="button"
{{on "click" (fn this.selectEndMonth index this.displayYear D)}}
class="is-month-list"
id={{concat index "-" this.displayYear}}
>
{{month}}
</button>
{{/each}}
</div>
</div>
{{/if}}
</D.Content>
</BasicDropdown>