Opened 2 months ago

Closed 7 weeks ago

Last modified 5 weeks ago

#5486 closed defect (fixed)

Fix minor visual issues with the new UI

Reported by: tpregueiro Assignee:
Priority: P2 Milestone: Adblock-Browser-for-iOS-2.0.0
Module: Adblock-Browser-for-iOS Keywords:
Cc: Blocked By:
Blocking: #4706 Platform: Adblock Browser for iOS
Ready: yes Confidential: no
Tester: Unknown Verified working: yes
Review URL(s):

Description (last modified by mario)

Background

With #4706 we introduced a new UI to ABB for iOS. While adapting the specifications, minor issues have been found, which need to be adjusted to match the overall style.

Want to fix

Please fix the following issues as outlined in the style guides below:

  1. Last entry from the context (hamburger) menu should not have a separator (1pt grey line)
  2. Tabs icon in the bottom menu should not be clipped
  3. Back / Forward arrow icons in the bottom menu should not be clipped
  4. Remove unnecessary padding at the top of the first bookmark on the bookmarks page
  5. Undo button when you close a Tab should not be pixelate/interpolated
  6. Add separators to the bottom bar.
  7. When toggling the “Block Ads on this page” on and off, the whole row blinks, it shouldn’t.
  8. Remove the 1px line between the page and the loading blue bar. It becomes more visible when you load a website with a top navigation bar.

All fixes above can be found within the following specifications:

Attachments (5)

2017-08-09 17.37.08.jpg (75.0 KB) - added by tpregueiro 2 months ago.
padding issue on bookmarks
2017-08-09 17.37.15.jpg (28.2 KB) - added by tpregueiro 2 months ago.
1px white space between blue loading bar and the page content
Screenshot 2017-08-09 19.12.31.png (18.0 KB) - added by tpregueiro 2 months ago.
icons clipped
2017-08-09 19.13.32.jpg (77.5 KB) - added by tpregueiro 2 months ago.
undo icon super pixelated
Adblock Browser Assets.zip (124.1 KB) - added by mario 2 months ago.

Download all attachments as: .zip

Change History (14)

Changed 2 months ago by tpregueiro

padding issue on bookmarks

Changed 2 months ago by tpregueiro

1px white space between blue loading bar and the page content

Changed 2 months ago by tpregueiro

icons clipped

Changed 2 months ago by tpregueiro

undo icon super pixelated

comment:1 Changed 2 months ago by mario

  • Component changed from Unknown to Adblock-Browser-for-iOS
  • Description modified (diff)
  • Priority changed from Unknown to P2
  • Ready set
  • Summary changed from Minor visual issues to Fix minor visual issues with the new UI
  • Type changed from change to defect

comment:2 Changed 2 months ago by jand

Here is my status report:

  1. Fixed
  1. I can't fix. I need new sets of icons from the designer.
  1. DTTO.
  1. Fixed.
  1. I can't fix. I need new sets of icons from the designer.
  1. I do not know how to fix it. I can make bottom bar visible in all cases. However, in this screenshot https://issues.adblockplus.org/attachment/ticket/4736/04a%20-%20Page%20(not%20focused%20search%20field)%402x.2.png bottom bar is not visible when page is loaded. What was the intend of the designer in this case?
  1. That "blinking" was caused by selection animation of cells in menu view. All cells in menu view have the same selection effect. I disabled that effect only for the first cell. It fixed the issue, however the look of the first cell do not match to look of the rest of cells in menu view. Can be this menu view revisited by designer?
  1. Fixed

comment:3 Changed 2 months ago by mario

@jand,
Regarding 2., 3., 5., can you specify in what way you need different icons? The source icons don't appear to be clipped/interpolated. Do they need to be in a specific resolution? If so, can you state which?

Regarding 7., the style of the menu item can't be maintained if you remove the tap effect?

comment:4 Changed 2 months ago by tpregueiro

@jand regarding point 6, sorry I haven't explain myself correctly. What I meant was that we're missing the grey border on both bars. See screenshot explaining: https://www.dropbox.com/s/rhf936r3ecdop3d/Screenshot%202017-08-21%2012.26.36.png?dl=0

For UI specification please see Zeplin https://app.zeplin.io/project/57fcfa623fd034515ee3d6e3/screen/58527d9989efd6de780bc06a

No additional behavioral changes are needed. The bars should still disappear as the user scrolls down, and reappear as user scrolls up. That's working as expected.

Last edited 2 months ago by tpregueiro (previous) (diff)

Changed 2 months ago by mario

comment:5 Changed 2 months ago by mario

@jand, I've just attached a file with updated assets regarding 2., 3. and 5.:
https://issues.adblockplus.org/attachment/ticket/5486/Adblock%20Browser%20Assets.zip

comment:6 Changed 2 months ago by jand

2., 3., 5. and 6.

7: I still do not know how to fix that issue. Can you check the latest build if you are contented with the current implementation?

comment:7 Changed 2 months ago by tpregueiro

@jand, according to your previous comment (https://issues.adblockplus.org/timeline?from=2017-08-18T12%3A30%3A48Z&precision=second), this "I disabled that effect only for the first cell." makes sense even if the look and feel is dfiferent between the different cells in the menu. I have discussed this with @martin and we both agree this is a good fix. I have tested in the latest build (https://rink.hockeyapp.net/apps/17fe112a9a87264d60d12934005e92f8/app_versions/655) and it's working correctly.

comment:8 Changed 7 weeks ago by mario

  • Milestone set to Adblock-Browser-for-iOS-2.0.0
  • Resolution set to fixed
  • Status changed from new to closed

comment:9 Changed 5 weeks ago by traynard

  • Verified working set
Note: See TracTickets for help on using tickets.