Opened on 12/15/2016 at 11:01:51 AM
Closed on 09/13/2017 at 02:21:50 PM
Last modified on 09/15/2017 at 12:08:30 AM
#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)
Change History (36)
Changed on 12/15/2016 at 11:22:09 AM by mario
Changed on 12/15/2016 at 11:22:16 AM by mario
Changed on 12/15/2016 at 11:36:14 AM by mario
Changed on 12/15/2016 at 11:36:23 AM by mario
Changed on 12/15/2016 at 11:36:36 AM by mario
Changed on 12/15/2016 at 11:36:46 AM by mario
Changed on 12/15/2016 at 11:36:55 AM by mario
Changed on 12/15/2016 at 11:37:05 AM by mario
Changed on 12/15/2016 at 11:37:18 AM by mario
Changed on 12/15/2016 at 01:27:58 PM by mario
comment:10 Changed on 12/15/2016 at 02:17:25 PM by mario
- Description modified (diff)
comment:11 Changed on 12/15/2016 at 02:18:33 PM by mario
- Description modified (diff)
comment:12 Changed on 12/16/2016 at 11:04:12 AM by mario
- Description modified (diff)
comment:13 Changed on 12/16/2016 at 11:04:37 AM by mario
- Description modified (diff)
Changed on 12/16/2016 at 11:36:15 AM by mario
comment:14 Changed on 12/16/2016 at 02:26:25 PM by lisabielik
comment:15 Changed on 01/18/2017 at 01:02:24 PM by mario
- Description modified (diff)
- Ready set
Updated the description with the new string. Thanks!
comment:16 Changed on 01/18/2017 at 01:11:34 PM by mario
- Priority changed from Unknown to P2
comment:17 Changed on 03/29/2017 at 09:57:31 AM by jand
- Resolution set to fixed
- Status changed from new to closed
comment:18 Changed on 07/10/2017 at 07:52:04 AM by mario
- Milestone set to Adblock-Browser-for-iOS-next
comment:19 Changed on 07/21/2017 at 02:11:58 PM by traynard
- Resolution fixed deleted
- Status changed from closed to reopened
Few Top Nav issues:
- 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
- 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 on 07/25/2017 at 08:13:13 PM
by traynard
comment:20 Changed on 08/07/2017 at 02:54:10 PM by jand
- Resolution set to fixed
- Status changed from reopened to closed
comment:21 Changed on 09/11/2017 at 03:31:00 PM by traynard
- Verified working set
comment:22 Changed on 09/11/2017 at 05:41:36 PM 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 on 09/11/2017 at 05:42:11 PM by traynard
iPhone5-Landscape
comment:23 Changed on 09/13/2017 at 02:21:50 PM by jand
- Resolution set to fixed
- Status changed from reopened to closed
comment:24 Changed on 09/15/2017 at 12:08:30 AM by traynard
- Verified working set
Note: See
TracTickets for help on using
tickets.
@2x.2.png.html){kind=link}
@2x.png.html){kind=link}
@2x.png.html){kind=link}
@2x.png){kind=link}
@2x.2.png){kind=link}
@2x.png){kind=link}
Block Ads on this Site