Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Scoping issues corrected #4573

Merged
merged 1 commit into from
Jan 13, 2022
+185 −179
Merged

fix: Scoping issues corrected #4573

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/base/hash.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
BZ5aGlAxilLKkR431uBOgeJ+uUU=
0KpYdce4OrU70VpvAgA0qr2FulM=
6 changes: 3 additions & 3 deletions packages/fiori/src/MediaGallery.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -468,19 +468,19 @@ class MediaGallery extends UI5Element {
}

get _carousel() {
return this.shadowRoot.querySelector("ui5-carousel");
return this.shadowRoot.querySelector("[ui5-carousel]");
}

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

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

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

get _visibleItems() {
Expand Down
316 changes: 158 additions & 158 deletions packages/fiori/src/themes/MediaGallery.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,158 +1,158 @@
:host {
height:100%;
}
:host,
.ui5-media-gallery-display-wrapper,
.ui5-media-gallery-display {
width: 100%;
}
.ui5-media-gallery-root {
width: inherit;
height: inherit;
background: var(--sapBaseColor);
display: flex;
flex-direction: column;
position: relative;
}
:host([menu-vertical-align="Top"]) .ui5-media-gallery-root {
flex-direction: column-reverse;
}
:host([effective-layout="Horizontal"]) .ui5-media-gallery-root,
:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-root[dir="rtl"] {
flex-direction: row-reverse;
}
:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-root,
:host([effective-layout="Horizontal"]) .ui5-media-gallery-root[dir="rtl"] {
flex-direction: row;
}
/* DISPLAY */
.ui5-media-gallery-display-wrapper {
display: flex;
justify-content: center;
position: relative;
}
/* when all thumbnails shown, thumbnails vs. dispplay width is 1:3 proportion */
:host([effective-layout="Horizontal"][show-all-thumbnails]) .ui5-media-gallery-display-wrapper {
flex-grow: 3; /* takes 3/4 of the entire width, where remaining 1/4 are for thumbnails */
flex-basis: 0;
}
.ui5-media-gallery-display {
position:relative;
margin: 1rem;
display: flex;
justify-content: center;
}
.ui5-media-gallery-display [ui5-media-gallery-item] {
z-index: 1;
}
/* mobile platform */
[ui5-carousel] {
width: calc(100% - 2rem);
}
[ui5-carousel]::part(item) {
padding: 0;
overflow: hidden;
}
/* THUMBNAILS */
.ui5-media-gallery-thumbnails-wrapper {
margin: 1rem 0 0 0;
}
:host([menu-vertical-align="Top"]) .ui5-media-gallery-thumbnails-wrapper {
margin: 0 0 1rem 0;
}
:host([effective-layout="Horizontal"]) .ui5-media-gallery-thumbnails-wrapper {
margin: 0 1rem 0 0;
}
:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-thumbnails-wrapper {
margin: 0 0 0 1rem;
}
:host(:not([effective-layout="Horizontal"])) [dir="rtl"] .ui5-media-gallery-thumbnails-wrapper {
margin-right: 1rem;
}
/* show all thumbnails in a single scrollable row */
:host([show-all-thumbnails]) .ui5-media-gallery-thumbnails-wrapper {
overflow-x: auto;
overflow-y: hidden;
}
/* show all thumbnails in a scrollable area with multiple columns */
:host([effective-layout="Horizontal"][show-all-thumbnails]) .ui5-media-gallery-thumbnails-wrapper {
overflow-y: auto;
overflow-x: hidden;
flex-grow:1; /* takes 1/4 of the entire width, where the remaining 3/4 are for the display */
flex-basis: 0;
}
.ui5-media-gallery-thumbnails-wrapper ul {
height: 5rem;
display: flex;
flex-wrap: nowrap;
padding-left: 0; /* disable browser default css */
margin-top: 0; /* disable browser default css */
margin-bottom: 0; /* disable browser default css */
list-style-type: none; /* disable browser default css */
padding-inline-start: 0; /* disable browser default css */
}
/* in horizontal layout, the menu is 1-4 vertical columns, depending on media size */
:host([effective-layout="Horizontal"]) ul {
width: 5rem;
flex-wrap: wrap;
}
/* two columns on M-size */
:host([effective-layout="Horizontal"][show-all-thumbnails][media-range="M"]) ul {
width: 10rem;
}
/* three columns on L-size */
:host([effective-layout="Horizontal"][show-all-thumbnails][media-range="L"]) ul {
width: 15rem;
}
/* four columns on XL-size */
:host([effective-layout="Horizontal"][show-all-thumbnails][media-range="XL"]) ul {
width: 20rem;
}
.ui5-media-gallery-thumbnail,
.ui5-media-gallery-overflow ui5-button {
width: 4rem;
height: 4rem;
flex-shrink: 0;
}
.ui5-media-gallery-overflow ui5-button {
background: var(--_ui5_media_gallery_overflow_btn_background);
color: var(--_ui5_media_gallery_overflow_btn_color);
border: var(--_ui5_media_gallery_overflow_btn_border);
}
.ui5-media-gallery-thumbnail,
.ui5-media-gallery-overflow {
margin: 0 0 0 1rem;
}
:host([menu-vertical-align="Top"]) .ui5-media-gallery-thumbnail,
:host([menu-vertical-align="Top"]) .ui5-media-gallery-overflow {
margin: 1rem 0 0 1rem;
}
:host([effective-layout="Horizontal"]) .ui5-media-gallery-thumbnail,
:host([effective-layout="Horizontal"]) .ui5-media-gallery-overflow {
margin: 1rem 0 0 1rem;
}
:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-thumbnail,
:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-overflow {
margin: 1rem 1rem 0 0;
}
:host {
height:100%;
}

:host,
.ui5-media-gallery-display-wrapper,
.ui5-media-gallery-display {
width: 100%;
}

.ui5-media-gallery-root {
width: inherit;
height: inherit;
background: var(--sapBaseColor);
display: flex;
flex-direction: column;
position: relative;
}

:host([menu-vertical-align="Top"]) .ui5-media-gallery-root {
flex-direction: column-reverse;
}

:host([effective-layout="Horizontal"]) .ui5-media-gallery-root,
:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-root[dir="rtl"] {
flex-direction: row-reverse;
}

:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-root,
:host([effective-layout="Horizontal"]) .ui5-media-gallery-root[dir="rtl"] {
flex-direction: row;
}

/* DISPLAY */

.ui5-media-gallery-display-wrapper {
display: flex;
justify-content: center;
position: relative;
}

/* when all thumbnails shown, thumbnails vs. dispplay width is 1:3 proportion */
:host([effective-layout="Horizontal"][show-all-thumbnails]) .ui5-media-gallery-display-wrapper {
flex-grow: 3; /* takes 3/4 of the entire width, where remaining 1/4 are for thumbnails */
flex-basis: 0;
}

.ui5-media-gallery-display {
position:relative;
margin: 1rem;
display: flex;
justify-content: center;
}

.ui5-media-gallery-display [ui5-media-gallery-item] {
z-index: 1;
}

/* mobile platform */
[ui5-carousel] {
width: calc(100% - 2rem);
}
[ui5-carousel]::part(item) {
padding: 0;
overflow: hidden;
}

/* THUMBNAILS */
.ui5-media-gallery-thumbnails-wrapper {
margin: 1rem 0 0 0;
}
:host([menu-vertical-align="Top"]) .ui5-media-gallery-thumbnails-wrapper {
margin: 0 0 1rem 0;
}
:host([effective-layout="Horizontal"]) .ui5-media-gallery-thumbnails-wrapper {
margin: 0 1rem 0 0;
}
:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-thumbnails-wrapper {
margin: 0 0 0 1rem;
}
:host(:not([effective-layout="Horizontal"])) [dir="rtl"] .ui5-media-gallery-thumbnails-wrapper {
margin-right: 1rem;
}

/* show all thumbnails in a single scrollable row */
:host([show-all-thumbnails]) .ui5-media-gallery-thumbnails-wrapper {
overflow-x: auto;
overflow-y: hidden;
}
/* show all thumbnails in a scrollable area with multiple columns */
:host([effective-layout="Horizontal"][show-all-thumbnails]) .ui5-media-gallery-thumbnails-wrapper {
overflow-y: auto;
overflow-x: hidden;
flex-grow:1; /* takes 1/4 of the entire width, where the remaining 3/4 are for the display */
flex-basis: 0;
}

.ui5-media-gallery-thumbnails-wrapper ul {
height: 5rem;
display: flex;
flex-wrap: nowrap;
padding-left: 0; /* disable browser default css */
margin-top: 0; /* disable browser default css */
margin-bottom: 0; /* disable browser default css */
list-style-type: none; /* disable browser default css */
padding-inline-start: 0; /* disable browser default css */
}

/* in horizontal layout, the menu is 1-4 vertical columns, depending on media size */
:host([effective-layout="Horizontal"]) ul {
width: 5rem;
flex-wrap: wrap;
}
/* two columns on M-size */
:host([effective-layout="Horizontal"][show-all-thumbnails][media-range="M"]) ul {
width: 10rem;
}
/* three columns on L-size */
:host([effective-layout="Horizontal"][show-all-thumbnails][media-range="L"]) ul {
width: 15rem;
}
/* four columns on XL-size */
:host([effective-layout="Horizontal"][show-all-thumbnails][media-range="XL"]) ul {
width: 20rem;
}

.ui5-media-gallery-thumbnail,
.ui5-media-gallery-overflow [ui5-button] {
width: 4rem;
height: 4rem;
flex-shrink: 0;
}

.ui5-media-gallery-overflow [ui5-button] {
background: var(--_ui5_media_gallery_overflow_btn_background);
color: var(--_ui5_media_gallery_overflow_btn_color);
border: var(--_ui5_media_gallery_overflow_btn_border);
}

.ui5-media-gallery-thumbnail,
.ui5-media-gallery-overflow {
margin: 0 0 0 1rem;
}

:host([menu-vertical-align="Top"]) .ui5-media-gallery-thumbnail,
:host([menu-vertical-align="Top"]) .ui5-media-gallery-overflow {
margin: 1rem 0 0 1rem;
}

:host([effective-layout="Horizontal"]) .ui5-media-gallery-thumbnail,
:host([effective-layout="Horizontal"]) .ui5-media-gallery-overflow {
margin: 1rem 0 0 1rem;
}

:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-thumbnail,
:host([effective-layout="Horizontal"][menu-horizontal-align="Right"]) .ui5-media-gallery-overflow {
margin: 1rem 1rem 0 0;
}
2 changes: 1 addition & 1 deletion packages/fiori/src/themes/ViewSettingsDialog.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
width: 100%;
}

.ui5-vsd-header > ui5-bar {
.ui5-vsd-header > [ui5-bar] {
height: 4rem;
}

Expand Down
9 changes: 5 additions & 4 deletions packages/main/src/ColorPalette.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
import ColorPaletteTemplate from "./generated/templates/ColorPaletteTemplate.lit.js";
import ColorPaletteDialogTemplate from "./generated/templates/ColorPaletteDialogTemplate.lit.js";
import ColorPaletteItem from "./ColorPaletteItem.js";
import Button from "./Button.js";
import {
COLORPALETTE_CONTAINER_LABEL,
COLOR_PALETTE_MORE_COLORS_TEXT,
Expand Down Expand Up @@ -178,7 +179,7 @@ class ColorPalette extends UI5Element {

static get dependencies() {
const ColorPaletteMoreColors = getFeature("ColorPaletteMoreColors");
return [ColorPaletteItem].concat(ColorPaletteMoreColors ? ColorPaletteMoreColors.dependencies : []);
return [ColorPaletteItem, Button].concat(ColorPaletteMoreColors ? ColorPaletteMoreColors.dependencies : []);
}

static async onDefine() {
Expand Down Expand Up @@ -252,20 +253,20 @@ class ColorPalette extends UI5Element {
}

_onclick(event) {
if (event.target.localName === "ui5-color-palette-item") {
if (event.target.hasAttribute("ui5-color-palette-item")) {
this.selectColor(event.target);
}
}

_onkeyup(event) {
if (isSpace(event) && event.target.localName === "ui5-color-palette-item") {
if (isSpace(event) && event.target.hasAttribute("ui5-color-palette-item")) {
event.preventDefault();
this.selectColor(event.target);
}
}

_onkeydown(event) {
if (isEnter(event) && event.target.localName === "ui5-color-palette-item") {
if (isEnter(event) && event.target.hasAttribute("ui5-color-palette-item")) {
this.selectColor(event.target);
}
}
Expand Down
Loading