Add explanations to relative dates

This commit is contained in:
shamoon
2023-05-08 22:08:22 -07:00
parent 3ab2892066
commit 0e9642ea3e
4 changed files with 36 additions and 16 deletions

View File

@@ -5,13 +5,22 @@
</button>
<div class="dropdown-menu date-dropdown shadow pt-0" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
<div class="list-group list-group-flush">
<button *ngFor="let rd of relativeDates" class="list-group-item small list-goup list-group-item-action d-flex p-2" role="menuitem" (click)="setRelativeDate(rd.date)">
<div class="selected-icon me-1">
<svg *ngIf="relativeDate === rd.date" fill="currentColor" class="buttonicon-sm">
<button *ngFor="let rd of relativeDates" class="list-group-item small list-goup list-group-item-action d-flex p-2" role="menuitem" (click)="setRelativeDate(rd.id)">
<div class="selected-icon">
<svg *ngIf="relativeDate === rd.id" fill="currentColor" class="buttonicon-sm">
<use xlink:href="assets/bootstrap-icons.svg#check"/>
</svg>
</div>
{{rd.name}}
<div class="d-flex justify-content-between w-100 align-items-center ps-2">
<div class="pe-2 pe-lg-4">
{{rd.name}}
</div>
<div class="text-muted small pe-2">
<span class="small">
{{ rd.date | customDate:'mediumDate' }} &ndash; <ng-container i18n>now</ng-container>
</span>
</div>
</div>
</button>
<div class="list-group-item d-flex flex-column align-items-start" role="menuitem">

View File

@@ -1,5 +1,5 @@
.date-dropdown {
min-width: 250px;
white-space: nowrap;
.btn-link {
line-height: 1;

View File

@@ -39,20 +39,24 @@ export class DateDropdownComponent implements OnInit, OnDestroy {
relativeDates = [
{
date: RelativeDate.LAST_7_DAYS,
id: RelativeDate.LAST_7_DAYS,
name: $localize`Last 7 days`,
date: new Date().setDate(new Date().getDate() - 7),
},
{
date: RelativeDate.LAST_MONTH,
id: RelativeDate.LAST_MONTH,
name: $localize`Last month`,
date: new Date().setMonth(new Date().getMonth() - 1),
},
{
date: RelativeDate.LAST_3_MONTHS,
id: RelativeDate.LAST_3_MONTHS,
name: $localize`Last 3 months`,
date: new Date().setMonth(new Date().getMonth() - 3),
},
{
date: RelativeDate.LAST_YEAR,
id: RelativeDate.LAST_YEAR,
name: $localize`Last year`,
date: new Date().setFullYear(new Date().getFullYear() - 1),
},
]