Skip to content

Commit 17cb225

Browse files
kineticjsxtatica
kineticjs
and
xtatica
authored
feat(ui5-media-gallery): Initial implementation (#4427)
* refactoring and API changes * fixes * minor refactoring for item selection * cleanup * improvements from review feedback * jsdoc improvements * fixes * fix for tab navigation * correct mobile view * improve js doc and file formatting * bug fix when no thumbnail * jsdoc improvements * declare thumbnail height * no ponter events for displayed img and more tests added * images for the playground sample * remove self-enclosing tags * improve css focus and RTL * Update packages/fiori/src/Interfaces.js Co-authored-by: Tanya Kostadinova <tanya.kostadinova@sap.com> * Update packages/fiori/src/MediaGallery.js Co-authored-by: Tanya Kostadinova <tanya.kostadinova@sap.com> * Update packages/fiori/src/MediaGallery.js Co-authored-by: Tanya Kostadinova <tanya.kostadinova@sap.com> * Update packages/fiori/src/MediaGallery.js Co-authored-by: Tanya Kostadinova <tanya.kostadinova@sap.com> * Update packages/fiori/src/MediaGallery.js Co-authored-by: Tanya Kostadinova <tanya.kostadinova@sap.com> * Update packages/fiori/src/types/MediaGalleryMenuHorizontalAlign.js Co-authored-by: Tanya Kostadinova <tanya.kostadinova@sap.com> * Update packages/fiori/src/types/MediaGalleryMenuHorizontalAlign.js Co-authored-by: Tanya Kostadinova <tanya.kostadinova@sap.com> * Update packages/fiori/src/types/MediaGalleryMenuVerticalAlign.js Co-authored-by: Tanya Kostadinova <tanya.kostadinova@sap.com> * Update packages/fiori/src/types/MediaGalleryMenuVerticalAlign.js Co-authored-by: Tanya Kostadinova <tanya.kostadinova@sap.com> * Update packages/fiori/src/types/MediaGalleryMenuVerticalAlign.js Co-authored-by: Tanya Kostadinova <tanya.kostadinova@sap.com> * Update packages/fiori/src/types/MediaGalleryItemLayout.js Co-authored-by: Tanya Kostadinova <tanya.kostadinova@sap.com> * Update packages/fiori/src/types/MediaGalleryItemLayout.js Co-authored-by: Tanya Kostadinova <tanya.kostadinova@sap.com> * Update packages/fiori/src/types/MediaGalleryLayout.js Co-authored-by: Tanya Kostadinova <tanya.kostadinova@sap.com> * Update packages/fiori/src/types/MediaGalleryLayout.js Co-authored-by: Tanya Kostadinova <tanya.kostadinova@sap.com> * Update packages/fiori/src/types/MediaGalleryLayout.js Co-authored-by: Tanya Kostadinova <tanya.kostadinova@sap.com> * Update packages/fiori/src/types/MediaGalleryMenuHorizontalAlign.js Co-authored-by: Tanya Kostadinova <tanya.kostadinova@sap.com> * Update packages/fiori/src/types/MediaGalleryLayout.js Co-authored-by: Tanya Kostadinova <tanya.kostadinova@sap.com> * improve description in jsdoc * add dependency to Icon Co-authored-by: Tanya Kostadinova <tanya.kostadinova@sap.com>
1 parent 4b2720b commit 17cb225

39 files changed

+2625
-0
lines changed

‎packages/fiori/bundle.common.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ import FilterItem from "./dist/FilterItem.js";
3939
import FilterItemOption from "./dist/FilterItemOption.js";
4040
import FlexibleColumnLayout from "./dist/FlexibleColumnLayout.js";
4141
import IllustratedMessage from "./dist/IllustratedMessage.js";
42+
import MediaGallery from "./dist/MediaGallery.js";
43+
import MediaGalleryItem from "./dist/MediaGalleryItem.js";
4244
import ProductSwitch from "./dist/ProductSwitch.js";
4345
import ProductSwitchItem from "./dist/ProductSwitchItem.js";
4446
import SideNavigation from "./dist/SideNavigation.js";

‎packages/fiori/src/Interfaces.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,15 @@ const IFilterItem = "sap.ui.webcomponents.fiori.IFilterItem";
1616
*/
1717
const IFilterItemOption = "sap.ui.webcomponents.fiori.IFilterItemOption";
1818

19+
/**
20+
* Interface for components that can be slotted inside <code>ui5-media-gallery</code> as items.
21+
*
22+
* @name sap.ui.webcomponents.fiori.IMediaGalleryItem
23+
* @interface
24+
* @public
25+
*/
26+
const IMediaGalleryItem = "sap.ui.webcomponents.fiori.IMediaGalleryItem";
27+
1928
/**
2029
* Interface for components that may be slotted as an action inside <code>ui5-li-notification</code> and <code>ui5-li-notification-group</code>
2130
*
@@ -109,6 +118,7 @@ const IWizardStep = "sap.ui.webcomponents.fiori.IWizardStep";
109118
export {
110119
IFilterItem,
111120
IFilterItemOption,
121+
IMediaGalleryItem,
112122
INotificationAction,
113123
INotificationListItem,
114124
IProductSwitchItem,

‎packages/fiori/src/MediaGallery.hbs

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<div class="ui5-media-gallery-root"
2+
dir={{effectiveDir}}>
3+
<div class="ui5-media-gallery-display-wrapper">
4+
<div class="ui5-media-gallery-display"
5+
@click="{{_onDisplayAreaClick}}">
6+
{{#if _isPhonePlatform}}
7+
<ui5-carousel
8+
@ui5-navigate="{{_onCarouselNavigate}}"
9+
hide-navigation-arrows>
10+
{{#each _selectableItems}}
11+
<slot name="{{this._individualSlot}}"></slot>
12+
{{/each}}
13+
</ui5-carousel>
14+
{{else}}
15+
<ui5-media-gallery-item
16+
?_interactive="{{interactiveDisplayArea}}"
17+
?_square="{{_shouldHaveSquareDisplay}}"
18+
_tab-index="{{_mainItemTabIndex}}">
19+
</ui5-media-gallery-item>
20+
{{/if}}
21+
</div>
22+
</div>
23+
24+
{{#if _showThumbnails}}
25+
<div class="ui5-media-gallery-thumbnails-wrapper">
26+
<ul>
27+
{{#each _visibleItems}}
28+
<li id="{{id}}"
29+
class="ui5-media-gallery-thumbnail"
30+
role="option"
31+
@click="{{../_onThumbnailClick}}"
32+
@ui5-click="{{../_onThumbnailClick}}"
33+
>
34+
<slot name="{{this._individualSlot}}"></slot>
35+
</li>
36+
{{/each}}
37+
{{#if _showOverflowBtn}}
38+
<li class="ui5-media-gallery-overflow">
39+
<ui5-button @click="{{_onOverflowBtnClick}}">
40+
+{{_overflowSize}}
41+
</ui5-button>
42+
</li>
43+
{{/if}}
44+
</ul>
45+
</div>
46+
{{/if}}
47+
</div>

0 commit comments

Comments
 (0)