+
+
+
+
{{#if _editing}}
@@ -46,65 +45,66 @@
{{/if}}
-
- {{#if _editing}}
+
+
+
+ {{#if _editing}}
+ {{_renameBtnText}}
+ {{_cancelRenameBtnText}}
+ {{else}}
+ {{#if _showRetry}}
{{_renameBtnText}}
+ icon="refresh"
+ design="Transparent"
+ tooltip="{{_retryButtonTooltip}}"
+ @click="{{_onRetry}}"
+ @keyup="{{_onRetryKeyup}}"
+ >
+ {{/if}}
+ {{#if _showTerminate}}
{{_cancelRenameBtnText}}
- {{else}}
- {{#if _showRetry}}
-
- {{/if}}
- {{#if _showTerminate}}
-
-
- {{/if}}
+ icon="stop"
+ design="Transparent"
+ tooltip="{{_terminateButtonTooltip}}"
+ @click="{{_onTerminate}}"
+ @keyup="{{_onTerminateKeyup}}">
+
+ {{/if}}
- {{#if showEditButton}}
-
-
- {{/if}}
+ {{#if showEditButton}}
+
+
+ {{/if}}
- {{#if renderUploadCollectionDeleteButton}}
-
- {{/if}}
+ {{#if renderUploadCollectionDeleteButton}}
+
{{/if}}
-
+ {{/if}}
{{/inline}}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/UploadCollectionItem.css b/packages/fiori/src/themes/UploadCollectionItem.css
index 25d97dcf646a..2f60ba24f080 100644
--- a/packages/fiori/src/themes/UploadCollectionItem.css
+++ b/packages/fiori/src/themes/UploadCollectionItem.css
@@ -1,35 +1,43 @@
:host {
height: auto;
+ container-type: inline-size;
}
:host(:not([hidden])) {
display: block;
}
+:host::part(content) {
+ overflow: visible; /* prevents buttons hover shadow clipping */
+}
+
.ui5-li-root.ui5-uci-root {
padding: 1rem;
}
-.ui5-uci-edit-buttons {
+.ui5-uci-buttons {
display: flex;
+ pointer-events: all;
+ margin-inline-start: 1rem;
+ gap: 0.5rem;
}
/* Thumbnail */
.ui5-uci-thumbnail {
- width: 3rem;
- height: 3rem;
- margin-right: 0.75rem;
+ width: var(--ui5_upload_collection_thumbnail_size);
+ height: var(--ui5_upload_collection_thumbnail_size);
+ margin-inline-end: var(--ui5_upload_collection_thumbnail_margin_inline_end);
}
::slotted([ui5-icon][slot="thumbnail"]) {
- width: 3rem;
- height: 3rem;
+ width: var(--ui5_upload_collection_thumbnail_size);
+ height: var(--ui5_upload_collection_thumbnail_size);
font-size: 2.5rem;
}
::slotted(img[slot="thumbnail"]) {
- width: 3rem;
- height: 3rem;
+ width: var(--ui5_upload_collection_thumbnail_size);
+ height: var(--ui5_upload_collection_thumbnail_size);
}
:host([actionable]) ::slotted([ui5-icon][slot="thumbnail"]) {
@@ -37,7 +45,7 @@
}
/* Content */
-.ui5-uci-content-and-edit-container {
+.ui5-uci-thumbnail-and-content-container {
flex: 1 1 auto;
min-width: 0; /* fixes chrome overflow issue */
display: flex;
@@ -53,11 +61,14 @@
.ui5-uci-content {
flex: 1 1 auto;
- margin-right: .5rem;
width: 100%;
min-width: 0; /* fixes chrome overflow issue */
}
+.ui5-uci-progress-box {
+ margin-inline-start: 0.5rem;
+}
+
.ui5-uci-file-name {
display: block;
font-family: "72override", var(--sapFontFamily);
@@ -123,18 +134,17 @@
display: none;
}
-.ui5-uci-edit-buttons {
- pointer-events: all;
- margin-inline-start: 1rem;
-}
-
.ui5-uci-edit-rename-btn {
margin-right: 0.125rem;
}
-@media(max-width: 30rem) {
- .ui5-uci-content-and-edit-container {
- display: block;
+@container (max-width: 30rem) {
+ :host::part(content) {
+ flex-wrap: wrap;
+ }
+
+ .ui5-uci-thumbnail-and-content-container {
+ width: 100%;
}
.ui5-uci-content-and-progress {
@@ -144,20 +154,17 @@
.ui5-uci-progress-box {
width: 100%;
margin-top: .5rem;
+ margin-inline-start: 0;
}
.ui5-uci-content {
width: 100%;
}
- .ui5-uci-edit-buttons {
- margin-inline-start: 0;
+ .ui5-uci-buttons {
+ margin-inline-start: var(--ui5_upload_collection_small_size_buttons_margin_inline_start);
margin-block-start: var(--ui5_upload_collection_small_size_buttons_margin_block_start);
}
-
- .ui5-uci-edit-buttons [ui5-button] {
- margin-block-end: var(--ui5_upload_collection_button_margin_block_end);
- }
}
.ui5-uci-progress-indicator {
@@ -172,18 +179,6 @@
justify-content: space-between;
}
-[ui5-button] {
- margin-inline: 0.5rem;
-}
-
-[ui5-button]:first-of-type {
- margin-inline-start: 0;
-}
-
-[ui5-button]:last-of-type {
- margin-inline-end: var(--ui5_upload_collection_last_button_inline_end);
-}
-
:host([active][actionable]) ::slotted([ui5-icon][slot="thumbnail"]),
:host([active][actionable]) .ui5-uci-file-name,
:host([active][actionable]) .ui5-uci-description {
diff --git a/packages/fiori/src/themes/base/UploadCollection-parameters.css b/packages/fiori/src/themes/base/UploadCollection-parameters.css
index 9686026a484f..ac00bf83c58a 100644
--- a/packages/fiori/src/themes/base/UploadCollection-parameters.css
+++ b/packages/fiori/src/themes/base/UploadCollection-parameters.css
@@ -2,7 +2,8 @@
--ui5_upload_collection_drag_overlay_border: 0.125rem dashed var(--sapContent_ForegroundBorderColor);
--ui5_upload_collection_drop_overlay_border: 0.125rem solid var(--sapContent_DragAndDropActiveColor);
--ui5_upload_collection_drop_overlay_background: transparent;
- --ui5_upload_collection_button_margin_block_end: 0;
- --ui5_upload_collection_last_button_inline_end: 0;
+ --ui5_upload_collection_thumbnail_size: 3rem;
+ --ui5_upload_collection_thumbnail_margin_inline_end: 0.75rem;
--ui5_upload_collection_small_size_buttons_margin_block_start: 0.75rem;
+ --ui5_upload_collection_small_size_buttons_margin_inline_start: 0;
}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_belize/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_belize/UploadCollection-parameters.css
new file mode 100644
index 000000000000..74225a5e87cd
--- /dev/null
+++ b/packages/fiori/src/themes/sap_belize/UploadCollection-parameters.css
@@ -0,0 +1,5 @@
+@import "../base/UploadCollection-parameters.css";
+
+:root {
+ --ui5_upload_collection_small_size_buttons_margin_inline_start: calc(var(--ui5_upload_collection_thumbnail_size) + var(--ui5_upload_collection_thumbnail_margin_inline_end));
+}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_belize/parameters-bundle.css b/packages/fiori/src/themes/sap_belize/parameters-bundle.css
index 24902e4ae4f0..d7ddadee3a99 100644
--- a/packages/fiori/src/themes/sap_belize/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_belize/parameters-bundle.css
@@ -9,7 +9,7 @@
@import "../base/ShellBar-parameters.css";
@import "../base/SideNavigation-parameters.css";
@import "../base/TimelineItem-parameters.css";
-@import "../base/UploadCollection-parameters.css";
@import "../base/ViewSettingsDialog-parameters.css";
@import "../base/Wizard-parameters.css";
-@import "../base/WizardTab-parameters.css";
\ No newline at end of file
+@import "../base/WizardTab-parameters.css";
+@import "./UploadCollection-parameters.css";
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_belize_hcb/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_belize_hcb/UploadCollection-parameters.css
index e635bd9a99d1..ba8072b27698 100644
--- a/packages/fiori/src/themes/sap_belize_hcb/UploadCollection-parameters.css
+++ b/packages/fiori/src/themes/sap_belize_hcb/UploadCollection-parameters.css
@@ -4,4 +4,5 @@
--ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor);
--ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor);
--ui5_upload_collection_drop_overlay_background: transparent;
+ --ui5_upload_collection_small_size_buttons_margin_inline_start: calc(var(--ui5_upload_collection_thumbnail_size) + var(--ui5_upload_collection_thumbnail_margin_inline_end));
}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_belize_hcw/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_belize_hcw/UploadCollection-parameters.css
index 24c88b60f303..fad99a722f32 100644
--- a/packages/fiori/src/themes/sap_belize_hcw/UploadCollection-parameters.css
+++ b/packages/fiori/src/themes/sap_belize_hcw/UploadCollection-parameters.css
@@ -3,4 +3,5 @@
:root {
--ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor);
--ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor);
+ --ui5_upload_collection_small_size_buttons_margin_inline_start: calc(var(--ui5_upload_collection_thumbnail_size) + var(--ui5_upload_collection_thumbnail_margin_inline_end));
}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_horizon/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon/UploadCollection-parameters.css
index f504586df9e2..23cb9e77ee23 100644
--- a/packages/fiori/src/themes/sap_horizon/UploadCollection-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon/UploadCollection-parameters.css
@@ -1,7 +1,5 @@
@import "../base/UploadCollection-parameters.css";
:root {
- --ui5_upload_collection_button_margin_block_end: 2px;
- --ui5_upload_collection_last_button_inline_end: 2px;
--ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem;
}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_horizon_dark/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon_dark/UploadCollection-parameters.css
index f504586df9e2..23cb9e77ee23 100644
--- a/packages/fiori/src/themes/sap_horizon_dark/UploadCollection-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_dark/UploadCollection-parameters.css
@@ -1,7 +1,5 @@
@import "../base/UploadCollection-parameters.css";
:root {
- --ui5_upload_collection_button_margin_block_end: 2px;
- --ui5_upload_collection_last_button_inline_end: 2px;
--ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem;
}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_horizon_dark_exp/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon_dark_exp/UploadCollection-parameters.css
index f504586df9e2..23cb9e77ee23 100644
--- a/packages/fiori/src/themes/sap_horizon_dark_exp/UploadCollection-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_dark_exp/UploadCollection-parameters.css
@@ -1,7 +1,5 @@
@import "../base/UploadCollection-parameters.css";
:root {
- --ui5_upload_collection_button_margin_block_end: 2px;
- --ui5_upload_collection_last_button_inline_end: 2px;
--ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem;
}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_horizon_exp/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon_exp/UploadCollection-parameters.css
index f504586df9e2..23cb9e77ee23 100644
--- a/packages/fiori/src/themes/sap_horizon_exp/UploadCollection-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_exp/UploadCollection-parameters.css
@@ -1,7 +1,5 @@
@import "../base/UploadCollection-parameters.css";
:root {
- --ui5_upload_collection_button_margin_block_end: 2px;
- --ui5_upload_collection_last_button_inline_end: 2px;
--ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem;
}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_horizon_hcb/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb/UploadCollection-parameters.css
index 743a58be3118..69913c713307 100644
--- a/packages/fiori/src/themes/sap_horizon_hcb/UploadCollection-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_hcb/UploadCollection-parameters.css
@@ -4,7 +4,5 @@
--ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor);
--ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor);
--ui5_upload_collection_drop_overlay_background: transparent;
- --ui5_upload_collection_button_margin_block_end: 2px;
- --ui5_upload_collection_last_button_inline_end: 2px;
--ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem;
}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_horizon_hcb_exp/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb_exp/UploadCollection-parameters.css
index 743a58be3118..69913c713307 100644
--- a/packages/fiori/src/themes/sap_horizon_hcb_exp/UploadCollection-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_hcb_exp/UploadCollection-parameters.css
@@ -4,7 +4,5 @@
--ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor);
--ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor);
--ui5_upload_collection_drop_overlay_background: transparent;
- --ui5_upload_collection_button_margin_block_end: 2px;
- --ui5_upload_collection_last_button_inline_end: 2px;
--ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem;
}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_horizon_hcw/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw/UploadCollection-parameters.css
index 7c3f439e2931..18eefa6d36d9 100644
--- a/packages/fiori/src/themes/sap_horizon_hcw/UploadCollection-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_hcw/UploadCollection-parameters.css
@@ -3,7 +3,5 @@
:root {
--ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor);
--ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor);
- --ui5_upload_collection_button_margin_block_end: 2px;
- --ui5_upload_collection_last_button_inline_end: 2px;
--ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem;
}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_horizon_hcw_exp/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw_exp/UploadCollection-parameters.css
index 7c3f439e2931..18eefa6d36d9 100644
--- a/packages/fiori/src/themes/sap_horizon_hcw_exp/UploadCollection-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_hcw_exp/UploadCollection-parameters.css
@@ -3,7 +3,5 @@
:root {
--ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor);
--ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor);
- --ui5_upload_collection_button_margin_block_end: 2px;
- --ui5_upload_collection_last_button_inline_end: 2px;
--ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem;
}
\ No newline at end of file
diff --git a/packages/fiori/test/specs/UploadCollection.spec.js b/packages/fiori/test/specs/UploadCollection.spec.js
index acad191ff271..63a3c155e428 100644
--- a/packages/fiori/test/specs/UploadCollection.spec.js
+++ b/packages/fiori/test/specs/UploadCollection.spec.js
@@ -22,7 +22,7 @@ describe("UploadCollection", () => {
await editButton.click();
assert.ok(await secondItem.shadow$(".ui5-uci-edit-container").isDisplayed(), "edit container should be rendered");
- assert.ok(await secondItem.shadow$(".ui5-uci-edit-buttons").isDisplayed(), "edit buttons should be rendered");
+ assert.ok(await secondItem.shadow$(".ui5-uci-buttons").isDisplayed(), "buttons should be rendered");
assert.notOk(await secondItem.shadow$(".ui5-li-detailbtn").isDisplayed(), "detail button should be hidden");
// reset the item