Merge pull request #6 from JelteMX/feature/progress_colors

Feature/progress colors

Author: JelteMX

README.md

@@ -84,9 +84,12 @@ Verification can be done in two ways:
 
 ### 5. UI
 
-![configuration5](/assets/configuration5.jpg)
+![configuration5](/assets/configuration5.png)
 
 - For various icons you can either use the standard Bootstrap Gylphicon (the classname will be prefixed with `glyphicon glyphicon-`) or a built-in icon.
+- You can switch the type label, previews off
+- You can switch off the progress bar once it has been uploaded.
+- For the progress bar you can set different colors, depending on the status
 
 ### 6. Texts
 

assets/configuration5.jpg

@@ -1,7 +1,7 @@
 {
   "name": "filedropper",
   "widgetName": "FileDropper",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Drop files in your Mendix Application",
   "copyright": "Mendix 2019",
   "author": "Jelte Lagendijk",

assets/configuration5.png

@@ -18,7 +18,7 @@ import { FileDropperFile } from "./store/fileDropperFile";
 
 import { savePostMethod } from "./util/data";
 
-import { UIProps } from "./components/FileList";
+import { UIProps, UIProgressBarColors } from "./components/FileList";
 import { getTexts } from "./util/texts";
 import { validateProps, ValidationMessage, ValidateExtraProps } from "./util/validation";
 
@@ -138,13 +138,21 @@ class FileDropperContainer extends Component<FileDropperContainerProps, {}> {
         const errorButtonStyle =
             uiErrorButtonStyle === "glyphicon" && uiErrorButtonGlyph !== "" ? uiErrorButtonGlyph : null;
 
+        const uiProgressBarColors: UIProgressBarColors = {
+            primary: this.props.uiPbColorStrokeNormal,
+            error: this.props.uiPbColorError,
+            success: this.props.uiPbColorSuccess,
+            trail: this.props.uiPbColorTrail
+        };
+
         const ui: UIProps = {
             deleteButtonStyle,
             saveButtonStyle,
             errorButtonStyle,
             uiShowPreviewLabel,
             uiShowImagePreviews,
-            uiHideProgressOnComplete
+            uiHideProgressOnComplete,
+            uiProgressBarColors
         };
 
         return <FileDropper store={this.store} uiProps={ui} />;

package.json

@@ -1,7 +1,7 @@
 import { Component, ReactNode, createElement } from "react";
 import { FileDropperContainerProps } from "../typings/FileDropperProps";
 import { getTexts } from "./util/texts";
-import { UIProps, FileList } from "./components/FileList";
+import { UIProps, FileList, UIProgressBarColors } from "./components/FileList";
 import { classes } from "./util/classes";
 import { FileDropZone } from "./components/FileDropZone";
 import { Alerts } from "./components/Alerts";
@@ -82,13 +82,21 @@ export class preview extends Component<FileDropperContainerProps> {
         const errorButtonStyle =
             uiErrorButtonStyle === "glyphicon" && uiErrorButtonGlyph !== "" ? uiErrorButtonGlyph : null;
 
+        const uiProgressBarColors: UIProgressBarColors = {
+            primary: props.uiPbColorStrokeNormal,
+            error: props.uiPbColorError,
+            success: props.uiPbColorSuccess,
+            trail: props.uiPbColorTrail
+        };
+
         return {
             deleteButtonStyle,
             saveButtonStyle,
             errorButtonStyle,
             uiShowPreviewLabel,
             uiShowImagePreviews,
-            uiHideProgressOnComplete
+            uiHideProgressOnComplete,
+            uiProgressBarColors
         };
     }
 

src/FileDropper.tsx

@@ -213,10 +213,28 @@ Note: Only non-persistent entities are accepted.
                     <caption>Show image previews</caption>
                     <description>Show previews of images. The widget will determine by itself, based on the Mime type, whether or not it can show a preview. It does this by analyzing the file and if it determines it is a 'image/*' file, show a base64 encoded version of the image.</description>
                 </property>
+            </propertyGroup>
+            <propertyGroup caption="Progress Bar">
                 <property key="uiHideProgressOnComplete" type="boolean" defaultValue="true">
                     <caption>Hide progress bar on complete</caption>
                     <description>When uploading to Mendix is complete, hide the progress bar</description>
                 </property>
+                <property key="uiPbColorStrokeNormal" type="string" required="true" defaultValue="#2387AA">
+                    <caption>Primary color</caption>
+                    <description>Default is '#2387AA'</description>
+                </property>
+                <property key="uiPbColorTrail" type="string" required="true" defaultValue="#C8F5FF">
+                    <caption>Trail color</caption>
+                    <description>Default is '#C8F5FF'</description>
+                </property>
+                <property key="uiPbColorError" type="string" required="true" defaultValue="#FF0000">
+                    <caption>Error color</caption>
+                    <description>Default is '#FF0000'</description>
+                </property>
+                <property key="uiPbColorSuccess" type="string" required="true" defaultValue="#32A778">
+                    <caption>Success color</caption>
+                    <description>Default is '#32A778'</description>
+                </property>
             </propertyGroup>
         </propertyGroup>
 

src/FileDropper.webmodeler.tsx

@@ -11,13 +11,21 @@ import { IFileDropperFile } from "../store/fileDropperFile";
 import { classes } from "../util/classes";
 import { CancellablePromise } from "mobx/lib/api/flow";
 
+export interface UIProgressBarColors {
+    primary: string;
+    trail: string;
+    error: string;
+    success: string;
+}
+
 export interface UIProps {
     deleteButtonStyle: null | string;
     saveButtonStyle: null | string;
     errorButtonStyle: null | string;
     uiShowPreviewLabel: boolean;
     uiShowImagePreviews: boolean;
     uiHideProgressOnComplete: boolean;
+    uiProgressBarColors: UIProgressBarColors;
 }
 export interface FileListProps {
     uiProps?: UIProps;
@@ -170,14 +178,27 @@ export class FileList extends Component<FileListProps, {}> {
     }
 
     private renderProgress(file: IFileDropperFile): ReactNode {
-        const strokeColor = file.status === "error" ? "#F00" : "#a5a5a5";
+        const { uiProps } = this.props;
+        const standardColor = "#a5a5a5";
+        const strokeColor =
+            file.status === "error"
+                ? uiProps?.uiProgressBarColors.error || "#F00"
+                : file.status === "saved"
+                ? uiProps?.uiProgressBarColors.success || standardColor
+                : uiProps?.uiProgressBarColors.primary || standardColor;
+        const trailColor = uiProps?.uiProgressBarColors.trail || "a5a5a5";
         const percent = file.status === "error" ? 0 : file.loadProgress;
         if (this.props.uiProps && this.props.uiProps.uiHideProgressOnComplete && file.status === "saved") {
             return null;
         }
         return (
             <div className={classes("item-progress")}>
-                <ProgressLine className={classes("item-progress__bar")} percent={percent} strokeColor={strokeColor} />
+                <ProgressLine
+                    className={classes("item-progress__bar")}
+                    percent={percent}
+                    strokeColor={strokeColor}
+                    trailColor={trailColor}
+                />
                 <div className={classes("item-progress__text")}>{percent}%</div>
             </div>
         );

src/FileDropper.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="FileDropper" version="1.1.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="FileDropper" version="1.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="FileDropper.xml"/>
         </widgetFiles>

src/components/FileList.tsx

@@ -65,7 +65,12 @@ export interface FileDropperContainerProps extends CommonProps {
     uiErrorButtonGlyph: string;
     uiShowPreviewLabel: boolean;
     uiShowImagePreviews: boolean;
+
     uiHideProgressOnComplete: boolean;
+    uiPbColorStrokeNormal: string;
+    uiPbColorTrail: string;
+    uiPbColorError: string;
+    uiPbColorSuccess: string;
 
     textDropZone: string;
     textDropZoneMaximum: string;