Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] paper-listbox in Escher.jl #179

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

[WIP] paper-listbox in Escher.jl #179

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e8e3816
Added paper-listbox
Sep 18, 2016
103c343
Added missing files
Sep 18, 2016
616d60e
Added listbox example
Sep 18, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion assets/bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
"paper-dropdown-menu": "PolymerElements/paper-dropdown-menu#^1.0.0",
"neon-animation": "PolymerElements/neon-animation#^1.0.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
"code-mirror": "shashi/code-mirror#master"
"code-mirror": "shashi/code-mirror#master",
"paper-listbox": "PolymerElements/paper-listbox#^1.1.2"
}
}
5 changes: 5 additions & 0 deletions assets/bower_components/paper-listbox/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# paper-listbox

![Build status](https://api.travis-ci.org/PolymerElements/paper-listbox.svg?branch=master)

`<paper-listbox>` implements an accessible listbox control with Material Design styling.
38 changes: 38 additions & 0 deletions assets/bower_components/paper-listbox/bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
{
"name": "paper-listbox",
"version": "1.1.2",
"description": "Implements an accessible material design listbox",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"polymer",
"listbox"
],
"main": [
"paper-listbox.html",
"paper-sublistbox.html"
],
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/paper-listbox"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/paper-listbox",
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#^1.1.0",
"iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
"iron-collapse": "PolymerElements/iron-collapse#^1.0.0",
"iron-menu-behavior": "PolymerElements/iron-menu-behavior#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"paper-item": "PolymerElements/paper-item#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "Polymer/web-component-tester#^3.4.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}
93 changes: 93 additions & 0 deletions assets/bower_components/paper-listbox/demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<!doctype 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>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

<title>paper-listbox demo</title>

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

<link rel="import" href="../../paper-item/paper-item.html">
<link rel="import" href="../../iron-collapse/iron-collapse.html">
<link rel="import" href="../paper-listbox.html">
<link rel="import" href="../../paper-styles/demo-pages.html">

<style is="custom-style">
.horizontal-section {
padding: 0 !important;
}

.avatar {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
background: #ccc;
}

paper-item {
--paper-item: {
cursor: pointer;
};
}

.sublist {
padding-left: 20px;
padding-right: 20px;

}
</style>
</head>
<body unresolved>
<div class="horizontal-section-container">
<div>
<h4>Standard</h4>
<div class="horizontal-section">
<paper-listbox>
<paper-item>Inbox</paper-item>
<paper-item>Starred</paper-item>
<paper-item>Sent mail</paper-item>
<paper-item>Drafts</paper-item>
</paper-listbox>
</div>
</div>

<div>
<h4>Pre-selected</h4>
<div class="horizontal-section">
<paper-listbox selected="0">
<paper-item>Inbox</paper-item>
<paper-item disabled>Starred</paper-item>
<paper-item>Sent mail</paper-item>
<paper-item>Drafts</paper-item>
</paper-listbox>
</div>
</div>

<div>
<h4>Multi-select</h4>
<div class="horizontal-section">
<paper-listbox multi>
<paper-item>Bold</paper-item>
<paper-item>Italic</paper-item>
<paper-item>Underline</paper-item>
<paper-item>Strikethrough</paper-item>
</paper-listbox>
</div>
</div>
</div>
</body>
</html>
35 changes: 35 additions & 0 deletions assets/bower_components/paper-listbox/hero.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 30 additions & 0 deletions assets/bower_components/paper-listbox/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!doctype 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>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

<title>paper-listbox</title>

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

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-component-page/iron-component-page.html">

</head>
<body>

<iron-component-page></iron-component-page>

</body>
</html>
96 changes: 96 additions & 0 deletions assets/bower_components/paper-listbox/paper-listbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<!--
@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
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-menu-behavior/iron-menu-behavior.html">
<link rel="import" href="../paper-styles/default-theme.html">

<!--
Material design: [Menus](https://www.google.com/design/spec/components/menus.html)

`<paper-listbox>` implements an accessible listbox control with Material Design styling. The focused item
is highlighted, and the selected item has bolded text.

<paper-listbox>
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
</paper-listbox>

An initial selection can be specified with the `selected` attribute.

<paper-listbox selected="0">
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
</paper-listbox>

Make a multi-select listbox with the `multi` attribute. Items in a multi-select listbox can be deselected,
and multiple item can be selected.

<paper-listbox multi>
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
</paper-listbox>

### Styling

The following custom properties and mixins are available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--paper-listbox-background-color` | Menu background color | `--primary-background-color`
`--paper-listbox-color` | Menu foreground color | `--primary-text-color`
`--paper-listbox` | Mixin applied to the listbox | `{}`

### Accessibility

`<paper-listbox>` has `role="listbox"` by default. A multi-select listbox will also have
`aria-multiselectable` set. It implements key bindings to navigate through the listbox with the up and
down arrow keys, esc to exit the listbox, and enter to activate a listbox item. Typing the first letter
of a listbox item will also focus it.

@group Paper Elements
@element paper-listbox
@hero hero.svg
@demo demo/index.html
-->

<dom-module id="paper-listbox">
<template>
<style>
:host {
display: block;
padding: 8px 0;

background: var(--paper-listbox-background-color, --primary-background-color);
color: var(--paper-listbox-color, --primary-text-color);

@apply(--paper-listbox);
}
</style>

<content></content>
</template>

<script>
(function() {
Polymer({
is: 'paper-listbox',

behaviors: [
Polymer.IronMenuBehavior
],

hostAttributes: {
role: 'listbox'
}
});
})();
</script>
</dom-module>
34 changes: 34 additions & 0 deletions assets/bower_components/paper-listbox/test/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!doctype 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>paper-listbox tests</title>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

<script src="../../web-component-tester/browser.js"></script>

</head>
<body>

<script>

WCT.loadSuites([
'paper-listbox.html'
]);

</script>

</body>
</html>
Loading