1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

add iron-list

This commit is contained in:
Luke Pulverenti 2016-04-20 23:34:52 -04:00
parent 396b125d66
commit da7c9a4899
47 changed files with 36356 additions and 0 deletions

View file

@ -0,0 +1,60 @@
<!--
@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>iron-list demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no">
<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="../iron-list.html">
<style is="custom-style">
iron-list {
@apply(--layout-fit);
}
.item {
padding: 10px;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body unresolved>
<template is="dom-bind">
<iron-ajax url="data/contacts.json" last-response="{{data}}" auto></iron-ajax>
<iron-list items="[[data]]" as="item">
<template>
<div class="item">
<b>#[[index]] - [[item.name]]</b>
<p>[[item.longText]]</p>
</div>
</template>
</iron-list>
</template>
</body>
</html>

View file

@ -0,0 +1,209 @@
<!--
@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>Collapsable items using iron-list</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no">
<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="../../app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../paper-styles/color.html">
<link rel="import" href="../../paper-styles/typography.html">
<link rel="import" href="../../iron-ajax/iron-ajax.html">
<link rel="import" href="../../iron-icons/iron-icons.html">
<link rel="import" href="../../iron-image/iron-image.html">
<link rel="import" href="../iron-list.html">
<style>
body {
background-color: #eee;
margin: 0;
padding: 0;
}
</style>
</head>
<body unresolved>
<dom-module id="x-collapse">
<template>
<style>
:host {
display: block;
@apply(--paper-font-common-base);
}
app-toolbar {
background-color: var(--google-green-700);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
font-weight: bold;
color: white;
z-index: 1;
position: fixed;
top: 0;
left: 0;
right: 0;
}
app-toolbar paper-icon-button {
--paper-icon-button-ink-color: white;
}
iron-list {
padding-top: 64px;
--iron-list-items-container: {
max-width: 800px;
margin: auto;
margin-top: 60px;
margin-bottom: 60px;
border-bottom: 1px solid #ddd;
};
}
.item {
@apply(--layout-horizontal);
padding: 20px;
background-color: white;
border: 1px solid #ddd;
cursor: pointer;
margin-bottom: 10px;
}
.avatar {
height: 40px;
width: 40px;
border-radius: 20px;
box-sizing: border-box;
background-color: #DDD;
}
.pad {
padding: 0 16px;
@apply(--layout-flex);
@apply(--layout-vertical);
}
.primary {
font-size: 16px;
font-weight: bold;
}
.shortText, .longText {
font-size: 14px;
}
.longText {
color: gray;
display: none;
}
.item:hover .shortText::after {
content: ' [+]';
color: gray;
}
.item.expanded:hover .shortText::after {
content: '';
}
.item.expanded .longText {
display: block;
}
.item.expanded:hover .longText::after {
content: ' []';
}
.spacer {
@apply(--layout-flex);
}
@media (max-width: 460px) {
paper-toolbar .bottom.title {
font-size: 14px;
}
}
</style>
<iron-ajax url="data/contacts.json" last-response="{{items}}" auto></iron-ajax>
<app-toolbar>
<div title>Collapsable items</div>
<paper-icon-button icon="search" alt="Search"></paper-icon-button>
<paper-icon-button icon="more-vert" alt="More options"></paper-icon-button>
</app-toolbar>
<iron-list id="list" items="[[items]]" as="item" selection-enabled multi-selection>
<template>
<div>
<div class$="[[getClassForItem(item, selected)]]" tabindex$="[[tabIndex]]">
<iron-image class="avatar" sizing="contain" src="[[item.image]]"></iron-image>
<div class="pad">
<div class="primary">[[item.name]]</div>
<div class="shortText">[[item.shortText]]</div>
<div class="longText">[[item.longText]]</div>
</div>
<iron-icon icon$="[[iconForItem(item)]]"></iron-icon>
</div>
</div>
</template>
</iron-list>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-collapse',
properties: {
items: {
type: Array
}
},
attached: function() {
// Use the document element
this.$.list.scrollTarget = this.ownerDocument.documentElement;
},
iconForItem: function(item) {
return item ? (item.integer < 50 ? 'star-border' : 'star') : '';
},
getClassForItem: function(item, selected) {
return selected ? 'item expanded' : 'item';
}
});
});
</script>
</dom-module>
<x-collapse></x-collapse>
</body>
</html>

File diff suppressed because it is too large Load diff

View file

@ -0,0 +1,302 @@
<!--
@license
Copyright (c) 2016 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>Grid layout using iron-list</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no">
<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="../../app-layout/app-header/app-header.html">
<link rel="import" href="../../app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../../app-layout/app-scroll-effects/effects/waterfall.html">
<link rel="import" href="../../iron-ajax/iron-ajax.html">
<link rel="import" href="../../iron-image/iron-image.html">
<link rel="import" href="../../iron-scroll-threshold/iron-scroll-threshold.html">
<link rel="import" href="../../paper-spinner/paper-spinner.html">
<link rel="import" href="../iron-list.html">
<style>
body {
margin: 0;
background-color: #f6f6f6;
font-family: 'Roboto', 'Noto', sans-serif;
}
</style>
</head>
<body unresolved>
<dom-module id="x-grid">
<template>
<style>
:host {
display: block;
@apply(--paper-font-common-base);
}
app-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
background-color: #4285f4;
color: white;
}
iron-list {
margin-top: 90px;
padding-bottom: 16px;
}
.photoContent {
@apply(--layout);
background-color: #ddd;
position: relative;
width: 300px;
height: 300px;
margin: 8px;
}
.photoContent:hover .detail{
opacity: 1;
}
.photoContent > iron-image {
@apply(--layout-flex);
}
.photoContent > .detail {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
color: white;
font-size: 20px;
font-weight: 100;
padding: 20px;
opacity: 0;
transition: opacity 0.1s;
}
.searchInput {
@apply(--layout-flex);
font-size: 20px;
padding: 10px 20px;
border: none;
background-color: rgba(255, 255, 255, 0.2);
color: white;
-webkit-appearance: none;
border-radius: 0px;
}
.searchInput:hover {
background-color: rgba(255, 255, 255, 0.3);
}
.searchInput:focus {
background-color: white;
outline: none;
color: black;
}
.loadingIndicator {
font-size: 16px;
text-align: center;
height: 60px;
}
.loadingIndicator paper-spinner {
margin-right: 20px;
vertical-align: middle;
}
@media (max-width: 800px) {
.photoContainer {
width: calc(50% - 16px);
}
.photoContent {
width: auto;
}
}
@media (max-width: 400px) {
iron-list {
margin-top: 72px;
}
.photoContainer {
width: 100%;
}
.photoContent > .detail {
opacity: 1;
}
}
::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.5);
}
::-moz-placeholder {
color: rgba(255, 255, 255, 0.5);
}
:-ms-input-placeholder {
color: rgba(255, 255, 255, 0.5);
}
::-ms-input-placeholder {
color: rgba(255, 255, 255, 0.5);
}
</style>
<iron-ajax id="ajax" loading="{{loadingPhotos}}" url="[[_getAPIEndpoint(apiKey, searchText, page)]]"
handle-as="text" on-response="_didReceiveResponse"></iron-ajax>
<app-header fixed effects="waterfall">
<app-toolbar>
<input class="searchInput" type="search" placeholder="Search on Flikr" value="{{searchText::input}}">
</app-toolbar>
</app-header>
<iron-list items="[[photos]]" as="photo" scroll-target="document" grid>
<template>
<div class="photoContainer">
<div class="photoContent" tabindex$="[[tabIndex]]">
<iron-image sizing="cover"
src="//farm[[photo.farm]].staticflickr.com/[[photo.server]]/[[photo.id]]_[[photo.secret]]_n.jpg">
</iron-image>
<div class="detail">[[photo.title]]</div>
</div>
</div>
</template>
</iron-list>
<div class="loadingIndicator" hidden$="[[!loadingPhotos]]">
<paper-spinner active$="[[loadingPhotos]]"></paper-spinner> Fetching photos for <b>[[searchText]]</b>
</div>
<!-- this element loads more photos when the user scrolls down and reached the lower threshold -->
<iron-scroll-threshold id="scrollTheshold"
lower-threshold="500"
on-lower-threshold="_loadMorePhotos"
scroll-target="document">
</iron-scroll-threshold>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'x-grid',
properties: {
apiKey: {
type: String,
value: 'c304f1096a06486d3c1e7ab271bf7f3f'
},
photos: Array,
perPage: {
type: Number,
value: 100
},
page: {
type: Number,
value: 1
},
searchText: {
type: String,
value: 'Big Sur'
},
loadingPhotos: Boolean
},
observers: [
'_resetPhotos(searchText)'
],
_getAPIEndpoint: function(apiKey, searchText, page) {
return 'https://api.flickr.com/services/rest/?method=flickr.photos.search' +
'&api_key=' + apiKey +
'&safe_search=1&sort=interestingness-desc'+
'&text=' + encodeURIComponent(searchText) +
'&page=' + page +
'&format=json' +
'&per_page=' + this.perPage;
},
_didReceiveResponse: function(e) {
var payload = JSON.parse(e.detail.response.match('jsonFlickrApi\\((.*)\\)')[1]);
if (!payload || !payload.photos || !payload.photos.photo) {
return;
}
payload.photos.photo.forEach(function(photo) {
this.push('photos', photo);
}, this);
this.$.scrollTheshold.clearTriggers();
},
_loadMorePhotos: function() {
if (this.$.ajax.lastRequest) {
this.$.ajax.lastRequest.abort();
}
this.page++;
this.$.ajax.generateRequest();
},
_resetPhotos: function(searchText) {
this.page = 1;
this.photos = [];
if (searchText.trim() !== '') {
this.debounce('_loadPhotos', this._loadMorePhotos, 400);
}
}
});
});
</script>
<x-grid></x-grid>
</body>
</html>

View file

@ -0,0 +1,169 @@
<!--
@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 id="html">
<head>
<title>iron-list demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no">
<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="../../app-layout/app-header/app-header.html">
<link rel="import" href="../../app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../../app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../iron-ajax/iron-ajax.html">
<link rel="import" href="../../iron-icons/iron-icons.html">
<link rel="import" href="../../iron-image/iron-image.html">
<link rel="import" href="../iron-list.html">
<style is="custom-style">
body {
@apply(--layout-fullbleed);
font-family: 'Roboto', 'Noto', sans-serif;
background-color: #eee;
}
app-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
background-color: #0b8043;
color: white;
--app-header-background-front-layer: {
background-color: #4285f4;
};
}
app-header paper-icon-button {
--paper-icon-button-ink-color: white;
}
[title] {
font-weight: 400;
margin: 0 0 0 50px;
}
[condensed-title] {
font-weight: 400;
margin-left: 30px;
}
[condensed-title] i {
font-style: normal;
font-weight: 100;
}
app-toolbar.tall {
height: 148px;
}
iron-list {
padding-top: 148px;
margin-top: 64px;
padding-bottom: 16px;
}
.item {
@apply(--layout-horizontal);
padding: 20px;
border-radius: 8px;
background-color: white;
border: 1px solid #ddd;
max-width: 800px;
margin: 16px auto 0 auto;
}
.item:focus {
outline: 0;
border-color: #333;
}
.avatar {
height: 40px;
width: 40px;
border-radius: 20px;
box-sizing: border-box;
background-color: #DDD;
}
.pad {
padding: 0 16px;
@apply(--layout-flex);
@apply(--layout-vertical);
}
.primary {
font-size: 16px;
font-weight: bold;
}
.secondary {
font-size: 14px;
}
.dim {
color: gray;
}
.spacer {
@apply(--layout-flex);
}
</style>
</head>
<body unresolved>
<template is="dom-bind">
<iron-ajax url="data/contacts.json" last-response="{{data}}" auto></iron-ajax>
<app-header condenses fixed effects="resize-title blend-background waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<h4 condensed-title>iron-list <i>&mdash; Demo</i></h4>
<paper-icon-button icon="search"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
</app-toolbar>
<app-toolbar class="tall">
<h1 title>iron-list</h1>
</app-toolbar>
</app-header>
<!-- iron-list using the document scroll -->
<iron-list items="[[data]]" as="item" scroll-target="html">
<template>
<div>
<div class="item" tabindex$="[[tabIndex]]">
<iron-image class="avatar" sizing="contain" src="[[item.image]]"></iron-image>
<div class="pad">
<div class="primary">[[item.name]] [[index]]</div>
<div class="secondary">[[item.shortText]]</div>
<div class="secondary dim">[[item.longText]]</div>
</div>
</div>
</div>
</template>
</iron-list>
</template>
</body>
</html>

View file

@ -0,0 +1,191 @@
<!--
@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 id="html">
<head>
<title>Load data using iron-scroll-threshold</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no">
<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-scroll-threshold/iron-scroll-threshold.html">
<link rel="import" href="../../paper-styles/color.html">
<link rel="import" href="../../paper-styles/typography.html">
<link rel="import" href="../../app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../../paper-spinner/paper-spinner.html">
<link rel="import" href="../../iron-ajax/iron-ajax.html">
<link rel="import" href="../../iron-icons/iron-icons.html">
<link rel="import" href="../iron-list.html">
<style is="custom-style">
body {
@apply(--paper-font-common-base);
margin: 0;
padding: 0;
background-color: #eee;
}
app-toolbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #F57C00;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
color: white;
z-index: 1;
font-weight: bold;
}
.loadingIndicator {
text-align: center;
height: 40px;
}
.loadingIndicator paper-spinner {
width: 20px;
height: 20px;
margin-right: 10px;
}
iron-list {
padding-top: 64px;
padding-bottom: 16px;
--iron-list-items-container: {
max-width: 800px;
margin: auto;
margin-top: 60px;
margin-bottom: 10px;
};
}
.personItem {
@apply(--layout-horizontal);
margin: 16px 16px 0 16px;
padding: 20px;
border-radius: 8px;
background-color: white;
border: 1px solid #ddd;
}
.pad {
padding: 0 16px;
@apply(--layout-flex);
@apply(--layout-vertical);
}
.primary {
font-size: 16px;
font-weight: bold;
}
.secondary {
font-size: 14px;
}
.dim {
color: gray;
}
.spacer {
@apply(--layout-flex);
}
.index {
width: 30px;
}
</style>
</head>
<body unresolved>
<template is="dom-bind" id="app">
<iron-ajax id="ajax"
url="//www.filltext.com/"
params='{"rows": "20", "delay": 1, "fname":"{firstName}", "lname": "{lastName}", "address": "{streetAddress}",
"city": "{city}", "state": "{usState|abb}", "zip": "{zip}", "business": "{business}", "index": "{index}"}'
handle-as="json"
loading="{{loadingPeople}}"
on-response="_didRespond">
</iron-ajax>
<app-toolbar>
<div title>Load data using iron-scroll-threshold</div>
</app-toolbar>
<iron-list id="list" items="[]" as="person" scroll-target="html">
<template>
<div>
<div class="personItem" tabindex$="[[tabIndex]]">
<div class="pad">
<div class="primary">[[person.fname]] [[person.lname]]</div>
<div class="secondary">[[person.address]] [[person.city]]</div>
<div class="secondary">[[person.city]], [[person.state]] [[person.zip]]</div>
<div class="secondary dim">[[person.business]]</div>
</div>
<iron-icon icon$="[[_iconForPerson(person)]]"></iron-icon>
</div>
</div>
</template>
</iron-list>
<div class="loadingIndicator">
<paper-spinner active="{{loadingPeople}}"></paper-spinner> Fetching data
</div>
<!-- this element will load more data when the user scrolls down and reached the lower threshold -->
<iron-scroll-threshold id="scrollTheshold"
lower-threshold="500"
on-lower-threshold="_loadMoreData"
scroll-target="html">
</iron-scroll-threshold>
</template>
<script>
(function(scope) {
scope._iconForPerson = function(person) {
return person.integer < 50 ? 'star-border' : 'star';
};
scope._loadMoreData = function() {
scope.$.ajax.generateRequest();
};
scope._didRespond = function(e) {
var people = e.detail.response;
people.forEach(function(person) {
scope.$.list.push('items', person);
});
// Clear the lower threshold so we can load more data when the user scrolls down again.
scope.$.scrollTheshold.clearTriggers();
};
})(document.querySelector('#app'));
</script>
</body>
</html>

View file

@ -0,0 +1,287 @@
<!--
@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>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-styles/color.html">
<link rel="import" href="../../paper-styles/typography.html">
<link rel="import" href="../../app-layout/app-toolbar/app-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);
font-family: sans-serif;
}
app-toolbar {
background: var(--paper-pink-500);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
color: white;
z-index: 1;
color: white;
--paper-toolbar-title: {
font-size: 16px;
line-height: 16px;
font-weight: bold;
margin-left: 0;
};
}
app-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 {
background-color: var(--google-grey-300);
border-bottom: 1px solid #ccc;
}
.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: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>
<app-toolbar>
<div 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>
</app-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$="[[tabIndex]]" aria-label$="Select/Deselect [[item.name]]" 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 tabindex$="[[tabIndex]]" on-tap="_unselect" aria-label$="Deselect [[item.name]]">[[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');
}
});
});
</script>
</head>
<style is="custom-style">
body {
@apply(--layout-fullbleed);
}
</style>
<body unresolved>
<x-app></x-app>
</body>
</html>