From baffe2f44f1ecdc50d85ad2d6e4b0e710ce9d230 Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Tue, 21 Jan 2025 21:49:26 +0200 Subject: [PATCH 01/10] chore(ui5-media-gallery): migrate to jsx template --- packages/fiori/src/MediaGallery.hbs | 46 ------------------ packages/fiori/src/MediaGallery.ts | 12 +++-- packages/fiori/src/MediaGalleryItem.hbs | 20 -------- packages/fiori/src/MediaGalleryItem.ts | 13 +++-- .../fiori/src/MediaGalleryItemTemplate.tsx | 21 ++++++++ packages/fiori/src/MediaGalleryTemplate.tsx | 48 +++++++++++++++++++ 6 files changed, 85 insertions(+), 75 deletions(-) delete mode 100644 packages/fiori/src/MediaGallery.hbs delete mode 100644 packages/fiori/src/MediaGalleryItem.hbs create mode 100644 packages/fiori/src/MediaGalleryItemTemplate.tsx create mode 100644 packages/fiori/src/MediaGalleryTemplate.tsx diff --git a/packages/fiori/src/MediaGallery.hbs b/packages/fiori/src/MediaGallery.hbs deleted file mode 100644 index 1d18014d561e..000000000000 --- a/packages/fiori/src/MediaGallery.hbs +++ /dev/null @@ -1,46 +0,0 @@ -
-
-
- {{#if _isPhonePlatform}} - - {{#each _selectableItems}} - - {{/each}} - - {{else}} - - - {{/if}} -
-
- - {{#if _showThumbnails}} -
-
    - {{#each _visibleItems}} - - {{/each}} - {{#if _showOverflowBtn}} -
  • - - +{{_overflowSize}} - -
    • - {{/if}} -
-
- {{/if}} -
diff --git a/packages/fiori/src/MediaGallery.ts b/packages/fiori/src/MediaGallery.ts index 9b1ffbb73204..58c7b745d552 100644 --- a/packages/fiori/src/MediaGallery.ts +++ b/packages/fiori/src/MediaGallery.ts @@ -2,7 +2,7 @@ import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js"; -import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; +import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js"; import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import Button from "@ui5/webcomponents/dist/Button.js"; @@ -23,13 +23,13 @@ import type MediaGalleryMenuVerticalAlign from "./types/MediaGalleryMenuVertical import MediaGalleryCss from "./generated/themes/MediaGallery.css.js"; // Template -import MediaGalleryTemplate from "./generated/templates/MediaGalleryTemplate.lit.js"; +import MediaGalleryTemplate from "./MediaGalleryTemplate.js"; /** * Interface for components that can be slotted inside `ui5-media-gallery` as items. * @public */ -interface IMediaGalleryItem extends HTMLElement, ITabbable { +interface IMediaGalleryItem extends UI5Element, ITabbable { selected: boolean, disabled: boolean, displayedContent: HTMLElement | null; @@ -86,7 +86,7 @@ const COLUMNS_COUNT: Record = { */ @customElement({ tag: "ui5-media-gallery", - renderer: litRender, + renderer: jsxRenderer, styles: [MediaGalleryCss], template: MediaGalleryTemplate, dependencies: [ @@ -516,6 +516,10 @@ class MediaGallery extends UI5Element { return !this._shouldHaveWideDisplay; } + get _isDisplayInteractive() { + return this.interactiveDisplayArea; + } + static get THUMBNAIL_HEIGHT() { return 80; // px } diff --git a/packages/fiori/src/MediaGalleryItem.hbs b/packages/fiori/src/MediaGalleryItem.hbs deleted file mode 100644 index 32699e18ce24..000000000000 --- a/packages/fiori/src/MediaGalleryItem.hbs +++ /dev/null @@ -1,20 +0,0 @@ -
-
-
- {{#if _showBackgroundIcon}} - - {{/if}} - {{#if _useContent}} - - {{/if}} - {{#if _useThumbnail}} - - {{/if}} -
-
- diff --git a/packages/fiori/src/MediaGalleryItem.ts b/packages/fiori/src/MediaGalleryItem.ts index d36e7a44d42a..43cfa829f715 100644 --- a/packages/fiori/src/MediaGalleryItem.ts +++ b/packages/fiori/src/MediaGalleryItem.ts @@ -1,5 +1,5 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; -import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; +import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js"; import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js"; import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; import Icon from "@ui5/webcomponents/dist/Icon.js"; @@ -15,7 +15,7 @@ import type { IMediaGalleryItem } from "./MediaGallery.js"; import MediaGalleryItemCss from "./generated/themes/MediaGalleryItem.css.js"; // Template -import MediaGalleryItemTemplate from "./generated/templates/MediaGalleryItemTemplate.lit.js"; +import MediaGalleryItemTemplate from "./MediaGalleryItemTemplate.js"; /** * @class @@ -42,7 +42,7 @@ import MediaGalleryItemTemplate from "./generated/templates/MediaGalleryItemTemp */ @customElement({ tag: "ui5-media-gallery-item", - renderer: litRender, + renderer: jsxRenderer, styles: MediaGalleryItemCss, template: MediaGalleryItemTemplate, dependencies: [Icon], @@ -145,11 +145,11 @@ class MediaGalleryItem extends UI5Element implements IMediaGalleryItem { this._monitoredContent = null; this._monitoredThumbnail = null; + this._interactive = !isPhone(); } onEnterDOM() { this._thumbnailDesign = !isPhone(); - this._interactive = !isPhone(); this._square = true; } @@ -178,7 +178,10 @@ class MediaGalleryItem extends UI5Element implements IMediaGalleryItem { } get effectiveTabIndex() { - return this.disabled ? undefined : this.forcedTabIndex; + if (this.disabled) { + return undefined; + } + return !this.forcedTabIndex ? undefined : parseInt(this.forcedTabIndex); } get _showBackgroundIcon() { diff --git a/packages/fiori/src/MediaGalleryItemTemplate.tsx b/packages/fiori/src/MediaGalleryItemTemplate.tsx new file mode 100644 index 000000000000..6d4665eeac18 --- /dev/null +++ b/packages/fiori/src/MediaGalleryItemTemplate.tsx @@ -0,0 +1,21 @@ +import MediaGalleryItem from "./MediaGalleryItem.js"; +import Icon from "@ui5/webcomponents/dist/Icon.js"; + +export default function MediaGalleryItemTemplate(this: MediaGalleryItem) { + return (
+
+
+ {this._showBackgroundIcon && } + {this._useContent && } + {this._useThumbnail && } +
+
+ ); +} + diff --git a/packages/fiori/src/MediaGalleryTemplate.tsx b/packages/fiori/src/MediaGalleryTemplate.tsx new file mode 100644 index 000000000000..7d41bc0a9b03 --- /dev/null +++ b/packages/fiori/src/MediaGalleryTemplate.tsx @@ -0,0 +1,48 @@ +import MediaGallery from "./MediaGallery.js"; +import Carousel from "@ui5/webcomponents/dist/Carousel.js"; +import Button from "@ui5/webcomponents/dist/Button.js"; +import MediaGalleryItem from "./MediaGalleryItem.js"; + +export default function MediaGalleryTemplate(this: MediaGallery) { + return (
+
+
+ {this._isPhonePlatform + ? + {this._selectableItems.map(item => + + )} + + : + } +
+
+ + {this._showThumbnails &&
+
    + {this._visibleItems.map(item => + + )} + {this._showOverflowBtn &&
  • + +
    • } +
+
} +
); +} \ No newline at end of file From bab14bc98cf0331d97f9112bea9beca69854f194 Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Tue, 21 Jan 2025 21:55:18 +0200 Subject: [PATCH 02/10] chore(ui5-media-gallery): migrate to jsx template --- packages/fiori/src/MediaGallery.ts | 4 ---- packages/fiori/src/MediaGalleryTemplate.tsx | 2 +- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/fiori/src/MediaGallery.ts b/packages/fiori/src/MediaGallery.ts index 58c7b745d552..c6fc30846aa8 100644 --- a/packages/fiori/src/MediaGallery.ts +++ b/packages/fiori/src/MediaGallery.ts @@ -516,10 +516,6 @@ class MediaGallery extends UI5Element { return !this._shouldHaveWideDisplay; } - get _isDisplayInteractive() { - return this.interactiveDisplayArea; - } - static get THUMBNAIL_HEIGHT() { return 80; // px } diff --git a/packages/fiori/src/MediaGalleryTemplate.tsx b/packages/fiori/src/MediaGalleryTemplate.tsx index 7d41bc0a9b03..661104db7791 100644 --- a/packages/fiori/src/MediaGalleryTemplate.tsx +++ b/packages/fiori/src/MediaGalleryTemplate.tsx @@ -18,7 +18,7 @@ export default function MediaGalleryTemplate(this: MediaGallery) { )} : From 613a1cbe1aee2f209c1b37e24ea023a52c411d99 Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Tue, 21 Jan 2025 21:58:48 +0200 Subject: [PATCH 03/10] chore(ui5-media-gallery): migrate to jsx template --- packages/fiori/src/MediaGalleryItem.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fiori/src/MediaGalleryItem.ts b/packages/fiori/src/MediaGalleryItem.ts index 43cfa829f715..77a6d7e008dc 100644 --- a/packages/fiori/src/MediaGalleryItem.ts +++ b/packages/fiori/src/MediaGalleryItem.ts @@ -181,7 +181,7 @@ class MediaGalleryItem extends UI5Element implements IMediaGalleryItem { if (this.disabled) { return undefined; } - return !this.forcedTabIndex ? undefined : parseInt(this.forcedTabIndex); + return this.forcedTabIndex ? parseInt(this.forcedTabIndex) : undefined; } get _showBackgroundIcon() { From f46ad1a18074ff1b8aa2953b49d9f67a548e3467 Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Tue, 21 Jan 2025 22:00:46 +0200 Subject: [PATCH 04/10] chore(ui5-media-gallery): migrate to jsx template --- packages/fiori/src/MediaGalleryItemTemplate.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fiori/src/MediaGalleryItemTemplate.tsx b/packages/fiori/src/MediaGalleryItemTemplate.tsx index 6d4665eeac18..30e1de37f0bf 100644 --- a/packages/fiori/src/MediaGalleryItemTemplate.tsx +++ b/packages/fiori/src/MediaGalleryItemTemplate.tsx @@ -3,7 +3,7 @@ import Icon from "@ui5/webcomponents/dist/Icon.js"; export default function MediaGalleryItemTemplate(this: MediaGalleryItem) { return (
Date: Tue, 21 Jan 2025 22:03:43 +0200 Subject: [PATCH 05/10] chore(ui5-media-gallery): migrate to jsx template --- packages/fiori/src/MediaGalleryTemplate.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fiori/src/MediaGalleryTemplate.tsx b/packages/fiori/src/MediaGalleryTemplate.tsx index 661104db7791..11f088fe5a63 100644 --- a/packages/fiori/src/MediaGalleryTemplate.tsx +++ b/packages/fiori/src/MediaGalleryTemplate.tsx @@ -45,4 +45,4 @@ export default function MediaGalleryTemplate(this: MediaGallery) {
} ); -} \ No newline at end of file +} From 44b2153579327b521626d20527fd88d19bc88755 Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Tue, 21 Jan 2025 22:04:48 +0200 Subject: [PATCH 06/10] chore(ui5-media-gallery): migrate to jsx template --- packages/fiori/src/MediaGalleryTemplate.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fiori/src/MediaGalleryTemplate.tsx b/packages/fiori/src/MediaGalleryTemplate.tsx index 11f088fe5a63..6bbbbc70cf11 100644 --- a/packages/fiori/src/MediaGalleryTemplate.tsx +++ b/packages/fiori/src/MediaGalleryTemplate.tsx @@ -1,7 +1,7 @@ import MediaGallery from "./MediaGallery.js"; +import MediaGalleryItem from "./MediaGalleryItem.js"; import Carousel from "@ui5/webcomponents/dist/Carousel.js"; import Button from "@ui5/webcomponents/dist/Button.js"; -import MediaGalleryItem from "./MediaGalleryItem.js"; export default function MediaGalleryTemplate(this: MediaGallery) { return (
From 480a2a18e4a862236d313694e9f06ced48ee3b30 Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Wed, 22 Jan 2025 10:17:39 +0200 Subject: [PATCH 07/10] chore(ui5-media-gallery): migrate to jsx template --- packages/fiori/src/MediaGalleryItemTemplate.tsx | 2 +- packages/fiori/src/MediaGalleryTemplate.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/fiori/src/MediaGalleryItemTemplate.tsx b/packages/fiori/src/MediaGalleryItemTemplate.tsx index 30e1de37f0bf..a07dfefd8bd5 100644 --- a/packages/fiori/src/MediaGalleryItemTemplate.tsx +++ b/packages/fiori/src/MediaGalleryItemTemplate.tsx @@ -1,4 +1,4 @@ -import MediaGalleryItem from "./MediaGalleryItem.js"; +import type MediaGalleryItem from "./MediaGalleryItem.js"; import Icon from "@ui5/webcomponents/dist/Icon.js"; export default function MediaGalleryItemTemplate(this: MediaGalleryItem) { diff --git a/packages/fiori/src/MediaGalleryTemplate.tsx b/packages/fiori/src/MediaGalleryTemplate.tsx index 6bbbbc70cf11..9eeaf5825147 100644 --- a/packages/fiori/src/MediaGalleryTemplate.tsx +++ b/packages/fiori/src/MediaGalleryTemplate.tsx @@ -1,4 +1,4 @@ -import MediaGallery from "./MediaGallery.js"; +import type MediaGallery from "./MediaGallery.js"; import MediaGalleryItem from "./MediaGalleryItem.js"; import Carousel from "@ui5/webcomponents/dist/Carousel.js"; import Button from "@ui5/webcomponents/dist/Button.js"; From c8dcbb305b08950e7eaee3131e03fd659220b13d Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Wed, 22 Jan 2025 12:18:32 +0200 Subject: [PATCH 08/10] chore(ui5-media-gallery): migrate to jsx template --- packages/fiori/src/MediaGalleryItemTemplate.tsx | 1 - packages/fiori/src/MediaGalleryTemplate.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/fiori/src/MediaGalleryItemTemplate.tsx b/packages/fiori/src/MediaGalleryItemTemplate.tsx index a07dfefd8bd5..d2692ecaf069 100644 --- a/packages/fiori/src/MediaGalleryItemTemplate.tsx +++ b/packages/fiori/src/MediaGalleryItemTemplate.tsx @@ -18,4 +18,3 @@ export default function MediaGalleryItemTemplate(this: MediaGalleryItem) {
); } - diff --git a/packages/fiori/src/MediaGalleryTemplate.tsx b/packages/fiori/src/MediaGalleryTemplate.tsx index 9eeaf5825147..4c0c69cf1a4e 100644 --- a/packages/fiori/src/MediaGalleryTemplate.tsx +++ b/packages/fiori/src/MediaGalleryTemplate.tsx @@ -45,4 +45,4 @@ export default function MediaGalleryTemplate(this: MediaGallery) { } ); -} +} \ No newline at end of file From 02aeabfd95bba37f07dacf0d6a146fb30f56fa92 Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Wed, 22 Jan 2025 12:29:56 +0200 Subject: [PATCH 09/10] chore(ui5-media-gallery): formatting corrected --- .../fiori/src/MediaGalleryItemTemplate.tsx | 41 ++++---- packages/fiori/src/MediaGalleryTemplate.tsx | 96 +++++++++---------- 2 files changed, 69 insertions(+), 68 deletions(-) diff --git a/packages/fiori/src/MediaGalleryItemTemplate.tsx b/packages/fiori/src/MediaGalleryItemTemplate.tsx index d2692ecaf069..c20c93f411dc 100644 --- a/packages/fiori/src/MediaGalleryItemTemplate.tsx +++ b/packages/fiori/src/MediaGalleryItemTemplate.tsx @@ -1,20 +1,21 @@ -import type MediaGalleryItem from "./MediaGalleryItem.js"; -import Icon from "@ui5/webcomponents/dist/Icon.js"; - -export default function MediaGalleryItemTemplate(this: MediaGalleryItem) { - return (
-
-
- {this._showBackgroundIcon && } - {this._useContent && } - {this._useThumbnail && } -
-
- ); -} +import type MediaGalleryItem from "./MediaGalleryItem.js"; +import Icon from "@ui5/webcomponents/dist/Icon.js"; + +export default function MediaGalleryItemTemplate(this: MediaGalleryItem) { + return (
+
+
+ {this._showBackgroundIcon && } + {this._useContent && } + {this._useThumbnail && } +
+
+ ); +} + diff --git a/packages/fiori/src/MediaGalleryTemplate.tsx b/packages/fiori/src/MediaGalleryTemplate.tsx index 4c0c69cf1a4e..4fdb89fd21e0 100644 --- a/packages/fiori/src/MediaGalleryTemplate.tsx +++ b/packages/fiori/src/MediaGalleryTemplate.tsx @@ -1,48 +1,48 @@ -import type MediaGallery from "./MediaGallery.js"; -import MediaGalleryItem from "./MediaGalleryItem.js"; -import Carousel from "@ui5/webcomponents/dist/Carousel.js"; -import Button from "@ui5/webcomponents/dist/Button.js"; - -export default function MediaGalleryTemplate(this: MediaGallery) { - return (
-
-
- {this._isPhonePlatform - ? - {this._selectableItems.map(item => - - )} - - : - } -
-
- - {this._showThumbnails &&
-
    - {this._visibleItems.map(item => - - )} - {this._showOverflowBtn &&
  • - -
    • } -
-
} -
); -} \ No newline at end of file +import type MediaGallery from "./MediaGallery.js"; +import MediaGalleryItem from "./MediaGalleryItem.js"; +import Carousel from "@ui5/webcomponents/dist/Carousel.js"; +import Button from "@ui5/webcomponents/dist/Button.js"; + +export default function MediaGalleryTemplate(this: MediaGallery) { + return (
+
+
+ {this._isPhonePlatform + ? + {this._selectableItems.map(item => + + )} + + : + } +
+
+ + {this._showThumbnails &&
+
    + {this._visibleItems.map(item => + + )} + {this._showOverflowBtn &&
  • + +
    • } +
+
} +
); +} From ea90125fa2a19303d70de3e53a3f8c32c14a9c30 Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Wed, 22 Jan 2025 12:44:18 +0200 Subject: [PATCH 10/10] chore(ui5-media-gallery): formatting corrected --- .../fiori/src/MediaGalleryItemTemplate.tsx | 4 +- packages/fiori/src/MediaGalleryTemplate.tsx | 78 ++++++++++--------- 2 files changed, 42 insertions(+), 40 deletions(-) diff --git a/packages/fiori/src/MediaGalleryItemTemplate.tsx b/packages/fiori/src/MediaGalleryItemTemplate.tsx index c20c93f411dc..84fbe8edd663 100644 --- a/packages/fiori/src/MediaGalleryItemTemplate.tsx +++ b/packages/fiori/src/MediaGalleryItemTemplate.tsx @@ -2,7 +2,8 @@ import type MediaGalleryItem from "./MediaGalleryItem.js"; import Icon from "@ui5/webcomponents/dist/Icon.js"; export default function MediaGalleryItemTemplate(this: MediaGalleryItem) { - return (
); } - diff --git a/packages/fiori/src/MediaGalleryTemplate.tsx b/packages/fiori/src/MediaGalleryTemplate.tsx index 4fdb89fd21e0..668a55d254cb 100644 --- a/packages/fiori/src/MediaGalleryTemplate.tsx +++ b/packages/fiori/src/MediaGalleryTemplate.tsx @@ -4,45 +4,47 @@ import Carousel from "@ui5/webcomponents/dist/Carousel.js"; import Button from "@ui5/webcomponents/dist/Button.js"; export default function MediaGalleryTemplate(this: MediaGallery) { - return (
-
-
+
+
- {this._isPhonePlatform - ? - {this._selectableItems.map(item => - - )} - - : - } + {this._isPhonePlatform + ? + {this._selectableItems.map(item => + + )} + + : + } +
-
- {this._showThumbnails &&
-
    - {this._visibleItems.map(item => - - )} - {this._showOverflowBtn &&
  • - -
    • } -
-
} -
); + {this._showThumbnails &&
+
    + {this._visibleItems.map(item => + + )} + {this._showOverflowBtn &&
  • + +
    • } +
+
} +
+ ); }