Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Single File Mode: fix layout and make optional #4374

Merged
merged 11 commits into from
Apr 13, 2023
Merged

Conversation

arturi
Copy link
Contributor

@arturi arturi commented Mar 24, 2023

  • Significantly improved styling on different screen sizes
  • New option centerSingleFile, true by default, but some might still like to disabled it, in my opinion this is too opinionated and new to force on all users.
  • Fixed “ghosts” for Golden Retriever

Now:

Tall:
Screen Shot 2023-03-24 at 14 11 40

Shorter, truncated file name:
Screen Shot 2023-03-24 at 14 12 01

Too short for Single File mode, default to regular grid
Screen Shot 2023-03-24 at 14 12 18

Mobile:

Before:

todo:

  • fix icons for file types on different screen sizes
  • update docs on uppy.io

@arturi arturi requested a review from nqst March 24, 2023 14:15
Copy link
Member

@Murderlon Murderlon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a lot better!

As a last improvement, can we get rid of the white box around a picture? It doesn't add any value I think. We can let filename wrap into another line if that's required in less wide cases.

Copy link
Contributor

@nqst nqst left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here is something I'd like to be fixed:

  1. If a small image is uploaded, it's scaled up. We can only reduce width/height.
  2. Transparency is not rendered properly, there's a black background instead.

Screenshot 28-03-2023 at 14 59 55@2x

  1. Icon file previews look incorrect:

image

  1. I think in lot of cases we could leave the white background out:

image

@nqst
Copy link
Contributor

nqst commented Mar 28, 2023

Can we get rid of the white box around a picture? It doesn't add any value I think. We can let filename wrap into another line if that's required in less wide cases.

I think in case of very small of very narrow images it adds value — there's a point where wrapping won't make sense. But in the current version the white box looks quite too contrast, and we can use it in less cases (see the last screenshot in the review above).

I propose to remove the box-shadow, and set the 50% opacity for the white background. It can look like this:

image

Screenshot 28-03-2023 at 15 26 09@2x

@arturi arturi merged commit cc5b015 into main Apr 13, 2023
@arturi arturi deleted the improve-single-file-mode branch April 13, 2023 21:06
@github-actions github-actions bot mentioned this pull request Apr 18, 2023
github-actions bot added a commit that referenced this pull request Apr 18, 2023
| Package                   | Version | Package                   | Version |
| ------------------------- | ------- | ------------------------- | ------- |
| @uppy/angular             |   0.5.2 | @uppy/progress-bar        |   3.0.2 |
| @uppy/audio               |   1.1.1 | @uppy/provider-views      |   3.3.0 |
| @uppy/aws-s3              |   3.1.0 | @uppy/react               |   3.1.2 |
| @uppy/aws-s3-multipart    |   3.2.0 | @uppy/react-native        |   0.5.1 |
| @uppy/box                 |   2.1.1 | @uppy/redux-dev-tools     |   3.0.2 |
| @uppy/companion           |   4.5.0 | @uppy/remote-sources      |   1.0.3 |
| @uppy/companion-client    |   3.1.3 | @uppy/screen-capture      |   3.1.1 |
| @uppy/compressor          |   1.0.2 | @uppy/status-bar          |   3.1.1 |
| @uppy/core                |   3.2.0 | @uppy/store-default       |   3.0.3 |
| @uppy/dashboard           |   3.4.0 | @uppy/store-redux         |   3.0.3 |
| @uppy/drag-drop           |   3.0.2 | @uppy/svelte              |   3.0.2 |
| @uppy/dropbox             |   3.1.1 | @uppy/thumbnail-generator |   3.0.3 |
| @uppy/facebook            |   3.1.1 | @uppy/transloadit         |   3.1.3 |
| @uppy/file-input          |   3.0.2 | @uppy/tus                 |   3.1.0 |
| @uppy/form                |   3.0.2 | @uppy/unsplash            |   3.2.1 |
| @uppy/golden-retriever    |   3.0.3 | @uppy/url                 |   3.3.1 |
| @uppy/google-drive        |   3.1.1 | @uppy/utils               |   5.3.0 |
| @uppy/image-editor        |   2.1.2 | @uppy/vue                 |   1.0.2 |
| @uppy/informer            |   3.0.2 | @uppy/webcam              |   3.3.1 |
| @uppy/instagram           |   3.1.1 | @uppy/xhr-upload          |   3.2.0 |
| @uppy/locales             |   3.2.0 | @uppy/zoom                |   2.1.1 |
| @uppy/onedrive            |   3.1.1 | uppy                      |   3.8.0 |

- @uppy/companion: increase max limits for remote file list operations (Mikael Finstad / #4417)
- @uppy/xhr-upload: fix type in README.md (Top Master / #4416)
- @uppy/core: improve performance of validating & uploading files (Mikael Finstad / #4402)
- @uppy/provider-views: Concurrent file listing (Mikael Finstad / #4401)
- @uppy/core,@uppy/locales,@uppy/provider-views: User feedback adding recursive folders take 2 (Mikael Finstad / #4399)
- @uppy/dashboard: Single File Mode: fix layout and make optional (Artur Paikin / #4374)
- @uppy/informer: add a check in `TransitionGroup` when component is null (Juan Belej / #4410)
- meta: Fix logos in all the readmes (Artur Paikin / #4407)
- meta: fix logo in readme (Kid / #4403)
HeavenFox pushed a commit to docsend/uppy that referenced this pull request Jun 27, 2023
| Package                   | Version | Package                   | Version |
| ------------------------- | ------- | ------------------------- | ------- |
| @uppy/angular             |   0.5.2 | @uppy/progress-bar        |   3.0.2 |
| @uppy/audio               |   1.1.1 | @uppy/provider-views      |   3.3.0 |
| @uppy/aws-s3              |   3.1.0 | @uppy/react               |   3.1.2 |
| @uppy/aws-s3-multipart    |   3.2.0 | @uppy/react-native        |   0.5.1 |
| @uppy/box                 |   2.1.1 | @uppy/redux-dev-tools     |   3.0.2 |
| @uppy/companion           |   4.5.0 | @uppy/remote-sources      |   1.0.3 |
| @uppy/companion-client    |   3.1.3 | @uppy/screen-capture      |   3.1.1 |
| @uppy/compressor          |   1.0.2 | @uppy/status-bar          |   3.1.1 |
| @uppy/core                |   3.2.0 | @uppy/store-default       |   3.0.3 |
| @uppy/dashboard           |   3.4.0 | @uppy/store-redux         |   3.0.3 |
| @uppy/drag-drop           |   3.0.2 | @uppy/svelte              |   3.0.2 |
| @uppy/dropbox             |   3.1.1 | @uppy/thumbnail-generator |   3.0.3 |
| @uppy/facebook            |   3.1.1 | @uppy/transloadit         |   3.1.3 |
| @uppy/file-input          |   3.0.2 | @uppy/tus                 |   3.1.0 |
| @uppy/form                |   3.0.2 | @uppy/unsplash            |   3.2.1 |
| @uppy/golden-retriever    |   3.0.3 | @uppy/url                 |   3.3.1 |
| @uppy/google-drive        |   3.1.1 | @uppy/utils               |   5.3.0 |
| @uppy/image-editor        |   2.1.2 | @uppy/vue                 |   1.0.2 |
| @uppy/informer            |   3.0.2 | @uppy/webcam              |   3.3.1 |
| @uppy/instagram           |   3.1.1 | @uppy/xhr-upload          |   3.2.0 |
| @uppy/locales             |   3.2.0 | @uppy/zoom                |   2.1.1 |
| @uppy/onedrive            |   3.1.1 | uppy                      |   3.8.0 |

- @uppy/companion: increase max limits for remote file list operations (Mikael Finstad / transloadit#4417)
- @uppy/xhr-upload: fix type in README.md (Top Master / transloadit#4416)
- @uppy/core: improve performance of validating & uploading files (Mikael Finstad / transloadit#4402)
- @uppy/provider-views: Concurrent file listing (Mikael Finstad / transloadit#4401)
- @uppy/core,@uppy/locales,@uppy/provider-views: User feedback adding recursive folders take 2 (Mikael Finstad / transloadit#4399)
- @uppy/dashboard: Single File Mode: fix layout and make optional (Artur Paikin / transloadit#4374)
- @uppy/informer: add a check in `TransitionGroup` when component is null (Juan Belej / transloadit#4410)
- meta: Fix logos in all the readmes (Artur Paikin / transloadit#4407)
- meta: fix logo in readme (Kid / transloadit#4403)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants