Page MenuHomePhabricator

Improve UI in previous versions
Open, LowPublic4 Estimate Story Points

Description

Visual updates

Article descriptions
Image captions

👉Visuals on Zeplin


Conceptual additions

  • The article description and image caption feed will be updated to match the new lighter “cardless” UI that’s used in V4.
  • Revised information hierarchy (see above screens)
  • Respects original image aspect ratio (Details: T240196)
  • Image zoom behavior, according to T242138, should be incorporated

Event Timeline

Charlotte triaged this task as Medium priority.Dec 11 2019, 2:13 PM
Charlotte removed schoenbaechler as the assignee of this task.Wed, Jan 8, 12:41 PM
Charlotte lowered the priority of this task from Medium to Low.

Hi @schoenbaechler

Respects original image aspect ratio (similar to new image tagging UI)

Not sure if you'd like it to have a minimum height of the image, and here are some examples of the current implementation.

The ratio of the image is: 1.77 (16:9)

schoenbaechler added a comment.EditedTue, Jan 14, 8:03 AM

Thanks @cooltey, looks clean already... 😳 In regards to:

Not sure if you'd like it to have a minimum height of the image (...)

Ideally, images should not be restricted in height. They should stretch to full viewport width and “organically” push down content depending on the image’s height. Details in T240196:

  • Image cropping
    • The concept respects the variety of image formats on Commons.
    • The idea is to keep as much of the image as possible, landscape stays landscape – portrait stays portrait.
    • Images are not cropped, should be fully visible from the start and are zoomable.

Let me know if you need more infos...

Hi @schoenbaechler

I've tried to make the image "fit screen width" and "wrap to its height", but unfortunately, the image library we've been using now does not support that. (Please see here: https://frescolib.org/docs/using-simpledraweeview.html)

The best way we can do might be setting a fixed height, for example, 300dp for portrait and 200dp for landscape and without any scaleType attributes (Please see: https://developer.android.com/reference/android/widget/ImageView.ScaleType).

Here are the screenshots:

Not sure if you are okay with this, but it looks good to me.

note: might have a solution for the wrap_content, but it does cause some unexpected behaviors after image loaded. (https://stackoverflow.com/a/34075281/4545041)

schoenbaechler added a comment.EditedWed, Jan 15, 10:35 AM

Thanks @cooltey. Your proposed solution for article descriptions is perfectly fine, since the article text is the center of the task, not the image.


In regards to image captions though, images are the center of the task, that’s why the designs for image captions differ on Zeplin. Images should be completely visible from the start and I’m fearing that the zoom experience is negatively affected with your proposed solution to apply a crop:

I’m having the same behavior in mind as defined for image tags. Check out the red square on the images below. Its dimensions are defined by the device’s current width, but the canvas itself stays the same, regardless of a portrait or landscape image.

Of course, the red background is only used to illustrate the canvas. In reality, this would look like this:

Is this solution feasible for handling images in the captions and tags task (T240196)? If it’s really not possible, this would have substantial implications on both UI designs.

Hi @schoenbaechler

Is this solution feasible for handling images in the captions and tags task (T240196)? If it’s really not possible, this would have substantial implications on both UI designs.

It is possible when to have a fixed image height set.

Here are the examples of setting the image height as 300dp.

If we set it to 400dp, it would have too much empty space on the top and bottom of the images.

Charlotte removed cooltey as the assignee of this task.Thu, Jan 16, 4:53 PM
Charlotte added a subscriber: cooltey.