@uppy/dashboard - npm Package Compare versions

Comparing version 1.9.0 to 1.10.0

lib/components/AddFiles.js

 function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
 
-var _require = require('./icons'),
-    iconMyDevice = _require.iconMyDevice;
+var _require = require('preact'),
+    h = _require.h,
+    Component = _require.Component;
 
-var _require2 = require('preact'),
-    h = _require2.h,
-    Component = _require2.Component;
-
 var AddFiles = /*#__PURE__*/function (_Component) {
@@ -38,17 +35,2 @@ _inheritsLoose(AddFiles, _Component);
 
-    _this.renderCloudIcon = function () {
-      return h("svg", {
-        class: "uppy-Dashboard-dropFilesIcon",
-        "aria-hidden": "true",
-        width: "64",
-        height: "45",
-        viewBox: "0 0 64 45",
-        xmlns: "http://www.w3.org/2000/svg"
-      }, h("path", {
-        d: "M38 44.932V31h8L33 15 20 31h8v13.932H13.538C6.075 44.932 0 38.774 0 31.202c0-6.1 4.06-11.512 9.873-13.162l.005-.017c.345-5.8 5.248-10.534 10.922-10.534.502 0 1.164.017 1.868.16C25.9 2.85 31.225 0 36.923 0c9.5 0 17.23 7.838 17.23 17.473l-.011.565.012.002C60.039 19.685 64 24.975 64 31.203c0 7.57-6.075 13.729-13.538 13.729H38z",
-        fill: "#E2E2E2",
-        "fill-rule": "nonzero"
-      }));
-    };
-
     _this.renderHiddenFileInput = function () {
@@ -82,3 +64,20 @@ return h("input", {
         onclick: _this.triggerFileInputClick
-      }, iconMyDevice(), h("div", {
+      }, h("svg", {
+        "aria-hidden": "true",
+        focusable: "false",
+        width: "32",
+        height: "32",
+        viewBox: "0 0 32 32"
+      }, h("g", {
+        fill: "none",
+        "fill-rule": "evenodd"
+      }, h("rect", {
+        width: "32",
+        height: "32",
+        rx: "16",
+        fill: "#2275D7"
+      }), h("path", {
+        d: "M21.973 21.152H9.863l-1.108-5.087h14.464l-1.246 5.087zM9.935 11.37h3.958l.886 1.444a.673.673 0 0 0 .585.316h6.506v1.37H9.935v-3.13zm14.898 3.44a.793.793 0 0 0-.616-.31h-.978v-2.126c0-.379-.275-.613-.653-.613H15.75l-.886-1.445a.673.673 0 0 0-.585-.316H9.232c-.378 0-.667.209-.667.587V14.5h-.782a.793.793 0 0 0-.61.303.795.795 0 0 0-.155.663l1.45 6.633c.078.36.396.618.764.618h13.354c.36 0 .674-.246.76-.595l1.631-6.636a.795.795 0 0 0-.144-.675z",
+        fill: "#FFF"
+      }))), h("div", {
         class: "uppy-DashboardTab-name"
@@ -152,3 +151,3 @@ }, _this.props.i18n('myDevice'))));
       focusable: "false",
-      class: "UppyIcon uppy-Dashboard-poweredByIcon",
+      class: "uppy-c-icon uppy-Dashboard-poweredByIcon",
       width: "11",
@@ -155,0 +154,0 @@ height: "11",

lib/components/FileItem/Buttons/index.js

@@ -6,7 +6,2 @@ var _require = require('preact'),
 
-var _require2 = require('../../icons'),
-    iconPencil = _require2.iconPencil,
-    iconCross = _require2.iconCross,
-    iconCopyLink = _require2.iconCopyLink;
-
 function EditButton(_ref) {
@@ -21,3 +16,3 @@ var file = _ref.file,
     return h("button", {
-      class: "uppy-u-reset uppy-DashboardItem-action uppy-DashboardItem-action--edit",
+      class: "uppy-u-reset uppy-Dashboard-Item-action uppy-Dashboard-Item-action--edit",
       type: "button",
@@ -29,3 +24,24 @@ "aria-label": i18n('editFile') + ' ' + file.meta.name,
       }
-    }, iconPencil());
+    }, h("svg", {
+      "aria-hidden": "true",
+      focusable: "false",
+      class: "uppy-c-icon",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14"
+    }, h("g", {
+      "fill-rule": "evenodd"
+    }, h("path", {
+      d: "M1.5 10.793h2.793A1 1 0 0 0 5 10.5L11.5 4a1 1 0 0 0 0-1.414L9.707.793a1 1 0 0 0-1.414 0l-6.5 6.5A1 1 0 0 0 1.5 8v2.793zm1-1V8L9 1.5l1.793 1.793-6.5 6.5H2.5z",
+      "fill-rule": "nonzero"
+    }), h("rect", {
+      x: "1",
+      y: "12.293",
+      width: "11",
+      height: "1",
+      rx: ".5"
+    }), h("path", {
+      "fill-rule": "nonzero",
+      d: "M6.793 2.5L9.5 5.207l.707-.707L7.5 1.793z"
+    }))));
   }
@@ -40,3 +56,3 @@
   return h("button", {
-    class: "uppy-u-reset uppy-DashboardItem-action uppy-DashboardItem-action--remove",
+    class: "uppy-u-reset uppy-Dashboard-Item-action uppy-Dashboard-Item-action--remove",
     type: "button",
@@ -48,3 +64,15 @@ "aria-label": i18n('removeFile'),
     }
-  }, iconCross());
+  }, h("svg", {
+    "aria-hidden": "true",
+    focusable: "false",
+    class: "uppy-c-icon",
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18"
+  }, h("path", {
+    d: "M9 0C4.034 0 0 4.034 0 9s4.034 9 9 9 9-4.034 9-9-4.034-9-9-9z"
+  }), h("path", {
+    fill: "#FFF",
+    d: "M13 12.222l-.778.778L9 9.778 5.778 13 5 12.222 8.222 9 5 5.778 5.778 5 9 8.222 12.222 5l.778.778L9.778 9z"
+  })));
 }
@@ -66,3 +94,3 @@
   return h("button", {
-    class: "uppy-u-reset uppy-DashboardItem-action uppy-DashboardItem-action--copyLink",
+    class: "uppy-u-reset uppy-Dashboard-Item-action uppy-Dashboard-Item-action--copyLink",
     type: "button",
@@ -74,23 +102,14 @@ "aria-label": props.i18n('copyLink'),
     }
-  }, iconCopyLink());
+  }, h("svg", {
+    "aria-hidden": "true",
+    focusable: "false",
+    class: "uppy-c-icon",
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 12"
+  }, h("path", {
+    d: "M7.94 7.703a2.613 2.613 0 0 1-.626 2.681l-.852.851a2.597 2.597 0 0 1-1.849.766A2.616 2.616 0 0 1 2.764 7.54l.852-.852a2.596 2.596 0 0 1 2.69-.625L5.267 7.099a1.44 1.44 0 0 0-.833.407l-.852.851a1.458 1.458 0 0 0 1.03 2.486c.39 0 .755-.152 1.03-.426l.852-.852c.231-.231.363-.522.406-.824l1.04-1.038zm4.295-5.937A2.596 2.596 0 0 0 10.387 1c-.698 0-1.355.272-1.849.766l-.852.851a2.614 2.614 0 0 0-.624 2.688l1.036-1.036c.041-.304.173-.6.407-.833l.852-.852c.275-.275.64-.426 1.03-.426a1.458 1.458 0 0 1 1.03 2.486l-.852.851a1.442 1.442 0 0 1-.824.406l-1.04 1.04a2.596 2.596 0 0 0 2.683-.628l.851-.85a2.616 2.616 0 0 0 0-3.697zm-6.88 6.883a.577.577 0 0 0 .82 0l3.474-3.474a.579.579 0 1 0-.819-.82L5.355 7.83a.579.579 0 0 0 0 .819z"
+  })));
 }
 
-function ErrorButton(_ref3) {
-  var file = _ref3.file,
-      onClick = _ref3.onClick;
-
-  if (file.error) {
-    return h("span", {
-      class: "uppy-DashboardItem-errorDetails",
-      "aria-label": file.error,
-      "data-microtip-position": "bottom-left",
-      "data-microtip-size": "medium",
-      role: "tooltip",
-      onclick: onClick
-    }, "?");
-  }
-
-  return null;
-}
-
 module.exports = function Buttons(props) {
@@ -108,9 +127,4 @@ var file = props.file,
   return h("div", {
-    className: "uppy-DashboardItem-actionWrapper"
-  }, h(ErrorButton, {
-    file: file,
-    onClick: function onClick() {
-      alert(file.error);
-    }
-  }), h(EditButton, {
+    className: "uppy-Dashboard-Item-actionWrapper"
+  }, h(EditButton, {
     i18n: i18n,
@@ -117,0 +131,0 @@ file: file,

lib/components/FileItem/FileInfo/index.js

@@ -18,3 +18,3 @@ var _require = require('preact'),
   return props.file.source && props.file.source !== props.id && h("div", {
-    class: "uppy-DashboardItem-sourceIcon"
+    class: "uppy-Dashboard-Item-sourceIcon"
   }, props.acquirers.map(function (acquirer) {
@@ -40,3 +40,3 @@ if (acquirer.id === props.file.source) {
   return h("div", {
-    class: "uppy-DashboardItem-name",
+    class: "uppy-Dashboard-Item-name",
     title: props.file.meta.name
@@ -48,13 +48,36 @@ }, truncateString(props.file.meta.name, maxNameLength));
   return props.file.data.size && h("div", {
-    class: "uppy-DashboardItem-statusSize"
+    class: "uppy-Dashboard-Item-statusSize"
   }, prettierBytes(props.file.data.size));
 };
 
+var ErrorButton = function ErrorButton(_ref) {
+  var file = _ref.file,
+      onClick = _ref.onClick;
+
+  if (file.error) {
+    return h("span", {
+      class: "uppy-Dashboard-Item-errorDetails",
+      "aria-label": file.error,
+      "data-microtip-position": "bottom",
+      "data-microtip-size": "medium",
+      role: "tooltip",
+      onclick: onClick
+    }, "?");
+  }
+
+  return null;
+};
+
 module.exports = function FileInfo(props) {
   return h("div", {
-    class: "uppy-DashboardItem-fileInfo",
+    class: "uppy-Dashboard-Item-fileInfo",
     "data-uppy-file-source": props.file.source
   }, renderFileName(props), h("div", {
-    class: "uppy-DashboardItem-status"
-  }, renderFileSize(props), renderFileSource(props)));
+    class: "uppy-Dashboard-Item-status"
+  }, renderFileSize(props), renderFileSource(props), h(ErrorButton, {
+    file: props.file,
+    onClick: function onClick() {
+      alert(props.file.error);
+    }
+  })));
 };

lib/components/FileItem/FilePreviewAndLink/index.js

@@ -10,3 +10,3 @@ var _require = require('preact'),
   return h("div", {
-    class: "uppy-DashboardItem-previewInnerWrap",
+    class: "uppy-Dashboard-Item-previewInnerWrap",
     style: {
@@ -16,3 +16,3 @@ backgroundColor: getFileTypeIcon(props.file.type).color
   }, props.showLinkToFileUploadResult && props.file.uploadURL && h("a", {
-    class: "uppy-DashboardItem-previewLink",
+    class: "uppy-Dashboard-Item-previewLink",
     href: props.file.uploadURL,
@@ -19,0 +19,0 @@ rel: "noreferrer noopener",

lib/components/FileItem/FileProgress/index.js

 var _require = require('preact'),
     h = _require.h;
 
-var _require2 = require('../../icons'),
-    iconRetry = _require2.iconRetry;
-
-var PauseResumeCancelIcon = require('./PauseResumeCancelIcon');
-
 function onPauseResumeCancelRetry(props) {
@@ -17,9 +12,5 @@ if (props.isUploaded) return;
 
-  if (props.hidePauseResumeCancelButtons) {
-    return;
-  }
-
-  if (props.resumableUploads) {
+  if (props.resumableUploads && !props.hidePauseResumeButton) {
     props.pauseUpload(props.file.id);
-  } else if (props.individualCancellation) {
+  } else if (props.individualCancellation && !props.hideCancelButton) {
     props.cancelUpload(props.file.id);
@@ -51,32 +42,141 @@ }
 
+function ProgressIndicatorButton(props) {
+  return h("div", {
+    class: "uppy-Dashboard-Item-progress"
+  }, h("button", {
+    class: "uppy-u-reset uppy-Dashboard-Item-progressIndicator",
+    type: "button",
+    "aria-label": progressIndicatorTitle(props),
+    title: progressIndicatorTitle(props),
+    onclick: function onclick() {
+      return onPauseResumeCancelRetry(props);
+    }
+  }, props.children));
+}
+
+function ProgressCircleContainer(_ref) {
+  var children = _ref.children;
+  return h("svg", {
+    "aria-hidden": "true",
+    focusable: "false",
+    width: "70",
+    height: "70",
+    viewBox: "0 0 36 36",
+    class: "uppy-c-icon uppy-Dashboard-Item-progressIcon--circle"
+  }, children);
+}
+
+function ProgressCircle(_ref2) {
+  var progress = _ref2.progress;
+  // circle length equals 2 * PI * R
+  var circleLength = 2 * Math.PI * 15;
+  return h("g", null, h("circle", {
+    class: "uppy-Dashboard-Item-progressIcon--bg",
+    r: "15",
+    cx: "18",
+    cy: "18",
+    "stroke-width": "2",
+    fill: "none"
+  }), h("circle", {
+    class: "uppy-Dashboard-Item-progressIcon--progress",
+    r: "15",
+    cx: "18",
+    cy: "18",
+    transform: "rotate(-90, 18, 18)",
+    "stroke-width": "2",
+    fill: "none",
+    "stroke-dasharray": circleLength,
+    "stroke-dashoffset": circleLength - circleLength / 100 * progress
+  }));
+}
+
 module.exports = function FileProgress(props) {
-  if (props.hideRetryButton && props.error || props.isUploaded && props.showRemoveButtonAfterComplete) {
+  // Nothing if upload has not started
+  if (!props.file.progress.uploadStarted) {
+    return null;
+  } // Green checkmark when complete
+
+
+  if (props.isUploaded) {
     return h("div", {
-      class: "uppy-DashboardItem-progress"
-    });
-  } else if (props.isUploaded || props.hidePauseResumeCancelButtons && !props.error) {
-    return h("div", {
-      class: "uppy-DashboardItem-progress"
+      class: "uppy-Dashboard-Item-progress"
     }, h("div", {
-      class: "uppy-DashboardItem-progressIndicator"
-    }, h(PauseResumeCancelIcon, {
-      progress: props.file.progress.percentage,
-      hidePauseResumeCancelButtons: props.hidePauseResumeCancelButtons
+      class: "uppy-Dashboard-Item-progressIndicator"
+    }, h(ProgressCircleContainer, null, h("circle", {
+      r: "15",
+      cx: "18",
+      cy: "18",
+      fill: "#1bb240"
+    }), h("polygon", {
+      class: "uppy-Dashboard-Item-progressIcon--check",
+      transform: "translate(2, 3)",
+      points: "14 22.5 7 15.2457065 8.99985857 13.1732815 14 18.3547104 22.9729883 9 25 11.1005634"
+    }))));
+  } // Retry button for error
+
+
+  if (props.error && !props.hideRetryButton) {
+    return h(ProgressIndicatorButton, props, h("svg", {
+      "aria-hidden": "true",
+      focusable: "false",
+      class: "uppy-c-icon uppy-Dashboard-Item-progressIcon--retry",
+      width: "28",
+      height: "31",
+      viewBox: "0 0 16 19"
+    }, h("path", {
+      d: "M16 11a8 8 0 1 1-8-8v2a6 6 0 1 0 6 6h2z"
+    }), h("path", {
+      d: "M7.9 3H10v2H7.9z"
+    }), h("path", {
+      d: "M8.536.5l3.535 3.536-1.414 1.414L7.12 1.914z"
+    }), h("path", {
+      d: "M10.657 2.621l1.414 1.415L8.536 7.57 7.12 6.157z"
     })));
-  } else {
-    return h("div", {
-      class: "uppy-DashboardItem-progress"
-    }, h("button", {
-      class: "uppy-u-reset uppy-DashboardItem-progressIndicator",
-      type: "button",
-      "aria-label": progressIndicatorTitle(props),
-      title: progressIndicatorTitle(props),
-      onclick: function onclick() {
-        return onPauseResumeCancelRetry(props);
-      }
-    }, props.error ? props.hideRetryButton ? null : iconRetry() : h(PauseResumeCancelIcon, {
-      progress: props.file.progress.percentage,
-      hidePauseResumeCancelButtons: props.hidePauseResumeCancelButtons
+  } // Pause/resume button for resumable uploads
+
+
+  if (props.resumableUploads && !props.hidePauseResumeButton) {
+    return h(ProgressIndicatorButton, props, h(ProgressCircleContainer, null, h(ProgressCircle, {
+      progress: props.file.progress.percentage
+    }), props.file.isPaused ? h("polygon", {
+      class: "uppy-Dashboard-Item-progressIcon--play",
+      transform: "translate(3, 3)",
+      points: "12 20 12 10 20 15"
+    }) : h("g", {
+      class: "uppy-Dashboard-Item-progressIcon--pause",
+      transform: "translate(14.5, 13)"
+    }, h("rect", {
+      x: "0",
+      y: "0",
+      width: "2",
+      height: "10",
+      rx: "0"
+    }), h("rect", {
+      x: "5",
+      y: "0",
+      width: "2",
+      height: "10",
+      rx: "0"
+    }))));
+  } // Cancel button for non-resumable uploads if individualCancellation is supported (not bundled)
+
+
+  if (!props.resumableUploads && props.individualCancellation && !props.hideCancelButton) {
+    return h(ProgressIndicatorButton, props, h(ProgressCircleContainer, null, h(ProgressCircle, {
+      progress: props.file.progress.percentage
+    }), h("polygon", {
+      class: "cancel",
+      transform: "translate(2, 2)",
+      points: "19.8856516 11.0625 16 14.9481516 12.1019737 11.0625 11.0625 12.1143484 14.9481516 16 11.0625 19.8980263 12.1019737 20.9375 16 17.0518484 19.8856516 20.9375 20.9375 19.8980263 17.0518484 16 20.9375 12"
     })));
-  }
+  } // Just progress when buttons are disabled
+
+
+  return h("div", {
+    class: "uppy-Dashboard-Item-progress"
+  }, h("div", {
+    class: "uppy-Dashboard-Item-progressIndicator"
+  }, h(ProgressCircleContainer, null, h(ProgressCircle, {
+    progress: props.file.progress.percentage
+  }))));
 };

lib/components/FileItem/index.js

@@ -54,3 +54,2 @@ function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
     var uploadInProgress = file.progress.uploadStarted && !file.progress.uploadComplete || isProcessing;
-    var isPaused = file.isPaused || false;
     var error = file.error || false;
@@ -64,8 +63,6 @@ var showRemoveButton = this.props.individualCancellation ? !isUploaded : !uploadInProgress && !isUploaded;
     var dashboardItemClass = classNames({
-      'uppy-u-reset': true,
-      'uppy-DashboardItem': true,
+      'uppy-Dashboard-Item': true,
       'is-inprogress': uploadInProgress,
       'is-processing': isProcessing,
       'is-complete': isUploaded,
-      'is-paused': isPaused,
       'is-error': !!error,
@@ -80,3 +77,3 @@ 'is-resumable': this.props.resumableUploads,
     }, h("div", {
-      class: "uppy-DashboardItem-preview"
+      class: "uppy-Dashboard-Item-preview"
     }, h(FilePreviewAndLink, {
@@ -90,3 +87,4 @@ file: file,
       hideRetryButton: this.props.hideRetryButton,
-      hidePauseResumeCancelButtons: this.props.hidePauseResumeCancelButtons,
+      hideCancelButton: this.props.hideCancelButton,
+      hidePauseResumeButton: this.props.hidePauseResumeButton,
       showRemoveButtonAfterComplete: this.props.showRemoveButtonAfterComplete,
@@ -100,3 +98,3 @@ resumableUploads: this.props.resumableUploads,
     })), h("div", {
-      class: "uppy-DashboardItem-fileInfoAndButtons"
+      class: "uppy-Dashboard-Item-fileInfoAndButtons"
     }, h(FileInfo, {
@@ -103,0 +101,0 @@ file: file,

lib/components/FileList.js

@@ -51,3 +51,4 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
     hideRetryButton: props.hideRetryButton,
-    hidePauseResumeCancelButtons: props.hidePauseResumeCancelButtons,
+    hidePauseResumeButton: props.hidePauseResumeButton,
+    hideCancelButton: props.hideCancelButton,
     showLinkToFileUploadResult: props.showLinkToFileUploadResult,
@@ -54,0 +55,0 @@ showRemoveButtonAfterComplete: props.showRemoveButtonAfterComplete,

lib/components/FilePreview.js

@@ -11,3 +11,3 @@ var getFileTypeIcon = require('../utils/getFileTypeIcon');
     return h("img", {
-      class: "uppy-DashboardItem-previewImg",
+      class: "uppy-Dashboard-Item-previewImg",
       alt: file.name,
@@ -23,5 +23,5 @@ src: file.preview
   return h("div", {
-    class: "uppy-DashboardItem-previewIconWrap"
+    class: "uppy-Dashboard-Item-previewIconWrap"
   }, h("span", {
-    class: "uppy-DashboardItem-previewIcon",
+    class: "uppy-Dashboard-Item-previewIcon",
     style: {
@@ -33,3 +33,3 @@ color: color
     focusable: "false",
-    class: "uppy-DashboardItem-previewIconBg",
+    class: "uppy-Dashboard-Item-previewIconBg",
     width: "58",
@@ -36,0 +36,0 @@ height: "76",

lib/components/PickerPanelTopBar.js

 var _require = require('preact'),
     h = _require.h;
 
-var _require2 = require('./icons'),
-    iconPlus = _require2.iconPlus;
-
 var uploadStates = {
@@ -113,3 +110,12 @@ STATE_ERROR: 'error',
     }
-  }, iconPlus(), h("span", {
+  }, h("svg", {
+    "aria-hidden": "true",
+    focusable: "false",
+    class: "uppy-c-icon",
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15"
+  }, h("path", {
+    d: "M8 6.5h6a.5.5 0 0 1 .5.5v.5a.5.5 0 0 1-.5.5H8v6a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5V8h-6a.5.5 0 0 1-.5-.5V7a.5.5 0 0 1 .5-.5h6v-6A.5.5 0 0 1 7 0h.5a.5.5 0 0 1 .5.5v6z"
+  })), h("span", {
     class: "uppy-DashboardContent-addMoreCaption"
@@ -116,0 +122,0 @@ }, props.i18n('addMore'))) : h("div", null));

lib/index.js

@@ -34,5 +34,2 @@ var _class, _temp;
 
-var _require2 = require('./components/icons'),
-    defaultPickerIcon = _require2.defaultPickerIcon;
-
 var createSuperFocus = require('./utils/createSuperFocus');
@@ -53,2 +50,14 @@
 }
+
+function defaultPickerIcon() {
+  return h("svg", {
+    "aria-hidden": "true",
+    focusable: "false",
+    width: "30",
+    height: "30",
+    viewBox: "0 0 30 30"
+  }, h("path", {
+    d: "M15 30c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15zm4.258-12.676v6.846h-8.426v-6.846H5.204l9.82-12.364 9.82 12.364H19.26z"
+  }));
+}
 /**
@@ -816,2 +825,4 @@ * Dashboard UI with previews, metadata editing, tabs for various services and more
         hideCancelButton: _this.opts.hideCancelButton,
+        hideRetryButton: _this.opts.hideRetryButton,
+        hidePauseResumeButton: _this.opts.hidePauseResumeButton,
         showRemoveButtonAfterComplete: _this.opts.showRemoveButtonAfterComplete,
@@ -1044,4 +1055,5 @@ containerWidth: pluginState.containerWidth,
       hideUploadButton: false,
+      hideCancelButton: false,
       hideRetryButton: false,
-      hidePauseResumeCancelButtons: false,
+      hidePauseResumeButton: false,
       hideProgressAfterFinish: false,
@@ -1079,2 +1091,2 @@ note: null,
   return Dashboard;
-}(Plugin), _class.VERSION = "1.9.0", _temp);
+}(Plugin), _class.VERSION = "1.10.0", _temp);

lib/utils/getFileTypeIcon.js

@@ -1,10 +0,119 @@
-var _require = require('../components/icons'),
-    iconFile = _require.iconFile,
-    iconText = _require.iconText,
-    iconImage = _require.iconImage,
-    iconAudio = _require.iconAudio,
-    iconVideo = _require.iconVideo,
-    iconPDF = _require.iconPDF,
-    iconArchive = _require.iconArchive;
+var _require = require('preact'),
+    h = _require.h;
 
+function iconImage() {
+  return h("svg", {
+    "aria-hidden": "true",
+    focusable: "false",
+    width: "25",
+    height: "25",
+    viewBox: "0 0 25 25"
+  }, h("g", {
+    fill: "#686DE0",
+    "fill-rule": "evenodd"
+  }, h("path", {
+    d: "M5 7v10h15V7H5zm0-1h15a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1z",
+    "fill-rule": "nonzero"
+  }), h("path", {
+    d: "M6.35 17.172l4.994-5.026a.5.5 0 0 1 .707 0l2.16 2.16 3.505-3.505a.5.5 0 0 1 .707 0l2.336 2.31-.707.72-1.983-1.97-3.505 3.505a.5.5 0 0 1-.707 0l-2.16-2.159-3.938 3.939-1.409.026z",
+    "fill-rule": "nonzero"
+  }), h("circle", {
+    cx: "7.5",
+    cy: "9.5",
+    r: "1.5"
+  })));
+}
+
+function iconAudio() {
+  return h("svg", {
+    "aria-hidden": "true",
+    focusable: "false",
+    class: "uppy-c-icon",
+    width: "25",
+    height: "25",
+    viewBox: "0 0 25 25"
+  }, h("path", {
+    d: "M9.5 18.64c0 1.14-1.145 2-2.5 2s-2.5-.86-2.5-2c0-1.14 1.145-2 2.5-2 .557 0 1.079.145 1.5.396V7.25a.5.5 0 0 1 .379-.485l9-2.25A.5.5 0 0 1 18.5 5v11.64c0 1.14-1.145 2-2.5 2s-2.5-.86-2.5-2c0-1.14 1.145-2 2.5-2 .557 0 1.079.145 1.5.396V8.67l-8 2v7.97zm8-11v-2l-8 2v2l8-2zM7 19.64c.855 0 1.5-.484 1.5-1s-.645-1-1.5-1-1.5.484-1.5 1 .645 1 1.5 1zm9-2c.855 0 1.5-.484 1.5-1s-.645-1-1.5-1-1.5.484-1.5 1 .645 1 1.5 1z",
+    fill: "#049BCF",
+    "fill-rule": "nonzero"
+  }));
+}
+
+function iconVideo() {
+  return h("svg", {
+    "aria-hidden": "true",
+    focusable: "false",
+    class: "uppy-c-icon",
+    width: "25",
+    height: "25",
+    viewBox: "0 0 25 25"
+  }, h("path", {
+    d: "M16 11.834l4.486-2.691A1 1 0 0 1 22 10v6a1 1 0 0 1-1.514.857L16 14.167V17a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v2.834zM15 9H5v8h10V9zm1 4l5 3v-6l-5 3z",
+    fill: "#19AF67",
+    "fill-rule": "nonzero"
+  }));
+}
+
+function iconPDF() {
+  return h("svg", {
+    "aria-hidden": "true",
+    focusable: "false",
+    class: "uppy-c-icon",
+    width: "25",
+    height: "25",
+    viewBox: "0 0 25 25"
+  }, h("path", {
+    d: "M9.766 8.295c-.691-1.843-.539-3.401.747-3.726 1.643-.414 2.505.938 2.39 3.299-.039.79-.194 1.662-.537 3.148.324.49.66.967 1.055 1.51.17.231.382.488.629.757 1.866-.128 3.653.114 4.918.655 1.487.635 2.192 1.685 1.614 2.84-.566 1.133-1.839 1.084-3.416.249-1.141-.604-2.457-1.634-3.51-2.707a13.467 13.467 0 0 0-2.238.426c-1.392 4.051-4.534 6.453-5.707 4.572-.986-1.58 1.38-4.206 4.914-5.375.097-.322.185-.656.264-1.001.08-.353.306-1.31.407-1.737-.678-1.059-1.2-2.031-1.53-2.91zm2.098 4.87c-.033.144-.068.287-.104.427l.033-.01-.012.038a14.065 14.065 0 0 1 1.02-.197l-.032-.033.052-.004a7.902 7.902 0 0 1-.208-.271c-.197-.27-.38-.526-.555-.775l-.006.028-.002-.003c-.076.323-.148.632-.186.8zm5.77 2.978c1.143.605 1.832.632 2.054.187.26-.519-.087-1.034-1.113-1.473-.911-.39-2.175-.608-3.55-.608.845.766 1.787 1.459 2.609 1.894zM6.559 18.789c.14.223.693.16 1.425-.413.827-.648 1.61-1.747 2.208-3.206-2.563 1.064-4.102 2.867-3.633 3.62zm5.345-10.97c.088-1.793-.351-2.48-1.146-2.28-.473.119-.564 1.05-.056 2.405.213.566.52 1.188.908 1.859.18-.858.268-1.453.294-1.984z",
+    fill: "#E2514A",
+    "fill-rule": "nonzero"
+  }));
+}
+
+function iconArchive() {
+  return h("svg", {
+    "aria-hidden": "true",
+    focusable: "false",
+    width: "25",
+    height: "25",
+    viewBox: "0 0 25 25"
+  }, h("path", {
+    d: "M10.45 2.05h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5V2.55a.5.5 0 0 1 .5-.5zm2.05 1.024h1.05a.5.5 0 0 1 .5.5V3.6a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5v-.001zM10.45 0h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5V.5a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.024a.5.5 0 0 1 .5-.5zm-2.05 3.074h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.024a.5.5 0 0 1 .5-.5zm-2.05 1.024h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm-2.05 1.025h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.024a.5.5 0 0 1 .5-.5zm-1.656 3.074l-.82 5.946c.52.302 1.174.458 1.976.458.803 0 1.455-.156 1.975-.458l-.82-5.946h-2.311zm0-1.025h2.312c.512 0 .946.378 1.015.885l.82 5.946c.056.412-.142.817-.501 1.026-.686.398-1.515.597-2.49.597-.974 0-1.804-.199-2.49-.597a1.025 1.025 0 0 1-.5-1.026l.819-5.946c.07-.507.503-.885 1.015-.885zm.545 6.6a.5.5 0 0 1-.397-.561l.143-.999a.5.5 0 0 1 .495-.429h.74a.5.5 0 0 1 .495.43l.143.998a.5.5 0 0 1-.397.561c-.404.08-.819.08-1.222 0z",
+    fill: "#00C469",
+    "fill-rule": "nonzero"
+  }));
+}
+
+function iconFile() {
+  return h("svg", {
+    "aria-hidden": "true",
+    focusable: "false",
+    class: "uppy-c-icon",
+    width: "25",
+    height: "25",
+    viewBox: "0 0 25 25"
+  }, h("g", {
+    fill: "#A7AFB7",
+    "fill-rule": "nonzero"
+  }, h("path", {
+    d: "M5.5 22a.5.5 0 0 1-.5-.5v-18a.5.5 0 0 1 .5-.5h10.719a.5.5 0 0 1 .367.16l3.281 3.556a.5.5 0 0 1 .133.339V21.5a.5.5 0 0 1-.5.5h-14zm.5-1h13V7.25L16 4H6v17z"
+  }), h("path", {
+    d: "M15 4v3a1 1 0 0 0 1 1h3V7h-3V4h-1z"
+  })));
+}
+
+function iconText() {
+  return h("svg", {
+    "aria-hidden": "true",
+    focusable: "false",
+    class: "uppy-c-icon",
+    width: "25",
+    height: "25",
+    viewBox: "0 0 25 25"
+  }, h("path", {
+    d: "M4.5 7h13a.5.5 0 1 1 0 1h-13a.5.5 0 0 1 0-1zm0 3h15a.5.5 0 1 1 0 1h-15a.5.5 0 1 1 0-1zm0 3h15a.5.5 0 1 1 0 1h-15a.5.5 0 1 1 0-1zm0 3h10a.5.5 0 1 1 0 1h-10a.5.5 0 1 1 0-1z",
+    fill: "#5A5E69",
+    "fill-rule": "nonzero"
+  }));
+}
+
 module.exports = function getIconByMime(fileType) {
@@ -11,0 +120,0 @@ var defaultChoice = {

package.json

 {
   "name": "@uppy/dashboard",
   "description": "Universal UI plugin for Uppy.",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "license": "MIT",
@@ -26,7 +26,7 @@ "main": "lib/index.js",
     "@transloadit/prettier-bytes": "0.0.7",
-    "@uppy/informer": "^1.5.6",
-    "@uppy/provider-views": "^1.6.6",
-    "@uppy/status-bar": "^1.6.6",
-    "@uppy/thumbnail-generator": "^1.6.0",
-    "@uppy/utils": "^3.0.0",
+    "@uppy/informer": "^1.5.7",
+    "@uppy/provider-views": "^1.6.7",
+    "@uppy/status-bar": "^1.7.0",
+    "@uppy/thumbnail-generator": "^1.6.1",
+    "@uppy/utils": "^3.1.0",
     "classnames": "^2.2.6",
@@ -45,3 +45,3 @@ "cuid": "^2.1.1",
   },
-  "gitHead": "6a0152327386cb6dd1ae8aada13f13062d326b61"
+  "gitHead": "b00ba139128393fd625defeb430c9a19b1a138f2"
 }

src/components/AddFiles.js

@@ -1,2 +0,1 @@
-const { iconMyDevice } = require('./icons')
 const { h, Component } = require('preact')
@@ -24,3 +23,3 @@
       <span>
-        <svg aria-hidden="true" focusable="false" class="UppyIcon uppy-Dashboard-poweredByIcon" width="11" height="11" viewBox="0 0 11 11">
+        <svg aria-hidden="true" focusable="false" class="uppy-c-icon uppy-Dashboard-poweredByIcon" width="11" height="11" viewBox="0 0 11 11">
           <path d="M7.365 10.5l-.01-4.045h2.612L5.5.806l-4.467 5.65h2.604l.01 4.044h3.718z" fill-rule="evenodd" />
@@ -51,10 +50,2 @@ </svg>
 
-  renderCloudIcon = () => {
-    return (
-      <svg class="uppy-Dashboard-dropFilesIcon" aria-hidden="true" width="64" height="45" viewBox="0 0 64 45" xmlns="http://www.w3.org/2000/svg">
-        <path d="M38 44.932V31h8L33 15 20 31h8v13.932H13.538C6.075 44.932 0 38.774 0 31.202c0-6.1 4.06-11.512 9.873-13.162l.005-.017c.345-5.8 5.248-10.534 10.922-10.534.502 0 1.164.017 1.868.16C25.9 2.85 31.225 0 36.923 0c9.5 0 17.23 7.838 17.23 17.473l-.011.565.012.002C60.039 19.685 64 24.975 64 31.203c0 7.57-6.075 13.729-13.538 13.729H38z" fill="#E2E2E2" fill-rule="nonzero" />
-      </svg>
-    )
-  }
-
   renderHiddenFileInput = () => {
@@ -88,3 +79,8 @@ return (
         >
-          {iconMyDevice()}
+          <svg aria-hidden="true" focusable="false" width="32" height="32" viewBox="0 0 32 32">
+            <g fill="none" fill-rule="evenodd">
+              <rect width="32" height="32" rx="16" fill="#2275D7" />
+              <path d="M21.973 21.152H9.863l-1.108-5.087h14.464l-1.246 5.087zM9.935 11.37h3.958l.886 1.444a.673.673 0 0 0 .585.316h6.506v1.37H9.935v-3.13zm14.898 3.44a.793.793 0 0 0-.616-.31h-.978v-2.126c0-.379-.275-.613-.653-.613H15.75l-.886-1.445a.673.673 0 0 0-.585-.316H9.232c-.378 0-.667.209-.667.587V14.5h-.782a.793.793 0 0 0-.61.303.795.795 0 0 0-.155.663l1.45 6.633c.078.36.396.618.764.618h13.354c.36 0 .674-.246.76-.595l1.631-6.636a.795.795 0 0 0-.144-.675z" fill="#FFF" />
+            </g>
+          </svg>
           <div class="uppy-DashboardTab-name">{this.props.i18n('myDevice')}</div>
@@ -91,0 +87,0 @@ </button>

src/components/FileItem/Buttons/index.js

 const { h } = require('preact')
 const copyToClipboard = require('../../../utils/copyToClipboard')
 
-const { iconPencil, iconCross, iconCopyLink } = require('../../icons')
-
 function EditButton ({
@@ -18,3 +16,3 @@ file,
       <button
-        class="uppy-u-reset uppy-DashboardItem-action uppy-DashboardItem-action--edit"
+        class="uppy-u-reset uppy-Dashboard-Item-action uppy-Dashboard-Item-action--edit"
         type="button"
@@ -25,3 +23,9 @@ aria-label={i18n('editFile') + ' ' + file.meta.name}
       >
-        {iconPencil()}
+        <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="14" height="14" viewBox="0 0 14 14">
+          <g fill-rule="evenodd">
+            <path d="M1.5 10.793h2.793A1 1 0 0 0 5 10.5L11.5 4a1 1 0 0 0 0-1.414L9.707.793a1 1 0 0 0-1.414 0l-6.5 6.5A1 1 0 0 0 1.5 8v2.793zm1-1V8L9 1.5l1.793 1.793-6.5 6.5H2.5z" fill-rule="nonzero" />
+            <rect x="1" y="12.293" width="11" height="1" rx=".5" />
+            <path fill-rule="nonzero" d="M6.793 2.5L9.5 5.207l.707-.707L7.5 1.793z" />
+          </g>
+        </svg>
       </button>
@@ -36,3 +40,3 @@ )
     <button
-      class="uppy-u-reset uppy-DashboardItem-action uppy-DashboardItem-action--remove"
+      class="uppy-u-reset uppy-Dashboard-Item-action uppy-Dashboard-Item-action--remove"
       type="button"
@@ -43,3 +47,6 @@ aria-label={i18n('removeFile')}
     >
-      {iconCross()}
+      <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="18" height="18" viewBox="0 0 18 18">
+        <path d="M9 0C4.034 0 0 4.034 0 9s4.034 9 9 9 9-4.034 9-9-4.034-9-9-9z" />
+        <path fill="#FFF" d="M13 12.222l-.778.778L9 9.778 5.778 13 5 12.222 8.222 9 5 5.778 5.778 5 9 8.222 12.222 5l.778.778L9.778 9z" />
+      </svg>
     </button>
@@ -63,3 +70,3 @@ )
     <button
-      class="uppy-u-reset uppy-DashboardItem-action uppy-DashboardItem-action--copyLink"
+      class="uppy-u-reset uppy-Dashboard-Item-action uppy-Dashboard-Item-action--copyLink"
       type="button"
@@ -70,3 +77,5 @@ aria-label={props.i18n('copyLink')}
     >
-      {iconCopyLink()}
+      <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="14" height="14" viewBox="0 0 14 12">
+        <path d="M7.94 7.703a2.613 2.613 0 0 1-.626 2.681l-.852.851a2.597 2.597 0 0 1-1.849.766A2.616 2.616 0 0 1 2.764 7.54l.852-.852a2.596 2.596 0 0 1 2.69-.625L5.267 7.099a1.44 1.44 0 0 0-.833.407l-.852.851a1.458 1.458 0 0 0 1.03 2.486c.39 0 .755-.152 1.03-.426l.852-.852c.231-.231.363-.522.406-.824l1.04-1.038zm4.295-5.937A2.596 2.596 0 0 0 10.387 1c-.698 0-1.355.272-1.849.766l-.852.851a2.614 2.614 0 0 0-.624 2.688l1.036-1.036c.041-.304.173-.6.407-.833l.852-.852c.275-.275.64-.426 1.03-.426a1.458 1.458 0 0 1 1.03 2.486l-.852.851a1.442 1.442 0 0 1-.824.406l-1.04 1.04a2.596 2.596 0 0 0 2.683-.628l.851-.85a2.616 2.616 0 0 0 0-3.697zm-6.88 6.883a.577.577 0 0 0 .82 0l3.474-3.474a.579.579 0 1 0-.819-.82L5.355 7.83a.579.579 0 0 0 0 .819z" />
+      </svg>
     </button>
@@ -76,20 +85,2 @@ )
 
-function ErrorButton ({ file, onClick }) {
-  if (file.error) {
-    return (
-      <span
-        class="uppy-DashboardItem-errorDetails"
-        aria-label={file.error}
-        data-microtip-position="bottom-left"
-        data-microtip-size="medium"
-        role="tooltip"
-        onclick={onClick}
-      >
-        ?
-      </span>
-    )
-  }
-  return null
-}
-
 module.exports = function Buttons (props) {
@@ -110,9 +101,3 @@ const {
   return (
-    <div className="uppy-DashboardItem-actionWrapper">
-      <ErrorButton
-        file={file}
-        onClick={() => {
-          alert(file.error)
-        }}
-      />
+    <div className="uppy-Dashboard-Item-actionWrapper">
       <EditButton
@@ -119,0 +104,0 @@ i18n={i18n}

src/components/FileItem/FileInfo/index.js

@@ -13,3 +13,3 @@ const { h } = require('preact')
   props.file.source !== props.id &&
-    <div class="uppy-DashboardItem-sourceIcon">
+    <div class="uppy-Dashboard-Item-sourceIcon">
       {props.acquirers.map(acquirer => {
@@ -38,3 +38,3 @@ if (acquirer.id === props.file.source) {
   return (
-    <div class="uppy-DashboardItem-name" title={props.file.meta.name}>
+    <div class="uppy-Dashboard-Item-name" title={props.file.meta.name}>
       {truncateString(props.file.meta.name, maxNameLength)}
@@ -47,3 +47,3 @@ </div>
   props.file.data.size &&
-    <div class="uppy-DashboardItem-statusSize">
+    <div class="uppy-Dashboard-Item-statusSize">
       {prettierBytes(props.file.data.size)}
@@ -53,9 +53,33 @@ </div>
 
+const ErrorButton = ({ file, onClick }) => {
+  if (file.error) {
+    return (
+      <span
+        class="uppy-Dashboard-Item-errorDetails"
+        aria-label={file.error}
+        data-microtip-position="bottom"
+        data-microtip-size="medium"
+        role="tooltip"
+        onclick={onClick}
+      >
+        ?
+      </span>
+    )
+  }
+  return null
+}
+
 module.exports = function FileInfo (props) {
   return (
-    <div class="uppy-DashboardItem-fileInfo" data-uppy-file-source={props.file.source}>
+    <div class="uppy-Dashboard-Item-fileInfo" data-uppy-file-source={props.file.source}>
       {renderFileName(props)}
-      <div class="uppy-DashboardItem-status">
+      <div class="uppy-Dashboard-Item-status">
         {renderFileSize(props)}
         {renderFileSource(props)}
+        <ErrorButton
+          file={props.file}
+          onClick={() => {
+            alert(props.file.error)
+          }}
+        />
       </div>
@@ -62,0 +86,0 @@ </div>

src/components/FileItem/FilePreviewAndLink/index.js

@@ -8,3 +8,3 @@ const { h } = require('preact')
     <div
-      class="uppy-DashboardItem-previewInnerWrap"
+      class="uppy-Dashboard-Item-previewInnerWrap"
       style={{ backgroundColor: getFileTypeIcon(props.file.type).color }}
@@ -16,3 +16,3 @@ >
           <a
-            class="uppy-DashboardItem-previewLink"
+            class="uppy-Dashboard-Item-previewLink"
             href={props.file.uploadURL}
@@ -19,0 +19,0 @@ rel="noreferrer noopener"

src/components/FileItem/FileProgress/index.js

 const { h } = require('preact')
-const { iconRetry } = require('../../icons')
-const PauseResumeCancelIcon = require('./PauseResumeCancelIcon')
 
@@ -13,9 +11,5 @@ function onPauseResumeCancelRetry (props) {
 
-  if (props.hidePauseResumeCancelButtons) {
-    return
-  }
-
-  if (props.resumableUploads) {
+  if (props.resumableUploads && !props.hidePauseResumeButton) {
     props.pauseUpload(props.file.id)
-  } else if (props.individualCancellation) {
+  } else if (props.individualCancellation && !props.hideCancelButton) {
     props.cancelUpload(props.file.id)
@@ -46,42 +40,126 @@ }
 
+function ProgressIndicatorButton (props) {
+  return (
+    <div class="uppy-Dashboard-Item-progress">
+      <button
+        class="uppy-u-reset uppy-Dashboard-Item-progressIndicator"
+        type="button"
+        aria-label={progressIndicatorTitle(props)}
+        title={progressIndicatorTitle(props)}
+        onclick={() => onPauseResumeCancelRetry(props)}
+      >
+        {props.children}
+      </button>
+    </div>
+  )
+}
+
+function ProgressCircleContainer ({ children }) {
+  return (
+    <svg
+      aria-hidden="true"
+      focusable="false"
+      width="70"
+      height="70"
+      viewBox="0 0 36 36"
+      class="uppy-c-icon uppy-Dashboard-Item-progressIcon--circle"
+    >
+      {children}
+    </svg>
+  )
+}
+
+function ProgressCircle ({ progress }) {
+  // circle length equals 2 * PI * R
+  const circleLength = 2 * Math.PI * 15
+
+  return (
+    <g>
+      <circle class="uppy-Dashboard-Item-progressIcon--bg" r="15" cx="18" cy="18" stroke-width="2" fill="none" />
+      <circle
+        class="uppy-Dashboard-Item-progressIcon--progress" r="15" cx="18" cy="18" transform="rotate(-90, 18, 18)" stroke-width="2" fill="none"
+        stroke-dasharray={circleLength}
+        stroke-dashoffset={circleLength - (circleLength / 100 * progress)}
+      />
+    </g>
+  )
+}
+
 module.exports = function FileProgress (props) {
-  if ((props.hideRetryButton && props.error) ||
-      (props.isUploaded && props.showRemoveButtonAfterComplete)) {
-    return <div class="uppy-DashboardItem-progress" />
-  } else if (
-    props.isUploaded ||
-    (props.hidePauseResumeCancelButtons && !props.error)
-  ) {
+  // Nothing if upload has not started
+  if (!props.file.progress.uploadStarted) {
+    return null
+  }
+
+  // Green checkmark when complete
+  if (props.isUploaded) {
     return (
-      <div class="uppy-DashboardItem-progress">
-        <div class="uppy-DashboardItem-progressIndicator">
-          <PauseResumeCancelIcon
-            progress={props.file.progress.percentage}
-            hidePauseResumeCancelButtons={props.hidePauseResumeCancelButtons}
-          />
+      <div class="uppy-Dashboard-Item-progress">
+        <div class="uppy-Dashboard-Item-progressIndicator">
+          <ProgressCircleContainer>
+            <circle r="15" cx="18" cy="18" fill="#1bb240" />
+            <polygon class="uppy-Dashboard-Item-progressIcon--check" transform="translate(2, 3)" points="14 22.5 7 15.2457065 8.99985857 13.1732815 14 18.3547104 22.9729883 9 25 11.1005634" />
+          </ProgressCircleContainer>
         </div>
       </div>
     )
-  } else {
+  }
+
+  // Retry button for error
+  if (props.error && !props.hideRetryButton) {
     return (
-      <div class="uppy-DashboardItem-progress">
-        <button
-          class="uppy-u-reset uppy-DashboardItem-progressIndicator"
-          type="button"
-          aria-label={progressIndicatorTitle(props)}
-          title={progressIndicatorTitle(props)}
-          onclick={() => onPauseResumeCancelRetry(props)}
-        >
-          {props.error ? (
-            props.hideRetryButton ? null : iconRetry()
-          ) : (
-            <PauseResumeCancelIcon
-              progress={props.file.progress.percentage}
-              hidePauseResumeCancelButtons={props.hidePauseResumeCancelButtons}
-            />
-          )}
-        </button>
-      </div>
+      <ProgressIndicatorButton {...props}>
+        <svg aria-hidden="true" focusable="false" class="uppy-c-icon uppy-Dashboard-Item-progressIcon--retry" width="28" height="31" viewBox="0 0 16 19">
+          <path d="M16 11a8 8 0 1 1-8-8v2a6 6 0 1 0 6 6h2z" />
+          <path d="M7.9 3H10v2H7.9z" />
+          <path d="M8.536.5l3.535 3.536-1.414 1.414L7.12 1.914z" />
+          <path d="M10.657 2.621l1.414 1.415L8.536 7.57 7.12 6.157z" />
+        </svg>
+      </ProgressIndicatorButton>
     )
   }
+
+  // Pause/resume button for resumable uploads
+  if (props.resumableUploads && !props.hidePauseResumeButton) {
+    return (
+      <ProgressIndicatorButton {...props}>
+        <ProgressCircleContainer>
+          <ProgressCircle progress={props.file.progress.percentage} />
+          {
+            props.file.isPaused
+              ? <polygon class="uppy-Dashboard-Item-progressIcon--play" transform="translate(3, 3)" points="12 20 12 10 20 15" />
+              : (
+                <g class="uppy-Dashboard-Item-progressIcon--pause" transform="translate(14.5, 13)">
+                  <rect x="0" y="0" width="2" height="10" rx="0" />
+                  <rect x="5" y="0" width="2" height="10" rx="0" />
+                </g>
+              )
+          }
+        </ProgressCircleContainer>
+      </ProgressIndicatorButton>
+    )
+  }
+
+  // Cancel button for non-resumable uploads if individualCancellation is supported (not bundled)
+  if (!props.resumableUploads && props.individualCancellation && !props.hideCancelButton) {
+    return (
+      <ProgressIndicatorButton {...props}>
+        <ProgressCircleContainer>
+          <ProgressCircle progress={props.file.progress.percentage} />
+          <polygon class="cancel" transform="translate(2, 2)" points="19.8856516 11.0625 16 14.9481516 12.1019737 11.0625 11.0625 12.1143484 14.9481516 16 11.0625 19.8980263 12.1019737 20.9375 16 17.0518484 19.8856516 20.9375 20.9375 19.8980263 17.0518484 16 20.9375 12" />
+        </ProgressCircleContainer>
+      </ProgressIndicatorButton>
+    )
+  }
+
+  // Just progress when buttons are disabled
+  return (
+    <div class="uppy-Dashboard-Item-progress">
+      <div class="uppy-Dashboard-Item-progressIndicator">
+        <ProgressCircleContainer>
+          <ProgressCircle progress={props.file.progress.percentage} />
+        </ProgressCircleContainer>
+      </div>
+    </div>
+  )
 }

src/components/FileItem/index.js

@@ -35,3 +35,2 @@ const { h, Component } = require('preact')
     const uploadInProgress = (file.progress.uploadStarted && !file.progress.uploadComplete) || isProcessing
-    const isPaused = file.isPaused || false
     const error = file.error || false
@@ -48,8 +47,6 @@
     const dashboardItemClass = classNames({
-      'uppy-u-reset': true,
-      'uppy-DashboardItem': true,
+      'uppy-Dashboard-Item': true,
       'is-inprogress': uploadInProgress,
       'is-processing': isProcessing,
       'is-complete': isUploaded,
-      'is-paused': isPaused,
       'is-error': !!error,
@@ -66,3 +63,3 @@ 'is-resumable': this.props.resumableUploads,
       >
-        <div class="uppy-DashboardItem-preview">
+        <div class="uppy-Dashboard-Item-preview">
           <FilePreviewAndLink
@@ -78,3 +75,5 @@ file={file}
             hideRetryButton={this.props.hideRetryButton}
-            hidePauseResumeCancelButtons={this.props.hidePauseResumeCancelButtons}
+            hideCancelButton={this.props.hideCancelButton}
+            hidePauseResumeButton={this.props.hidePauseResumeButton}
+
             showRemoveButtonAfterComplete={this.props.showRemoveButtonAfterComplete}
@@ -92,3 +91,3 @@
 
-        <div class="uppy-DashboardItem-fileInfoAndButtons">
+        <div class="uppy-Dashboard-Item-fileInfoAndButtons">
           <FileInfo
@@ -95,0 +94,0 @@ file={file}

src/components/FileList.js

@@ -50,3 +50,4 @@ const FileItem = require('./FileItem/index.js')
     hideRetryButton: props.hideRetryButton,
-    hidePauseResumeCancelButtons: props.hidePauseResumeCancelButtons,
+    hidePauseResumeButton: props.hidePauseResumeButton,
+    hideCancelButton: props.hideCancelButton,
     showLinkToFileUploadResult: props.showLinkToFileUploadResult,
@@ -53,0 +54,0 @@ showRemoveButtonAfterComplete: props.showRemoveButtonAfterComplete,

src/components/FilePreview.js

@@ -8,3 +8,3 @@ const getFileTypeIcon = require('../utils/getFileTypeIcon')
   if (file.preview) {
-    return <img class="uppy-DashboardItem-previewImg" alt={file.name} src={file.preview} />
+    return <img class="uppy-Dashboard-Item-previewImg" alt={file.name} src={file.preview} />
   }
@@ -15,7 +15,9 @@
   return (
-    <div class="uppy-DashboardItem-previewIconWrap">
-      <span class="uppy-DashboardItem-previewIcon" style={{ color: color }}>{icon}</span>
-      <svg aria-hidden="true" focusable="false" class="uppy-DashboardItem-previewIconBg" width="58" height="76" viewBox="0 0 58 76"><rect fill="#FFF" width="58" height="76" rx="3" fill-rule="evenodd" /></svg>
+    <div class="uppy-Dashboard-Item-previewIconWrap">
+      <span class="uppy-Dashboard-Item-previewIcon" style={{ color: color }}>{icon}</span>
+      <svg aria-hidden="true" focusable="false" class="uppy-Dashboard-Item-previewIconBg" width="58" height="76" viewBox="0 0 58 76">
+        <rect fill="#FFF" width="58" height="76" rx="3" fill-rule="evenodd" />
+      </svg>
     </div>
   )
 }

src/components/PickerPanelTopBar.js

 const { h } = require('preact')
-const { iconPlus } = require('./icons')
 
@@ -105,3 +104,5 @@ const uploadStates = {
         >
-          {iconPlus()}
+          <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="15" height="15" viewBox="0 0 15 15">
+            <path d="M8 6.5h6a.5.5 0 0 1 .5.5v.5a.5.5 0 0 1-.5.5H8v6a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5V8h-6a.5.5 0 0 1-.5-.5V7a.5.5 0 0 1 .5-.5h6v-6A.5.5 0 0 1 7 0h.5a.5.5 0 0 1 .5.5v6z" />
+          </svg>
           <span class="uppy-DashboardContent-addMoreCaption">{props.i18n('addMore')}</span>
@@ -108,0 +109,0 @@ </button>

src/index.js

@@ -13,3 +13,2 @@ const { Plugin } = require('@uppy/core')
 const ResizeObserver = require('resize-observer-polyfill').default || require('resize-observer-polyfill')
-const { defaultPickerIcon } = require('./components/icons')
 const createSuperFocus = require('./utils/createSuperFocus')
@@ -30,2 +29,10 @@ const memoize = require('memoize-one').default || require('memoize-one')
 
+function defaultPickerIcon () {
+  return (
+    <svg aria-hidden="true" focusable="false" width="30" height="30" viewBox="0 0 30 30">
+      <path d="M15 30c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15zm4.258-12.676v6.846h-8.426v-6.846H5.204l9.82-12.364 9.82 12.364H19.26z" />
+    </svg>
+  )
+}
+
 /**
@@ -112,4 +119,5 @@ * Dashboard UI with previews, metadata editing, tabs for various services and more
       hideUploadButton: false,
+      hideCancelButton: false,
       hideRetryButton: false,
-      hidePauseResumeCancelButtons: false,
+      hidePauseResumeButton: false,
       hideProgressAfterFinish: false,
@@ -859,2 +867,4 @@ note: null,
       hideCancelButton: this.opts.hideCancelButton,
+      hideRetryButton: this.opts.hideRetryButton,
+      hidePauseResumeButton: this.opts.hidePauseResumeButton,
       showRemoveButtonAfterComplete: this.opts.showRemoveButtonAfterComplete,
@@ -861,0 +871,0 @@ containerWidth: pluginState.containerWidth,

src/utils/getFileTypeIcon.js

@@ -1,3 +0,66 @@
-const { iconFile, iconText, iconImage, iconAudio, iconVideo, iconPDF, iconArchive } = require('../components/icons')
+const { h } = require('preact')
 
+function iconImage () {
+  return (
+    <svg aria-hidden="true" focusable="false" width="25" height="25" viewBox="0 0 25 25">
+      <g fill="#686DE0" fill-rule="evenodd">
+        <path d="M5 7v10h15V7H5zm0-1h15a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1z" fill-rule="nonzero" />
+        <path d="M6.35 17.172l4.994-5.026a.5.5 0 0 1 .707 0l2.16 2.16 3.505-3.505a.5.5 0 0 1 .707 0l2.336 2.31-.707.72-1.983-1.97-3.505 3.505a.5.5 0 0 1-.707 0l-2.16-2.159-3.938 3.939-1.409.026z" fill-rule="nonzero" />
+        <circle cx="7.5" cy="9.5" r="1.5" />
+      </g>
+    </svg>
+  )
+}
+
+function iconAudio () {
+  return (
+    <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="25" height="25" viewBox="0 0 25 25">
+      <path d="M9.5 18.64c0 1.14-1.145 2-2.5 2s-2.5-.86-2.5-2c0-1.14 1.145-2 2.5-2 .557 0 1.079.145 1.5.396V7.25a.5.5 0 0 1 .379-.485l9-2.25A.5.5 0 0 1 18.5 5v11.64c0 1.14-1.145 2-2.5 2s-2.5-.86-2.5-2c0-1.14 1.145-2 2.5-2 .557 0 1.079.145 1.5.396V8.67l-8 2v7.97zm8-11v-2l-8 2v2l8-2zM7 19.64c.855 0 1.5-.484 1.5-1s-.645-1-1.5-1-1.5.484-1.5 1 .645 1 1.5 1zm9-2c.855 0 1.5-.484 1.5-1s-.645-1-1.5-1-1.5.484-1.5 1 .645 1 1.5 1z" fill="#049BCF" fill-rule="nonzero" />
+    </svg>
+  )
+}
+
+function iconVideo () {
+  return (
+    <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="25" height="25" viewBox="0 0 25 25">
+      <path d="M16 11.834l4.486-2.691A1 1 0 0 1 22 10v6a1 1 0 0 1-1.514.857L16 14.167V17a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v2.834zM15 9H5v8h10V9zm1 4l5 3v-6l-5 3z" fill="#19AF67" fill-rule="nonzero" />
+    </svg>
+  )
+}
+
+function iconPDF () {
+  return (
+    <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="25" height="25" viewBox="0 0 25 25">
+      <path d="M9.766 8.295c-.691-1.843-.539-3.401.747-3.726 1.643-.414 2.505.938 2.39 3.299-.039.79-.194 1.662-.537 3.148.324.49.66.967 1.055 1.51.17.231.382.488.629.757 1.866-.128 3.653.114 4.918.655 1.487.635 2.192 1.685 1.614 2.84-.566 1.133-1.839 1.084-3.416.249-1.141-.604-2.457-1.634-3.51-2.707a13.467 13.467 0 0 0-2.238.426c-1.392 4.051-4.534 6.453-5.707 4.572-.986-1.58 1.38-4.206 4.914-5.375.097-.322.185-.656.264-1.001.08-.353.306-1.31.407-1.737-.678-1.059-1.2-2.031-1.53-2.91zm2.098 4.87c-.033.144-.068.287-.104.427l.033-.01-.012.038a14.065 14.065 0 0 1 1.02-.197l-.032-.033.052-.004a7.902 7.902 0 0 1-.208-.271c-.197-.27-.38-.526-.555-.775l-.006.028-.002-.003c-.076.323-.148.632-.186.8zm5.77 2.978c1.143.605 1.832.632 2.054.187.26-.519-.087-1.034-1.113-1.473-.911-.39-2.175-.608-3.55-.608.845.766 1.787 1.459 2.609 1.894zM6.559 18.789c.14.223.693.16 1.425-.413.827-.648 1.61-1.747 2.208-3.206-2.563 1.064-4.102 2.867-3.633 3.62zm5.345-10.97c.088-1.793-.351-2.48-1.146-2.28-.473.119-.564 1.05-.056 2.405.213.566.52 1.188.908 1.859.18-.858.268-1.453.294-1.984z" fill="#E2514A" fill-rule="nonzero" />
+    </svg>
+  )
+}
+
+function iconArchive () {
+  return (
+    <svg aria-hidden="true" focusable="false" width="25" height="25" viewBox="0 0 25 25">
+      <path d="M10.45 2.05h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5V2.55a.5.5 0 0 1 .5-.5zm2.05 1.024h1.05a.5.5 0 0 1 .5.5V3.6a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5v-.001zM10.45 0h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5V.5a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.024a.5.5 0 0 1 .5-.5zm-2.05 3.074h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.024a.5.5 0 0 1 .5-.5zm-2.05 1.024h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm-2.05 1.025h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.024a.5.5 0 0 1 .5-.5zm-1.656 3.074l-.82 5.946c.52.302 1.174.458 1.976.458.803 0 1.455-.156 1.975-.458l-.82-5.946h-2.311zm0-1.025h2.312c.512 0 .946.378 1.015.885l.82 5.946c.056.412-.142.817-.501 1.026-.686.398-1.515.597-2.49.597-.974 0-1.804-.199-2.49-.597a1.025 1.025 0 0 1-.5-1.026l.819-5.946c.07-.507.503-.885 1.015-.885zm.545 6.6a.5.5 0 0 1-.397-.561l.143-.999a.5.5 0 0 1 .495-.429h.74a.5.5 0 0 1 .495.43l.143.998a.5.5 0 0 1-.397.561c-.404.08-.819.08-1.222 0z" fill="#00C469" fill-rule="nonzero" />
+    </svg>
+  )
+}
+
+function iconFile () {
+  return (
+    <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="25" height="25" viewBox="0 0 25 25">
+      <g fill="#A7AFB7" fill-rule="nonzero">
+        <path d="M5.5 22a.5.5 0 0 1-.5-.5v-18a.5.5 0 0 1 .5-.5h10.719a.5.5 0 0 1 .367.16l3.281 3.556a.5.5 0 0 1 .133.339V21.5a.5.5 0 0 1-.5.5h-14zm.5-1h13V7.25L16 4H6v17z" />
+        <path d="M15 4v3a1 1 0 0 0 1 1h3V7h-3V4h-1z" />
+      </g>
+    </svg>
+  )
+}
+
+function iconText () {
+  return (
+    <svg aria-hidden="true" focusable="false" class="uppy-c-icon" width="25" height="25" viewBox="0 0 25 25">
+      <path d="M4.5 7h13a.5.5 0 1 1 0 1h-13a.5.5 0 0 1 0-1zm0 3h15a.5.5 0 1 1 0 1h-15a.5.5 0 1 1 0-1zm0 3h15a.5.5 0 1 1 0 1h-15a.5.5 0 1 1 0-1zm0 3h10a.5.5 0 1 1 0 1h-10a.5.5 0 1 1 0-1z" fill="#5A5E69" fill-rule="nonzero" />
+    </svg>
+  )
+}
+
 module.exports = function getIconByMime (fileType) {
@@ -4,0 +67,0 @@ const defaultChoice = {

No alert changes

Worsened metrics

Total package byte prevSize

356294

decreased by-2.91%

Number of package files

85

decreased by-6.59%

Lines of code

7253

decreased by-3.46%

Dependency changes

• Updated@uppy/informer@^1.5.7

• Updated@uppy/provider-views@^1.6.7

• Updated@uppy/status-bar@^1.7.0

• Updated@uppy/thumbnail-generator@^1.6.1

• Updated@uppy/utils@^3.1.0