New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 820154 link

Starred by 2 users

Issue metadata

Status: Fixed
Owner:
Closed: Jun 2018
Cc:
Components:
EstimatedDays: ----
NextAction: 2018-05-09
OS: iOS
Pri: 0
Type: Task
Q2



Sign in to add a comment

Generate specs for the Collections bubble

Project Member Reported by rohitrao@chromium.org, Mar 8 2018

Issue description

This "bubble" is the container for all of the various collections in the app (Bookmarks, Recent Tabs, History, etc).  It's a translucent bubble in Regular form factors and a fullscreen view on phone Compact.

If you have a better name than "bubble", please let me know.

Specs:
- Positioning of the bubble in all size classes, including margins from each edge of the screen.
- Rounded corner radius
- Background color (Pete said ExtraLight blur effect with rgba 0.98/1/1/0.95.  I had to drop the alpha to 0.5 to get something that looked like the mocks.)
- Navbar background color when the tableview is scrolled up.

Assets:
- Drop shadow around the bubble.  Not sure what form this asset will take.  A stretchable image?  A 9-patch?

Mocks:
- Motion mocks for the animation as the bubble comes in and out.
 
Status: Started (was: Assigned)
The NextAction date has arrived: 2018-03-14
Cc: khalilcader@chromium.org
Owner: pschaffner@chromium.org
Issue 821830 has been merged into this issue.
Blocking: 825016
 Issue 825275  has been merged into this issue.
Khalil, this container view work shouldn't be blocking the cell work (825016) ... unless I'm missing something?
As per offline chat w/ pschaffner@, the inside table views/cells should be "elastic" and just stretch to fill whatever width, since we aren't insetting or setting max widths.
Blocking: -825016
Cc: gambard@chromium.org
Pete, you gave a couple sizes and colors in Issue 821830, but I could still use:

- more specifics on how to position the bubble on each formfactor+orientation
- motion mocks for the slide in and out animations
- the assets (or drawing code) for the drop shadow

Thanks!
Copying all specs from issue 821830 here to make it easier to reference (these also apply to menus, which are housed in the same container view):

NOTE: I would like to temporarily disable the background blur effect for bubble backgrounds. Would like to turn it back on eventually though, so don't rip out the plumbing :)

Background View Specs:
- corner radius: 13pt
- background color: #fafafa -> [NSColor colorWithHue:0 saturation:0 brightness:0.98 alpha:1]; OPAQUE
- shadow: "bubble_shadow*.png" found here: https://drive.google.com/corp/drive/folders/16eo-Zbtj_zFrWOKjIx-Y62Za_BZypoIY
- screen margins:
  - top/bottom: 15pt
  - left/right: 15pt
- position:
  - max-x: screen's trailing edge (respecting margin)
  - y: same as tools menu
- size:
  - width RxAny/CxC: min 320pt; max 414pt
  - height RxAny/CxC: run to screen's bottom edge (respecting margin)
  - width/height CxR: full screen

Motion Specs:
- animatable properties: x; slide in from trailing edge to leading edge of screen (https://gallery.googleplex.com/projects/MCHbtQVoQ2HCZT9mKItQUYF4/files/MCHtA7U1iMGr6zb4A_Hj3ZYl_WCONW2Q3Vk)
- in/out (same as menu):
  - duration:0.25
  - delay:0
  - usingSpringWithDamping: 0.85
  - initialSpringVelocity:0

Comment 14 by cmasso@google.com, Apr 10 2018

Labels: -Pri-1 -Q1 Q2 Pri-0

Comment 15 by sczs@chromium.org, Apr 11 2018

Labels: -Type-Bug Type-Task
Labels: Proj-UIRefresh

Comment 17 by marq@chromium.org, Apr 16 2018

Labels: Disable-Nags

Comment 18 by marq@chromium.org, Apr 16 2018

Labels: Disable-Nags
NextAction: 2018-05-09
The NextAction date has arrived: 2018-05-09
Owner: rohitrao@chromium.org
Rohit, can this be closed now?
Status: Fixed (was: Started)

Sign in to add a comment