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,28 @@
{
"name": "core-menu-button",
"private": false,
"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-icon-button": "Polymer/core-icon-button#^0.5.0",
"core-item": "Polymer/core-item#^0.5.0",
"core-menu": "Polymer/core-menu#^0.5.0"
},
"devDependencies": {
"web-component-tester": "Polymer/web-component-tester#^1.1.4"
},
"version": "0.5.1",
"homepage": "https://github.com/Polymer/core-menu-button",
"_release": "0.5.1",
"_resolution": {
"type": "version",
"tag": "0.5.1",
"commit": "c2324384e4a6442d02b442fe6080c7363a04ea50"
},
"_source": "git://github.com/Polymer/core-menu-button.git",
"_target": "^0.5.0",
"_originalSource": "Polymer/core-menu-button"
}

View File

@@ -0,0 +1,2 @@
core-menu-button
================

View File

@@ -0,0 +1,18 @@
{
"name": "core-menu-button",
"private": false,
"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-icon-button": "Polymer/core-icon-button#^0.5.0",
"core-item": "Polymer/core-item#^0.5.0",
"core-menu": "Polymer/core-menu#^0.5.0"
},
"devDependencies": {
"web-component-tester": "Polymer/web-component-tester#^1.1.4"
},
"version": "0.5.1"
}

View File

@@ -0,0 +1,81 @@
<!--
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-button` works together with a button and `core-dropdown` to implement
an 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 `core-dropdown` or other overlay element.
Example:
<core-menu-button>
<core-icon-button icon="menu"></core-icon-button>
<core-dropdown class="dropdown" layered>
<core-menu>
<core-item>Share</core-item>
<core-item>Settings</core-item>
<core-item>Help</core-item>
</core-menu>
</core-dropdown>
</core-menu-button>
@module Polymer Core Elements
@element core-menu-button
@extends core-dropdown-base
@status beta
@homepage github.io
-->
<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="core-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>

View File

@@ -0,0 +1,200 @@
<!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>core-menu-button</title>
<script src="../webcomponentsjs/webcomponents.js"></script>
<link href="../core-collapse/core-collapse.html" rel="import">
<link href="../core-dropdown/core-dropdown.html" rel="import">
<link href="../core-icons/core-icons.html" rel="import">
<link href="../core-icon-button/core-icon-button.html" rel="import">
<link href="../core-item/core-item.html" rel="import">
<link href="../core-menu/core-menu.html" rel="import">
<link href="core-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;
}
html /deep/ core-dropdown {
background-color: #eee;
color: #000;
border: 1px solid #ccc;
border-radius: 3px;
}
core-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;
}
.colored:active,
.dropdown.colored {
border: 1px solid #0f9d58;
background-color: #b7e1cd;
}
</style>
</head>
<body>
<template is="auto-binding">
<section>
<div>Absolutely positioned menu buttons</div>
<core-menu-button>
<core-icon-button icon="menu"></core-icon-button>
<core-dropdown class="dropdown">
<core-menu>
<template repeat="{{pastries}}">
<core-item>{{}}</core-item>
</template>
</core-menu>
</core-dropdown>
</core-menu-button>
<core-menu-button disabled>
<core-icon-button icon="menu"></core-icon-button>
<core-dropdown class="dropdown">
<core-menu>
<core-item>Should not see this</core-item>
</core-menu>
</core-dropdown>
</core-menu-button>
<core-menu-button>
<core-icon-button icon="add"><span style="vertical-align:middle;">add</span></core-icon-button>
<core-dropdown class="dropdown">
<core-menu>
<template repeat="{{pastries}}">
<core-item>{{}}</core-item>
</template>
</core-menu>
</core-dropdown>
</core-menu-button>
</section>
<section>
<div>Layered menu buttons</div>
<button onclick="document.getElementById('collapse').toggle()">toggle core-collapse</button>
<br>
<core-collapse id="collapse">
<core-menu-button>
<core-icon-button icon="menu"></core-icon-button>
<core-dropdown layered class="dropdown">
<core-menu>
<template repeat="{{pastries}}">
<core-item>{{}}</core-item>
</template>
</core-menu>
</core-dropdown>
</core-menu-button>
</core-collapse>
</section>
<section>
<div>Custom styling</div>
<core-menu-button label="Constrained height">
<core-icon-button icon="menu"></core-icon-button>
<core-dropdown class="dropdown constrained-height">
<core-menu>
<template repeat="{{pastries}}">
<core-item>{{}}</core-item>
</template>
</core-menu>
</core-dropdown>
</core-menu-button>
<core-menu-button label="Colored">
<core-icon-button icon="menu" class="colored"></core-icon-button>
<core-dropdown class="dropdown colored">
<core-menu>
<template repeat="{{pastries}}">
<core-item>{{}}</core-item>
</template>
</core-menu>
</core-dropdown>
</core-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></core-component-page>
</body>
</html>

View File

@@ -0,0 +1,26 @@
<!--
@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-button" label="Menu Button" group="Core" isContainer>
<template>
<core-menu-button icon="more-vert" selected="0">
<core-item icon="content-cut" label="Cut"></core-item>
<core-item icon="content-copy" label="Copy"></core-item>
<core-item icon="content-paste" label="Paste"></core-item>
</core-menu-button>
</template>
<template id="imports">
<link rel="import" href="core-menu-button.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../core-item/core-item.html">
</template>
</x-meta>

View File

@@ -0,0 +1,70 @@
<!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">
<title>paper-dropdown-menu basic tests</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="../../webcomponentsjs/webcomponents.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<link href="../../core-dropdown/core-dropdown.html" rel="import">
<link href="../../core-icon-button/core-icon-button.html" rel="import">
<link href="../../core-item/core-item.html" rel="import">
<link href="../../core-menu/core-menu.html" rel="import">
<link href="../core-menu-button.html" rel="import">
<style>
core-collapse {
border: 1px solid black;
}
</style>
</head>
<body>
<core-menu-button id="button1">
<core-icon-button icon="menu"></core-icon-button>
<core-dropdown class="dropdown">
<core-menu id="menu1">
<core-item foo="c">Cupcake</core-item>
<core-item foo="d">Donut</core-item>
<core-item foo="e">Eclair</core-item>
<core-item foo="f">Froyo</core-item>
<core-item foo="g">Gingerbread</core-item>
</core-menu>
</core-dropdown>
</core-menu-button>
<script>
function flushLayoutAndRender(callback) {
flush(function() {
document.body.offsetTop;
requestAnimationFrame(function() {
callback();
});
});
}
var b1 = document.getElementById('button1');
var m1 = document.getElementById('menu1');
test('default', function() {
// it renders!
assert.ok(true);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,24 @@
<!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 name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>core-menu-button tests</title>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'basic.html'
]);
</script>
</body>
</html>