Skip to content

Commit 287548e

Browse files
adrian-bobevadrian-bobev
authored
refactor(ui5-timeline): change timestamp property to subtitleText (#321)
Closes: #299 BREAKING CHANGE: 'timestamp' and 'timeFormat' properties are removed. Instead use subtitle-text property and directly format the text as desired.
1 parent aa516ff commit 287548e

File tree

7 files changed

+17
-32
lines changed

7 files changed

+17
-32
lines changed

‎packages/main/src/TimelineItem.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
<span>{{ctr.titleText}}</span>
1414
</div>
15-
<div class="sapWCTimelineItemTime">{{dateTime}}</div>
15+
<div class="sapWCTimelineItemSubtitle">{{ctr.subtitleText}}</div>
1616

1717
{{#if ctr.description}}
1818
<div class="sapWCTimelineItemDesc">

‎packages/main/src/TimelineItem.js

+4-14
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap";
22
import WebComponent from "@ui5/webcomponents-base/src/WebComponent";
33
import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle";
44
import URI from "@ui5/webcomponents-base/src/types/URI";
5-
import Integer from "@ui5/webcomponents-base/src/types/Integer";
65
import Function from "@ui5/webcomponents-base/src/types/Function";
76
import { fetchCldrData } from "@ui5/webcomponents-base/src/CLDR";
87
import { getLocale } from "@ui5/webcomponents-base/src/LocaleProvider";
@@ -87,22 +86,13 @@ const metadata = {
8786
},
8887

8988
/**
90-
* It's a UNIX timestamp - seconds since 00:00:00 UTC on Jan 1, 1970.
91-
* @type {Integer}
92-
* @public
93-
*/
94-
timestamp: {
95-
type: Integer,
96-
},
97-
98-
/**
99-
* Defines the format of date/time of the component.
100-
* @type {Integer}
89+
* Defines the subtitle text of the component.
90+
* @type {String}
10191
* @public
10292
*/
103-
timeFormat: {
93+
subtitleText: {
10494
type: String,
105-
defaultValue: "dd.MM.YYYY hh:mm",
95+
defaultValue: "",
10696
},
10797

10898
_onItemNamePress: {

‎packages/main/src/TimelineItemTemplateContext.js

-5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
1-
import DateFormat from "@ui5/webcomponents-core/dist/sap/ui/core/format/DateFormat";
2-
31
class TimelineItemTemplateContext {
42
static calculate(state) {
5-
const dateTimeFormat = DateFormat.getDateTimeInstance({ pattern: state.timeFormat, calendarType: "Gregorian" });
6-
73
return {
84
ctr: state,
95
classes: {
@@ -14,7 +10,6 @@ class TimelineItemTemplateContext {
1410
},
1511
styles: {
1612
},
17-
dateTime: dateTimeFormat.format(new Date(state.timestamp)),
1813
};
1914
}
2015
}

‎packages/main/src/themes-next/TimelineItem.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ ui5-timeline-item {
141141
vertical-align: top;
142142
}
143143

144-
.sapWCTimelineItemTime {
144+
.sapWCTimelineItemSubtitle {
145145
color: var(--sapUiContentLabelColor);
146146
font-family: var(--sapUiFontFamily);
147147
font-weight: 400;
@@ -183,4 +183,4 @@ ui5-timeline-item {
183183
[dir=rtl] .sapWCTimelineBubble:focus::after {
184184
left: var(--_ui5_TimelineItem_bubble_rtl_left_offset);
185185
right: var(--_ui5_TimelineItem_bubble_rtl_right_offset);
186-
}
186+
}

‎packages/main/src/themes/base/TimelineItem.less

+1-1
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ ui5-timeline-item {
152152
vertical-align: top;
153153
}
154154

155-
.sapWCTimelineItemTime {
155+
.sapWCTimelineItemSubtitle {
156156
color: @sapUiContentLabelColor;
157157
font-family: @sapUiFontFamily;
158158
font-weight: 400;

‎packages/main/test/sap/ui/webcomponents/main/pages/Timeline.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -84,11 +84,11 @@ <h2>Timeline</h2>
8484
heading="Upcoming Activities"
8585
subtitle="For Today">
8686
<ui5-timeline>
87-
<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="sap-icon://phone" item-name="Stanislava Baltova" item-name-clickable></ui5-timeline-item>
88-
<ui5-timeline-item title-text="Weekly Sync - CP Design" timestamp="1517349600000" icon="sap-icon://calendar">
87+
<ui5-timeline-item id="test-item" title-text="called" subtitle-text="20.02.2017 11:30" icon="sap-icon://phone" item-name="Stanislava Baltova" item-name-clickable></ui5-timeline-item>
88+
<ui5-timeline-item title-text="Weekly Sync - CP Design" subtitle-text="27.08.2017 (11:00 - 12:00)" icon="sap-icon://calendar">
8989
<div>MR SOF02 2.43</div>
9090
</ui5-timeline-item>
91-
<ui5-timeline-item title-text="Video Converence Call - UI5" timestamp="1485813600000" icon="sap-icon://calendar" item-name="Stanislava Baltova">
91+
<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="sap-icon://calendar" item-name="Stanislava Baltova">
9292
<div>Online meeting</div>
9393
</ui5-timeline-item>
9494
</ui5-timeline>

‎packages/main/test/sap/ui/webcomponents/main/samples/Timeline.sample.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -53,22 +53,22 @@ <h2 class="control-header">Timeline</h2>
5353
<h3>Basic Timeline</h3>
5454
<div class="snippet">
5555
<ui5-timeline>
56-
<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>
57-
<ui5-timeline-item title-text="Weekly Sync - CP Design" timestamp="1517349600000" icon="sap-icon://calendar">
56+
<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>
57+
<ui5-timeline-item title-text="Weekly Sync - CP Design" subtitle-text="27.07.2017 (11:00 - 12:30)" icon="sap-icon://calendar">
5858
<div>MR SOF02 2.43</div>
5959
</ui5-timeline-item>
60-
<ui5-timeline-item title-text="Video Converence Call - UI5" timestamp="1485813600000" icon="sap-icon://calendar">
60+
<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="sap-icon://calendar">
6161
<div>Online meeting</div>
6262
</ui5-timeline-item>
6363
</ui5-timeline>
6464
</div>
6565
<pre class="prettyprint lang-html"><xmp>
6666
<ui5-timeline>
67-
<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>
68-
<ui5-timeline-item title-text="Weekly Sync - CP Design" timestamp="1517349600000" icon="sap-icon://calendar">
67+
<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>
68+
<ui5-timeline-item title-text="Weekly Sync - CP Design" subtitle-text="27.07.2017 (11:00 - 12:30)" icon="sap-icon://calendar">
6969
<div>MR SOF02 2.43</div>
7070
</ui5-timeline-item>
71-
<ui5-timeline-item title-text="Video Converence Call - UI5" timestamp="1485813600000" icon="sap-icon://calendar">
71+
<ui5-timeline-item title-text="Video Converence Call - UI5" subtitle-text="31.01.2018 (12:00 - 13:00)" icon="sap-icon://calendar">
7272
<div>Online meeting</div>
7373
</ui5-timeline-item>
7474
</ui5-timeline>

0 commit comments

Comments
 (0)