From 0e9642ea3e2cf763d4643483965275c4045aa558 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 8 May 2023 22:08:22 -0700
Subject: [PATCH] Add explanations to relative dates
---
src-ui/messages.xlf | 21 ++++++++++++-------
.../date-dropdown.component.html | 17 +++++++++++----
.../date-dropdown.component.scss | 2 +-
.../date-dropdown/date-dropdown.component.ts | 12 +++++++----
4 files changed, 36 insertions(+), 16 deletions(-)
diff --git a/src-ui/messages.xlf b/src-ui/messages.xlf
index fae98b3c0..e3926c578 100644
--- a/src-ui/messages.xlf
+++ b/src-ui/messages.xlf
@@ -741,11 +741,11 @@
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/common/date-dropdown/date-dropdown.component.html</context>
- <context context-type="linenumber">24</context>
+ <context context-type="linenumber">33</context>
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/common/date-dropdown/date-dropdown.component.html</context>
- <context context-type="linenumber">47</context>
+ <context context-type="linenumber">56</context>
</context-group>
</trans-unit>
<trans-unit id="5000042972069710005" datatype="html">
@@ -789,18 +789,25 @@
<context context-type="linenumber">440</context>
</context-group>
</trans-unit>
+ <trans-unit id="6052766076365105714" datatype="html">
+ <source>now</source>
+ <context-group purpose="location">
+ <context context-type="sourcefile">src/app/components/common/date-dropdown/date-dropdown.component.html</context>
+ <context context-type="linenumber">20</context>
+ </context-group>
+ </trans-unit>
<trans-unit id="6371576811194810854" datatype="html">
<source>After</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/common/date-dropdown/date-dropdown.component.html</context>
- <context context-type="linenumber">19</context>
+ <context context-type="linenumber">28</context>
</context-group>
</trans-unit>
<trans-unit id="1218334388194408974" datatype="html">
<source>Before</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/common/date-dropdown/date-dropdown.component.html</context>
- <context context-type="linenumber">42</context>
+ <context context-type="linenumber">51</context>
</context-group>
</trans-unit>
<trans-unit id="4873149362496451858" datatype="html">
@@ -814,21 +821,21 @@
<source>Last month</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/common/date-dropdown/date-dropdown.component.ts</context>
- <context context-type="linenumber">47</context>
+ <context context-type="linenumber">48</context>
</context-group>
</trans-unit>
<trans-unit id="8697368973702409683" datatype="html">
<source>Last 3 months</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/common/date-dropdown/date-dropdown.component.ts</context>
- <context context-type="linenumber">51</context>
+ <context context-type="linenumber">53</context>
</context-group>
</trans-unit>
<trans-unit id="3566342898065860218" datatype="html">
<source>Last year</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/components/common/date-dropdown/date-dropdown.component.ts</context>
- <context context-type="linenumber">55</context>
+ <context context-type="linenumber">58</context>
</context-group>
</trans-unit>
<trans-unit id="8953033926734869941" datatype="html">
diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
index 05547fed6..ad790821e 100644
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
@@ -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' }} – <ng-container i18n>now</ng-container>
+ </span>
+ </div>
+ </div>
</button>
<div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.scss b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.scss
index 8573ab575..83ac93233 100644
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.scss
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.scss
@@ -1,5 +1,5 @@
.date-dropdown {
- min-width: 250px;
+ white-space: nowrap;
.btn-link {
line-height: 1;
diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
index e901acfeb..423bf4a68 100644
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
@@ -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),
},
]