Improve FileDrop View #8511

hurradieweltgehtunter · 2023-02-28T07:41:24Z

Description

Improve Layout of FileDrop view

Motivation and Context

The FileDrop View is an external endpoint, which gets presented to users possible not knowing what a FileDrop or even ownCloud is. The current layout does not provide any information about it and does not offer clear instructions what to do, where to click.
Also, current status of (german) translations are ... well ... 💩

Screenshots (if appropriate):

Before:

After:

Drag `n Drop state:

After upload showing file infos:

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)
Technical debt
Tests

Checklist:

Code changes
Unit tests added
Acceptance tests added
Documentation ticket raised:

Open tasks:

Clarify why code changes are not compiled
Add translation strings to transifex and back

update-docs · 2023-02-28T07:41:28Z

Thanks for opening this pull request! The maintainers of this repository would appreciate it if you would create a changelog item based on your changes.

hurradieweltgehtunter · 2023-02-28T07:43:34Z

Not sure what I'm doing wrong, but while changes to other components or views get compiled and shown in browser immediately, the changes in the filedrop view (see changed files) do not have any impact in the browser 🤷 Caching issue maybe? (is there even a cache?)
Docker + Vite is running

sonarqubecloud · 2023-02-28T07:48:53Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

kulmann · 2023-02-28T08:43:26Z

Not sure what I'm doing wrong, but while changes to other components or views get compiled and shown in browser immediately, the changes in the filedrop view (see changed files) do not have any impact in the browser 🤷 Caching issue maybe? (is there even a cache?)
Docker + Vite is running

Ok so that's a little mean... the backend doesn't know anything about you running the frontend with vite. So the public link that you copy is on port 9200, but vite is running on port 9201. So for public links you need to modify the copied URL to get the pleasure of the vite dev experience.

Example:
copied url: https://host.docker.internal:9200/s/ZbBsOLkHqannLUt
manually modified url: https://host.docker.internal:9201/index.html#/s/ZbBsOLkHqannLUt

hurradieweltgehtunter · 2023-02-28T15:02:57Z

Some issues I was not able to solve:

How to hide the default snackbar/notification upload status bottom right? Right now it's displayed twice
How to get the new strings into transifex and back?

packages/web-app-files/src/views/FilesDrop.vue

ChrisEdS · 2023-02-28T20:18:39Z

Can you try to make that line a bit more prominent? Also, I'm not sure what the original string is, but we should remove "Folder" and add "Resource". Technically this is a folder, but user facing there is no "folder" - it's a bit misleading.

hurradieweltgehtunter · 2023-03-01T07:44:32Z

Can you try to make that line a bit more prominent? Also, I'm not sure what the original string is, but we should remove "Folder" and add "Resource". Technically this is a folder, but user facing there is no "folder" - it's a bit misleading.

I made it “un”-prominent on purpose because it does not contain any primary relevant information to the receiving user. The only primary information IMO is “Choose a file or drag it here”, that's the primary action and the whole purpose of this page. Everything else is subordinate to this.

folder/resource: Yes, you are right, I'm not happy with the current state. But since we'll work on the textual contents next week, I'd wait for the outcome, then see what fits best.

ChrisEdS · 2023-03-08T22:14:02Z

I made it “un”-prominent on purpose because it does not contain any primary relevant information to the receiving user.

The information who invited me to upload files seems important to me, but I'm good with the current look as well!

This enhancement will go into 7.0.0, right? Is there something I can help with to speed up things?

hurradieweltgehtunter · 2023-03-09T08:07:33Z

I made it “un”-prominent on purpose because it does not contain any primary relevant information to the receiving user.

The information who invited me to upload files seems important to me, but I'm good with the current look as well!

This enhancement will go into 7.0.0, right? Is there something I can help with to speed up things?

Some work is in the making. Some more patience required :)

…able to use them combined Example: oc-m oc-mb-rm was not possible before. now it is

infoExpanded: now contollable via prop standalone: hide border, shadow, headerbar etc. -> can now be freely included in other context

Co-authored-by: David Christofas <[email protected]>

CLAassistant · 2023-03-14T14:18:51Z

All committers have signed the CLA.

hurradieweltgehtunter · 2023-03-14T14:56:34Z

Final layout after talking to marketing and @tbsbdr looks like this:

ChrisEdS · 2023-03-14T15:08:30Z

Love it!

use with .oc-{m|p}{?direction}-{size}@{s|m|l|xl}

hurradieweltgehtunter · 2023-03-14T15:54:54Z

Done from my side. Left to do:

handle translations
tests

ChrisEdS · 2023-03-27T20:16:11Z

Done from my side. Left to do:

handle translations

tests

Good work from your side @hurradieweltgehtunter. Who is taking care about the rest?

AlexAndBear · 2023-04-04T09:59:26Z

Love it so far but the text "You can drag n drop the file here or choose to upload" is a little unnecessary in my opinion.

Also I don't get the lower banner/branding? Looks a little chaotic to me

ChrisEdS · 2023-04-04T10:21:04Z

Yes, and it is way to big and can be moved more to the bottom?

hurradieweltgehtunter · 2023-04-05T23:20:31Z

Love it so far but the text "You can drag n drop the file here or choose to upload" is a little unnecessary in my opinion.

Do you mean the "What is this" text part? IMO a short explanation of what the user sees and is able to do might be essential. The receiving user might not know, at all, what to do, especially since he or she is for sure not registered on the serving instance.

AlexAndBear · 2023-04-06T01:12:43Z

IHMO choose a file or drag it here is self explaining. I don't think we add much value telling the user, that a file picker will open.

I would rather go a little into detail about the upload link

ChrisEdS · 2023-04-06T12:57:59Z

IHMO choose a file or drag it here is self explaining. I don't think we add much value telling the user, that a file picker will open.

I think it makes sense to explain it. Is a good opening to the text that follows.
For us it is obvious what will happen but what about the parents, kids and grandparents out there? I mean ownCloud is used by millions of people, why not help them a bit?

I would rather go a little into detail about the upload link

What do you have in mind?

tbsbdr · 2023-04-10T17:29:06Z

I'd love to discuss and improve this at the beginning of may

ChrisEdS · 2023-07-19T08:14:24Z

@tbsbdr Can we continue with that PR?

tbsbdr · 2023-12-14T15:42:13Z

Initial

Info: Albert Einstein is requesting files
Instruction: Drop files here to upload, or use the 'Upload' button.
CTA button in the center of attention Upload (same as in files app)
more decent note "Existing content is not revealed. Only Albert Einstein can see uploads."

Success

Info: Albert Einstein is requesting files
Success confirmation: ✅ Upload finished
Scrollbox lists sucessfully uploaded files
start over option: Add more files (user stays on site and sees always which files she had already uploaded - list grows)
summary Total 1 file, 4.4 MB

kulmann · 2024-02-02T14:45:36Z

Thanks a ton for driving this @hurradieweltgehtunter ! To get it finally done, this is now superseded by #10438

hurradieweltgehtunter added the Interaction:Needs-help Asking some hints to engineering when the issue can't be reproduced label Feb 28, 2023

hurradieweltgehtunter self-assigned this Feb 28, 2023

hurradieweltgehtunter changed the title ~~temporary changes~~ Improve FileDrop View Feb 28, 2023

C0rby reviewed Feb 28, 2023

View reviewed changes

packages/web-app-files/src/views/FilesDrop.vue Outdated Show resolved Hide resolved

hurradieweltgehtunter added Category:Enhancement Add new functionality Status:In-Progress and removed Interaction:Needs-help Asking some hints to engineering when the issue can't be reproduced labels Mar 1, 2023

hurradieweltgehtunter and others added 14 commits March 14, 2023 15:18

temporary changes

be5db14

add classes for absolute position setting top|right|bottom|left values

2a4bb7b

move css classes to remove margin/padding after setter classes to be …

219d88a

…able to use them combined Example: oc-m oc-mb-rm was not possible before. now it is

Make component controllable and reusable

b2b194a

infoExpanded: now contollable via prop standalone: hide border, shadow, headerbar etc. -> can now be freely included in other context

Make component more customizable

87d7dc4

remove hard coded values to make it more customizable

8301b3e

re-Style FileDrop View

74a3763

add scoped. Remove hiding app switcher

12c8951

Fix typo

61a4d22

Co-authored-by: David Christofas <[email protected]>

lint

89f0954

avoid local overwrite of prop

8d09a58

rename prop to more self-explanatory name

bcb0497

usemore self-explanatory prop names

c488caa

slot-ify

8de869f

hurradieweltgehtunter added 3 commits March 14, 2023 16:06

set paragraph line height for better readability

54f0a80

make font weights important

fae6dd2

update

69a6321

hurradieweltgehtunter added 4 commits March 14, 2023 16:52

add responsive spacing

d72659f

use with .oc-{m|p}{?direction}-{size}@{s|m|l|xl}

update

008810d

add url and dark logo

6a7dab7

add url and dark logo

6a74070

hurradieweltgehtunter force-pushed the beautify-filedrop branch from a7d5aaa to 6a74070 Compare March 14, 2023 15:53

hurradieweltgehtunter added the Status:Needs-Review Needs review from a maintainer label Mar 14, 2023

hurradieweltgehtunter requested a review from kulmann March 14, 2023 15:55

ChrisEdS requested review from AlexAndBear and JammingBen April 4, 2023 09:26

ChrisEdS mentioned this pull request Jul 25, 2023

Drop on secret file drop pages is broken #9464

Closed

pascalwengerter mentioned this pull request Feb 2, 2024

Improve FileDrop View #10438

Draft

kulmann closed this Feb 2, 2024

kulmann deleted the beautify-filedrop branch September 5, 2024 19:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve FileDrop View #8511

Improve FileDrop View #8511

hurradieweltgehtunter commented Feb 28, 2023 •

edited

Loading

update-docs bot commented Feb 28, 2023

hurradieweltgehtunter commented Feb 28, 2023 •

edited

Loading

sonarqubecloud bot commented Feb 28, 2023

kulmann commented Feb 28, 2023

hurradieweltgehtunter commented Feb 28, 2023 •

edited

Loading

ChrisEdS commented Feb 28, 2023

hurradieweltgehtunter commented Mar 1, 2023

ChrisEdS commented Mar 8, 2023 •

edited

Loading

hurradieweltgehtunter commented Mar 9, 2023

CLAassistant commented Mar 14, 2023 •

edited

Loading

hurradieweltgehtunter commented Mar 14, 2023

ChrisEdS commented Mar 14, 2023

hurradieweltgehtunter commented Mar 14, 2023 •

edited

Loading

ChrisEdS commented Mar 27, 2023

AlexAndBear commented Apr 4, 2023

ChrisEdS commented Apr 4, 2023

hurradieweltgehtunter commented Apr 5, 2023

AlexAndBear commented Apr 6, 2023 •

edited

Loading

ChrisEdS commented Apr 6, 2023

tbsbdr commented Apr 10, 2023

ChrisEdS commented Jul 19, 2023

tbsbdr commented Dec 14, 2023

kulmann commented Feb 2, 2024

Improve FileDrop View #8511

Improve FileDrop View #8511

Conversation

hurradieweltgehtunter commented Feb 28, 2023 • edited Loading

Description

Motivation and Context

Screenshots (if appropriate):

Types of changes

Checklist:

Open tasks:

update-docs bot commented Feb 28, 2023

hurradieweltgehtunter commented Feb 28, 2023 • edited Loading

sonarqubecloud bot commented Feb 28, 2023

kulmann commented Feb 28, 2023

hurradieweltgehtunter commented Feb 28, 2023 • edited Loading

ChrisEdS commented Feb 28, 2023

hurradieweltgehtunter commented Mar 1, 2023

ChrisEdS commented Mar 8, 2023 • edited Loading

hurradieweltgehtunter commented Mar 9, 2023

CLAassistant commented Mar 14, 2023 • edited Loading

hurradieweltgehtunter commented Mar 14, 2023

ChrisEdS commented Mar 14, 2023

hurradieweltgehtunter commented Mar 14, 2023 • edited Loading

ChrisEdS commented Mar 27, 2023

AlexAndBear commented Apr 4, 2023

ChrisEdS commented Apr 4, 2023

hurradieweltgehtunter commented Apr 5, 2023

AlexAndBear commented Apr 6, 2023 • edited Loading

ChrisEdS commented Apr 6, 2023

tbsbdr commented Apr 10, 2023

ChrisEdS commented Jul 19, 2023

tbsbdr commented Dec 14, 2023

Initial

Success

kulmann commented Feb 2, 2024

hurradieweltgehtunter commented Feb 28, 2023 •

edited

Loading

hurradieweltgehtunter commented Feb 28, 2023 •

edited

Loading

hurradieweltgehtunter commented Feb 28, 2023 •

edited

Loading

ChrisEdS commented Mar 8, 2023 •

edited

Loading

CLAassistant commented Mar 14, 2023 •

edited

Loading

hurradieweltgehtunter commented Mar 14, 2023 •

edited

Loading

AlexAndBear commented Apr 6, 2023 •

edited

Loading