<!-- @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>