#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)
comment:1 Changed 3 years ago by mario
- Description modified (diff)
Changed 3 years ago by mario
Changed 3 years ago by mario
comment:2 Changed 3 years ago by mario
- Description modified (diff)
Changed 3 years ago by mario
Changed 3 years ago by mario
Changed 3 years ago by mario
Changed 3 years ago by mario
Changed 3 years ago by mario
Changed 3 years ago by mario
Changed 3 years ago by mario
comment:3 Changed 3 years ago by mario
- Description modified (diff)
comment:4 Changed 3 years ago by mario
- Description modified (diff)
comment:5 Changed 3 years ago by mario
- Description modified (diff)
comment:6 Changed 3 years ago by mario
- Description modified (diff)
comment:7 Changed 3 years ago by mario
- Description modified (diff)
Changed 3 years ago by mario
comment:8 Changed 3 years ago by mario
- Description modified (diff)
comment:9 Changed 3 years ago by mario
- Description modified (diff)
comment:10 Changed 3 years ago by mario
- Description modified (diff)
comment:11 Changed 3 years ago by mario
- Description modified (diff)
comment:12 Changed 3 years ago by mario
- Description modified (diff)
comment:13 Changed 3 years ago by mario
- Description modified (diff)
Changed 3 years ago by mario
comment:14 Changed 3 years ago by lisabielik
comment:15 Changed 3 years ago by mario
- Description modified (diff)
- Ready set
Updated the description with the new string. Thanks!
comment:16 Changed 3 years ago by mario
- Priority changed from Unknown to P2
comment:17 Changed 3 years ago by jand
- Resolution set to fixed
- Status changed from new to closed
comment:18 Changed 2 years ago by mario
- Milestone set to Adblock-Browser-for-iOS-next
comment:19 Changed 2 years ago 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.
comment:20 Changed 2 years ago by jand
- Resolution set to fixed
- Status changed from reopened to closed
comment:21 Changed 2 years ago by traynard
- Verified working set
comment:22 Changed 2 years 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)
comment:23 Changed 2 years ago by jand
- Resolution set to fixed
- Status changed from reopened to closed
comment:24 Changed 2 years ago by traynard
- Verified working set
Block Ads on this Site