From a536d33644ea32621681b2b53e4d4312c36ef937 Mon Sep 17 00:00:00 2001 From: Will Ernest Date: Tue, 28 Aug 2018 16:56:13 -0700 Subject: [PATCH] fix(list): Support ellipsis the single line list item --- demos/dialog.html | 66 +- demos/drawer/dismissible-drawer.html | 36 +- demos/drawer/modal-drawer.html | 36 +- demos/drawer/permanent-drawer.html | 45 +- demos/list.html | 1821 +++++++++++++----------- demos/menu-surface.html | 31 +- demos/menu.html | 120 +- packages/mdc-dialog/README.md | 66 +- packages/mdc-drawer/README.md | 103 +- packages/mdc-list/README.md | 179 ++- packages/mdc-list/mdc-list.scss | 6 +- packages/mdc-menu/README.md | 26 +- packages/mdc-theme/_color-palette.scss | 6 +- 13 files changed, 1569 insertions(+), 972 deletions(-) diff --git a/demos/dialog.html b/demos/dialog.html index 9d707358fe3..ecea24e5305 100644 --- a/demos/dialog.html +++ b/demos/dialog.html @@ -149,17 +149,61 @@

    -
  • None
    • -
  • Callisto
    • -
  • Ganymede
    • -
  • Luna
    • -
  • Marimba
    • -
  • Schwifty
    • -
  • Callisto
    • -
  • Ganymede
    • -
  • Luna
    • -
  • Marimba
    • -
  • Schwifty
    • +
  • + + None + +
    • +
  • + + Callisto + +
    • +
  • + + Ganymede + +
    • +
  • + + Luna + +
    • +
  • + + Marimba + +
    • +
  • + + Schwifty + +
    • +
  • + + Callisto + +
    • +
  • + + Ganymede + +
    • +
  • + + Luna + +
    • +
  • + + Marimba + +
    • +
  • + + Schwifty + +

- - -
  • + + + +
    • +
  • Leading Checkbox
    - -
    • -
  • + + + +
    • +
  • Leading Checkbox
    - -
    • - - -
    -

    Avatar List

    - -
    -
    -

    Avatar List (dense)

    - -
    -
    -

    Example - Avatar with Text

    - -
    -
    -

    Metadata

    - -
    -
    -

    Metadata (Dense)

    - -
    -
    -

    Trailing Checkbox

    - +
    +
    +

    Avatar List

    + +
    +
    +

    Avatar List (dense)

    + +
    +
    +

    Example - Avatar with Text

    + +
    +
    +

    Metadata

    + +
    +
    +

    Metadata (Dense)

    + +
    +
    +

    Trailing Checkbox

    + -
    -
    -

    Avatar + Metadata

    - -
    -
    -

    Avatar + Metadata (Dense)

    - -
    -
    -

    Example - Avatar with Text and Icon

    - -
    - -
    -

    Two-Line List

    -
    -

    Text-Only

    -
      -
    • +
      • +
    +
    +
    +

    Avatar + Metadata

    +
      +
    • + + + Single-line item + + $10.00 +
      • +
    • + + + Single-line item + + $20.00 +
      • +
    • + + + Single-line item + + $30.00 +
      • +
    +
    +
    +

    Avatar + Metadata (Dense)

    +
      +
    • + + + Single-line item + + $10.00 +
      • +
    • + + + Single-line item + + $20.00 +
      • +
    • + + + Single-line item + + $30.00 +
      • +
    +
    +
    +

    Example - Avatar with Text and Icon

    + +
    +
    +
    +

    Two-Line List

    +
    +

    Text-Only

    +
      +
    • Two-line item Secondary text -
      • -
    • +
      • +
    • Two-line item Secondary text -
      • -
    • +
      • +
    • Two-line item Secondary text -
      • -
    -
    -
    -

    Text-Only (Dense)

    -
      -
    • +
      • +
    +
    +
    +

    Text-Only (Dense)

    +
      +
    • Two-line item Secondary text -
      • -
    • +
      • +
    • Two-line item Secondary text -
      • -
    • +
      • +
    • Two-line item Secondary text -
      • -
    -
    -
    -

    Graphic

    -
      -
    • - - +
      • +
    +
    +
    +

    Graphic

    +
      +
    • + + Two-line item Secondary text -
      • -
    • - - +
      • +
    • + + Two-line item Secondary text -
      • -
    • - - +
      • +
    • + + Two-line item Secondary text -
      • -
    -
    -
    -

    Graphic (Dense)

    -
      -
    • - - +
      • +
    +
    +
    +

    Graphic (Dense)

    +
      +
    • + + Two-line item Secondary text -
      • -
    • - - +
      • +
    • + + Two-line item Secondary text -
      • -
    • - - +
      • +
    • + + Two-line item Secondary text -
      • -
    -
    -
    -

    Avatar List

    -
      -
    • - - +
      • +
    +
    +
    +

    Avatar List

    +
      +
    • + + Two-line item Secondary text -
      • -
    • - - +
      • +
    • + + Two-line item Secondary text -
      • -
    • - - +
      • +
    • + + Two-line item Secondary text -
      • -
    -
    -
    -

    Avatar List (dense)

    -
      -
    • - - +
      • +
    +
    +
    +

    Avatar List (dense)

    +
      +
    • + + Two-line item Secondary text -
      • -
    • - - +
      • +
    • + + Two-line item Secondary text -
      • -
    • - - +
      • +
    • + + Two-line item Secondary text -
      • -
    -
    -
    -

    Metadata

    -
      -
    • +
      • +
    +
    +
    +

    Metadata

    +
      +
    • Two-line item Secondary text - $10.00 -
      • -
    • + $10.00 +
      • +
    • Two-line item Secondary text - $20.00 -
      • -
    • + $20.00 +
      • +
    • Two-line item Secondary text - $30.00 -
      • -
    -
    -
    -

    Metadata (Dense)

    -
      -
    • + $30.00 +
      • +
    +
    +
    +

    Metadata (Dense)

    +
      +
    • Two-line item Secondary text - $10.00 -
      • -
    • + $10.00 +
      • +
    • Two-line item Secondary text - $20.00 -
      • -
    • + $20.00 +
      • +
    • Two-line item Secondary text - $30.00 -
      • -
    -
    -
    -

    Example - Two-line Avatar + Text + Icon

    -
      -
    • + $30.00 +
      • +
    +
    +
    +

    Example - Two-line Avatar + Text + Icon

    + -
    -
    -

    Lists w/ Ellipsis

    - +
    +
    +

    Lists w/ Ellipsis

    +
      +
    • - + Photos This is some secondary text - + -
      • -
    • +
      • +
    • - + Photos of my best photography using my finely tuned skills and eye This is some secondary text - + -
      • -
    • +
      • +
    • - + Work Photos This is a description of work photos from the years 2018 to present time while I was a barista - + -
      • -
    -
    -
    -
    -

    List Dividers

    -
    -

    Full-Width Dividers

    -
      -
    • Single-line item - section 1
      • -
    • Single-line item - section 1
      • -
    • Single-line item - section 1
      • - -
    • Single-line item - section 2
      • -
    • Single-line item - section 2
      • -
    -
    -
    -

    Inset Dividers

    -
      -
    • - - Single-line item - section 1 -
      • -
    • - - Single-line item - section 1 -
      • -
    • - - Single-line item - section 1 -
      • - -
    • - - Single-line item - section 2 -
      • -
    • - - Single-line item - section 2 -
      • -
    -
    -
    -
    -

    List Groups

    -
    -

    Basic Usage

    -
    -

    List 1

    -
      -
    • Single-line item
      • -
    • Single-line item
      • -
    • Single-line item
      • -
    -
    -

    List 2

    -
      -
    • Single-line item
      • -
    • Single-line item
      • -
    • Single-line item
      • -
    -
    -
    -
    -

    Example - Two-Line Lists, Avatars, Metadata, Inset Dividers

    -
    -

    Folders

    -
      -
    • +
      • +
    +
    +
    +
    +

    List Dividers

    +
    +

    Full-Width Dividers

    +
      +
    • + +Single-line item - section 1 + +
      • +
    • + +Single-line item - section 1 + +
      • +
    • + +Single-line item - section 1 + +
      • + +
    • + +Single-line item - section 2 + +
      • +
    • + + Single-line item - section 2 + +
      • +
    +
    +
    +

    Inset Dividers

    +
      +
    • + + + Single-line item - section 1 + +
      • +
    • + + + Single-line item - section 1 + +
      • +
    • + + + Single-line item - section 1 + +
      • + +
    • + + + Single-line item - section 2 + +
      • +
    • + + + Single-line item - section 2 + +
      • +
    +
    +
    +
    +

    List Groups

    +
    +

    Basic Usage

    +
    +

    List 1

    +
      +
    • + +Single-line item + +
      • +
    • + +Single-line item + +
      • +
    • + +Single-line item + +
      • +
    +
    +

    List 2

    +
      +
    • + +Single-line item + +
      • +
    • + +Single-line item + +
      • +
    • + +Single-line item + +
      • +
    +
    +
    +
    +

    Example - Two-Line Lists, Avatars, Metadata, Inset Dividers

    +
    +

    Folders

    + -
    -

    Files

    - +
    +

    Files

    +
      +
    • - + Vacation Itinerary Jan 10, 2014 - - info - -
      • -
    • + + info + +
      • +
    • - + Kitchen Remodel Jan 20, 2014 - - info - -
      • -
    -
    -
    -
    -
    -

    Interactive Lists (with ink ripple)

    -
    -

    Example - Interactive List

    - -
    -
    - - - - - + - + }; + + [].slice.call(document.querySelectorAll('.mdc-list')).forEach(function(ele) { + var list = mdc.list.MDCList.attachTo(ele); + list.wrapFocus = true; + }); + + addRippleToListItems(document.getElementById('leading-checkbox-list')); + addRippleToListItems(document.getElementById('trailing-checkbox-list')); + }); + + diff --git a/demos/menu-surface.html b/demos/menu-surface.html index 6dc317f1b82..b83bd904086 100644 --- a/demos/menu-surface.html +++ b/demos/menu-surface.html @@ -50,12 +50,33 @@
    diff --git a/demos/menu.html b/demos/menu.html index 136ec647606..3cf6fd1a118 100644 --- a/demos/menu.html +++ b/demos/menu.html @@ -50,11 +50,31 @@
      - - - - - + + + + +
    @@ -78,7 +98,9 @@ - Single + + Single + - - + + - + @@ -133,7 +173,9 @@ - Cut + + Cut + ⌘X @@ -166,13 +214,19 @@
    @@ -260,7 +320,9 @@ - Cut + + Cut + ⌘X diff --git a/packages/mdc-dialog/README.md b/packages/mdc-dialog/README.md index 809259f4188..8cd5e0b7abb 100644 --- a/packages/mdc-dialog/README.md +++ b/packages/mdc-dialog/README.md @@ -92,17 +92,61 @@ a `mdc-dialog__body--scrollable` modifier to allow scrolling in the dialog.
      -
    • None
      • -
    • Callisto
      • -
    • Ganymede
      • -
    • Luna
      • -
    • Marimba
      • -
    • Schwifty
      • -
    • Callisto
      • -
    • Ganymede
      • -
    • Luna
      • -
    • Marimba
      • -
    • Schwifty
      • +
    • + + None + +
      • +
    • + + Callisto + +
      • +
    • + + Ganymede + +
      • +
    • + + Luna + +
      • +
    • + + Marimba + +
      • +
    • + + Schwifty + +
      • +
    • + + Callisto + +
      • +
    • + + Ganymede + +
      • +
    • + + Luna + +
      • +
    • + + Marimba + +
      • +
    • + + Schwifty + +