Skip to content

Commit 83e8288

Browse files
PetyaMarkovaBogdanovaPetyaMarkovaBogdanova
committed
chore(ui5-toolbar): toolbar wrappers introduced
1 parent 02ec8f9 commit 83e8288

4 files changed

Lines changed: 75 additions & 73 deletions

File tree

‎packages/main/src/Toolbar.ts‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -487,7 +487,8 @@ class Toolbar extends UI5Element {
487487

488488
onResize() {
489489
this.closeOverflow();
490-
setTimeout(() => this.onAfterRendering(), 0);
490+
this.storeItemsWidth();
491+
this.processOverflowLayout();
491492
}
492493

493494
/**
@@ -530,11 +531,6 @@ class Toolbar extends UI5Element {
530531
return Math.ceil(itemWidth);
531532
}
532533

533-
getItemWidthCss(item: ToolbarItem) {
534-
const itemMinWidth = item.selfOverflowed && Number(this.getItemWidth(item)) ? `${this.getItemWidth(item)}px` : "auto";
535-
return `${itemMinWidth}`;
536-
}
537-
538534
getCachedItemWidth(id: string) {
539535
return this.ITEMS_WIDTH_MAP.get(id);
540536
}

‎packages/main/src/ToolbarItem.ts‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,6 @@ type IEventOptions = {
1313
preventClosing: boolean;
1414
}
1515

16-
type ISelfOverflowedItem = {
17-
totalContentWidth: () => number;
18-
selfOverflowed: boolean;
19-
}
20-
2116
type ToolbarItemEventDetail = {
2217
targetRef: HTMLElement;
2318
}
@@ -77,12 +72,6 @@ class ToolbarItem extends UI5Element {
7772
@property({ type: Boolean })
7873
isOverflowed: boolean = false;
7974

80-
/**
81-
* @default false
82-
* @public
83-
* @since 2.16.0
84-
*/
85-
8675
@property({ type: Boolean })
8776
selfOverflowed: boolean = false;
8877

@@ -167,10 +156,6 @@ class ToolbarItem extends UI5Element {
167156
};
168157
}
169158

170-
constructor() {
171-
super();
172-
}
173-
174159
/**
175160
* Handles the click event on the toolbar item.
176161
* If `preventOverflowClosing` is false, it will fire a "close-overflow" event.
@@ -185,7 +170,6 @@ class ToolbarItem extends UI5Element {
185170
export type {
186171
IEventOptions,
187172
ToolbarItemEventDetail,
188-
ISelfOverflowedItem,
189173
};
190174
ToolbarItem.define();
191175

‎packages/main/test/pages/Toolbar.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
<!DOCTYPE html>
1+
<ui5-toolbar-item overflow-priority="AlwaysOverflow">
2+
<ui5-button icon="employee">Call me later</ui5-button>
23
<html>
34

45
<head>
@@ -77,9 +78,7 @@
7778
</ui5-toolbar-select>
7879
<ui5-toolbar-separator></ui5-toolbar-separator>
7980
<ui5-toolbar-separator></ui5-toolbar-separator>
80-
<ui5-toolbar-item overflow-priority="AlwaysOverflow">
81-
<ui5-button icon="employee">Call me later</ui5-button>
82-
</ui5-toolbar-item>
81+
<ui5-toolbar-button icon="employee" text="Call me later"></ui5-toolbar-button>
8382
</ui5-toolbar>
8483
</section>
8584
<br /><br />

‎packages/main/test/pages/ToolbarWrappers.html‎

Lines changed: 70 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,53 @@
66

77
<title>Toolbar</title>
88
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
9-
<meta charset="utf-8">
109

1110
<script src="%VITE_BUNDLE_PATH%" type="module"></script>
1211
<link rel="stylesheet" type="text/css" href="./styles/Toolbar.css">
1312
</head>
1413

1514
<body>
1615
<div id="toolbars-container">
16+
<ui5-title level="H3">Standard Toolbar with ToolbarSelect and ToolbarButton</ui5-title>
17+
<br />
18+
<section>
19+
<ui5-toolbar id="otb_standard">
20+
<ui5-toolbar-button icon="add" stable-dom-ref="otb_button_1" text="Left 1 (long)"></ui5-toolbar-button>
21+
<ui5-toolbar-button icon="decline" text="Left 2"></ui5-toolbar-button>
22+
<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
23+
<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
24+
<ui5-toolbar-button icon="add" text="Mid 1"></ui5-toolbar-button>
25+
<ui5-toolbar-button icon="decline" text="Mid 2"></ui5-toolbar-button>
26+
<ui5-toolbar-button icon="add" text="Right 1"></ui5-toolbar-button>
27+
<ui5-toolbar-button overflow-priority="NeverOverflow" icon="employee" text="Right 4"></ui5-toolbar-button>
28+
<ui5-toolbar-select id="toolbar-select">
29+
<ui5-toolbar-select-option>1</ui5-toolbar-select-option>
30+
<ui5-toolbar-select-option selected>2</ui5-toolbar-select-option>
31+
<ui5-toolbar-select-option>3</ui5-toolbar-select-option>
32+
</ui5-toolbar-select>
33+
<ui5-toolbar-separator></ui5-toolbar-separator>
34+
<ui5-toolbar-separator></ui5-toolbar-separator>
35+
<ui5-toolbar-button overflow-priority="AlwaysOverflow" icon="employee" prevent-overflow-closing text="Call me later" ></ui5-toolbar-button>
36+
</ui5-toolbar>
37+
</section>
38+
<ui5-title level="H3">Toolbar with ui5-select and ui5-button wrapped in ui5-toolbar-item</ui5-title>
1739
<ui5-title level="H3">Toolbar with various components</ui5-title>
1840
<br />
41+
<section>
42+
<ui5-toolbar>
43+
<ui5-toolbar-item expand-in-overflow><ui5-button icon="add" stable-dom-ref="otb_button_1">Left 1 (long)</ui5-button></ui5-toolbar-item>
44+
<ui5-toolbar-item expand-in-overflow><ui5-button icon="decline">Left 2</ui5-button></ui5-toolbar-item>
45+
<ui5-toolbar-item><ui5-button icon="employee">Left 3</ui5-button></ui5-toolbar-item>
46+
<ui5-toolbar-item><ui5-button icon="decline">Left 4</ui5-button></ui5-toolbar-item>
47+
<ui5-toolbar-item><ui5-button icon="add">Mid 1</ui5-button></ui5-toolbar-item>
48+
<ui5-toolbar-item><ui5-button icon="decline">Mid 2</ui5-button></ui5-toolbar-item>
49+
<ui5-toolbar-item><ui5-button icon="add">Right 1</ui5-button></ui5-toolbar-item>
50+
<ui5-toolbar-item overflow-priority="NeverOverflow"><ui5-button icon="employee">Right 4</ui5-button></ui5-toolbar-item>
51+
</ui5-toolbar>
52+
<ui5-title level="H3">Toolbar with various components</ui5-title>
53+
<br />
1954
<section>
2055
<ui5-toolbar id="otb_misc">
21-
2256
<ui5-toolbar-item>
2357
<ui5-input id="myInput" class="input2auto" show-suggestions placeholder="Search for a country ...">
2458
</ui5-toolbar-item>
@@ -40,18 +74,6 @@
4074
<ui5-cb-item text="Chile"></ui5-cb-item>
4175
</ui5-combobox>
4276
</ui5-toolbar-item>
43-
<ui5-toolbar-item self-overflowed>
44-
<ui5-breadcrumbs id="breadcrumbs2">
45-
<ui5-breadcrumbs-item href="https://www.sap.com">Link1 </ui5-breadcrumbs-item>
46-
<ui5-breadcrumbs-item href="https://www.sap.com" target="_blank">Link2</ui5-breadcrumbs-item>
47-
<ui5-breadcrumbs-item href="#">Link3</ui5-breadcrumbs-item>
48-
<ui5-breadcrumbs-item href="#">Link4</ui5-breadcrumbs-item>
49-
<ui5-breadcrumbs-item href="#">Link5</ui5-breadcrumbs-item>
50-
<ui5-breadcrumbs-item href="#">Link6</ui5-breadcrumbs-item>
51-
<ui5-breadcrumbs-item href="#">Link7</ui5-breadcrumbs-item>
52-
<ui5-breadcrumbs-item href="#">Location</ui5-breadcrumbs-item>
53-
</ui5-breadcrumbs>
54-
</ui5-toolbar-item>
5577
<ui5-toolbar-item prevent-overflow-closing>
5678
<ui5-title>Simple title</ui5-title>
5779
</ui5-toolbar-item>
@@ -64,12 +86,12 @@
6486

6587
</ui5-toolbar>
6688
</section>
67-
<ui5-title level="H3">Toolbar with various components</ui5-title>
89+
<ui5-title level="H3">Toolbar with breadcrumbs (self-overflowed) component at the beginning</ui5-title>
6890
<br />
6991
<section>
70-
<ui5-toolbar id="otb_misc">
92+
<ui5-toolbar>
7193
<ui5-toolbar-item self-overflowed>
72-
<ui5-breadcrumbs id="breadcrumbs2">
94+
<ui5-breadcrumbs>
7395
<ui5-breadcrumbs-item href="https://www.sap.com">Link1 </ui5-breadcrumbs-item>
7496
<ui5-breadcrumbs-item href="https://www.sap.com" target="_blank">Link2</ui5-breadcrumbs-item>
7597
<ui5-breadcrumbs-item href="#">Link3</ui5-breadcrumbs-item>
@@ -80,37 +102,38 @@
80102
<ui5-breadcrumbs-item href="#">Location</ui5-breadcrumbs-item>
81103
</ui5-breadcrumbs>
82104
</ui5-toolbar-item>
83-
<ui5-toolbar-item>
84-
<ui5-input id="myInput" class="input2auto" show-suggestions placeholder="Search for a country ...">
85-
</ui5-toolbar-item>
86-
<ui5-toolbar-item>
87-
<ui5-text style="max-width:50px; text-overflow: ellipsis;white-space: nowrap;display: inline-block;">Simple text</ui5-text>
88-
</ui5-toolbar-item>
89-
<ui5-toolbar-item>
90-
<ui5-combobox id="combo" class="combobox2auto" value="ComboBox" accessible-name-ref="countryLabel">
91-
<ui5-cb-item text="Algeria"></ui5-cb-item>
92-
<ui5-cb-item text="Argentina"></ui5-cb-item>
93-
<ui5-cb-item text="Australia"></ui5-cb-item>
94-
<ui5-cb-item text="Austria"></ui5-cb-item>
95-
<ui5-cb-item text="Bahrain"></ui5-cb-item>
96-
<ui5-cb-item text="Belgium"></ui5-cb-item>
97-
<ui5-cb-item text="Very long text that makes popover wider than the ComboBox"></ui5-cb-item>
98-
<ui5-cb-item text="Brazil"></ui5-cb-item>
99-
<ui5-cb-item text="Bulgaria"></ui5-cb-item>
100-
<ui5-cb-item text="Canada"></ui5-cb-item>
101-
<ui5-cb-item text="Chile"></ui5-cb-item>
102-
</ui5-combobox>
103-
</ui5-toolbar-item>
104-
<ui5-toolbar-item prevent-overflow-closing>
105-
<ui5-title>Simple title</ui5-title>
106-
</ui5-toolbar-item>
107-
<ui5-toolbar-item>
108-
<ui5-toggle-button icon="sap-icon://employee"></ui5-toggle-button>
109-
</ui5-toolbar-item>
110-
<ui5-toolbar-item prevent-overflow-closing>
111-
<div>div with <a onclick="alert(100)" href="#">Link</a> and text</div>
105+
<ui5-toolbar-button icon="add" stable-dom-ref="otb_button_1" text="Left 1 (long)"></ui5-toolbar-button>
106+
<ui5-toolbar-button icon="decline" text="Left 2"></ui5-toolbar-button>
107+
<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
108+
<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
109+
<ui5-toolbar-button icon="add" text="Mid 1"></ui5-toolbar-button>
110+
<ui5-toolbar-button icon="decline" text="Mid 2"></ui5-toolbar-button>
111+
<ui5-toolbar-button icon="add" text="Right 1"></ui5-toolbar-button>
112+
</ui5-toolbar>
113+
</section>
114+
<ui5-title level="H3">Toolbar with breadcrumbs (self-overflowed) component at the middle</ui5-title>
115+
<br />
116+
<section>
117+
<ui5-toolbar>
118+
<ui5-toolbar-button icon="add" stable-dom-ref="otb_button_1" text="Left 1 (long)"></ui5-toolbar-button>
119+
<ui5-toolbar-button icon="decline" text="Left 2"></ui5-toolbar-button>
120+
<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
121+
<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
122+
<ui5-toolbar-button icon="add" text="Mid 1"></ui5-toolbar-button>
123+
<ui5-toolbar-button icon="decline" text="Mid 2"></ui5-toolbar-button>
124+
<ui5-toolbar-item self-overflowed>
125+
<ui5-breadcrumbs>
126+
<ui5-breadcrumbs-item href="https://www.sap.com">Link1 </ui5-breadcrumbs-item>
127+
<ui5-breadcrumbs-item href="https://www.sap.com" target="_blank">Link2</ui5-breadcrumbs-item>
128+
<ui5-breadcrumbs-item href="#">Link3</ui5-breadcrumbs-item>
129+
<ui5-breadcrumbs-item href="#">Link4</ui5-breadcrumbs-item>
130+
<ui5-breadcrumbs-item href="#">Link5</ui5-breadcrumbs-item>
131+
<ui5-breadcrumbs-item href="#">Link6</ui5-breadcrumbs-item>
132+
<ui5-breadcrumbs-item href="#">Link7</ui5-breadcrumbs-item>
133+
<ui5-breadcrumbs-item href="#">Location</ui5-breadcrumbs-item>
134+
</ui5-breadcrumbs>
112135
</ui5-toolbar-item>
113-
136+
<ui5-toolbar-button icon="add" text="Right 1"></ui5-toolbar-button>
114137
</ui5-toolbar>
115138
</section>
116139
</div>

0 commit comments

Comments
 (0)