Skip to content

Commit 4e430d3

Browse files
vladitasevvladitasev
authored
fix: Scoping issues corrected (#4573)
1 parent 46d982e commit 4e430d3

12 files changed

+185
-179
lines changed

‎packages/base/hash.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
BZ5aGlAxilLKkR431uBOgeJ+uUU=
1+
0KpYdce4OrU70VpvAgA0qr2FulM=

‎packages/fiori/src/MediaGallery.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -468,19 +468,19 @@ class MediaGallery extends UI5Element {
468468
}
469469

470470
get _carousel() {
471-
return this.shadowRoot.querySelector("ui5-carousel");
471+
return this.shadowRoot.querySelector("[ui5-carousel]");
472472
}
473473

474474
get _display() {
475475
return this.shadowRoot.querySelector(".ui5-media-gallery-display");
476476
}
477477

478478
get _mainItem() {
479-
return this.shadowRoot.querySelector(".ui5-media-gallery-display ui5-media-gallery-item");
479+
return this.shadowRoot.querySelector(".ui5-media-gallery-display [ui5-media-gallery-item]");
480480
}
481481

482482
get _overflowBtn() {
483-
return this.shadowRoot.querySelector(".ui5-media-gallery-overflow ui5-button");
483+
return this.shadowRoot.querySelector(".ui5-media-gallery-overflow [ui5-button]");
484484
}
485485

486486
get _visibleItems() {

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

Lines changed: 158 additions & 158 deletions
Original file line numberDiff line numberDiff line change
@@ -1,158 +1,158 @@
1-
:host {
2-
height:100%;
3-
}
4-
5-
:host,
6-
.ui5-media-gallery-display-wrapper,
7-
.ui5-media-gallery-display {
8-
width: 100%;
9-
}
10-
11-
.ui5-media-gallery-root {
12-
width: inherit;
13-
height: inherit;
14-
background: var(--sapBaseColor);
15-
display: flex;
16-
flex-direction: column;
17-
position: relative;
18-
}
19-
20-
:host([menu-vertical-align="Top"]) .ui5-media-gallery-root {
21-
flex-direction: column-reverse;
22-
}
23-
24-
:host([effective-layout="Horizontal"]) .ui5-media-gallery-root,
25-
:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-root[dir="rtl"] {
26-
flex-direction: row-reverse;
27-
}
28-
29-
:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-root,
30-
:host([effective-layout="Horizontal"]) .ui5-media-gallery-root[dir="rtl"] {
31-
flex-direction: row;
32-
}
33-
34-
/* DISPLAY */
35-
36-
.ui5-media-gallery-display-wrapper {
37-
display: flex;
38-
justify-content: center;
39-
position: relative;
40-
}
41-
42-
/* when all thumbnails shown, thumbnails vs. dispplay width is 1:3 proportion */
43-
:host([effective-layout="Horizontal"][show-all-thumbnails]) .ui5-media-gallery-display-wrapper {
44-
flex-grow: 3; /* takes 3/4 of the entire width, where remaining 1/4 are for thumbnails */
45-
flex-basis: 0;
46-
}
47-
48-
.ui5-media-gallery-display {
49-
position:relative;
50-
margin: 1rem;
51-
display: flex;
52-
justify-content: center;
53-
}
54-
55-
.ui5-media-gallery-display [ui5-media-gallery-item] {
56-
z-index: 1;
57-
}
58-
59-
/* mobile platform */
60-
[ui5-carousel] {
61-
width: calc(100% - 2rem);
62-
}
63-
[ui5-carousel]::part(item) {
64-
padding: 0;
65-
overflow: hidden;
66-
}
67-
68-
/* THUMBNAILS */
69-
.ui5-media-gallery-thumbnails-wrapper {
70-
margin: 1rem 0 0 0;
71-
}
72-
:host([menu-vertical-align="Top"]) .ui5-media-gallery-thumbnails-wrapper {
73-
margin: 0 0 1rem 0;
74-
}
75-
:host([effective-layout="Horizontal"]) .ui5-media-gallery-thumbnails-wrapper {
76-
margin: 0 1rem 0 0;
77-
}
78-
:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-thumbnails-wrapper {
79-
margin: 0 0 0 1rem;
80-
}
81-
:host(:not([effective-layout="Horizontal"])) [dir="rtl"] .ui5-media-gallery-thumbnails-wrapper {
82-
margin-right: 1rem;
83-
}
84-
85-
/* show all thumbnails in a single scrollable row */
86-
:host([show-all-thumbnails]) .ui5-media-gallery-thumbnails-wrapper {
87-
overflow-x: auto;
88-
overflow-y: hidden;
89-
}
90-
/* show all thumbnails in a scrollable area with multiple columns */
91-
:host([effective-layout="Horizontal"][show-all-thumbnails]) .ui5-media-gallery-thumbnails-wrapper {
92-
overflow-y: auto;
93-
overflow-x: hidden;
94-
flex-grow:1; /* takes 1/4 of the entire width, where the remaining 3/4 are for the display */
95-
flex-basis: 0;
96-
}
97-
98-
.ui5-media-gallery-thumbnails-wrapper ul {
99-
height: 5rem;
100-
display: flex;
101-
flex-wrap: nowrap;
102-
padding-left: 0; /* disable browser default css */
103-
margin-top: 0; /* disable browser default css */
104-
margin-bottom: 0; /* disable browser default css */
105-
list-style-type: none; /* disable browser default css */
106-
padding-inline-start: 0; /* disable browser default css */
107-
}
108-
109-
/* in horizontal layout, the menu is 1-4 vertical columns, depending on media size */
110-
:host([effective-layout="Horizontal"]) ul {
111-
width: 5rem;
112-
flex-wrap: wrap;
113-
}
114-
/* two columns on M-size */
115-
:host([effective-layout="Horizontal"][show-all-thumbnails][media-range="M"]) ul {
116-
width: 10rem;
117-
}
118-
/* three columns on L-size */
119-
:host([effective-layout="Horizontal"][show-all-thumbnails][media-range="L"]) ul {
120-
width: 15rem;
121-
}
122-
/* four columns on XL-size */
123-
:host([effective-layout="Horizontal"][show-all-thumbnails][media-range="XL"]) ul {
124-
width: 20rem;
125-
}
126-
127-
.ui5-media-gallery-thumbnail,
128-
.ui5-media-gallery-overflow ui5-button {
129-
width: 4rem;
130-
height: 4rem;
131-
flex-shrink: 0;
132-
}
133-
134-
.ui5-media-gallery-overflow ui5-button {
135-
background: var(--_ui5_media_gallery_overflow_btn_background);
136-
color: var(--_ui5_media_gallery_overflow_btn_color);
137-
border: var(--_ui5_media_gallery_overflow_btn_border);
138-
}
139-
140-
.ui5-media-gallery-thumbnail,
141-
.ui5-media-gallery-overflow {
142-
margin: 0 0 0 1rem;
143-
}
144-
145-
:host([menu-vertical-align="Top"]) .ui5-media-gallery-thumbnail,
146-
:host([menu-vertical-align="Top"]) .ui5-media-gallery-overflow {
147-
margin: 1rem 0 0 1rem;
148-
}
149-
150-
:host([effective-layout="Horizontal"]) .ui5-media-gallery-thumbnail,
151-
:host([effective-layout="Horizontal"]) .ui5-media-gallery-overflow {
152-
margin: 1rem 0 0 1rem;
153-
}
154-
155-
:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-thumbnail,
156-
:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-overflow {
157-
margin: 1rem 1rem 0 0;
158-
}
1+
:host {
2+
height:100%;
3+
}
4+
5+
:host,
6+
.ui5-media-gallery-display-wrapper,
7+
.ui5-media-gallery-display {
8+
width: 100%;
9+
}
10+
11+
.ui5-media-gallery-root {
12+
width: inherit;
13+
height: inherit;
14+
background: var(--sapBaseColor);
15+
display: flex;
16+
flex-direction: column;
17+
position: relative;
18+
}
19+
20+
:host([menu-vertical-align="Top"]) .ui5-media-gallery-root {
21+
flex-direction: column-reverse;
22+
}
23+
24+
:host([effective-layout="Horizontal"]) .ui5-media-gallery-root,
25+
:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-root[dir="rtl"] {
26+
flex-direction: row-reverse;
27+
}
28+
29+
:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-root,
30+
:host([effective-layout="Horizontal"]) .ui5-media-gallery-root[dir="rtl"] {
31+
flex-direction: row;
32+
}
33+
34+
/* DISPLAY */
35+
36+
.ui5-media-gallery-display-wrapper {
37+
display: flex;
38+
justify-content: center;
39+
position: relative;
40+
}
41+
42+
/* when all thumbnails shown, thumbnails vs. dispplay width is 1:3 proportion */
43+
:host([effective-layout="Horizontal"][show-all-thumbnails]) .ui5-media-gallery-display-wrapper {
44+
flex-grow: 3; /* takes 3/4 of the entire width, where remaining 1/4 are for thumbnails */
45+
flex-basis: 0;
46+
}
47+
48+
.ui5-media-gallery-display {
49+
position:relative;
50+
margin: 1rem;
51+
display: flex;
52+
justify-content: center;
53+
}
54+
55+
.ui5-media-gallery-display [ui5-media-gallery-item] {
56+
z-index: 1;
57+
}
58+
59+
/* mobile platform */
60+
[ui5-carousel] {
61+
width: calc(100% - 2rem);
62+
}
63+
[ui5-carousel]::part(item) {
64+
padding: 0;
65+
overflow: hidden;
66+
}
67+
68+
/* THUMBNAILS */
69+
.ui5-media-gallery-thumbnails-wrapper {
70+
margin: 1rem 0 0 0;
71+
}
72+
:host([menu-vertical-align="Top"]) .ui5-media-gallery-thumbnails-wrapper {
73+
margin: 0 0 1rem 0;
74+
}
75+
:host([effective-layout="Horizontal"]) .ui5-media-gallery-thumbnails-wrapper {
76+
margin: 0 1rem 0 0;
77+
}
78+
:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-thumbnails-wrapper {
79+
margin: 0 0 0 1rem;
80+
}
81+
:host(:not([effective-layout="Horizontal"])) [dir="rtl"] .ui5-media-gallery-thumbnails-wrapper {
82+
margin-right: 1rem;
83+
}
84+
85+
/* show all thumbnails in a single scrollable row */
86+
:host([show-all-thumbnails]) .ui5-media-gallery-thumbnails-wrapper {
87+
overflow-x: auto;
88+
overflow-y: hidden;
89+
}
90+
/* show all thumbnails in a scrollable area with multiple columns */
91+
:host([effective-layout="Horizontal"][show-all-thumbnails]) .ui5-media-gallery-thumbnails-wrapper {
92+
overflow-y: auto;
93+
overflow-x: hidden;
94+
flex-grow:1; /* takes 1/4 of the entire width, where the remaining 3/4 are for the display */
95+
flex-basis: 0;
96+
}
97+
98+
.ui5-media-gallery-thumbnails-wrapper ul {
99+
height: 5rem;
100+
display: flex;
101+
flex-wrap: nowrap;
102+
padding-left: 0; /* disable browser default css */
103+
margin-top: 0; /* disable browser default css */
104+
margin-bottom: 0; /* disable browser default css */
105+
list-style-type: none; /* disable browser default css */
106+
padding-inline-start: 0; /* disable browser default css */
107+
}
108+
109+
/* in horizontal layout, the menu is 1-4 vertical columns, depending on media size */
110+
:host([effective-layout="Horizontal"]) ul {
111+
width: 5rem;
112+
flex-wrap: wrap;
113+
}
114+
/* two columns on M-size */
115+
:host([effective-layout="Horizontal"][show-all-thumbnails][media-range="M"]) ul {
116+
width: 10rem;
117+
}
118+
/* three columns on L-size */
119+
:host([effective-layout="Horizontal"][show-all-thumbnails][media-range="L"]) ul {
120+
width: 15rem;
121+
}
122+
/* four columns on XL-size */
123+
:host([effective-layout="Horizontal"][show-all-thumbnails][media-range="XL"]) ul {
124+
width: 20rem;
125+
}
126+
127+
.ui5-media-gallery-thumbnail,
128+
.ui5-media-gallery-overflow [ui5-button] {
129+
width: 4rem;
130+
height: 4rem;
131+
flex-shrink: 0;
132+
}
133+
134+
.ui5-media-gallery-overflow [ui5-button] {
135+
background: var(--_ui5_media_gallery_overflow_btn_background);
136+
color: var(--_ui5_media_gallery_overflow_btn_color);
137+
border: var(--_ui5_media_gallery_overflow_btn_border);
138+
}
139+
140+
.ui5-media-gallery-thumbnail,
141+
.ui5-media-gallery-overflow {
142+
margin: 0 0 0 1rem;
143+
}
144+
145+
:host([menu-vertical-align="Top"]) .ui5-media-gallery-thumbnail,
146+
:host([menu-vertical-align="Top"]) .ui5-media-gallery-overflow {
147+
margin: 1rem 0 0 1rem;
148+
}
149+
150+
:host([effective-layout="Horizontal"]) .ui5-media-gallery-thumbnail,
151+
:host([effective-layout="Horizontal"]) .ui5-media-gallery-overflow {
152+
margin: 1rem 0 0 1rem;
153+
}
154+
155+
:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-thumbnail,
156+
:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-overflow {
157+
margin: 1rem 1rem 0 0;
158+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
width: 100%;
88
}
99

10-
.ui5-vsd-header > ui5-bar {
10+
.ui5-vsd-header > [ui5-bar] {
1111
height: 4rem;
1212
}
1313

‎packages/main/src/ColorPalette.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
1616
import ColorPaletteTemplate from "./generated/templates/ColorPaletteTemplate.lit.js";
1717
import ColorPaletteDialogTemplate from "./generated/templates/ColorPaletteDialogTemplate.lit.js";
1818
import ColorPaletteItem from "./ColorPaletteItem.js";
19+
import Button from "./Button.js";
1920
import {
2021
COLORPALETTE_CONTAINER_LABEL,
2122
COLOR_PALETTE_MORE_COLORS_TEXT,
@@ -178,7 +179,7 @@ class ColorPalette extends UI5Element {
178179

179180
static get dependencies() {
180181
const ColorPaletteMoreColors = getFeature("ColorPaletteMoreColors");
181-
return [ColorPaletteItem].concat(ColorPaletteMoreColors ? ColorPaletteMoreColors.dependencies : []);
182+
return [ColorPaletteItem, Button].concat(ColorPaletteMoreColors ? ColorPaletteMoreColors.dependencies : []);
182183
}
183184

184185
static async onDefine() {
@@ -252,20 +253,20 @@ class ColorPalette extends UI5Element {
252253
}
253254

254255
_onclick(event) {
255-
if (event.target.localName === "ui5-color-palette-item") {
256+
if (event.target.hasAttribute("ui5-color-palette-item")) {
256257
this.selectColor(event.target);
257258
}
258259
}
259260

260261
_onkeyup(event) {
261-
if (isSpace(event) && event.target.localName === "ui5-color-palette-item") {
262+
if (isSpace(event) && event.target.hasAttribute("ui5-color-palette-item")) {
262263
event.preventDefault();
263264
this.selectColor(event.target);
264265
}
265266
}
266267

267268
_onkeydown(event) {
268-
if (isEnter(event) && event.target.localName === "ui5-color-palette-item") {
269+
if (isEnter(event) && event.target.hasAttribute("ui5-color-palette-item")) {
269270
this.selectColor(event.target);
270271
}
271272
}

0 commit comments

Comments
 (0)