Skip to content

Commit b28e104

Browse files
Todor-adsTodor-ads
authored
feat(ui5-timeline): enable horizontal layout (#3520)
1 parent aed17c1 commit b28e104

File tree

9 files changed

+385
-27
lines changed

9 files changed

+385
-27
lines changed

‎packages/fiori/src/Timeline.hbs

+10-8
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
<div class="ui5-timeline-root" @focusin={{_onfocusin}}>
2-
<ul class="ui5-timeline-list" role="listbox" aria-live="polite" aria-label="{{accessibleName}}">
3-
{{#each items}}
4-
<li class="ui5-timeline-list-item" style="list-style-type: none;">
5-
<slot name="{{this._individualSlot}}"></slot>
6-
</li>
7-
{{/each}}
8-
</ul>
1+
<div class="ui5-timeline-root" @focusin={{_onfocusin}} dir="{{effectiveDir}}">
2+
<div class="ui5-timeline-scroll-container">
3+
<ul class="ui5-timeline-list" role="listbox" aria-live="polite" aria-label="{{accessibleName}}">
4+
{{#each items}}
5+
<li class="ui5-timeline-list-item" style="list-style-type: none;">
6+
<slot name="{{this._individualSlot}}"></slot>
7+
</li>
8+
{{/each}}
9+
</ul>
10+
</div>
911
</div>

‎packages/fiori/src/Timeline.js

+41-1
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,17 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
22
import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
33
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
44
import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
5+
import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
56
import TimelineTemplate from "./generated/templates/TimelineTemplate.lit.js";
67
import { TIMELINE_ARIA_LABEL } from "./generated/i18n/i18n-defaults.js";
78
import TimelineItem from "./TimelineItem.js";
89

910
// Styles
1011
import styles from "./generated/themes/Timeline.css.js";
12+
import TimelineLayout from "./types/TimelineLayout.js";
13+
14+
const SHORT_LINE_WIDTH = "ShortLineWidth";
15+
const LARGE_LINE_WIDTH = "LargeLineWidth";
1116

1217
/**
1318
* @public
@@ -16,6 +21,28 @@ const metadata = {
1621
tag: "ui5-timeline",
1722
languageAware: true,
1823
managedSlots: true,
24+
properties: /** @lends sap.ui.webcomponents.fiori.Timeline.prototype */ {
25+
/**
26+
* Defines the items orientation.
27+
*
28+
* <br><br>
29+
* <b>Note:</b>
30+
* Available options are:
31+
* <ul>
32+
* <li><code>Vertical</code></li>
33+
* <li><code>Horizontal</code></li>
34+
* </ul>
35+
*
36+
* @type {TimelineLayout}
37+
* @defaultvalue "Vertical"
38+
* @since 1.0.0-rc.15
39+
* @public
40+
*/
41+
layout: {
42+
type: TimelineLayout,
43+
defaultValue: TimelineLayout.Vertical,
44+
},
45+
},
1946
slots: /** @lends sap.ui.webcomponents.fiori.Timeline.prototype */ {
2047
/**
2148
* Determines the content of the <code>ui5-timeline</code>.
@@ -30,6 +57,7 @@ const metadata = {
3057
individualSlots: true,
3158
},
3259
},
60+
3361
};
3462

3563
/**
@@ -75,7 +103,6 @@ class Timeline extends UI5Element {
75103
this._itemNavigation = new ItemNavigation(this, {
76104
getItemsCallback: () => this.items,
77105
});
78-
79106
this.i18nBundle = getI18nBundle("@ui5/webcomponents-fiori");
80107
}
81108

@@ -96,6 +123,19 @@ class Timeline extends UI5Element {
96123

97124
this._itemNavigation.setCurrentItem(target);
98125
}
126+
127+
onBeforeRendering() {
128+
this._itemNavigation.navigationMode = this.layout === TimelineLayout.Horizontal ? NavigationMode.Horizontal : NavigationMode.Vertical;
129+
130+
for (let i = 0; i < this.items.length; i++) {
131+
this.items[i].layout = this.layout;
132+
if (this.items[i + 1] && !!this.items[i + 1].icon) {
133+
this.items[i]._lineWidth = SHORT_LINE_WIDTH;
134+
} else if (this.items[i].icon && this.items[i + 1] && !this.items[i + 1].icon) {
135+
this.items[i]._lineWidth = LARGE_LINE_WIDTH;
136+
}
137+
}
138+
}
99139
}
100140

101141
Timeline.define();

‎packages/fiori/src/TimelineItem.hbs

+9-8
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,20 @@
22
class="ui5-tli-root"
33
dir="{{effectiveDir}}"
44
>
5-
<div class="ui5-tli-indicator">
6-
{{#if icon}}
7-
<div class="ui5-tli-icon-outer">
5+
<div class="{{classes.indicator}}">
6+
<div class="ui5-tli-icon-outer">
7+
{{#if icon}}
88
<ui5-icon class="ui5-tli-icon" name="{{icon}}"></ui5-icon>
9-
</div>
10-
{{/if}}
9+
{{else}}
10+
<div class="ui5-tli-dummy-icon-container"></div>
11+
{{/if}}
12+
</div>
1113
</div>
1214
<div class="ui5-tli-bubble" tabindex="{{_tabIndex}}" role="option" data-sap-focus-ref>
1315
<div class="ui5-tli-title">
1416
{{#if name}}
1517
{{> name}}
1618
{{/if}}
17-
1819
<span>{{titleText}}</span>
1920
</div>
2021
<div class="ui5-tli-subtitle">{{subtitleText}}</div>
@@ -24,7 +25,7 @@
2425
<slot></slot>
2526
</div>
2627
{{/if}}
27-
<span class="ui5-tli-bubble-arrow ui5-tli-bubble-arrow--left"></span>
28+
<span class="{{classes.bubbleArrowPosition}}"></span>
2829
</div>
2930
</div>
3031

@@ -34,4 +35,4 @@
3435
{{else}}
3536
<span class="ui5-tli-title-name">{{name}}&nbsp;</span>
3637
{{/if}}
37-
{{/inline}}
38+
{{/inline}}

‎packages/fiori/src/TimelineItem.js

+41-1
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,13 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
33
import Icon from "@ui5/webcomponents/dist/Icon.js";
44
import Link from "@ui5/webcomponents/dist/Link.js";
55
import TimelineItemTemplate from "./generated/templates/TimelineItemTemplate.lit.js";
6-
6+
import TimelineLayout from "./types/TimelineLayout.js";
77
// Styles
88
import styles from "./generated/themes/TimelineItem.css.js";
99

10+
const SHORT_LINE_WIDTH = "ShortLineWidth";
11+
const LARGE_LINE_WIDTH = "LargeLineWidth";
12+
1013
/**
1114
* @public
1215
*/
@@ -88,6 +91,28 @@ const metadata = {
8891
defaultValue: "-1",
8992
noAttribute: true,
9093
},
94+
95+
/**
96+
* Defines the items orientation.
97+
*
98+
* @type {TimelineLayout}
99+
* @defaultvalue "Vertical"
100+
* @private
101+
*/
102+
layout: {
103+
type: TimelineLayout,
104+
defaultvalue: TimelineLayout.Vertical,
105+
},
106+
107+
/**
108+
* Defines the indicator line width.
109+
*
110+
* @type {String}
111+
* @private
112+
*/
113+
_lineWidth: {
114+
type: String,
115+
},
91116
},
92117
events: /** @lends sap.ui.webcomponents.fiori.TimelineItem.prototype */ {
93118
/**
@@ -150,6 +175,21 @@ class TimelineItem extends UI5Element {
150175
Link,
151176
];
152177
}
178+
179+
get classes() {
180+
return {
181+
indicator: {
182+
"ui5-tli-indicator": true,
183+
"ui5-tli-indicator-short-line": this._lineWidth === SHORT_LINE_WIDTH,
184+
"ui5-tli-indicator-large-line": this._lineWidth === LARGE_LINE_WIDTH,
185+
},
186+
bubbleArrowPosition: {
187+
"ui5-tli-bubble-arrow": true,
188+
"ui5-tli-bubble-arrow--left": this.layout === TimelineLayout.Vertical,
189+
"ui5-tli-bubble-arrow--top": this.layout === TimelineLayout.Horizontal,
190+
},
191+
};
192+
}
153193
}
154194

155195
TimelineItem.define();

‎packages/fiori/src/themes/Timeline.css

+29
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,32 @@
2121
.ui5-timeline-list-item:last-child {
2222
margin-bottom: 0;
2323
}
24+
25+
:host([layout="Horizontal"]) .ui5-timeline-list {
26+
white-space: nowrap;
27+
list-style: none;
28+
margin: 0;
29+
padding: 0;
30+
}
31+
32+
:host([layout="Horizontal"]) .ui5-timeline-list-item {
33+
display: inline-block;
34+
margin-left: var(--_ui5_tl_li_margin_bottom);
35+
}
36+
37+
:host([layout="Horizontal"]) .ui5-timeline-scroll-container {
38+
overflow: auto;
39+
/* The padding values of the parent container are added to the size of scroll container */
40+
width: calc(100% + 0.5rem);
41+
}
42+
43+
:host([layout="Horizontal"]) [dir=rtl] .ui5-timeline-list-item {
44+
display: inline-block;
45+
margin-left: inherit;
46+
margin-right: var(--_ui5_tl_li_margin_bottom);
47+
}
48+
49+
:host([layout="Horizontal"]) [dir=rtl] .ui5-timeline-scroll-container {
50+
/* The padding values of the parent container are added to the size of scroll container */
51+
width: calc(100% - 0.5rem);
52+
}

0 commit comments

Comments
 (0)