Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ui5-upload-collection): add IllustratedMessage for Drag and Drop…
Browse files Browse the repository at this point in the history
… and Upload Error states

Part of #6271
s-todorova committed Mar 8, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent a5ec865 commit 81c6fda
Showing 7 changed files with 131 additions and 20 deletions.
14 changes: 12 additions & 2 deletions packages/fiori/src/UploadCollection.hbs
Original file line number Diff line number Diff line change
@@ -14,6 +14,14 @@
<slot slot="header" name="header"></slot>
<slot></slot>
</ui5-list>
{{#if showErrorMessage}}
<div class="{{classes.uploadError}}">
<ui5-illustrated-message name="ErrorScreen">
<ui5-title slot="title" class="title" level="H2">{{_uploadErrorText}}</ui5-title>
<span slot="subtitle" class="subtitle">{{_uploadErrorDescription}}</span>
</ui5-illustrated-message>
</div>
{{/if}}
{{#if _showNoData}}
<div class="{{classes.noFiles}}">
<ui5-illustrated-message name="Tent">
@@ -29,8 +37,10 @@
@dragleave="{{_ondragleave}}"
@dragover="{{_ondragover}}"
>
<ui5-icon name="upload-to-cloud"></ui5-icon>
<span class="dnd-overlay-text">{{_dndOverlayText}}</span>
<ui5-illustrated-message name="UploadCollection">
<ui5-title slot="title" class="dnd-overlay-title" level="H2">{{_dndOverlayText}}</ui5-title>
<span slot="subtitle" class="dnd-overlay-subtitle">{{_dndOverlayDescription}}</span>
</ui5-illustrated-message>
</div>
{{/if}}
</div>
57 changes: 57 additions & 0 deletions packages/fiori/src/UploadCollection.ts
Original file line number Diff line number Diff line change
@@ -14,14 +14,20 @@ import ListMode from "@ui5/webcomponents/dist/types/ListMode.js";
import Title from "@ui5/webcomponents/dist/Title.js";
import IllustratedMessage from "./IllustratedMessage.js";
import "./illustrations/sapIllus-Scene-Tent.js";
import "./illustrations/sapIllus-Scene-UploadCollection.js";
import "./illustrations/sapIllus-Scene-ErrorScreen.js";
import "@ui5/webcomponents-icons/dist/upload-to-cloud.js";
import "@ui5/webcomponents-icons/dist/document.js";
import {
UPLOADCOLLECTION_NO_DATA_TEXT,
UPLOADCOLLECTION_NO_DATA_DESCRIPTION,
UPLOADCOLLECTION_DRAG_FILE_INDICATOR,
UPLOADCOLLECTION_DRAG_FILE_DESCRIPTION,
UPLOADCOLLECTION_DROP_FILE_INDICATOR,
UPLOADCOLLECTION_DROP_FILE_DESCRIPTION,
UPLOADCOLLECTION_ARIA_ROLE_DESCRIPTION,
UPLOADCOLLECTION_UPLOAD_ERROR_TEXT,
UPLOADCOLLECTION_UPLOAD_ERROR_DESCRIPTION,
} from "./generated/i18n/i18n-defaults.js";
import {
attachBodyDnDHandler,
@@ -180,6 +186,38 @@ class UploadCollection extends UI5Element {
@property()
accessibleName!: string;

/**
* Displays an IllustratedMessage for error, set when handling unsuccessful file upload in handling file requests
* @type {boolean}
* @name sap.ui.webc.fiori.UploadCollection.prototype.showErrorMessage
* @defaultvalue false
* @public
*/
@property({ type: Boolean})
showErrorMessage!: boolean;

/**
* Allows you to set your own text for the 'Unable to upload' error message text.
*
* @type {string}
* @name sap.ui.webc.fiori.UploadCollection.prototype.errorMessageText
* @defaultvalue ""
* @public
*/
@property()
errorMessageText!: string;

/**
* Allows you to set your own text for the 'Unable to upload' error message description.
*
* @type {string}
* @name sap.ui.webc.fiori.UploadCollection.prototype.errorMessageDescription
* @defaultvalue ""
* @public
*/
@property()
errorMessageDescription!: string;

/**
* Indicates what overlay to show when files are being dragged.
*
@@ -337,6 +375,9 @@ class UploadCollection extends UI5Element {
"uc-no-files": true,
"uc-no-files-dnd-overlay": this._showDndOverlay,
},
uploadError: {
"uc-no-files-upload-error": this.showErrorMessage,
},
};
}

@@ -375,6 +416,22 @@ class UploadCollection extends UI5Element {

return UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_DROP_FILE_INDICATOR);
}

get _dndOverlayDescription() {
if (this._dndOverlayMode === UploadCollectionDnDOverlayMode.Drag) {
return UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_DRAG_FILE_DESCRIPTION);
}

return UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_DROP_FILE_DESCRIPTION);
}

get _uploadErrorText() {
return this.errorMessageText || UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_UPLOAD_ERROR_TEXT);
}

get _uploadErrorDescription() {
return this.errorMessageDescription || UploadCollection.i18nBundle.getText(UPLOADCOLLECTION_UPLOAD_ERROR_DESCRIPTION);
}
}

UploadCollection.define();
12 changes: 12 additions & 0 deletions packages/fiori/src/i18n/messagebundle.properties
Original file line number Diff line number Diff line change
@@ -100,6 +100,12 @@ UPLOADCOLLECTIONITEM_EDIT_BUTTON_TEXT=Edit
#XMSG: Message text for no data text in the UploadCollection
UPLOADCOLLECTION_NO_DATA_TEXT=No files found

#XMSG: Message text for file upload error in the UploadCollection
UPLOADCOLLECTION_UPLOAD_ERROR_TEXT=We''re having trouble uploading

#XMSG: Message text for the description of file upload error in the UploadCollection
UPLOADCOLLECTION_UPLOAD_ERROR_DESCRIPTION=Check your internet connection. If that''s not it, check the format and file size. If that still doesn''t help, contact your admins

#XMSG: Message text for no data description in the UploadCollection
UPLOADCOLLECTION_NO_DATA_DESCRIPTION=Drop files to upload, or use the Upload button.

@@ -112,6 +118,12 @@ UPLOADCOLLECTION_DRAG_FILE_INDICATOR=Drag files here
#XMSG: Message text indicating where to drop file and upload
UPLOADCOLLECTION_DROP_FILE_INDICATOR=Drop files to upload

#XMSG: Message text description indicating where to drop file and upload
UPLOADCOLLECTION_DROP_FILE_DESCRIPTION=You can also upload several files at once.

#XMSG: Message text description indicating where to drag file
UPLOADCOLLECTION_DRAG_FILE_DESCRIPTION=You can also upload several files at once.

#XACT: ARIA announcement for the ShellBar container
SHELLBAR_LABEL = Shell Bar

45 changes: 28 additions & 17 deletions packages/fiori/src/themes/UploadCollection.css
Original file line number Diff line number Diff line change
@@ -42,6 +42,19 @@
justify-content: center;
}


.uc-dnd-overlay .dnd-overlay-title {
font-size: var(--sapFontHeader2Size);
color: var(--sapGroup_TitleTextColor);
margin: 1rem 0;
}

.uc-dnd-overlay .dnd-overlay-subtitle {
font-size: var(--sapFontHeader5Size);
color: var(--sapContent_LabelColor);
margin-bottom: 2rem;
}

.uc-drag-overlay {
border: var(--ui5_upload_collection_drag_overlay_border);
}
@@ -74,30 +87,28 @@
opacity: 0.05;
}

.uc-dnd-overlay [ui5-icon] {
width: 4rem;
height: 4rem;
margin-bottom: 1rem;
color: var(--sapContent_NonInteractiveIconColor);
}

.uc-dnd-overlay .dnd-overlay-text {
font-family: "72override", var(--sapFontFamily);
font-size: var(--sapFontHeader4Size);
color: var(--sapContent_NonInteractiveIconColor);
}

.uc-dnd-overlay [ui5-icon],
.uc-dnd-overlay .dnd-overlay-text {
.uc-dnd-overlay [ui5-illustrated-message],
.uc-dnd-overlay .dnd-overlay-title {
z-index: 1;
pointer-events: none;
}

.uc-drop-overlay [ui5-icon],
.uc-drop-overlay .dnd-overlay-text {
.uc-drop-overlay .dnd-overlay-title,
.uc-drop-overlay .dnd-overlay-subtitle {
color: var(--sapContent_DragAndDropActiveColor);
}

.uc-no-files-dnd-overlay {
visibility: hidden;
}

/* Upload Error*/
.uc-no-files-upload-error {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1rem;
background-color: var(--sapGroup_ContentBackground);
}
4 changes: 4 additions & 0 deletions packages/fiori/src/themes/UploadCollectionItem.css
Original file line number Diff line number Diff line change
@@ -179,3 +179,7 @@
[ui5-button]:last-of-type {
margin-inline-end: var(--ui5_upload_collection_last_button_inline_end);
}

:host-context([show-error-message]) .ui5-li-root.ui5-uci-root {
display: none;
}
16 changes: 16 additions & 0 deletions packages/fiori/test/pages/UploadCollection.html
Original file line number Diff line number Diff line change
@@ -107,6 +107,22 @@
</div>
</ui5-upload-collection>

<ui5-upload-collection id="uploadCollectionUploadError" show-error-message>
<div class="header" slot="header">
<ui5-title>Unable to upload files</ui5-title>
</div>
<ui5-upload-collection-item
id="errorState2"
file-name="latest.reports.pdf"
type="Detail"
upload-state="Error"
progress="59"
>
<ui5-icon name="document-text" slot="thumbnail"></ui5-icon>
uploadState="Error"
</ui5-upload-collection-item>
</ui5-upload-collection>

<div class="header">
<ui5-label id="uploadStateEvent"></ui5-label>
</div>
3 changes: 2 additions & 1 deletion packages/fiori/test/pages/uploadCollectionScript.js
Original file line number Diff line number Diff line change
@@ -36,7 +36,7 @@
}

function createUCI(file) {
var uci = document.createElement("ui5-upload-collection-item");
var uci = document.createElement("ui5-upload-collection-item"),
description = document.createTextNode("Last modified: " + file.lastModifiedDate + ", size: " + file.size);

uci.appendChild(createThumbnail(file.name));
@@ -92,6 +92,7 @@
oXHR.onreadystatechange = function () {
if (this.status !== 200) {
item.uploadState = "Error";
uploadCollection.setAttribute("show-error-message", "");
}
};
oXHR.send(item.file);

0 comments on commit 81c6fda

Please sign in to comment.