diff --git a/packages/fiori/src/UploadCollectionItem.hbs b/packages/fiori/src/UploadCollectionItem.hbs
index 6c2bcddbf4fd..09dd339889e4 100644
--- a/packages/fiori/src/UploadCollectionItem.hbs
+++ b/packages/fiori/src/UploadCollectionItem.hbs
@@ -1,5 +1,7 @@
{{>include "../../main/src/ListItem.hbs"}}
+{{#*inline "selectionElement"}}{{/inline}}
+
{{#*inline "listItemContent"}}
@@ -22,7 +24,7 @@
{{#if fileNameClickable}}
{{fileName}}
{{else}}
-
{{fileName}}
+
{{fileName}}
{{/if}}
{{/if}}
@@ -90,6 +92,20 @@
>
{{/if}}
+
+ {{#if renderDeleteButton}}
+
+ {{/if}}
{{/if}}
diff --git a/packages/fiori/src/themes/UploadCollectionItem.css b/packages/fiori/src/themes/UploadCollectionItem.css
index 916eea620048..dca12f72ce15 100644
--- a/packages/fiori/src/themes/UploadCollectionItem.css
+++ b/packages/fiori/src/themes/UploadCollectionItem.css
@@ -59,17 +59,19 @@
}
.ui5-uci-file-name {
- width: 100%;
display: block;
font-family: "72override", var(--sapFontFamily);
font-size: var(--sapFontLargeSize);
- color: var(--sapTextColor);
margin-bottom: 0.25rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
+.ui5-uci-file-name-text {
+ color: var(--sapList_TextColor);
+}
+
[ui5-link].ui5-uci-file-name {
pointer-events: all;
}
@@ -80,9 +82,17 @@
font-size: var(--sapFontMediumSize);
color: var(--sapContent_LabelColor);
white-space: initial;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
/* Edit mode */
+
+.ui5-uci-edit-container {
+ display: flex;
+ align-items: center;
+}
+
.ui5-uci-edit-container [ui5-input] {
width: 60%;
pointer-events: all;
@@ -111,19 +121,13 @@
.ui5-uci-edit-buttons {
pointer-events: all;
- margin-left: 1rem;
+ margin-inline-start: 1rem;
}
.ui5-uci-edit-rename-btn {
margin-right: 0.125rem;
}
-/* Progress Box */
-.ui5-uci-progress-box {
- width: 20%;
- min-width: 4rem;
-}
-
@media(max-width: 30rem) {
.ui5-uci-content-and-edit-container {
display: block;
@@ -142,14 +146,13 @@
width: 100%;
}
- .ui5-uci-edit-buttons,
- .ui5-li-detailbtn,
- .ui5-li-deletebtn {
- margin-top: 0.75rem;
+ .ui5-uci-edit-buttons {
+ margin-inline-start: 0;
+ margin-block-start: var(--ui5_upload_collection_small_size_buttons_margin_block_start);
}
- .ui5-uci-edit-buttons {
- margin-left: 0;
+ .ui5-uci-edit-buttons [ui5-button] {
+ margin-block-end: var(--ui5_upload_collection_button_margin_block_end);
}
}
@@ -164,3 +167,15 @@
display: flex;
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);
+}
diff --git a/packages/fiori/src/themes/base/UploadCollection-parameters.css b/packages/fiori/src/themes/base/UploadCollection-parameters.css
index e78985ecade9..9686026a484f 100644
--- a/packages/fiori/src/themes/base/UploadCollection-parameters.css
+++ b/packages/fiori/src/themes/base/UploadCollection-parameters.css
@@ -2,4 +2,7 @@
--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_small_size_buttons_margin_block_start: 0.75rem;
}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_fiori_3_hcb/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_fiori_3_hcb/UploadCollection-parameters.css
index a8a841cacc59..e635bd9a99d1 100644
--- a/packages/fiori/src/themes/sap_fiori_3_hcb/UploadCollection-parameters.css
+++ b/packages/fiori/src/themes/sap_fiori_3_hcb/UploadCollection-parameters.css
@@ -4,6 +4,4 @@
--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_progress_indicator_background: var(--sapHighlightColor);
- --ui5_upload_collection_progress_indicator_error_background: var(--sapHighlightColor);
}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/sap_fiori_3_hcw/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_fiori_3_hcw/UploadCollection-parameters.css
index f34277975a57..24c88b60f303 100644
--- a/packages/fiori/src/themes/sap_fiori_3_hcw/UploadCollection-parameters.css
+++ b/packages/fiori/src/themes/sap_fiori_3_hcw/UploadCollection-parameters.css
@@ -3,6 +3,4 @@
: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_progress_indicator_background: var(--sapHighlightColor);
- --ui5_upload_collection_progress_indicator_error_background: var(--sapHighlightColor);
}
\ 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
new file mode 100644
index 000000000000..f504586df9e2
--- /dev/null
+++ b/packages/fiori/src/themes/sap_horizon/UploadCollection-parameters.css
@@ -0,0 +1,7 @@
+@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/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon/parameters-bundle.css
index 3290504f2fc5..4f41d73924fc 100644
--- a/packages/fiori/src/themes/sap_horizon/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon/parameters-bundle.css
@@ -8,7 +8,7 @@
@import "./ShellBar-parameters.css";
@import "./TimelineItem-parameters.css";
@import "./SideNavigation-parameters.css";
-@import "../base/UploadCollection-parameters.css";
+@import "./UploadCollection-parameters.css";
@import "../base/ViewSettingsDialog-parameters.css";
@import "./Wizard-parameters.css";
@import "./WizardTab-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_dark/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon_dark/UploadCollection-parameters.css
new file mode 100644
index 000000000000..f504586df9e2
--- /dev/null
+++ b/packages/fiori/src/themes/sap_horizon_dark/UploadCollection-parameters.css
@@ -0,0 +1,7 @@
+@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/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css
index 3290504f2fc5..4f41d73924fc 100644
--- a/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css
@@ -8,7 +8,7 @@
@import "./ShellBar-parameters.css";
@import "./TimelineItem-parameters.css";
@import "./SideNavigation-parameters.css";
-@import "../base/UploadCollection-parameters.css";
+@import "./UploadCollection-parameters.css";
@import "../base/ViewSettingsDialog-parameters.css";
@import "./Wizard-parameters.css";
@import "./WizardTab-parameters.css";
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 a8a841cacc59..743a58be3118 100644
--- a/packages/fiori/src/themes/sap_horizon_hcb/UploadCollection-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_hcb/UploadCollection-parameters.css
@@ -4,6 +4,7 @@
--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_progress_indicator_background: var(--sapHighlightColor);
- --ui5_upload_collection_progress_indicator_error_background: var(--sapHighlightColor);
+ --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 f34277975a57..7c3f439e2931 100644
--- a/packages/fiori/src/themes/sap_horizon_hcw/UploadCollection-parameters.css
+++ b/packages/fiori/src/themes/sap_horizon_hcw/UploadCollection-parameters.css
@@ -3,6 +3,7 @@
: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_progress_indicator_background: var(--sapHighlightColor);
- --ui5_upload_collection_progress_indicator_error_background: var(--sapHighlightColor);
+ --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