Skip to content

Commit c411774

Browse files
ilhan007ilhan007
authoredFeb 11, 2020
fix: apply size "compact" for StaticArea items (#1204)
·
v./29.5v0.0.0-7b49a7ff1
1 parent 5527990 commit c411774

17 files changed

+181
-13
lines changed
 

‎packages/base/src/StaticAreaItem.js

+17
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,23 @@ class StaticAreaItem {
4747
}
4848
}
4949

50+
/**
51+
* @protected
52+
*/
53+
_updateContentDensity(isCompact) {
54+
if (!this.staticAreaItemDomRef) {
55+
return;
56+
}
57+
58+
if (isCompact) {
59+
this.staticAreaItemDomRef.classList.add("sapUiSizeCompact");
60+
this.staticAreaItemDomRef.classList.add("ui5-content-density-compact");
61+
} else {
62+
this.staticAreaItemDomRef.classList.remove("sapUiSizeCompact");
63+
this.staticAreaItemDomRef.classList.remove("ui5-content-density-compact");
64+
}
65+
}
66+
5067
/**
5168
* @protected
5269
* Returns reference to the DOM element where the current fragment is added.

‎packages/base/src/UI5Element.js

+11
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const IDMap = new Map();
2222

2323
const elementTimeouts = new Map();
2424

25+
const GLOBAL_CONTENT_DENSITY_CSS_VAR = "--_ui5_content_density";
2526
/**
2627
* Base class for all UI5 Web Components
2728
*
@@ -590,6 +591,16 @@ class UI5Element extends HTMLElement {
590591
return this[slotName].reduce(reducer, []);
591592
}
592593

594+
get isCompact() {
595+
return getComputedStyle(this).getPropertyValue(GLOBAL_CONTENT_DENSITY_CSS_VAR) === "compact";
596+
}
597+
598+
updateStaticAreaItemContentDensity() {
599+
if (this.staticAreaItem) {
600+
this.staticAreaItem._updateContentDensity(this.isCompact);
601+
}
602+
}
603+
593604
/**
594605
* Used to duck-type UI5 elements without using instanceof
595606
* @returns {boolean}

‎packages/fiori/src/ShellBar.js

+2
Original file line numberDiff line numberDiff line change
@@ -385,6 +385,7 @@ class ShellBar extends UI5Element {
385385
this.menuItems.forEach(item => {
386386
this._menuPopoverItems.push(item.textContent);
387387
});
388+
this.updateStaticAreaItemContentDensity();
388389
menuPopover.openBy(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"));
389390
}
390391
},
@@ -628,6 +629,7 @@ class ShellBar extends UI5Element {
628629
_toggleActionPopover() {
629630
const popover = this.getStaticAreaItemDomRef().querySelector(".ui5-shellbar-overflow-popover");
630631
const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button");
632+
this.updateStaticAreaItemContentDensity();
631633
popover.openBy(overflowButton);
632634
}
633635

‎packages/fiori/test/pages/ShellBar.html

+16
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,22 @@
126126
<ui5-li slot="menuItems">Application 5</ui5-li>
127127
</ui5-shellbar>
128128

129+
<section class="ui5-content-density-compact">
130+
<h3>ShellBar in Compact</h3>
131+
<div>
132+
<ui5-shellbar primary-title="Product Title" show-notifications>
133+
<ui5-button icon="nav-back" slot="startButton" id="start-button"></ui5-button>
134+
<ui5-shellbar-item id="disc" icon="disconnected" text="Disconnect"></ui5-shellbar-item>
135+
<ui5-shellbar-item id="call" icon="incoming-call" text="Incoming Calls"></ui5-shellbar-item>
136+
<ui5-li id="menu-item-1" slot="menuItems">Application 1</ui5-li>
137+
<ui5-li id="menu-item-2" slot="menuItems">Application 2</ui5-li>
138+
<ui5-li slot="menuItems">Application 3</ui5-li>
139+
<ui5-li slot="menuItems">Application 4</ui5-li>
140+
<ui5-li slot="menuItems">Application 5</ui5-li>
141+
</ui5-shellbar>
142+
</div>
143+
</section>
144+
129145
<ui5-popover id="popover" placement-type="Bottom">
130146
<div class="popover-header">
131147
<ui5-title style="padding: 0.25rem 1rem 0rem 1rem">John Doe</ui5-title>

‎packages/main/src/ComboBox.js

+10-5
Original file line numberDiff line numberDiff line change
@@ -334,9 +334,9 @@ class ComboBox extends UI5Element {
334334

335335
_toggleRespPopover() {
336336
if (this._respPopover.opened) {
337-
this._respPopover.close();
337+
this._closeRespPopover();
338338
} else {
339-
this._respPopover.open(this);
339+
this._openRespPopover();
340340
}
341341
}
342342

@@ -363,7 +363,7 @@ class ComboBox extends UI5Element {
363363
this.filterValue = value;
364364
this.fireEvent("input");
365365

366-
this._respPopover.open(this);
366+
this._openRespPopover();
367367
}
368368

369369
_startsWithMatchingItems(str) {
@@ -382,14 +382,19 @@ class ComboBox extends UI5Element {
382382

383383
_click(event) {
384384
if (isPhone() && !this.readonly) {
385-
this._respPopover.open(this);
385+
this._openRespPopover();
386386
}
387387
}
388388

389389
_closeRespPopover() {
390390
this._respPopover.close();
391391
}
392392

393+
_openRespPopover() {
394+
this.updateStaticAreaItemContentDensity();
395+
this._respPopover.open(this);
396+
}
397+
393398
_filterItems(str) {
394399
return (Filters[this.filter] || Filters.StartsWithPerTerm)(str, this.items);
395400
}
@@ -440,7 +445,7 @@ class ComboBox extends UI5Element {
440445
});
441446

442447
this._inputChange();
443-
this._respPopover.close();
448+
this._closeRespPopover();
444449
}
445450

446451
get _filteredItems() {

‎packages/main/src/DatePicker.js

+1
Original file line numberDiff line numberDiff line change
@@ -637,6 +637,7 @@ class DatePicker extends UI5Element {
637637
if (this.isOpen()) {
638638
this.closePicker();
639639
} else if (this._canOpenPicker()) {
640+
this.updateStaticAreaItemContentDensity();
640641
this.openPicker();
641642
}
642643
}

‎packages/main/src/Input.js

+2
Original file line numberDiff line numberDiff line change
@@ -397,6 +397,7 @@ class Input extends UI5Element {
397397
if (!this.firstRendering && !isPhone() && this.Suggestions) {
398398
const shouldOpenSuggestions = this.shouldOpenSuggestions();
399399

400+
this.updateStaticAreaItemContentDensity();
400401
this.Suggestions.toggle(shouldOpenSuggestions);
401402

402403
if (!isPhone() && shouldOpenSuggestions) {
@@ -476,6 +477,7 @@ class Input extends UI5Element {
476477

477478
_click(event) {
478479
if (isPhone() && !this.readonly && this.Suggestions) {
480+
this.updateStaticAreaItemContentDensity();
479481
this.Suggestions.open(this);
480482
}
481483
}

‎packages/main/src/MultiComboBox.js

+5
Original file line numberDiff line numberDiff line change
@@ -391,6 +391,7 @@ class MultiComboBox extends UI5Element {
391391
if (filteredItems.length === 0) {
392392
this._getRespPopover().close();
393393
} else {
394+
this.updateStaticAreaItemContentDensity();
394395
this._getRespPopover().open(this);
395396
}
396397
}
@@ -502,6 +503,8 @@ class MultiComboBox extends UI5Element {
502503
const popover = this._getRespPopover(isMorePopover);
503504
const otherPopover = this._getRespPopover(!isMorePopover);
504505

506+
this.updateStaticAreaItemContentDensity();
507+
505508
if (popover && popover.opened) {
506509
return popover.close();
507510
}
@@ -521,6 +524,7 @@ class MultiComboBox extends UI5Element {
521524

522525
_click(event) {
523526
if (isPhone() && !this.readonly && !this._showMorePressed) {
527+
this.updateStaticAreaItemContentDensity();
524528
this._getRespPopover().open(this);
525529
}
526530

@@ -567,6 +571,7 @@ class MultiComboBox extends UI5Element {
567571

568572
onAfterRendering() {
569573
if (this.open && !this._getRespPopover().opened) {
574+
this.updateStaticAreaItemContentDensity();
570575
this._getRespPopover().open(this);
571576
// Set initial focus to the native input
572577
this._innerInput.focus();

‎packages/main/src/Select.js

+2
Original file line numberDiff line numberDiff line change
@@ -239,6 +239,8 @@ class Select extends UI5Element {
239239
return;
240240
}
241241

242+
this.updateStaticAreaItemContentDensity();
243+
242244
if (this._isPickerOpen) {
243245
this._respPopover.close();
244246
} else {

‎packages/main/src/TabContainer.js

+1
Original file line numberDiff line numberDiff line change
@@ -330,6 +330,7 @@ class TabContainer extends UI5Element {
330330
}
331331

332332
_onOverflowButtonClick(event) {
333+
this.updateStaticAreaItemContentDensity();
333334
this._respPopover.open(event.target);
334335
}
335336

‎packages/main/src/themes/base/sizes-parameters.css

+2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
:root {
2+
--_ui5_content_density: cozy;
23
--_ui5_calendar_header_height: 3rem;
34
--_ui5_calendar_header_arrow_button_width: 2.5rem;
45
--_ui5_calendar_header_padding: 0.25rem 0;
@@ -50,6 +51,7 @@
5051
[data-ui5-compact-size],
5152
.ui5-content-density-compact,
5253
.sapUiSizeCompact {
54+
--_ui5_content_density: compact;
5355
--_ui5_button_base_height: 1.625rem;
5456
--_ui5_button_base_padding: 0.4375rem;
5557
--_ui5_button_base_min_width: 2rem;

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

+12
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,19 @@
130130
<ui5-combobox-item text="Canada"></ui5-combobox-item>
131131
<ui5-combobox-item text="Germany"></ui5-combobox-item>
132132
</ui5-combobox>
133+
</div>
134+
135+
<section class="ui5-content-density-compact">
136+
<h3>ComboBox in Compact</h3>
137+
<div>
138+
<ui5-combobox>
139+
<ui5-combobox-item text="Argentina"></ui5-combobox-item>
140+
<ui5-combobox-item text="United States of America"></ui5-combobox-item>
141+
<ui5-combobox-item text="Canada"></ui5-combobox-item>
142+
<ui5-combobox-item text="Germany"></ui5-combobox-item>
143+
</ui5-combobox>
133144
</div>
145+
</section>
134146

135147
<script>
136148
document.getElementById("combo").addEventListener("ui5-change", event => {

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

+8
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,14 @@ <h3>3 months range</h3>
9999
<ui5-datepicker id="minMax3" value="5/6/2020" min-date="6/1/2020" max-date="5/1/2021" format-pattern="dd/MM/yyyy"></ui5-datepicker>
100100
<h3>1 year range</h3>
101101
<ui5-datepicker id="minMax4" value="5 Feb 2021" min-date="5 Jan 2020" max-date="5 Jan 2021"></ui5-datepicker>
102+
103+
<section class="ui5-content-density-compact">
104+
<h3>DatePicker in Compact</h3>
105+
<div>
106+
<ui5-datepicker></ui5-datepicker>
107+
</div>
108+
</section>
109+
102110
</div>
103111
<script>
104112
var dp = document.getElementById('dp5');

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

+24-8
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,23 @@ <h3> Input with suggestions: type 'a'</h3>
2121
<ui5-label id="myLabelSubmit">Event [submit] :: N/A</ui5-label><br/>
2222
<ui5-label id="myLabelLiveChange">Event [input] :: N/A</ui5-label><br/>
2323

24-
<ui5-input id="myInput"
25-
style="width: 500px"
26-
show-suggestions
27-
placeholder="Search for a country ...">
28-
</ui5-input>
24+
<div>
25+
<h3>Input in Cozy</h3>
26+
<ui5-input id="myInput"
27+
style="width: 500px"
28+
show-suggestions
29+
placeholder="Search for a country ...">
30+
</ui5-input>
31+
</div>
32+
33+
<div class="sapUiSizeCompact">
34+
<h3>Input in Compact</h3>
35+
<ui5-input id="inputCompact"
36+
style="width: 500px"
37+
show-suggestions
38+
placeholder="Search for a country ...">
39+
</ui5-input>
40+
</div>
2941

3042
<h3> Input with suggestions</h3>
3143
<ui5-input id="myInput2" show-suggestions style="width: 100%">
@@ -143,8 +155,9 @@ <h3> Input with multiple icons</h3>
143155
var labelLiveChange = document.getElementById('myLabelLiveChange');
144156
var labelSubmit = document.getElementById('myLabelSubmit');
145157

146-
input.addEventListener("ui5-input", function (event) {
147-
var value = event.target.value;
158+
var suggest = function (event) {
159+
var input = event.target;
160+
var value = input.value;
148161
var suggestionItems = [];
149162

150163
if (value) {
@@ -165,7 +178,10 @@ <h3> Input with multiple icons</h3>
165178
});
166179

167180
labelLiveChange.innerHTML = "Event [input] :: " + value;
168-
});
181+
};
182+
183+
input.addEventListener("ui5-input", suggest);
184+
inputCompact.addEventListener("ui5-input", suggest);
169185

170186
input.addEventListener("ui5-suggestionItemSelect", function (event) {
171187
var item = event.detail.item;

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

+12
Original file line numberDiff line numberDiff line change
@@ -253,6 +253,18 @@
253253
</div>
254254

255255

256+
<section class="ui5-content-density-compact">
257+
<h3>MultiComboBox in Compact</h3>
258+
<div>
259+
<ui5-multi-combobox placeholder="Some initial text">
260+
<ui5-li type="Active">Cosy</ui5-li>
261+
<ui5-li type="Active">Compact</ui5-li>
262+
<ui5-li type="Active">Condensed</ui5-li>
263+
<ui5-li type="Active">Longest word in the world</ui5-li>
264+
</ui5-multi-combobox>
265+
</div>
266+
</section>
267+
256268
<script>
257269
const eventNameInput = document.getElementById("events-input");
258270
const eventParamsInput = document.getElementById("events-parameters");

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

+11
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,17 @@ <h2>Selection not cycling</h2>
6262

6363
<h2> Change event counter holder</h2>
6464
<ui5-input id="inputResult"></ui5-input>
65+
66+
<section class="ui5-content-density-compact">
67+
<h3>Select in Compact</h3>
68+
<div>
69+
<ui5-select>
70+
<ui5-option selected>Cozy</ui5-option>
71+
<ui5-option selected>Compact</ui5-option>
72+
<ui5-option selected>Condensed</ui5-option>
73+
</ui5-select>
74+
</div>
75+
</section>
6576
</body>
6677
<script>
6778
var countries = [{ key: "Aus", text: "Australia" }, { key: "Aruba", text: "Aruba" }, { key: "Antigua", text: "Antigua and Barbuda" }, { key: "Bel", text: "Belgium" }, { key: "Bg", text: "Bulgaria" }, { key: "Bra", text: "Brazil" }];

0 commit comments

Comments
 (0)
Please sign in to comment.