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,27 @@
{
"name": "paper-menu-button",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#^0.5.0",
"core-a11y-keys": "Polymer/core-a11y-keys#^0.5.0",
"core-collapse": "Polymer/core-collapse#^0.5.0",
"core-dropdown": "Polymer/core-dropdown#^0.5.0",
"core-icons": "Polymer/core-icons#^0.5.0",
"core-menu": "Polymer/core-menu#^0.5.0",
"paper-button": "Polymer/paper-button#^0.5.0",
"paper-dropdown": "Polymer/paper-dropdown#^0.5.0",
"paper-icon-button": "Polymer/paper-icon-button#^0.5.0",
"paper-item": "Polymer/paper-item#^0.5.0"
},
"version": "0.5.1",
"homepage": "https://github.com/Polymer/paper-menu-button",
"_release": "0.5.1",
"_resolution": {
"type": "version",
"tag": "0.5.1",
"commit": "b8054d0aad333d41eceadf29c5d633a90b281195"
},
"_source": "git://github.com/Polymer/paper-menu-button.git",
"_target": "^0.5.0",
"_originalSource": "Polymer/paper-menu-button"
}

View File

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

View File

@@ -0,0 +1,17 @@
{
"name": "paper-menu-button",
"private": true,
"dependencies": {
"polymer": "Polymer/polymer#^0.5.0",
"core-a11y-keys": "Polymer/core-a11y-keys#^0.5.0",
"core-collapse": "Polymer/core-collapse#^0.5.0",
"core-dropdown": "Polymer/core-dropdown#^0.5.0",
"core-icons": "Polymer/core-icons#^0.5.0",
"core-menu": "Polymer/core-menu#^0.5.0",
"paper-button": "Polymer/paper-button#^0.5.0",
"paper-dropdown": "Polymer/paper-dropdown#^0.5.0",
"paper-icon-button": "Polymer/paper-icon-button#^0.5.0",
"paper-item": "Polymer/paper-item#^0.5.0"
},
"version": "0.5.1"
}

View File

@@ -0,0 +1,211 @@
<!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>
<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.0, user-scalable=yes">
<title>paper-menu-button</title>
<script src="../webcomponentsjs/webcomponents.js"></script>
<link href="../core-collapse/core-collapse.html" rel="import">
<link href="../core-icons/core-icons.html" rel="import">
<link href="../core-menu/core-menu.html" rel="import">
<link href="../paper-button/paper-button.html" rel="import">
<link href="../paper-dropdown/paper-dropdown.html" rel="import">
<link href="../paper-icon-button/paper-icon-button.html" rel="import">
<link href="../paper-item/paper-item.html" rel="import">
<link href="paper-menu-button.html" rel="import">
<style shim-shadowdom>
body {
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
font-size: 14px;
margin: 0;
padding: 24px;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
}
section {
padding: 20px 0;
}
section > div {
padding: 14px;
font-size: 16px;
}
paper-item {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
html /deep/ core-collapse {
border: 1px solid #ccc;
padding: 8px;
}
.constrained-height {
height: 150px;
}
.colored {
color: #0f9d58;
}
.dropdown.colored::shadow #ripple,
.dropdown.colored::shadow #background {
border: 1px solid #0f9d58;
background-color: #b7e1cd;
}
</style>
</head>
<body>
<template is="auto-binding">
<section>
<div>Absolutely positioned menu buttons</div>
<paper-menu-button>
<paper-icon-button icon="menu" noink></paper-icon-button>
<paper-dropdown class="dropdown">
<core-menu class="menu">
<template repeat="{{pastries}}">
<paper-item>{{}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-menu-button>
<paper-menu-button>
<paper-icon-button icon="menu"></paper-icon-button>
<paper-dropdown class="dropdown" transition="">
<core-menu class="menu">
<paper-item>No Transition</paper-item>
<template repeat="{{pastries}}">
<paper-item>{{}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-menu-button>
<paper-menu-button disabled>
<paper-icon-button icon="menu"></paper-icon-button>
<paper-dropdown class="dropdown">
<core-menu>
<paper-item>Should not see this</paper-item>
</core-menu>
</paper-dropdown>
</paper-menu-button>
<br><br>
<paper-menu-button>
<paper-button noink>
<core-icon icon="add"></core-icon>
<span style="vertical-align:middle;">add</span>
</paper-button>
<paper-dropdown class="dropdown">
<core-menu class="menu">
<template repeat="{{pastries}}">
<paper-item>{{}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-menu-button>
</section>
<section>
<div>Layered menu buttons</div>
<button onclick="document.getElementById('collapse').toggle()">toggle core-collapse</button>
<br>
<core-collapse id="collapse">
<paper-menu-button>
<paper-icon-button icon="menu"></paper-icon-button>
<paper-dropdown layered class="dropdown">
<core-menu class="menu">
<template repeat="{{pastries}}">
<paper-item>{{}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-menu-button>
</core-collapse>
</section>
<section>
<div>Custom styling</div>
<paper-menu-button label="Constrained height">
<paper-icon-button icon="menu"></paper-icon-button>
<paper-dropdown class="dropdown constrained-height">
<core-menu class="menu">
<template repeat="{{pastries}}">
<paper-item>{{}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-menu-button>
<paper-menu-button label="Colored">
<paper-icon-button icon="menu" class="colored"></paper-icon-button>
<paper-dropdown class="dropdown colored">
<core-menu class="menu">
<template repeat="{{pastries}}">
<paper-item>{{}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-menu-button>
</section>
</template>
<script>
scope = document.querySelector('template[is=auto-binding]');
scope.pastries = [
'Apple fritter',
'Croissant',
'Donut',
'Financier',
'Jello',
'Madeleine',
'Pound cake',
'Pretzel',
'Sfogliatelle'
];
</script>
</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="['paper-menu-button.html','paper-menu-button-overlay.html']"></core-component-page>
</body>
</html>

View File

@@ -0,0 +1,21 @@
<!--
@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="paper-menu-button" label="Menu Button" isContainer>
<template>
<paper-menu-button icon="menu">
<div>Menu Item 1</div>
<div>Menu Item 2</div>
<div>Menu Item 3</div>
</paper-menu-button>
</template>
<template id="imports">
<link rel="import" href="paper-menu-button.html">
</template>
</x-meta>

View File

@@ -0,0 +1,101 @@
/*
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
*/
:host {
display: inline-block;
padding: 8px;
position: relative;
background-image: none;
outline: none;
user-select: none;
-webkit-user-select: none;
cursor: pointer;
}
:host([disabled]) {
cursor: auto;
}
core-icon {
position: relative;
}
core-icon::shadow svg {
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
}
:host(:hover) core-icon::shadow svg {
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
:host([disabled]:hover) core-icon::shadow svg {
transform: none;
-webkit-transform: none;
}
:host([disabled]) core-icon::shadow path {
fill: #c9c9c9;
}
#dropdown {
background-color: transparent;
margin: 12px;
color: #000;
overflow: visible;
}
#menu {
padding-top: 8px;
padding-bottom: 8px;
margin: 0;
}
.paper-menu-button-overlay-ink {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
border-radius: 20px;
opacity: 0;
transform: scale(0);
-webkit-transform: scale(0);
}
:host([halign="right"]) .paper-menu-button-overlay-ink {
left: auto;
right: 0;
}
:host([valign="bottom"]) .paper-menu-button-overlay-ink {
top: auto;
bottom: 0;
}
.paper-menu-button-overlay-bg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 3px;
opacity: 0;
z-index: -1;
}
:host([noTransition]) .paper-menu-button-overlay-bg {
opacity: 1;
}
.paper-menu-button-menu-container {
overflow: auto;
max-height: 100%;
max-width: 100%;
}

View File

@@ -0,0 +1,79 @@
<!--
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
-->
<!--
`paper-menu-button` works together with a button and a `paper-dropdown` to
implement a button that displays a drop-down when tapped on.
The child element with the class `dropdown` will be used as the drop-down
menu. It should be a `paper-dropdown` or other overlay element.
Example:
<paper-menu-button>
<paper-icon-button icon="menu" noink></paper-icon-button>
<paper-dropdown class="dropdown">
<core-menu class="menu">
<paper-item>Share</paper-item>
<paper-item>Settings</paper-item>
<paper-item>Help</paper-item>
</core-menu>
</paper-dropdown>
</paper-menu-button>
@group Paper Elements
@element paper-menu-button
@extends core-dropdown-base
@status unstable
-->
<link href="../polymer/polymer.html" rel="import">
<link href="../core-a11y-keys/core-a11y-keys.html" rel="import">
<link href="../core-dropdown/core-dropdown-base.html" rel="import">
<polymer-element name="paper-menu-button" extends="core-dropdown-base" relative>
<template>
<style>
:host {
display: inline-block;
}
:host([disabled]) {
pointer-events: none;
color: #a8a8a8;
}
polyfill-next-selector { content: ':host([disabled]) *'; }
:host([disabled]) ::content * {
pointer-events: none;
}
</style>
<core-a11y-keys target="{{}}" keys="enter space" on-keys-pressed="{{toggleOverlay}}"></core-a11y-keys>
<content></content>
</template>
<script>
Polymer({
overlayListeners: {
'core-overlay-open': 'openAction',
'core-activate': 'activateAction'
},
activateAction: function() {
this.opened = false;
}
});
</script>
</polymer-element>