Time display in calendar better

traggo · Dec 3, 2019 · cc75ee2 · cc75ee2
1 parent 9f323d0
commit cc75ee2
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/ui/src/timespan/calendar/CalendarPage.tsx b/ui/src/timespan/calendar/CalendarPage.tsx
@@ -366,14 +366,19 @@ const getElementContent = (event: EventApi, stop: () => void): string => {
     }
     const clamp = (amount: number) =>
         `<span class="ellipsis" title="${event.title}" style="-webkit-line-clamp: ${amount}">${event.title}</span>`;
+
+    const running = hasEnd ? `<span style="float: right">${timeRunningCalendar(start, end)}</span>` : '';
+    const date = `${start.format('LT')} - ${hasEnd ? end.format('LT') : 'now'} ${running}`;
     if (lines < 2) {
-        return `<span class="ellipsis-single" title="${event.title}">${event.title}</span>${stopButton}`;
+        return event.title ? `<span class="ellipsis-single" title="${event.title}">${event.title}</span>${stopButton}` : date;
     }
     if (lines === 2) {
-        return `${clamp(2)}${stopButton}`;
+        if (hasEnd) {
+            return `${date}<span class="ellipsis-single" title="${event.title}">${event.title}</span>${stopButton}`;
+        } else {
+            return `${clamp(2)}${stopButton}`;
+        }
     }
 
-    const running = hasEnd ? `<span style="float: right">${timeRunningCalendar(start, end)}</span>` : '';
-    const date = `${start.format('LT')} - ${hasEnd ? end.format('LT') : 'now'} ${running}`;
     return `${date}<br/>${clamp(lines - 1)}${stopButton}`;
 };
diff --git a/ui/src/timespan/timeutils.ts b/ui/src/timespan/timeutils.ts
@@ -13,7 +13,7 @@ export const timeRunningCalendar = (date: moment.Moment, now: moment.Moment) =>
         return '<1m';
     }
 
-    return prettyMs(d * 1000, {compact: true}).substring(1);
+    return prettyMs(d * 1000, {unitCount: d < 60 * 24 ? 1 : 2}).substring(1);
 };
 
 export const uglyConvertToLocalTime = (m: moment.Moment): moment.Moment => {