Added Polymer

This commit is contained in:
Thaum
2014-11-26 10:18:35 +00:00
parent 5eea4714b2
commit 3408ba9e8d
1210 changed files with 394645 additions and 47 deletions

View File

@@ -0,0 +1,20 @@
{
"name": "core-menu",
"private": true,
"dependencies": {
"core-selector": "Polymer/core-selector#^0.5.0",
"core-collapse": "Polymer/core-collapse#^0.5.0",
"core-item": "Polymer/core-item#^0.5.0"
},
"version": "0.5.1",
"homepage": "https://github.com/Polymer/core-menu",
"_release": "0.5.1",
"_resolution": {
"type": "version",
"tag": "0.5.1",
"commit": "dd50b7997cefc0574d3462228f0abf77cdf71d24"
},
"_source": "git://github.com/Polymer/core-menu.git",
"_target": "^0.5.0",
"_originalSource": "Polymer/core-menu"
}

View File

@@ -0,0 +1,4 @@
core-menu
=========
See the [component page](http://polymer-project.org/docs/elements/core-elements.html#core-menu) for more information.

View File

@@ -0,0 +1,10 @@
{
"name": "core-menu",
"private": true,
"dependencies": {
"core-selector": "Polymer/core-selector#^0.5.0",
"core-collapse": "Polymer/core-collapse#^0.5.0",
"core-item": "Polymer/core-item#^0.5.0"
},
"version": "0.5.1"
}

View File

@@ -0,0 +1,18 @@
/*
Copyright (c) 2014 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
*/
:host {
display: block;
margin: 12px;
}
polyfill-next-selector { content: ':host > core-item'; }
::content > core-item {
cursor: default;
}

View File

@@ -0,0 +1,68 @@
<!--
Copyright (c) 2014 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
-->
<!--
`core-menu` is a selector which styles to looks like a menu.
<core-menu selected="0">
<core-item icon="settings" label="Settings"></core-item>
<core-item icon="dialog" label="Dialog"></core-item>
<core-item icon="search" label="Search"></core-item>
</core-menu>
When an item is selected the `core-selected` class is added to it. The user can
use the class to add more stylings to the selected item.
core-item.core-selected {
color: red;
}
The `selectedItem` property references the selected item.
<core-menu selected="0" selectedItem="{{item}}">
<core-item icon="settings" label="Settings"></core-item>
<core-item icon="dialog" label="Dialog"></core-item>
<core-item icon="search" label="Search"></core-item>
</core-menu>
<div>selected label: {{item.label}}</div>
The `core-select` event signals selection change.
<core-menu selected="0" on-core-select="{{selectAction}}">
<core-item icon="settings" label="Settings"></core-item>
<core-item icon="dialog" label="Dialog"></core-item>
<core-item icon="search" label="Search"></core-item>
</core-menu>
...
selectAction: function(e, detail) {
if (detail.isSelected) {
var selectedItem = detail.item;
...
}
}
@group Polymer Core Elements
@element core-menu
@extends core-selector
-->
<link rel="import" href="../core-selector/core-selector.html">
<polymer-element name="core-menu" extends="core-selector" noscript>
<template>
<link rel="stylesheet" href="core-menu.css">
<shadow></shadow>
</template>
</polymer-element>

View File

@@ -0,0 +1,43 @@
/*
Copyright (c) 2014 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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
*/
:host {
display: block;
height: auto;
}
:host(.core-selected, [active]) {
font-weight: initial;
}
core-item {
cursor: default;
}
::content > core-item {
cursor: default;
}
:host(.font-scalable) > core-item {
min-height: 2.5em;
}
:host(.font-scalable) > core-item::shadow core-icon {
margin: 0 1em 0 0.25em;
height: 1.5em;
width: 1.5em;
}
#submenu {
margin: 0 0 0 44px;
}
:host(.font-scalable) > #submenu {
margin: 0 0 0 2.75em;
}

View File

@@ -0,0 +1,126 @@
<!--
Copyright (c) 2014 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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<!--
Use to create nested menus inside of `core-menu` elements.
<core-menu selected="0">
<core-submenu icon="settings" label="Topics">
<core-item label="Topic 1"></core-item>
<core-item label="Topic 2"></core-item>
</core-submenu>
<core-submenu icon="settings" label="Favorites">
<core-item label="Favorite 1"></core-item>
<core-item label="Favorite 2"></core-item>
<core-item label="Favorite 3"></core-item>
</core-submenu>
</core-menu>
There is a margin set on the submenu to indent the items.
You can override the margin by doing:
core-submenu::shadow #submenu {
margin-left: 20px;
}
To style the item for the submenu, do something like this:
core-submenu::shadow > #submenuItem {
color: blue;
}
To style all the `core-item`s in the light DOM:
polyfill-next-selector { content: 'core-submenu > #submenu > core-item'; }
core-submenu > core-item {
color: red;
}
The above will style `Topic1` and `Topic2` to have font color red.
<core-submenu icon="settings" label="Topics">
<core-item label="Topic1"></core-item>
<core-item label="Topic2"></core-item>
</core-submenu>
@group Polymer Core Elements
@element core-submenu
@extends core-item
-->
<link rel="import" href="../core-item/core-item.html">
<link rel="import" href="../core-menu/core-menu.html">
<link rel="import" href="../core-collapse/core-collapse.html">
<polymer-element name="core-submenu" attributes="selected selectedItem label icon src valueattr">
<template>
<link rel="stylesheet" href="core-submenu.css">
<core-item id="submenuItem" src="{{src}}" label="{{label}}" icon="{{icon}}" class="{{ {'core-selected' : active} | tokenList}}" on-tap="{{activate}}">
<content select=".item-content"></content>
</core-item>
<core-menu id="submenu" selected="{{selected}}" selectedItem="{{selectedItem}}" valueattr="{{valueattr}}">
<content></content>
</core-menu>
<core-collapse target="{{$.submenu}}" opened="{{opened}}"></core-collapse>
</template>
<script>
Polymer('core-submenu', {
publish: {
active: {value: false, reflect: true}
},
opened: false,
get items() {
return this.$.submenu.items;
},
hasItems: function() {
return !!this.items.length;
},
unselectAllItems: function() {
this.$.submenu.selected = null;
this.$.submenu.clearSelection();
},
activeChanged: function() {
if (this.hasItems()) {
this.opened = this.active;
}
if (!this.active) {
this.unselectAllItems();
}
},
toggle: function() {
this.opened = !this.opened;
},
activate: function() {
if (this.hasItems() && this.active) {
this.toggle();
this.unselectAllItems();
}
}
});
</script>
</polymer-element>

View File

@@ -0,0 +1,101 @@
<!doctype html>
<!--
Copyright (c) 2014 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>core-menu</title>
<script src="../webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="core-menu.html">
<link rel="import" href="core-submenu.html">
<link rel="import" href="../core-item/core-item.html">
<style>
body {
font-family: sans-serif;
margin: 20px;
}
section {
width: 300px;
}
.dark {
background-color: #333;
}
.dark core-item {
color: #fafafa;
fill: #fafafa;
}
</style>
</head>
<body>
<h2>simple menu:</h2>
<section>
<core-menu selected="0">
<core-item icon="settings" label="Settings"></core-item>
<core-item icon="favorite" label="Favorite"></core-item>
<core-item icon="account-box" label="Account"></core-item>
</core-menu>
</section>
<h2>simple menu:</h2>
<section class="dark">
<core-menu selected="0">
<core-item icon="settings" label="Settings"></core-item>
<core-item icon="favorite" label="Favorite"></core-item>
<core-item icon="account-box" label="Account"></core-item>
</core-menu>
</section>
<h2>submenu:</h2>
<section>
<core-menu selected="0">
<core-submenu icon="settings" label="Topics">
<core-item label="Topic 1"></core-item>
<core-item label="Topic 2"></core-item>
</core-submenu>
<core-submenu icon="settings" label="Favorites">
<core-item label="Favorite 1"></core-item>
<core-item label="Favorite 2"></core-item>
<core-item label="Favorite 3"></core-item>
</core-submenu>
</core-menu>
</section>
</body>
</html>

View File

@@ -0,0 +1,22 @@
<!doctype html>
<!--
Copyright (c) 2014 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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<html>
<head>
<script src="../webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../core-component-page/core-component-page.html">
</head>
<body unresolved>
<core-component-page sources='["core-menu.html", "core-submenu.html", "../core-selector/core-selector.html"]'></core-component-page>
</body>
</html>

View File

@@ -0,0 +1,62 @@
<!--
@license
Copyright (c) 2014 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
-->
<x-meta id="core-menu" label="Menu" group="Core" isContainer>
<template>
<core-menu selected="0" style="font-size: 16px;">
<core-submenu icon="settings" label="Topics">
<core-item label="Topic 1"></core-item>
<core-item label="Topic 2"></core-item>
</core-submenu>
<core-submenu icon="settings" label="Favorites">
<core-item label="Favorite 1"></core-item>
<core-item label="Favorite 2"></core-item>
<core-item label="Favorite 3"></core-item>
</core-submenu>
</core-menu>
</template>
<template id="imports">
<link rel="import" href="core-submenu.html">
</template>
</x-meta>
<x-meta id="core-submenu" label="Sub Menu" group="Core" isContainer>
<template>
<core-submenu icon="settings" label="Topics">
<core-item label="Topic 1"></core-item>
<core-item label="Topic 2"></core-item>
</core-submenu>
</template>
<template id="imports">
<link rel="import" href="core-submenu.html">
</template>
</x-meta>