selection.html 7.43 KB

Edit Raw Blame History

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!doctype html>
<html>
<head>

  <title>Selection</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">

  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>

  <link rel="import" href="../../polymer/polymer.html">
  <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
  <link rel="import" href="../../iron-ajax/iron-ajax.html">
  <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
  <link rel="import" href="../../iron-icon/iron-icon.html">
  <link rel="import" href="../../iron-icons/iron-icons.html">
  <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
  <link rel="import" href="../../paper-menu/paper-menu.html">
  <link rel="import" href="../../paper-item/paper-item.html">
  <link rel="import" href="../../paper-badge/paper-badge.html">
  <link rel="import" href="../iron-list.html">

  <dom-module id="x-app">

    <style>

      :host {
        @apply(--layout-fit);
        @apply(--layout-vertical);
        @apply(--paper-font-common-base);

        display: block;
        font-family: sans-serif;
      }

      .toolbar {
        background: var(--paper-pink-500);
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
        font-weight: bold;
      }

      .toolbar paper-icon-button {
        --paper-icon-button-ink-color: white;
      }

      #itemsList,
      #selectedItemsList {
        @apply(--layout-flex);
      }

      .item {
        @apply(--layout-horizontal);
        cursor: pointer;
        padding: 16px 22px;
        border-bottom: 1px solid #DDD;
      }

      .item:focus,
      .item.selected:focus {
        outline: 0;
        background-color: #ddd;
      }

      .item.selected .star {
        color: var(--paper-blue-600);
      }

      .item.selected:not(:focus) {
        background-color: var(--google-grey-100);
      }

      .avatar {
        height: 40px;
        width: 40px;
        border-radius: 20px;
        box-sizing: border-box;
        background-color: #DDD;
      }

      .pad {
        @apply(--layout-flex);
        @apply(--layout-vertical);
        padding: 0 16px;
      }

      .primary {
        font-size: 16px;
      }

      .secondary {
        font-size: 14px;
      }

      .dim {
        color: gray;
      }

      .star {
        width: 24px;
        height: 24px;
      }

      paper-badge {
        -webkit-transition: all 0.1s;
        transition: all 0.1s;
        opacity: 1;
        margin-top: 5px;
      }

      paper-badge[label="0"] {
        opacity: 0;
      }

      #starredView {
        width: 200px;
        border-left: 1px solid #ddd;
      }

      paper-item {
        white-space: nowrap;
        cursor: pointer;
        position: relative;
      }

      paper-item:focus {
        outline: 0;
        background-color: #ddd;
      }

      paper-item:hover::after {
        content: "－";
        width: 16px;
        height: 16px;
        display: block;
        border-radius: 50% 50%;
        background-color: var(--google-red-300);
        margin-left: 10px;
        line-height: 16px;
        text-align: center;
        color: white;
        font-weight: bold;
        text-decoration: none;
        position: absolute;
        right: 15px;
        top: calc(50% - 8px);
      }

      .noSelection {
        color: #999;
        margin-left: 10px;
        line-height: 50px;
      }

    </style>

    <template>
      <iron-ajax url="data/contacts.json" last-response="{{data}}" auto></iron-ajax>

      <paper-toolbar class="toolbar">
        <div class="flex">Inbox</div>
        <div style="position: relative;">
          <paper-icon-button icon="icons:star" alt="Starred" on-tap="_toggleStarredView"></paper-icon-button>
          <paper-badge label$="[[selectedItems.length]]"></paper-badge>
        </div>
      </paper-toolbar>
      <div class="flex horizontal layout">
        <div class="flex vertical layout">
          <!-- Main List for the items -->
          <iron-list id="itemsList" items="[[data]]" selected-items="{{selectedItems}}" selection-enabled multi-selection>
            <template>
              <div>
                <div tabindex="0" aria-label$="[[_getAriaLabel(item, selected)]]" class$="[[_computedClass(selected)]]">
                  <img class="avatar" src="[[item.image]]">
                  <div class="pad">
                    <div class="primary">
                      <span>[[index]]</span>
                      <span>[[item.name]]</span>
                    </div>
                    <div class="secondary dim">[[item.shortText]]</div>
                  </div>
                  <iron-icon icon$="[[iconForItem(selected)]]" class="star"></iron-icon>
                </div>
                <div class="border"></div>
              </div>
            </template>
          </iron-list>
        </div>
        <div id="starredView" class="vertical layout" hidden$="[[!showSelection]]">
          <template is="dom-if" if="[[!selectedItems.length]]">
            <div class="noSelection">Select a contact</div>
          </template>
          <!-- List for the selected items -->
          <iron-list id="selectedItemsList" items="[[selectedItems]]" hidden$="[[!selectedItems.length]]">
            <template>
              <paper-item on-tap="_unselect" tabindex="0">[[item.name]]</paper-item>
            </template>
          </iron-list>
        </div>
      </div>
    </template>
  </dom-module>

  <script>

    HTMLImports.whenReady(function() {

      Polymer({

        is: 'x-app',

        properties: {
          selectedItems: {
            type: Object
          },

          showSelection: {
            type: Boolean,
            value: true,
            observer: '_showSelectionChanged'
          }
        },

        iconForItem: function(isSelected) {
          return isSelected ? 'star' : 'star-border';
        },

        _computedClass: function(isSelected) {
          var classes = 'item';
          if (isSelected) {
            classes += ' selected';
          }
          return classes;
        },

        _unselect: function(e) {
          this.$.itemsList.deselectItem(e.model.item);
        },

        _toggleStarredView: function() {
          this.showSelection = !this.showSelection;
        },

        _showSelectionChanged: function() {
          this.$.selectedItemsList.fire('resize');
        },

        _getAriaLabel: function(item, selected) {
          return selected ? 'Deselect ' + item.name : 'Select ' + item.name;
        }
      });

   });

  </script>

</head>
<body unresolved>

  <x-app></x-app>

</body>
</html>