File drop UI fixes and improvements #5505

SimonBrandner · 2020-12-17T19:14:00Z

This PR fixes the misplaced UI and fixes #3541 along with improving the UI a bit with a background for better readability. It follows the slight adjustments suggested in this design.

Note: The GIFs are a bit laggy. Use the live preview for a better experience

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

SimonBrandner · 2020-12-17T19:35:44Z

src/contexts/RoomContext.ts

@@ -42,6 +42,7 @@ const RoomContext = createContext<IState>({
    canReply: false,
    useIRCLayout: false,
    matrixClientIsReady: false,
+    dragCounter: 0,


This is probably not necessary here? But there is draggingFile: false, is that intentional?

I'm slightly worried that counting enters/leaves will cause problems and desync (there's a ton of ways to leave a browser window without triggering a dragleave event, making you always +1)

Can we get away with a simple isDragging instead?

This method is the only solution I've found... I don't think I quite understand what you mean by isDragging here. There seems to be a isDragging method in react-dnd but I don't think this can be used here. What am I missing?

nadonomy · 2021-02-11T17:40:12Z

@SimonBrandner apologies for the laggy review on this— trying to resource some design time to improve the colours and visual treatment of this interaction but overall looking great!

niquewoodhouse · 2021-02-25T16:51:28Z

Hi @SimonBrandner I took a quick look at this and have a proposal. I think I understood the video properly, but as always, please let me know if I misunderstood or in practice this won't work because of reasons I've not considered. In some quick testing, I couldn't quite work out the logic for how the existing backgrounds appear, and I don't want to accidentally introduce new logic. My proposal is something like this:

Amend the white background which appears over the timeline in dark theme
Remove the background of the inner box (which contains the upload icon and text)
Add feedback to the icon when file is in correct place to be dropped**
Add feedback upon drop**

** = Actually, I'm not sure if these are actually required. Adding feedback might be hard to do in the existing logic, and the subsequent tick might look ok but its confusing because currently a dialog appears to confirm uploading, the tick might suggest it's done when it's not.

So my proposal is just to change the first two and give the user this view:

Dark theme

Light theme

Figma

The upload icon should exist already but let me know if not/you can't get it from the figma/if you have any questions.
Thanks

SimonBrandner · 2021-02-25T17:10:52Z

Hi @niquewoodhouse, I think the check would be a bit weird given the current UI. I'd stick with the simple design at least for now. I'll look into implementing what you have suggested!

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

SimonBrandner · 2021-02-25T18:10:56Z

@niquewoodhouse, done!

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

This seemed to have caused a little lag and it was unnecessary Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

We need to allow the container to be smaller Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

turt2live

overall looks fine, just a couple clarifying questions. Thanks!

src/components/structures/RoomView.tsx

src/components/views/rooms/AuxPanel.tsx

src/components/structures/RoomView.tsx

turt2live · 2021-03-01T23:41:52Z

src/contexts/RoomContext.ts

@@ -42,6 +42,7 @@ const RoomContext = createContext<IState>({
    canReply: false,
    useIRCLayout: false,
    matrixClientIsReady: false,
+    dragCounter: 0,


I'm slightly worried that counting enters/leaves will cause problems and desync (there's a ton of ways to leave a browser window without triggering a dragleave event, making you always +1)

Can we get away with a simple isDragging instead?

Co-authored-by: Travis Ralston <travpc@gmail.com>

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

turt2live

thanks!

SimonBrandner added 9 commits December 16, 2020 16:02

Fix file drop UI

89bc443

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Added background

41e2ffd

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Added a comment

da97d18

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Fix left panel resizer

dcb30b7

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Fix flickering

e70dee0

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Remove spaces in empty line

044e02b

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Merge branch 'develop' into improve-file-drop-ui

bebbb3b

Fix removing event listeners

365d252

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Added dragCounter

5d7e45e

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

SimonBrandner commented Dec 17, 2020

View reviewed changes

t3chguy requested review from a team December 29, 2020 12:49

Merge branch 'develop' into improve-file-drop-ui

c1a105f

SimonBrandner marked this pull request as draft February 25, 2021 17:13

SimonBrandner added 6 commits February 25, 2021 18:23

Fix timeline expansion

ad85764

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Make $droptarget-bg-color more opaque

aa4ec9f

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Add $droptarget-bg-color to the dark theme

8551855

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Remove rounded corners of the drop area

a3001f7

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Remove label background

26b70b6

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Use new upload icon

6a7340e

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

SimonBrandner marked this pull request as ready for review February 25, 2021 18:10

SimonBrandner added 5 commits February 25, 2021 19:28

Remove unnecessary class

1c48804

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Don't use TintableSVG

43e1144

This seemed to have caused a little lag and it was unnecessary Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Fix weird crash

7277c28

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Remove sdk import

49ea9a4

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Animate icon size

1a7f909

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

SimonBrandner added 5 commits February 26, 2021 08:11

Fix formatting

f0c2684

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Add background animation

172cc01

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Remove droptarget colors

3e0558f

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

i18n

49ea83e

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Delint

e90ae2e

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

SimonBrandner marked this pull request as draft February 26, 2021 09:52

SimonBrandner added 4 commits February 26, 2021 11:08

min-width

819a0b0

We need to allow the container to be smaller Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Remove weird styling

0d6a9fc

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Remove mx_RoomView_container

11c5aa0

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Fix auxPanel

9a5ba07

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

SimonBrandner marked this pull request as ready for review February 26, 2021 10:32

SimonBrandner added 2 commits February 26, 2021 11:38

Remove unnecessary code

3bed374

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Remove unnecessary changes

3a643e5

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

turt2live reviewed Mar 1, 2021

View reviewed changes

SimonBrandner and others added 5 commits March 2, 2021 07:41

Remove space

ebedd3c

Co-authored-by: Travis Ralston <travpc@gmail.com>

Use ===

ff00683

Co-authored-by: Travis Ralston <travpc@gmail.com>

Move fileDropTarget to RoomView

0a4c0b6

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

Remove unused _t

4476843

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

i18n

831cc7e

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

SimonBrandner requested review from turt2live and removed request for a team March 3, 2021 06:49

turt2live approved these changes Mar 5, 2021

View reviewed changes

turt2live merged commit 676259e into matrix-org:develop Mar 5, 2021

SimonBrandner deleted the improve-file-drop-ui branch March 5, 2021 06:15

SimonBrandner mentioned this pull request Apr 6, 2021

drop & drag target needs to be redesigned for Element element-hq/element-web#14589

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

File drop UI fixes and improvements #5505

File drop UI fixes and improvements #5505

SimonBrandner commented Dec 17, 2020 •

edited

Loading

SimonBrandner Dec 17, 2020 •

edited

Loading

turt2live Mar 1, 2021

SimonBrandner Mar 2, 2021

nadonomy commented Feb 11, 2021

niquewoodhouse commented Feb 25, 2021

SimonBrandner commented Feb 25, 2021

SimonBrandner commented Feb 25, 2021 •

edited

Loading

turt2live left a comment

turt2live Mar 1, 2021

turt2live left a comment

File drop UI fixes and improvements #5505

File drop UI fixes and improvements #5505

Conversation

SimonBrandner commented Dec 17, 2020 • edited Loading

SimonBrandner Dec 17, 2020 • edited Loading

Choose a reason for hiding this comment

turt2live Mar 1, 2021

Choose a reason for hiding this comment

SimonBrandner Mar 2, 2021

Choose a reason for hiding this comment

nadonomy commented Feb 11, 2021

niquewoodhouse commented Feb 25, 2021

SimonBrandner commented Feb 25, 2021

SimonBrandner commented Feb 25, 2021 • edited Loading

turt2live left a comment

Choose a reason for hiding this comment

turt2live Mar 1, 2021

Choose a reason for hiding this comment

turt2live left a comment

Choose a reason for hiding this comment

SimonBrandner commented Dec 17, 2020 •

edited

Loading

SimonBrandner Dec 17, 2020 •

edited

Loading

SimonBrandner commented Feb 25, 2021 •

edited

Loading