Skip to content

Commit

Permalink
fix: Scoping issues corrected (#4573)
Browse files Browse the repository at this point in the history
  • Loading branch information
@vladitasev
vladitasev authored Jan 13, 2022
1 parent 46d982e commit 4e430d3
Show file tree
Hide file tree
Showing 12 changed files with 185 additions and 179 deletions.
2 changes: 1 addition & 1 deletion packages/base/hash.txt
View file
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
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
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
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
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

0 comments on commit 4e430d3

Please sign in to comment.