feat: download, hover

mendix · Dec 12, 2024 · 53904e9 · 53904e9
1 parent 8d87c0d
commit 53904e9
Show file tree

Hide file tree

Showing 13 changed files with 126 additions and 15 deletions.
diff --git a/packages/pluggableWidgets/file-uploader-web/src/FileUploader.xml b/packages/pluggableWidgets/file-uploader-web/src/FileUploader.xml
@@ -172,6 +172,14 @@
                 </translations>
             </property>
 
+            <property key="downloadButtonTextMessage" type="textTemplate">
+                <caption>Download button</caption>
+                <description />
+                <translations>
+                    <translation lang="en_US">Download this file</translation>
+                </translations>
+            </property>
+
             <property key="removeButtonTextMessage" type="textTemplate">
                 <caption>Remove button</caption>
                 <description />

diff --git a/packages/pluggableWidgets/file-uploader-web/src/assets/remove-icon-active.svg b/packages/pluggableWidgets/file-uploader-web/src/assets/remove-icon-active.svg
diff --git a/packages/pluggableWidgets/file-uploader-web/src/assets/remove-icon-hover.svg b/packages/pluggableWidgets/file-uploader-web/src/assets/remove-icon-hover.svg
diff --git a/packages/pluggableWidgets/file-uploader-web/src/assets/remove-icon.svg b/packages/pluggableWidgets/file-uploader-web/src/assets/remove-icon.svg
diff --git a/packages/pluggableWidgets/file-uploader-web/src/assets/view-icon-active.svg b/packages/pluggableWidgets/file-uploader-web/src/assets/view-icon-active.svg
diff --git a/packages/pluggableWidgets/file-uploader-web/src/assets/view-icon-hover.svg b/packages/pluggableWidgets/file-uploader-web/src/assets/view-icon-hover.svg
diff --git a/packages/pluggableWidgets/file-uploader-web/src/assets/view-icon.svg b/packages/pluggableWidgets/file-uploader-web/src/assets/view-icon.svg
diff --git a/packages/pluggableWidgets/file-uploader-web/src/components/FileEntry.tsx b/packages/pluggableWidgets/file-uploader-web/src/components/FileEntry.tsx
@@ -27,6 +27,7 @@ export const FileEntryContainer = observer(({ store }: FileEntryContainerProps):
             errorMessage={store.errorDescription}
             canRemove={store.canRemove}
             onRemove={onRemove}
+            downloadUrl={store.downloadUrl}
         />
     );
 });
@@ -42,10 +43,17 @@ interface FileEntryProps {
 
     canRemove: boolean;
     onRemove: () => void;
+
+    downloadUrl?: string;
 }
 
 function FileEntry(props: FileEntryProps): ReactElement {
     const translations = useTranslationsStore();
+
+    const onView = useCallback(() => {
+        onDownloadClick(props.downloadUrl);
+    }, [props.downloadUrl]);
+
     return (
         <div
             className={classNames("file-entry", {
@@ -73,14 +81,24 @@ function FileEntry(props: FileEntryProps): ReactElement {
 
                 <div className={"entry-details-actions"}>
                     <button
-                        className={classNames("remove-button", {
+                        className={classNames("action-button", {
+                            disabled: !props.downloadUrl
+                        })}
+                        onClick={onView}
+                        role={"button"}
+                        title={translations.get("downloadButtonTextMessage")}
+                    >
+                        <div className={"download-icon"} />
+                    </button>
+                    <button
+                        className={classNames("action-button", {
                             disabled: !props.canRemove
                         })}
                         onClick={props.onRemove}
                         role={"button"}
                         title={translations.get("removeButtonTextMessage")}
                     >
-                        &nbsp;
+                        <div className={"remove-icon"} />
                     </button>
                 </div>
             </div>
@@ -93,3 +111,11 @@ function FileEntry(props: FileEntryProps): ReactElement {
         </div>
     );
 }
+
+function onDownloadClick(fileUrl: string | undefined): void {
+    if (!fileUrl) {
+        return;
+    }
+    const url = `${fileUrl}&target=window`;
+    window.open(url, "mendix_file");
+}
diff --git a/packages/pluggableWidgets/file-uploader-web/src/stores/FileStore.ts b/packages/pluggableWidgets/file-uploader-web/src/stores/FileStore.ts
@@ -4,7 +4,15 @@ import { action, computed, makeObservable, observable, runInAction } from "mobx"
 import mimeTypes from "mime-types";
 
 import { FileUploaderStore } from "./FileUploaderStore";
-import { fetchImageThumbnail, fetchMxObject, isImageObject, MxObject, removeObject, saveFile } from "../utils/mx-data";
+import {
+    fetchDocumentUrl,
+    fetchImageThumbnail,
+    fetchMxObject,
+    isImageObject,
+    MxObject,
+    removeObject,
+    saveFile
+} from "../utils/mx-data";
 
 export type FileStatus =
     | "existingFile"
@@ -154,6 +162,12 @@ export class FileStore {
         }
     }
 
+    get downloadUrl(): string | undefined {
+        if (this._mxObject) {
+            return fetchDocumentUrl(this._mxObject);
+        }
+    }
+
     get imagePreviewUrl(): string | undefined {
         if (this._rootStore._uploadMode !== "images") {
             return;

diff --git a/packages/pluggableWidgets/file-uploader-web/src/stores/TranslationsStore.ts b/packages/pluggableWidgets/file-uploader-web/src/stores/TranslationsStore.ts
@@ -1,6 +1,6 @@
 import { FileUploaderContainerProps } from "../../typings/FileUploaderProps";
 import { DynamicValue } from "mendix";
-import { makeObservable, observable } from "mobx";
+import { action, makeObservable, observable } from "mobx";
 
 const translationProps: Array<keyof FileUploaderContainerProps> = [];
 
@@ -15,7 +15,8 @@ export class TranslationsStore {
         });
 
         makeObservable(this, {
-            translationsMap: observable
+            translationsMap: observable,
+            updateProps: action
         });
     }
 

diff --git a/packages/pluggableWidgets/file-uploader-web/src/ui/FileUploader.scss b/packages/pluggableWidgets/file-uploader-web/src/ui/FileUploader.scss
@@ -109,6 +109,11 @@ Place your custom CSS here
             border-radius: 4px;
             padding: 10px;
 
+            &:hover {
+                background-color: var(--bg-color-default);
+                border-color: var(--border-color-active);
+            }
+
             .entry-details {
                 flex: 1;
 
@@ -159,19 +164,54 @@ Place your custom CSS here
                 }
 
                 .entry-details-actions {
-                    flex: 0;
+                    flex: 0 0 min-content;
                     align-self: center;
-                    min-width: 24px;
-                    height: 24px;
+                    min-width: 32px;
+                    height: 32px;
 
-                    .remove-button {
-                        width: 100%;
-                        background-image: url(../assets/remove-icon.svg);
-                        background-repeat: no-repeat;
-                        background-position: center;
+                    display: flex;
+
+                    .action-button {
+                        width: 32px;
                         text-decoration: none;
                         border-color: transparent;
                         background-color: transparent;
+                    }
+
+                    .remove-icon {
+                        height: 24px;
+                        width: 24px;
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        background-image: url(../assets/remove-icon.svg);
+
+                        &:hover {
+                            background-image: url(../assets/remove-icon-hover.svg);
+                        }
+
+                        &:active {
+                            background-image: url(../assets/remove-icon-active.svg);
+                        }
+
+                        &.disabled {
+                            display: none;
+                        }
+                    }
+
+                    .download-icon {
+                        height: 24px;
+                        width: 24px;
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        background-image: url(../assets/view-icon.svg);
+
+                        &:hover {
+                            background-image: url(../assets/view-icon-hover.svg);
+                        }
+
+                        &:active {
+                            background-image: url(../assets/view-icon-active.svg);
+                        }
 
                         &.disabled {
                             display: none;

diff --git a/packages/pluggableWidgets/file-uploader-web/src/utils/mx-data.ts b/packages/pluggableWidgets/file-uploader-web/src/utils/mx-data.ts
@@ -43,6 +43,10 @@ export function isImageObject(mxObject: MxObject): boolean {
     return (window as any).mx.meta.getEntity(mxObject.getEntity()).isA("System.Image");
 }
 
+export function fetchDocumentUrl(mxObject: MxObject): string {
+    return (window as any).mx.data.getDocumentUrl(mxObject.getGuid(), mxObject.get("changedDate"), false);
+}
+
 export function fetchImageThumbnail(mxObject: MxObject): Promise<string> {
     const docUrl = (window as any).mx.data.getDocumentUrl(mxObject.getGuid(), mxObject.get("changedDate"), true);
     return new Promise<string>((resolve, reject) => {

diff --git a/packages/pluggableWidgets/file-uploader-web/typings/FileUploaderProps.d.ts b/packages/pluggableWidgets/file-uploader-web/typings/FileUploaderProps.d.ts
@@ -51,6 +51,7 @@ export interface FileUploaderContainerProps {
     uploadFailureFileIsTooBigMessage: DynamicValue<string>;
     uploadFailureTooManyFilesMessage: DynamicValue<string>;
     unavailableCreateActionMessage: DynamicValue<string>;
+    downloadButtonTextMessage: DynamicValue<string>;
     removeButtonTextMessage: DynamicValue<string>;
     removeSuccessMessage: DynamicValue<string>;
     removeErrorMessage: DynamicValue<string>;
@@ -84,6 +85,7 @@ export interface FileUploaderPreviewProps {
     uploadFailureFileIsTooBigMessage: string;
     uploadFailureTooManyFilesMessage: string;
     unavailableCreateActionMessage: string;
+    downloadButtonTextMessage: string;
     removeButtonTextMessage: string;
     removeSuccessMessage: string;
     removeErrorMessage: string;