diff --git a/website/src/docs/dashboard.md b/website/src/docs/dashboard.md index 0bea92816..4bd44f75b 100644 --- a/website/src/docs/dashboard.md +++ b/website/src/docs/dashboard.md @@ -11,11 +11,11 @@ tagline: "full-featured sleek UI with file previews, metadata editing, upload/pa `@uppy/dashboard` is a universal UI plugin for Uppy, offering several useful features: - Drag and drop, paste, select from local disk / my device -- UI for the Webcam plugin and remote sources, such as Google Drive, Dropbox, Instagram (all optional, added via plugins) -- File previews and info +- UI for the Webcam plugin and remote sources, such as Google Drive, Dropbox, Instagram, Facebook and OneDrive (all optional, added via plugins) +- Image previews - Metadata editor -- Progress: total and for individual files -- Ability to pause/resume or cancel (depending on uploader plugin) individual or all files +- Upload progress +- Ability to pause or cancel (depending on the uploader plugin) uploads ```js const Dashboard = require('@uppy/dashboard') @@ -92,7 +92,8 @@ uppy.use(Dashboard, { onRequestCloseModal: () => this.closeModal(), showSelectedFiles: true, locale: defaultLocale, - browserBackButtonClose: false + browserBackButtonClose: false, + theme: 'light' }) ``` @@ -360,6 +361,17 @@ strings: { Remove all children of the `target` element before mounting the Dashboard. By default, Uppy will append any UI to the `target` DOM element. This is the least dangerous option. However, there might be cases when you would want to clear the container element before placing Uppy UI in there (for example, to provide a fallback `
` that will be shown if Uppy or JavaScript is not available). Set `replaceTargetContent: true` to clear the `target` before appending. +### `theme: 'light'` + +Uppy Dashboard supports “Dark Mode”. You can try it live on [the Dashboard example page](http://localhost:4000/examples/dashboard/). + +There are three options: +- `light` — the default +- `dark` +- `auto` — will respect the user’s system settings and switch automatically + +![Uppy dark mode screenshot](/images/uppy-dashboard-dark-mar-2020.png) + ## Methods ### `openModal()` diff --git a/website/src/examples/dashboard/app.es6 b/website/src/examples/dashboard/app.es6 index afd601f8e..8c0d99deb 100644 --- a/website/src/examples/dashboard/app.es6 +++ b/website/src/examples/dashboard/app.es6 @@ -80,7 +80,7 @@ function uppySetOptions () { window.uppy.getPlugin('Dashboard').setOptions({ note: opts.restrictions ? 'Images and video only, 2–3 files, up to 1 MB' : '', - browserBackButtonClose: opts.browserBackButtonClose + theme: opts.darkMode ? 'dark' : 'light' }) const GoogleDriveInstance = window.uppy.getPlugin('GoogleDrive') diff --git a/website/src/examples/dashboard/app.html b/website/src/examples/dashboard/app.html index d6956e2ff..b2c04d5e3 100644 --- a/website/src/examples/dashboard/app.html +++ b/website/src/examples/dashboard/app.html @@ -6,15 +6,15 @@
  • -
  • +
  • @@ -45,7 +45,7 @@ Url: document.querySelector('#opts-Url'), autoProceed: document.querySelector('#opts-autoProceed'), restrictions: document.querySelector('#opts-restrictions'), - browserBackButtonClose: document.querySelector('#opts-browserBackButtonClose') + darkMode: document.querySelector('#opts-darkMode') } var defaultOpts = { @@ -59,7 +59,7 @@ Url: true, autoProceed: false, restrictions: false, - browserBackButtonClose: false + darkMode: true } // try to get options from localStorage, if its empty, set to defaultOpts diff --git a/website/src/images/uppy-dashboard-dark-mar-2020.png b/website/src/images/uppy-dashboard-dark-mar-2020.png new file mode 100644 index 000000000..49e96605c Binary files /dev/null and b/website/src/images/uppy-dashboard-dark-mar-2020.png differ