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

refactor(ui5-li): replace the usage of image property with image slot #9089

Merged
merged 11 commits into from
Jul 2, 2024
Merged

refactor(ui5-li): replace the usage of image property with image slot #9089

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
2dae325
refactor(ui5-li): replace the usage of image property with image slot
yanaminkova May 30, 2024
cd1999d
Merge branch 'main' into ui5-list-replace-img-prop
pskelin Jun 21, 2024
66aef80
Merge branch 'main' into ui5-list-replace-img-prop
yanaminkova Jun 27, 2024
8996c1a
refactor(ui5-li): replace the usage of image property with image slot
yanaminkova Jun 27, 2024
c08eb71
refactor(ui5-li): replace the usage of image property with image slot
yanaminkova Jun 27, 2024
979a977
refactor(ui5-li): fix test
yanaminkova Jun 27, 2024
bca09bd
refactor(ui5-li): improve styles
yanaminkova Jul 1, 2024
c853d1a
refactor(ui5-li): improve styles
yanaminkova Jul 1, 2024
eb0522c
refactor(ui5-li): improve styles
yanaminkova Jul 1, 2024
409dad1
refactor(ui5-li): remove unnecessary styles
yanaminkova Jul 1, 2024
8fabded
refactor(ui5-li): replace the usage of image property with image slot
yanaminkova Jul 2, 2024
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
12 changes: 3 additions & 9 deletions packages/main/src/ListItemStandard.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,10 @@
{{/inline}}

{{#*inline "imageBegin"}}
{{#if hasImageContent}}
<div class="ui5-li-imgContent" >
<slot name="imageContent"></slot>
{{#if hasImage}}
<div class="ui5-li-image" >
<slot name="image"></slot>
</div>
{{else}}
{{#if displayImage}}
<ui5-avatar shape="Square" class="ui5-li-img">
<img src="{{image}}" class="ui5-li-img-inner" />
</ui5-avatar>
{{/if}}
{{/if}}
{{/inline}}

Expand Down
27 changes: 6 additions & 21 deletions packages/main/src/ListItemStandard.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,23 +68,12 @@ class ListItemStandard extends ListItem implements IAccessibleListItem {
/**
* Defines whether the `icon` should be displayed in the beginning of the list item or in the end.
*
* **Note:** If `image` is set, the `icon` would be displayed after the `image`.
* @default false
* @public
*/
@property({ type: Boolean })
iconEnd = false;

/**
* Defines the `image` source URI.
*
* **Note:** The `image` would be displayed in the beginning of the list item.
* @default undefined
* @public
*/
@property()
image?: string;

/**
* Defines the `additionalText`, displayed in the end of the list item.
* @default undefined
Expand Down Expand Up @@ -143,28 +132,24 @@ class ListItemStandard extends ListItem implements IAccessibleListItem {
hasTitle = false;

@property({ type: Boolean })
_hasImageContent = false;
_hasImage = false;

/**
* **Note:** While the slot allows option for setting custom avatar, to match the
* design guidelines, please use the `ui5-avatar` with it's default size - S.
*
* **Note:** If bigger `ui5-avatar` needs to be used, then the size of the
* `ui5-li` should be customized in order to fit.
* @since 1.10.0
* @since 2.0.0
* @public
*/
@slot()
imageContent!: Array<HTMLElement>;
image!: Array<HTMLElement>;

onBeforeRendering() {
super.onBeforeRendering();
this.hasTitle = !!this.textContent;
this._hasImageContent = this.hasImageContent;
}

get displayImage(): boolean {
return !!this.image;
this._hasImage = this.hasImage;
}

get displayIconBegin(): boolean {
Expand All @@ -175,8 +160,8 @@ class ListItemStandard extends ListItem implements IAccessibleListItem {
return !!(this.icon && this.iconEnd);
}

get hasImageContent(): boolean {
return !!this.imageContent.length;
get hasImage(): boolean {
return !!this.image.length;
}
}

Expand Down
22 changes: 9 additions & 13 deletions packages/main/src/themes/ListItem.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,14 +48,21 @@
height: 5rem;
}

:host([_has-image-content]) {
:host([_has-image]) {
height: 5rem;
}

:host([image]) .ui5-li-content {
height: 3rem;
}

::slotted(img[slot="image"]){
width: var(--_ui5_list_item_img_size);
height: var(--_ui5_list_item_img_size);
border-radius: var(--ui5-avatar-border-radius);
object-fit: contain
}

:host([description]) .ui5-li-root {
padding: 1rem;
}
Expand Down Expand Up @@ -108,25 +115,14 @@
align-self: flex-end;
}

.ui5-li-img {
width: var(--_ui5_list_item_img_size);
height: var(--_ui5_list_item_img_size);
border-radius: var(--ui5-avatar-border-radius);
}

.ui5-li-img,
.ui5-li-imgContent {
.ui5-li-image {
min-width: var(--_ui5_list_item_img_size);
min-height: var(--_ui5_list_item_img_size);
margin-top: var(--_ui5_list_item_img_top_margin);
margin-bottom: var(--_ui5_list_item_img_bottom_margin);
margin-inline-end: var(--_ui5_list_item_img_hn_margin);
}

.ui5-li-img-inner {
object-fit: contain;
}

.ui5-li-icon {
min-width: var(--_ui5_list_item_icon_size);
min-height: var(--_ui5_list_item_icon_size);
Expand Down
24 changes: 18 additions & 6 deletions packages/main/test/pages/Carousel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -379,15 +379,27 @@

<ui5-list header-text="API: ListItemGroup (2/3)" selection-mode="Multiple">
<ui5-li-group header-text="New Items">
<ui5-li image="./img/HT-1000.jpg" icon="navigation-right-arrow" additional-text="Available">Voluptate do eu cupidatat
<ui5-li icon="navigation-right-arrow" additional-text="Available">Voluptate do eu cupidatat
elit est culpa. Reprehenderit eiusmod voluptate ex est dolor nostrud Lorem Lorem do nisi laborum veniam.
Sint do non culpa aute occaecat labore ipsum veniam minim tempor est. Duis pariatur aute culpa irure ad
excepteur pariatur culpa culpa ea duis occaecat aute irure. Ipsum velit culpa non exercitation ex
laboris deserunt in eu non officia in. Laborum sunt aliqua labore cupidatat sunt labore.</ui5-li>
<ui5-li image="./img/HT-1010.jpg" icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131"
additional-text-state="Negative">Laptop Lenovo</ui5-li>
<ui5-li image="./img/HT-1022.jpg" icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131"
additional-text-state="Negative">IPhone 3</ui5-li>
laboris deserunt in eu non officia in. Laborum sunt aliqua labore cupidatat sunt labore.
<ui5-avatar slot="image" shape="Square">
<img src="./img/HT-1000.jpg" alt="Woman image">
</ui5-avatar>
</ui5-li>
<ui5-li icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131"
additional-text-state="Negative">Laptop Lenovo
<ui5-avatar slot="image" shape="Square">
<img src="./img/HT-1010.jpg" alt="Woman image">
</ui5-avatar>
</ui5-li>
<ui5-li icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131"
additional-text-state="Negative">IPhone 3
<ui5-avatar slot="image" shape="Square">
<img src="./img/HT-1022.jpg" alt="Woman image">
</ui5-avatar>
</ui5-li>
</ui5-li-group>
</ui5-list>

Expand Down
14 changes: 7 additions & 7 deletions packages/main/test/pages/Input_quickview.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<script src="%VITE_BUNDLE_PATH%" type="module"></script>

<script>// delete Document.prototype.adoptedStyleSheets;</script>
<link rel="stylesheet" type="text/css" href="./styles/Input_quickview.css">
<link rel="stylesheet" type="text/css" href="./styles/Input_quickview.css">
</head>

<body class="input_quickview1auto">
Expand Down Expand Up @@ -47,9 +47,9 @@ <h1> Quick View sample</h1>
<ui5-li>OData API Audit</ui5-li>
</ui5-li-group>
<ui5-li-group header-text="Products">
<ui5-li image="./img/HT-1010.jpg" icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Negative">Laptop Lenovo</ui5-li>
<ui5-li image="./img/HT-1022.jpg" icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Negative">IPhone 3</ui5-li>
<ui5-li image="./img/HT-1030.jpg" icon-end icon="navigation-right-arrow" description="#12331232131" additional-text="Required" additional-text-state="Negative">HP Monitor 24</ui5-li>
<ui5-li icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Negative">Laptop Lenovo</ui5-li>
<ui5-li icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Negative">IPhone 3</ui5-li>
<ui5-li icon-end icon="navigation-right-arrow" description="#12331232131" additional-text="Required" additional-text-state="Negative">HP Monitor 24</ui5-li>
</ui5-li-group>
</ui5-list>
</ui5-popover>
Expand Down Expand Up @@ -95,9 +95,9 @@ <h1> Test Quick View sample</h1>
<ui5-li>OData API Audit</ui5-li>
</ui5-li-group>
<ui5-li-group header-text="Products">
<ui5-li image="./img/HT-1010.jpg" icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Negative">Laptop Lenovo</ui5-li>
<ui5-li image="./img/HT-1022.jpg" icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Negative">IPhone 3</ui5-li>
<ui5-li image="./img/HT-1030.jpg" icon-end icon="navigation-right-arrow" description="#12331232131" additional-text="Required" additional-text-state="Negative">HP Monitor 24</ui5-li>
<ui5-li icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Negative">Laptop Lenovo</ui5-li>
<ui5-li icon="navigation-right-arrow" additional-text="Re-stock" description="#12331232131" additional-text-state="Negative">IPhone 3</ui5-li>
<ui5-li icon-end icon="navigation-right-arrow" description="#12331232131" additional-text="Required" additional-text-state="Negative">HP Monitor 24</ui5-li>
</ui5-li-group>
</ui5-list>
</ui5-popover>
Expand Down
42 changes: 36 additions & 6 deletions packages/main/test/pages/Kitchen.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,12 @@

<link rel="stylesheet" type="text/css" href="./styles/Kitchen.css">

<style>
[ui5-avatar] img {
object-fit: contain;
}
</style>

<!--
<link rel="stylesheet" type="text/css" href="./css/css_variables.css">
-->
Expand Down Expand Up @@ -90,9 +96,21 @@
</ui5-card-header>

<ui5-list id="myList12" separators="Inner">
<ui5-li image="./img/HT-1030.jpg" icon="source-code" icon-end>Java EE</ui5-li>
<ui5-li image="./img/HT-1030.jpg" icon="source-code" icon-end>Maven</ui5-li>
<ui5-li image="./img/HT-1030.jpg" icon="source-code" icon-end>Cloud computing</ui5-li>
<ui5-li icon="source-code" icon-end>Java EE
<ui5-avatar slot="image" shape="Square">
<img src="./img/HT-1030.jpg" alt="Woman image">
</ui5-avatar>
</ui5-li>
<ui5-li icon="source-code" icon-end>Maven
<ui5-avatar slot="image" shape="Square">
<img src="./img/HT-1030.jpg" alt="Woman image">
</ui5-avatar>
</ui5-li>
<ui5-li icon="source-code" icon-end>Cloud computing
<ui5-avatar slot="image" shape="Square">
<img src="./img/HT-1030.jpg" alt="Woman image">
</ui5-avatar>
</ui5-li>
</ui5-list>
</ui5-card>
<ui5-card
Expand All @@ -102,9 +120,21 @@
</ui5-card-header>

<ui5-list id="myList12" separators="Inner">
<ui5-li image="./img/HT-1030.jpg" icon="source-code">C/C++</ui5-li>
<ui5-li image="./img/HT-1030.jpg" icon="source-code">Phyton</ui5-li>
<ui5-li image="./img/HT-1030.jpg" icon="source-code">Node JS</ui5-li>
<ui5-li icon="source-code">C/C++
<ui5-avatar slot="image" shape="Square">
<img src="./img/HT-1030.jpg" alt="Woman image">
</ui5-avatar>
</ui5-li>
<ui5-li icon="source-code">Phyton
<ui5-avatar slot="image" shape="Square">
<img src="./img/HT-1030.jpg" alt="Woman image">
</ui5-avatar>
</ui5-li>
<ui5-li icon="source-code">Node JS
<ui5-avatar slot="image" shape="Square">
<img src="./img/HT-1030.jpg" alt="Woman image">
</ui5-avatar>
</ui5-li>
</ui5-list>
</ui5-card>
<ui5-card
Expand Down
44 changes: 37 additions & 7 deletions packages/main/test/pages/Kitchen.openui5.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,13 @@
<script src="%VITE_BUNDLE_PATH%" type="module"></script>


<link rel="stylesheet" type="text/css" href="./styles/Kitchen.openui5.css">
<link rel="stylesheet" type="text/css" href="./styles/Kitchen.openui5.css">

<style>
[ui5-avatar] img {
object-fit: contain;
}
</style>
</head>

<body class="kitchen_openui51auto">
Expand Down Expand Up @@ -85,9 +91,21 @@
</ui5-card-header>

<ui5-list id="myList12" separators="Inner">
<ui5-li image="./img/HT-1030.jpg" icon="source-code" icon-end>Java EE</ui5-li>
<ui5-li image="./img/HT-1030.jpg" icon="source-code" icon-end>Maven</ui5-li>
<ui5-li image="./img/HT-1030.jpg" icon="source-code" icon-end>Cloud computing</ui5-li>
<ui5-li icon="source-code" icon-end>Java EE
<ui5-avatar slot="image" shape="Square">
<img src="./img/HT-1030.jpg" alt="Woman image">
</ui5-avatar>
</ui5-li>
<ui5-li icon="source-code" icon-end>Maven
<ui5-avatar slot="image" shape="Square">
<img src="./img/HT-1030.jpg" alt="Woman image">
</ui5-avatar>
</ui5-li>
<ui5-li icon="source-code" icon-end>Cloud computing
<ui5-avatar slot="image" shape="Square">
<img src="./img/HT-1030.jpg" alt="Woman image">
</ui5-avatar>
</ui5-li>
</ui5-list>
</ui5-card>
<ui5-card
Expand All @@ -97,9 +115,21 @@
</ui5-card-header>

<ui5-list id="myList12" separators="Inner">
<ui5-li image="./img/HT-1030.jpg" icon="source-code">C/C++</ui5-li>
<ui5-li image="./img/HT-1030.jpg" icon="source-code">Phyton</ui5-li>
<ui5-li image="./img/HT-1030.jpg" icon="source-code">Node JS</ui5-li>
<ui5-li icon="source-code">C/C++
<ui5-avatar slot="image" shape="Square">
<img src="./img/HT-1030.jpg" alt="Woman image">
</ui5-avatar>
</ui5-li>
<ui5-li icon="source-code">Phyton
<ui5-avatar slot="image" shape="Square">
<img src="./img/HT-1030.jpg" alt="Woman image">
</ui5-avatar>
</ui5-li>
<ui5-li icon="source-code">Node JS
<ui5-avatar slot="image" shape="Square">
<img src="./img/HT-1030.jpg" alt="Woman image">
</ui5-avatar>
</ui5-li>
</ui5-list>
</ui5-card>
<ui5-card
Expand Down
Loading