npm-polymer-elements
Version:
Polymer Elements package for npm
295 lines (244 loc) • 7.89 kB
HTML
<!--
@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
-->
<html>
<head>
<title>Select contacts</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.3);
z-index: 1;
--paper-toolbar-title: {
font-size: 16px;
line-height: 16px;
font-weight: bold;
margin-left: 0;
};
}
.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:hover {
background-color: var(--google-grey-100);
}
.item:focus,
.item.selected:focus {
outline: 0;
}
.item.selected .star {
color: var(--paper-blue-600);
}
.item.selected {
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;
}
.twoColumns {
@apply(--layout-flex);
@apply(--layout-horizontal);
overflow: hidden;
}
#starredView {
@apply(--layout-vertical);
}
</style>
<template>
<iron-ajax url="data/contacts.json" last-response="{{data}}" auto></iron-ajax>
<paper-toolbar class="toolbar">
<div class="title">Selection using iron-list</div>
<div>
<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="twoColumns">
<!-- 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">
[[item.name]]
</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 id="starredView" 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>
<style is="custom-style">
body {
@apply(--layout-fullbleed);
}
</style>
<body unresolved>
<x-app></x-app>
</body>
</html>