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

Issue 616676 link

Starred by 3 users

Issue metadata

Status: Fixed
Owner:
Closed: Aug 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Bug

Blocking:
issue 425625



Sign in to add a comment

[MD History] List cards should have a shadow

Project Member Reported by tsergeant@chromium.org, Jun 2 2016

Issue description

The 'cards' in the main view of MD History are not actually cards, they are individual elements with a header and footer tacked on either end. This makes using a normal box-shadow to add a Material Design shadow somewhere between difficult and impossible.

We need to come up with a way around this so that the cards look as pretty as they are meant to.
 
Labels: -Pri-2 Pri-3
Cc: -calamity@chromium.org dbeam@chromium.org
Owner: calamity@chromium.org

Comment 3 by dbeam@chromium.org, Jul 21 2016

Cc: esprehn@chromium.org egarciad@chromium.org
for context: <iron-list> used to do a poor job with really big items (i.e. as big or bigger than the screen).  so the history folks split large cards into small row items.

If that's still necessary for a11y or performance, basically, we have this:
https://jsfiddle.net/341qnkx8/

And we need a way of wrapping a whole bunch of rows with top/bottom caps with a shadow, like this:
https://jsfiddle.net/y3p2o49z/

but without the ability to use a wrapper (i.e. the <section>).

esprehn@/egarciad@: thoughts?
Project Member

Comment 4 by bugdroid1@chromium.org, Aug 11 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/48dce59e6b091073c1f119ac531ccf43349289eb

commit 48dce59e6b091073c1f119ac531ccf43349289eb
Author: calamity <calamity@chromium.org>
Date: Thu Aug 11 07:42:06 2016

[MD History] Use proper shadows for cards.

This CL adds proper shadows to the MD History cards in all views by
adding a drop shadow filter on the history-list and box shadows on
the history-grouped-list and synced-device-card.

In order to prevent the scrollbars from rendering shadows, the scroll
behavior of the history-list has been changed to use the iron list
as a scroll target.

A background div has been added to each history-item which is 1px
taller than the actual item in order to cover the shadow that renders
beneath the next item which shows through at non-integer zoom levels.

BUG= 616676 
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2206363003
Cr-Commit-Position: refs/heads/master@{#411284}

[modify] https://crrev.com/48dce59e6b091073c1f119ac531ccf43349289eb/chrome/browser/resources/md_history/grouped_list.html
[modify] https://crrev.com/48dce59e6b091073c1f119ac531ccf43349289eb/chrome/browser/resources/md_history/history_item.html
[modify] https://crrev.com/48dce59e6b091073c1f119ac531ccf43349289eb/chrome/browser/resources/md_history/history_list.html
[modify] https://crrev.com/48dce59e6b091073c1f119ac531ccf43349289eb/chrome/browser/resources/md_history/history_list.js
[modify] https://crrev.com/48dce59e6b091073c1f119ac531ccf43349289eb/chrome/browser/resources/md_history/shared_style.html
[modify] https://crrev.com/48dce59e6b091073c1f119ac531ccf43349289eb/chrome/browser/resources/md_history/synced_device_card.html
[modify] https://crrev.com/48dce59e6b091073c1f119ac531ccf43349289eb/chrome/browser/resources/md_history/synced_device_manager.html
[modify] https://crrev.com/48dce59e6b091073c1f119ac531ccf43349289eb/chrome/test/data/webui/md_history/history_list_test.js
[modify] https://crrev.com/48dce59e6b091073c1f119ac531ccf43349289eb/ui/webui/resources/cr_elements/cr_shared_menu/cr_shared_menu.js

Status: Fixed (was: Available)

Sign in to add a comment