Revamp the Upload screen

[sivaraam]

As stated in #1037:

It's quite odd to show the image being uploaded in the background. It seems to be cluttering up with the text in the screen (the text Wikimedia Commons policies is barely visible). It would be better to show a small preview of the image and let the users see it fully if they want to.

[nicolas-raoul]

Uploading a screenshot is very unusual, 99% of the uploads are camera pictures.
So I am personally in favor of keeping this feature.

That being said, I think the upload screen needs a way to view the picture more clearly and zooming/scrolling into the picture. In order to write a correct title/description I often need to see all small details of the picture.

[sivaraam]

Uploading a screenshot is very unusual, 99% of the uploads are camera pictures.
So I am personally in favor of keeping this feature.

That was just an example. It's bound to happen for many other pictures that aren't screenshots too. Particularly when you have kept the brightness of your screen to the lowest possible setting. To give another example, I guess this would also happen for pictures of natural scenery such as mountains that are highly detailed.

That being said, I think the upload screen needs a way to view the picture more clearly and zooming/scrolling into the picture. In order to write a correct title/description I often need to see all small details of the picture.

Yeah, I do support this as it would be useful to preview them to be sure we're uploading the right one. I guess it's a little difficult with the current upload screen. The text clutter up the image too.

[tanvidadu]

Is adding Zoom feature into image up for grabs?

[nicolas-raoul]

@tanvidadu Yes if you create an activity to zoom/pan into the picture, I am pretty sure it will get used. Thanks! :-)

[tanvidadu]

I start working on it

[tanvidadu]

Workflow: A class which has a function that takes imageview as parameter to be zoomed in zoomed out. class implements onTouchListener. Is it okay ?

[neslihanturan]

What kind of zoom/pan do you think @nicolas-raoul ? Don't you also think the upload screen is very crowded for such thing? @tanvidadu probably discussing more before implementation would be nicer. Can you share some mockups, what do you have in your mind?

[tanvidadu]

I was aiming for something like this

[neslihanturan]

I mean, how do you think to adapt this into our app?

[tanvidadu]

we could apply this feature to the image at the background.

In order to write a correct title/description I often need to see all small details of the picture.

[neslihanturan]

I am not able to imagine this since we already have buttons on top of image at the background, and a transparent layer. As a user I wouldn't expect to zoom an image behind a semitransparent layer. I think this can be only implemented after UI screen is improved. But it is my personal opinion and asking to the team for discussion, what do you think, team?

[sivaraam]

I agree with what you say @neslihanturan. But I think @nicolas-raoul didn't mean to incorporate the zoom feature into the current upload screen. I thought he advised @tanvidadu to create a separate activity that allows a given picture to be zoomed/panned which we could later use as part of the revamp of the upload screen. I might be wrong so it might be better to confirm this with him.

[misaochan]

I do agree that this needs further discussion. I'm not sure if allowing the user to directly zoom the background image in the upload activity is a good idea, and given that it is semi-transparent, will the user be able to see much?

As an alternative, could we have a "view image" option in the upload activity, and tapping on it could pop up a zoomable (and non-transparent) version of the image?

[nicolas-raoul]

I was thinking about something like below: A preview of the image is visible, and clicking on this thumbnail brings in the zoom/pan activity that @tanvidadu implemented. Pressing "Back" leaves the zoom/pan activity and brings the user back to adding more details about the picture.

I don't think this is a crowded screen, but the preview can be made much smaller if needed, for instance as a thumbnail at the right of the license.

[misaochan]

I think @nicolas-raoul 's mockup looks great. :) Although I do wonder how we will make it work with #604 , which will be implemented soon.

[neslihanturan]

Maybe same design would work with a grid composed from uploading multiple images, sure zooming and moving should work independently on each grid cells, what do you think?

Besides, since I am not able to read the language on mockup, can't understand which field is which one. Can you please write them from top to the bottom?

[misaochan]

Maybe same design would work with a grid composed from uploading multiple images, sure zooming and moving should work independently on each grid cells, what do you think?

Sounds good, but we would probably need to set a limit to the number of pictures displayed.

Besides, since I am not able to read the language on mockup, can't understand which field is which one. Can you please write them from top to the bottom?

I can't read that language either, but I am pretty sure the ordering of the fields is title and desc on top, then license and policies on the bottom. ;) Just realized that that mockup is missing the "use previous title/description" button, though. It's also missing the 'i' icon on the title and desc fields, and the license selection spinner.

[nicolas-raoul]

Sorry it was just to give an idea, a better mockup would be needed :-)

[misaochan]

Haha, sorry, Nicolas, didn't mean to rag on your mockup! :) Just mentioned it so that the person working on the implementation knows what else to add.

[tanvidadu]

I am almost done with zoom/ pan class should i send a PR for the same ? thanks :)

[misaochan]

Hi @tanvidadu , please feel free to submit your PR whenever. :) We will review it and get back to you with any changes that are needed (if any).

[tanvidadu]

Sorry for delay I changed my class a bit in reference to issue #1128
Please tell me which mock-up would better. Thanks !!

[harisankerPradeep]

Can someone look into the possibility of using this here? It's a fullscreen image viewer based on fresco with pinch to zoom and swipe to dismiss enabled. Downsampling is also supported. As far as I can see this can be used in two places. I've used it a few times and it works like a charm. Maybe it can also be used in the recent upload screen.

Cheers!

[sivaraam]

@maskaravivek I don't think the main reason for opening this issue, lack of readability as a consequence of showing the image being uploaded in the background, has strongly been opposed by anyone. So, I do think the upload screen needs a re-design in that respect. If that's to be covered as part of #1128 then we could leave this closed else I would possibly expect a better reason for closing this issue.

[neslihanturan]

I agree this task is not totally about zooming, probably @maskaravivek merged this since zoom feature is merged though.

[domdomegg]

Fixed in #1968