fix(ui5-upload-collection-item): make component responsive (#1579)

Author: fifoosid

packages/fiori/src/UploadCollectionItem.hbs

@@ -36,7 +36,9 @@
 						<div class="ui5-uci-progress-bar-remaining" style="{{styles.progressBarRemaining}}"></div>
 					</div>
 					<div class="ui5-uci-progress-labels">
-						<ui5-label>{{_progressText}}</ui5-label>
+						<ui5-label
+							show-colon
+						>{{_progressText}}</ui5-label>
 						<ui5-label>{{progress}}%</ui5-label>
 					</div>
 				</div>
@@ -63,6 +65,17 @@
 						@click="{{_onTerminate}}">
 					</ui5-button>
 				{{/if}}
+
+				{{#if showEditButton}}
+					<ui5-button
+						id="{{_id}}-editing-button"
+						design="Transparent"
+						icon="edit"
+						@click="{{onDetailClick}}"
+						class="ui5-li-detailbtn ui5-uci-edit"
+					>
+					</ui5-button>
+				{{/if}}
 			{{/if}}
 		</div>
 	</div>

packages/fiori/src/UploadCollectionItem.js

@@ -1,15 +1,18 @@
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import ListItemType from "@ui5/webcomponents/dist/types/ListItemType.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
 import Input from "@ui5/webcomponents/dist/Input.js";
 import Label from "@ui5/webcomponents/dist/Label.js";
 import Link from "@ui5/webcomponents/dist/Link.js";
 import ListItem from "@ui5/webcomponents/dist/ListItem.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import getFileExtension from "@ui5/webcomponents-base/dist/util/getFileExtension.js";
+import RenderScheduler from "@ui5/webcomponents-base/dist/RenderScheduler.js";
 import UploadState from "./types/UploadState.js";
 import "@ui5/webcomponents-icons/dist/icons/refresh.js";
 import "@ui5/webcomponents-icons/dist/icons/stop.js";
+import "@ui5/webcomponents-icons/dist/icons/edit.js";
 import {
 	UPLOADCOLLECTIONITEM_CANCELBUTTON_TEXT,
 	UPLOADCOLLECTIONITEM_RENAMEBUTTON_TEXT,
@@ -254,16 +257,15 @@ class UploadCollectionItem extends ListItem {
 	constructor() {
 		super();
 		this.i18nBundle = getI18nBundle("@ui5/webcomponents-fiori");
-	}
 
-	onBeforeRendering() {
-		if (!this.focused) {
-			this._editing = false;
-		}
+		this._editPressed = false; // indicates if the edit btn has been pressed
 	}
 
+
 	onAfterRendering() {
-		if (this.focused && this._editing) {
+		if (this._editPressed) {
+			this._editing = true;
+			this._editPressed = false;
 			this.focusAndSelectText();
 		}
 	}
@@ -273,6 +275,7 @@ class UploadCollectionItem extends ListItem {
 
 		const inp = this.shadowRoot.getElementById("ui5-uci-edit-input");
 
+		await RenderScheduler.whenDOMUpdated();
 		if (inp.getFocusDomRef()) {
 			inp.getFocusDomRef().setSelectionRange(0, this._fileNameWithoutExtension.length);
 		}
@@ -286,6 +289,29 @@ class UploadCollectionItem extends ListItem {
 		this._editing = true;
 	}
 
+	/**
+	 * @override
+	 */
+	_onfocusout(event) {
+		super._onfocusout(event);
+
+		const path = event.path || (event.composedPath && event.composedPath());
+
+		this._editPressed = this.isDetailPressed(event);
+
+		if (!this._editPressed && path.indexOf(this) > -1) {
+			this._editing = false;
+		}
+	}
+
+	isDetailPressed(event) {
+		const path = event.path || (event.composedPath && event.composedPath());
+
+		return path.some(e => {
+			return e.classList && e.classList.contains("ui5-uci-edit");
+		});
+	}
+
 	_onInputChange(event) {
 		if (this.shadowRoot.getElementById("ui5-uci-edit-cancel").active) {
 			return;
@@ -398,6 +424,17 @@ class UploadCollectionItem extends ListItem {
 	get _terminateButtonTooltip() {
 		return this.i18nBundle.getText(UPLOADCOLLECTIONITEM_TERMINATE_BUTTON_TEXT);
 	}
+
+	/**
+	 * override
+	 */
+	get typeDetail() {
+		return false;
+	}
+
+	get showEditButton() {
+		return this.type === ListItemType.Detail;
+	}
 }
 
 UploadCollectionItem.define();

packages/fiori/src/themes/UploadCollectionItem.css

@@ -47,6 +47,7 @@
 
 .ui5-uci-content {
 	flex: 1 1 auto;
+	margin-right: .5rem;
 	min-width: 0; /* fixes chrome overflow issue */
 }
 
@@ -107,11 +108,30 @@ ui5-link.ui5-uci-file-name {
 	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;
 	}
 
+	.ui5-uci-content-and-progress {
+		flex-wrap: wrap;
+	}
+
+	.ui5-uci-progress-box {
+		width: 100%;
+		margin-top: .5rem;
+	}
+	
+	.ui5-uci-content {
+		width: 100%;
+	}
+
 	.ui5-uci-edit-buttons,
 	.ui5-li-detailbtn,
 	.ui5-li-deletebtn {
@@ -123,22 +143,15 @@ ui5-link.ui5-uci-file-name {
 	}
 }
 
-/* Progress Box */
-.ui5-uci-progress-box {
-	width: 20%;
-	margin-left: 0.5rem;
-	min-width: 4rem;
-}
-
 .ui5-uci-progress-indicator {
 	display: flex;
 	background: var(--sapField_Background);
 	height: 1.125rem;
 	min-height: 1rem;
 	width: 100%;
-	min-width: 4rem;
+	min-width: 3.375rem;
 	margin-bottom: 0.5rem;
-	padding: 5px;
+	padding: 5px 0;
 	box-sizing: border-box;
 }
 

packages/fiori/test/specs/UploadCollection.spec.js

@@ -96,23 +96,23 @@ describe("UploadCollection", () => {
 		it("should preserve dots in the file name", () => {
 			const latestReportsPdf = browser.$("#latestReportsPdf");
 			const editButton = latestReportsPdf.shadow$(".ui5-li-detailbtn");
-	
+
 			editButton.click();
 			browser.keys("last.reports-edited");
 			browser.keys("Enter");
-	
+
 			assert.strictEqual(latestReportsPdf.getProperty("fileName"), "last.reports-edited.pdf", "file extension '.pdf' should be preserved");
 		});
 
 		it("should be able to add extension, if there isn't such", () => {
 			const noFileExtensionItem = browser.$("#noFileExtension");
 			const editButton = noFileExtensionItem.shadow$(".ui5-li-detailbtn");
 			const newFileName = "newFileName.newExtension";
-	
+
 			editButton.click();
 			browser.keys(newFileName);
 			browser.keys("Enter");
-	
+
 			assert.strictEqual(noFileExtensionItem.getProperty("fileName"), newFileName, "file name should be changed");
 
 			const newFileName2 = "newFileName2";
@@ -139,7 +139,7 @@ describe("UploadCollection", () => {
 		it("should NOT show drag and drop overlay when NOT dragging files", () => {
 			const uploadCollection = browser.$("#uploadCollection");
 			const draggableElement = browser.$("#draggableElement");
-		
+
 			draggableElement.scrollIntoView();
 			draggableElement.dragAndDrop(uploadCollection);