fix(ui5-upload-collеction): align buttons to avoid extra space when s…

…ize is small (#7491)
SAP · Sep 13, 2023 · 6594cd5 · 6594cd5
1 parent 0e4b7c9
commit 6594cd5
Show file tree

Hide file tree

Showing 16 changed files with 104 additions and 117 deletions.
diff --git a/packages/fiori/src/UploadCollectionItem.hbs b/packages/fiori/src/UploadCollectionItem.hbs
@@ -1,11 +1,10 @@
 {{>include "../../main/src/ListItem.hbs"}}
 
 {{#*inline "listItemContent"}}
-	<div class="ui5-uci-thumbnail">
-		<slot name="thumbnail"></slot>
-	</div>
-
-	<div class="ui5-uci-content-and-edit-container">
+	<div class="ui5-uci-thumbnail-and-content-container">
+		<div class="ui5-uci-thumbnail">
+			<slot name="thumbnail"></slot>
+		</div>
 		<div class="ui5-uci-content-and-progress">
 			<div class="ui5-uci-content">
 				{{#if _editing}}
@@ -46,65 +45,66 @@
 				</div>
 			{{/if}}
 		</div>
-		<div class="ui5-uci-edit-buttons">
-			{{#if _editing}}
+	</div>
+
+	<div class="ui5-uci-buttons">
+		{{#if _editing}}
+			<ui5-button
+					design="Transparent"
+					class="ui5-uci-edit-rename-btn"
+					@click="{{_onRename}}"
+					@keyup="{{_onRenameKeyup}}">{{_renameBtnText}}</ui5-button>
+			<ui5-button
+					design="Transparent"
+					id="ui5-uci-edit-cancel"
+					@click="{{_onRenameCancel}}"
+					@keyup="{{_onRenameCancelKeyup}}">{{_cancelRenameBtnText}}</ui5-button>
+		{{else}}
+			{{#if _showRetry}}
 				<ui5-button
-						design="Transparent"
-						class="ui5-uci-edit-rename-btn"
-						@click="{{_onRename}}"
-						@keyup="{{_onRenameKeyup}}">{{_renameBtnText}}</ui5-button>
+					icon="refresh"
+					design="Transparent"
+					tooltip="{{_retryButtonTooltip}}"
+					@click="{{_onRetry}}"
+					@keyup="{{_onRetryKeyup}}"
+				></ui5-button>
+			{{/if}}
+			{{#if _showTerminate}}
 				<ui5-button
-						design="Transparent"
-						id="ui5-uci-edit-cancel"
-						@click="{{_onRenameCancel}}"
-						@keyup="{{_onRenameCancelKeyup}}">{{_cancelRenameBtnText}}</ui5-button>
-			{{else}}
-				{{#if _showRetry}}
-					<ui5-button
-						icon="refresh"
-						design="Transparent"
-						tooltip="{{_retryButtonTooltip}}"
-						@click="{{_onRetry}}"
-						@keyup="{{_onRetryKeyup}}"
-					></ui5-button>
-				{{/if}}
-				{{#if _showTerminate}}
-					<ui5-button
-						icon="stop"
-						design="Transparent"
-						tooltip="{{_terminateButtonTooltip}}"
-						@click="{{_onTerminate}}"
-						@keyup="{{_onTerminateKeyup}}">
-					</ui5-button>
-				{{/if}}
+					icon="stop"
+					design="Transparent"
+					tooltip="{{_terminateButtonTooltip}}"
+					@click="{{_onTerminate}}"
+					@keyup="{{_onTerminateKeyup}}">
+				</ui5-button>
+			{{/if}}
 
-				{{#if showEditButton}}
-					<ui5-button
-						id="{{_id}}-editing-button"
-						design="Transparent"
-						tooltip="{{_editButtonTooltip}}"
-						icon="edit"
-						@click="{{onDetailClick}}"
-						@keyup="{{_onDetailKeyup}}"
-						class="ui5-li-detailbtn ui5-uci-edit"
-					>
-					</ui5-button>
-				{{/if}}
+			{{#if showEditButton}}
+				<ui5-button
+					id="{{_id}}-editing-button"
+					design="Transparent"
+					tooltip="{{_editButtonTooltip}}"
+					icon="edit"
+					@click="{{onDetailClick}}"
+					@keyup="{{_onDetailKeyup}}"
+					class="ui5-li-detailbtn ui5-uci-edit"
+				>
+				</ui5-button>
+			{{/if}}
 
-				{{#if renderUploadCollectionDeleteButton}}
-					<ui5-button
-							class="ui5-upload-collection-deletebtn"
-							tabindex="-1"
-							data-sap-no-tab-ref
-							id="{{_id}}-deleteSelectionElement"
-							design="Transparent"
-							icon="decline"
-							?disabled="{{disableDeleteButton}}"
-							@click="{{_onDelete}}"
-							tooltip="{{deleteText}}"
-					></ui5-button>
-				{{/if}}
+			{{#if renderUploadCollectionDeleteButton}}
+				<ui5-button
+						class="ui5-upload-collection-deletebtn"
+						tabindex="-1"
+						data-sap-no-tab-ref
+						id="{{_id}}-deleteSelectionElement"
+						design="Transparent"
+						icon="decline"
+						?disabled="{{disableDeleteButton}}"
+						@click="{{_onDelete}}"
+						tooltip="{{deleteText}}"
+				></ui5-button>
 			{{/if}}
-		</div>
+		{{/if}}
 	</div>
 {{/inline}}
diff --git a/packages/fiori/src/themes/UploadCollectionItem.css b/packages/fiori/src/themes/UploadCollectionItem.css
@@ -1,43 +1,51 @@
 :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"]) {
 	color: var(--sapContent_IconColor);
 }
 
 /* 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
@@ -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;
 }
diff --git a/packages/fiori/src/themes/sap_belize/UploadCollection-parameters.css 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));
+}
diff --git 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";
+@import "../base/WizardTab-parameters.css";
+@import "./UploadCollection-parameters.css";
diff --git 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));
 }
diff --git 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));
 }
diff --git 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;
 }
diff --git 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;
 }
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
@@ -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;
 }
diff --git 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;
 }
diff --git 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;
 }
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
@@ -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;
 }
diff --git 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;
 }