Opened 12 months ago

Closed 3 months ago

Last modified 3 months ago

#4736 closed change (fixed)

[UI] Redesign top bar

Reported by: mario 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

This issue is part of ABB's redesign as described under #4706.
Logic/UI which is not covered within this issue stays in place as it is.

What to change

Apply the new design to ABB's top bar as shown in this mockup and this style guide

UI

  • Add bookmark symbol to the left of the URL bar as shown in this mockup
    • If the visited website is bookmarked, display the bookmark symbol in an active state as shown in this mockup
    • If the visited website is not bookmarked, display the bookmark symbol in an inactive state as shown in this mockup
  • Add a "burger menu icon" to the right of the URL bar as shown in this mockup
  • Add a "burger menu" which is triggered by the "burger menu icon" as shown in this mockup
    • Add the icons as shown under Copy to the burger menu
    • Add a toggle to item 1 as shown in this mockup

Logic

  • If a website is displayed, show all top bar elements as active as shown in this mockup
  • If the dashboard is displayed, hide the following elements in the top bar as shown in this mockup
    • Bookmark icon
    • Refresh icon
  • If the dashboard is displayed, mark the following elements in the burger menu as inactive as shown in this mockup
    • Block Ads on this Site
    • Add Bookmark
    • Remove Bookmark
    • Share
  • If the burger menu icon is tapped, display the burger menu as shown in this mockup
    • Mark all bottom bar icons as inactive
    • If "Block Ads on this Site" is tapped while inactive
      • Display the trigger next to the element as active
      • Remove the visited website from the whitelist
    • If the "Block Ads on this Site" is tapped while active
      • Display the trigger next to the element as inactive
      • Whitelist the visited website
    • If "Open a new tab" is tapped, open a new, empty tab as shown in (follow up at #4739)
    • If "Add Bookmark" is tapped, ad the currently opened website to the bookmarks
    • If "Remove Bookmark" is tapped, remove the currently opened website from the bookmarks
    • If "Share" is tapped, open iOS' default share dialog
    • If "History" is tapped, open the history (follow up at #4742)
    • If "Settings" is tapped, open ABB's settings

Copy

Burger Menu

  • Item 1: Block Ads on this Site
  • Item 2: Open New Tab
  • Item 3 inactive: Add Bookmark
  • Item 3 active: Remove Bookmark
  • Item 4: Share
  • Item 5: History
  • Item 6: Settings

Attachments

Style Guides

Assets

Mockups (as shown in description)

Attachments (12)

03 - Page@2x.png (49.8 KB) - added by mario 12 months ago.
04a - Page (not focused search field)@2x.png (453.7 KB) - added by mario 12 months ago.
02a - Menu - AB Enabled - Rem Bookmark@2x.png (156.5 KB) - added by mario 12 months ago.
02b - Menu - AB Enabled - Add Bookmark@2x.png (155.9 KB) - added by mario 12 months ago.
02c - Menu - AB Disabled - Rem Bookmark@2x.png (157.1 KB) - added by mario 12 months ago.
02d - Menu - AB Disabled - Add Bookmark@2x.png (156.5 KB) - added by mario 12 months ago.
03 - Dashboard@2x.png (49.9 KB) - added by mario 12 months ago.
04a - Page (not focused search field)@2x.2.png (453.6 KB) - added by mario 12 months ago.
04b - Page (focused search field)@2x.png (470.6 KB) - added by mario 12 months ago.
03b - Dashboard - Menu.png (58.4 KB) - added by mario 12 months ago.
Adblock Browser Assets.zip (235.1 KB) - added by mario 12 months ago.
IMG_1290.png (43.9 KB) - added by traynard 3 months ago.
iPhone5-Landscape

Download all attachments as: .zip

Change History (36)

comment:1 Changed 12 months ago by mario

  • Description modified (diff)

Changed 12 months ago by mario

comment:2 Changed 12 months ago by mario

  • Description modified (diff)

Changed 12 months ago by mario

comment:3 Changed 12 months ago by mario

  • Description modified (diff)

comment:4 Changed 12 months ago by mario

  • Description modified (diff)

comment:5 Changed 12 months ago by mario

  • Description modified (diff)

comment:6 Changed 12 months ago by mario

  • Description modified (diff)

comment:7 Changed 12 months ago by mario

  • Description modified (diff)

Changed 12 months ago by mario

comment:8 Changed 12 months ago by mario

  • Description modified (diff)

comment:9 Changed 12 months ago by mario

  • Description modified (diff)

comment:10 Changed 12 months ago by mario

  • Description modified (diff)

comment:11 Changed 12 months ago by mario

  • Description modified (diff)

comment:12 Changed 12 months ago by mario

  • Description modified (diff)

comment:13 Changed 12 months ago by mario

  • Description modified (diff)

Changed 12 months ago by mario

comment:14 Changed 12 months ago by lisabielik

Block Ads on this Site

comment:15 Changed 11 months ago by mario

  • Description modified (diff)
  • Ready set

Updated the description with the new string. Thanks!

comment:16 Changed 11 months ago by mario

  • Priority changed from Unknown to P2

comment:17 Changed 9 months ago by jand

  • Resolution set to fixed
  • Status changed from new to closed

comment:18 Changed 5 months ago by mario

  • Milestone set to Adblock-Browser-for-iOS-next

comment:19 Changed 5 months ago by traynard

  • Resolution fixed deleted
  • Status changed from closed to reopened

Few Top Nav issues:

  1. When opening a new tab using the hamburger menu, if you attempt to navigate to any site, the page will load blank until you switch tabs and return.

Steps to Reproduce:
-Click hamburger menu
-Click Open new tab
-In newly opened tab, navigate to www.adblockplus.org
notice page is blank
-switch to another open tab
-switch back to adblockplus.org tab
notice page is now showing the site as expected


  1. The bookmark star shown in the address bar does not bookmark the site when tapped. This could be confusing for the user as generally seeing a star icon on the browser while surfing websites should allow the user to tap it to quickly bookmark. In the old version of ABB, this star existed on the bottom bar. With ABB 2.0.0, there is a star in the address bar that is nothing but an idicator (when tapped, the address bar field activates) and a star at the bottom which opens the bookmarks window, so there is no longer a way to easily do this without expanding the menu each time. We should allow users to tap the star in the address bar to bookmark the page they are surfing.
Last edited 5 months ago by traynard (previous) (diff)

comment:20 Changed 4 months ago by jand

  • Resolution set to fixed
  • Status changed from reopened to closed

comment:21 Changed 3 months ago by traynard

  • Verified working set

comment:22 Changed 3 months ago by traynard

  • Resolution fixed deleted
  • Status changed from closed to reopened
  • Verified working unset

Additional issue found:
When viewing landscape on an iPhone 5 or smaller, the hamburger menu is cut off. Since the menu does not allow for scrolling, users are blocked off from utilizing certain options.

See attached image for iPhone 5 example (Settings option is cut-off)

Changed 3 months ago by traynard

iPhone5-Landscape

comment:23 Changed 3 months ago by jand

  • Resolution set to fixed
  • Status changed from reopened to closed

comment:24 Changed 3 months ago by traynard

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