From 287548ef83da12767a791d2abba3cf294cceba86 Mon Sep 17 00:00:00 2001 From: Adrian Bobev Date: Fri, 12 Apr 2019 11:18:44 +0300 Subject: [PATCH] refactor(ui5-timeline): change timestamp property to subtitleText (#321) Closes: https://github.com/SAP/ui5-webcomponents/issues/299 BREAKING CHANGE: 'timestamp' and 'timeFormat' properties are removed. Instead use subtitle-text property and directly format the text as desired. --- packages/main/src/TimelineItem.hbs | 2 +- packages/main/src/TimelineItem.js | 18 ++++-------------- .../main/src/TimelineItemTemplateContext.js | 5 ----- packages/main/src/themes-next/TimelineItem.css | 4 ++-- .../main/src/themes/base/TimelineItem.less | 2 +- .../ui/webcomponents/main/pages/Timeline.html | 6 +++--- .../main/samples/Timeline.sample.html | 12 ++++++------ 7 files changed, 17 insertions(+), 32 deletions(-) diff --git a/packages/main/src/TimelineItem.hbs b/packages/main/src/TimelineItem.hbs index 00ee404b5a6f..4ef4e287d715 100644 --- a/packages/main/src/TimelineItem.hbs +++ b/packages/main/src/TimelineItem.hbs @@ -12,7 +12,7 @@ {{ctr.titleText}} -
{{dateTime}}
+
{{ctr.subtitleText}}
{{#if ctr.description}}
diff --git a/packages/main/src/TimelineItem.js b/packages/main/src/TimelineItem.js index 2faaf29ed709..d43e8b79062c 100644 --- a/packages/main/src/TimelineItem.js +++ b/packages/main/src/TimelineItem.js @@ -2,7 +2,6 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap"; import WebComponent from "@ui5/webcomponents-base/src/WebComponent"; import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle"; import URI from "@ui5/webcomponents-base/src/types/URI"; -import Integer from "@ui5/webcomponents-base/src/types/Integer"; import Function from "@ui5/webcomponents-base/src/types/Function"; import { fetchCldrData } from "@ui5/webcomponents-base/src/CLDR"; import { getLocale } from "@ui5/webcomponents-base/src/LocaleProvider"; @@ -87,22 +86,13 @@ const metadata = { }, /** - * It's a UNIX timestamp - seconds since 00:00:00 UTC on Jan 1, 1970. - * @type {Integer} - * @public - */ - timestamp: { - type: Integer, - }, - - /** - * Defines the format of date/time of the component. - * @type {Integer} + * Defines the subtitle text of the component. + * @type {String} * @public */ - timeFormat: { + subtitleText: { type: String, - defaultValue: "dd.MM.YYYY hh:mm", + defaultValue: "", }, _onItemNamePress: { diff --git a/packages/main/src/TimelineItemTemplateContext.js b/packages/main/src/TimelineItemTemplateContext.js index fe45dd852abf..e6b6d1200a64 100644 --- a/packages/main/src/TimelineItemTemplateContext.js +++ b/packages/main/src/TimelineItemTemplateContext.js @@ -1,9 +1,5 @@ -import DateFormat from "@ui5/webcomponents-core/dist/sap/ui/core/format/DateFormat"; - class TimelineItemTemplateContext { static calculate(state) { - const dateTimeFormat = DateFormat.getDateTimeInstance({ pattern: state.timeFormat, calendarType: "Gregorian" }); - return { ctr: state, classes: { @@ -14,7 +10,6 @@ class TimelineItemTemplateContext { }, styles: { }, - dateTime: dateTimeFormat.format(new Date(state.timestamp)), }; } } diff --git a/packages/main/src/themes-next/TimelineItem.css b/packages/main/src/themes-next/TimelineItem.css index 041c739939fb..5b8e4935498b 100644 --- a/packages/main/src/themes-next/TimelineItem.css +++ b/packages/main/src/themes-next/TimelineItem.css @@ -141,7 +141,7 @@ ui5-timeline-item { vertical-align: top; } -.sapWCTimelineItemTime { +.sapWCTimelineItemSubtitle { color: var(--sapUiContentLabelColor); font-family: var(--sapUiFontFamily); font-weight: 400; @@ -183,4 +183,4 @@ ui5-timeline-item { [dir=rtl] .sapWCTimelineBubble:focus::after { left: var(--_ui5_TimelineItem_bubble_rtl_left_offset); right: var(--_ui5_TimelineItem_bubble_rtl_right_offset); -} \ No newline at end of file +} diff --git a/packages/main/src/themes/base/TimelineItem.less b/packages/main/src/themes/base/TimelineItem.less index 6c825aeb76dd..5fced5416674 100644 --- a/packages/main/src/themes/base/TimelineItem.less +++ b/packages/main/src/themes/base/TimelineItem.less @@ -152,7 +152,7 @@ ui5-timeline-item { vertical-align: top; } -.sapWCTimelineItemTime { +.sapWCTimelineItemSubtitle { color: @sapUiContentLabelColor; font-family: @sapUiFontFamily; font-weight: 400; diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/Timeline.html b/packages/main/test/sap/ui/webcomponents/main/pages/Timeline.html index bd01f95b6e27..2c826014fb29 100644 --- a/packages/main/test/sap/ui/webcomponents/main/pages/Timeline.html +++ b/packages/main/test/sap/ui/webcomponents/main/pages/Timeline.html @@ -84,11 +84,11 @@

Timeline

heading="Upcoming Activities" subtitle="For Today"> - - + +
MR SOF02 2.43
 - +
Online meeting
 diff --git a/packages/main/test/sap/ui/webcomponents/main/samples/Timeline.sample.html b/packages/main/test/sap/ui/webcomponents/main/samples/Timeline.sample.html index 779934b4862f..f7d38a0fa490 100644 --- a/packages/main/test/sap/ui/webcomponents/main/samples/Timeline.sample.html +++ b/packages/main/test/sap/ui/webcomponents/main/samples/Timeline.sample.html @@ -53,22 +53,22 @@

Timeline

Basic Timeline

- - + +
MR SOF02 2.43
 - +
Online meeting
 

 <ui5-timeline>
-	<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="sap-icon://phone" item-name="John Smith" item-name-clickable></ui5-timeline-item>
-	<ui5-timeline-item title-text="Weekly Sync - CP Design" timestamp="1517349600000" icon="sap-icon://calendar">
+	<ui5-timeline-item id="test-item" title-text="called" subtitle-text="20.02.2017 11:30" icon="sap-icon://phone" item-name="John Smith" item-name-clickable></ui5-timeline-item>
+	<ui5-timeline-item title-text="Weekly Sync - CP Design" subtitle-text="27.07.2017 (11:00 - 12:30)" icon="sap-icon://calendar">
 		<div>MR SOF02 2.43</div>
 	</ui5-timeline-item>
-	<ui5-timeline-item title-text="Video Converence Call - UI5" timestamp="1485813600000" icon="sap-icon://calendar">
+	<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="sap-icon://calendar">
 		<div>Online meeting</div>
 	</ui5-timeline-item>
 </ui5-timeline>