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

update menus

Browse source
This commit is contained in:
Luke Pulverenti 2015-06-21 17:31:21 -04:00
parent 69a5028dee
commit aa7ea8891c
33 changed files with 2850 additions and 1352 deletions
Download patch file Download diff file Expand all files Collapse all files

41
dashboard-ui/bower_components/iron-menu-behavior/.bower.json vendored Normal file
View file

@ -0,0 +1,41 @@
{
"name": "iron-menu-behavior",
"version": "1.0.1",
"description": "Provides accessible menu behavior",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"polymer",
"behavior",
"menu"
],
"main": "iron-menu-behavior.html",
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-menu-behavior"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/iron-menu-behavior",
"ignore": [],
"dependencies": {
"iron-selector": "PolymerElements/iron-selector#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0",
"iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.0.1",
"_resolution": {
"type": "version",
"tag": "v1.0.1",
"commit": "3809f0eb7461c8ca63640aaa238775b3a25aa578"
},
"_source": "git://github.com/PolymerElements/iron-menu-behavior.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-menu-behavior"
}

1
dashboard-ui/bower_components/iron-menu-behavior/.gitignore vendored Normal file
View file

@ -0,0 +1 @@
bower_components

32
dashboard-ui/bower_components/iron-menu-behavior/bower.json vendored Normal file
View file

@ -0,0 +1,32 @@
{
"name": "iron-menu-behavior",
"version": "1.0.1",
"description": "Provides accessible menu behavior",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"polymer",
"behavior",
"menu"
],
"main": "iron-menu-behavior.html",
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-menu-behavior"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/iron-menu-behavior",
"ignore": [],
"dependencies": {
"iron-selector": "PolymerElements/iron-selector#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0",
"iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}

100
dashboard-ui/bower_components/iron-menu-behavior/demo/index.html vendored Normal file
View file

@ -0,0 +1,100 @@
<!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>iron-menu-behavior demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="simple-menu.html">
<link rel="import" href="simple-menubar.html">
<link rel="stylesheet" href="../../paper-styles/demo.css">
<style>
.list {
display: inline-block;
border: 1px solid #ccc;
padding: 8px 0;
}
.list li {
display: block;
padding: 8px;
}
.list li[disabled] {
color: #ccc;
}
</style>
</head>
<body>
<section>
<div>Simple menu</div>
<simple-menu class="list">
<li>item 0</li>
<li>item 1</li>
<li disabled>item 2</li>
<li>item 3</li>
</simple-menu>
</section>
<section>
<div>Multi-select menu</div>
<simple-menu class="list" multi>
<li>item 0</li>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</simple-menu>
</section>
<section>
<div>Simple menubar</div>
<simple-menubar class="list">
<li>item 0</li>
<li>item 1</li>
<li disabled>item 2</li>
<li>item 3</li>
</simple-menubar>
</section>
<section>
<div>Multi-select menubar</div>
<simple-menubar class="list" multi>
<li>item 0</li>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</simple-menubar>
</section>
</body>
</html>

50
dashboard-ui/bower_components/iron-menu-behavior/demo/simple-menu.html vendored Normal file
View file

@ -0,0 +1,50 @@
<!--
@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.html">
<dom-module id="simple-menu">
<style>
.content ::content > .iron-selected {
color: red;
}
</style>
<template>
<div class="content">
<content></content>
</div>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'simple-menu',
behaviors: [
Polymer.IronMenuBehavior
]
});
})();
</script>

54
dashboard-ui/bower_components/iron-menu-behavior/demo/simple-menubar.html vendored Normal file
View file

@ -0,0 +1,54 @@
<!--
@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-menubar-behavior.html">
<dom-module id="simple-menubar">
<style>
.content ::content > .iron-selected {
color: red;
}
.content ::content > * {
display: inline-block;
}
</style>
<template>
<div class="content">
<content></content>
</div>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'simple-menubar',
behaviors: [
Polymer.IronMenubarBehavior
]
});
})();
</script>

30
dashboard-ui/bower_components/iron-menu-behavior/index.html vendored Normal file
View file

@ -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>iron-menu-behavior</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 src="iron-menubar-behavior.html"></iron-component-page>
</body>
</html>

214
dashboard-ui/bower_components/iron-menu-behavior/iron-menu-behavior.html vendored Normal file
View file

@ -0,0 +1,214 @@
<!--
@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-selector/iron-multi-selectable.html">
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<script>
/**
* `Polymer.IronMenuBehavior` implements accessible menu behavior.
*
* @demo demo/index.html
* @polymerBehavior Polymer.IronMenuBehavior
*/
Polymer.IronMenuBehaviorImpl = {
properties: {
/**
* Returns the currently focused item.
*
* @attribute focusedItem
* @type Object
*/
focusedItem: {
observer: '_focusedItemChanged',
readOnly: true,
type: Object
},
/**
* The attribute to use on menu items to look up the item title. Typing the first
* letter of an item when the menu is open focuses that item. If unset, `textContent`
* will be used.
*
* @attribute attrForItemTitle
* @type String
*/
attrForItemTitle: {
type: String
}
},
hostAttributes: {
'role': 'menu',
'tabindex': '0'
},
observers: [
'_updateMultiselectable(multi)'
],
listeners: {
'focus': '_onFocus',
'keydown': '_onKeydown'
},
keyBindings: {
'up': '_onUpKey',
'down': '_onDownKey',
'esc': '_onEscKey',
'enter': '_onEnterKey',
'shift+tab:keydown': '_onShiftTabDown'
},
_updateMultiselectable: function(multi) {
if (multi) {
this.setAttribute('aria-multiselectable', 'true');
} else {
this.removeAttribute('aria-multiselectable');
}
},
_onShiftTabDown: function() {
var oldTabIndex;
Polymer.IronMenuBehaviorImpl._shiftTabPressed = true;
oldTabIndex = this.getAttribute('tabindex');
this.setAttribute('tabindex', '-1');
this.async(function() {
this.setAttribute('tabindex', oldTabIndex);
Polymer.IronMenuBehaviorImpl._shiftTabPressed = false;
// Note: polymer/polymer#1305
}, 1);
},
_applySelection: function(item, isSelected) {
if (isSelected) {
item.setAttribute('aria-selected', 'true');
} else {
item.removeAttribute('aria-selected');
}
Polymer.IronSelectableBehavior._applySelection.apply(this, arguments);
},
_focusedItemChanged: function(focusedItem, old) {
old && old.setAttribute('tabindex', '-1');
if (focusedItem) {
focusedItem.setAttribute('tabindex', '0');
focusedItem.focus();
}
},
select: function(value) {
if (this._defaultFocusAsync) {
this.cancelAsync(this._defaultFocusAsync);
this._defaultFocusAsync = null;
}
var item = this._valueToItem(value);
this._setFocusedItem(item);
Polymer.IronMultiSelectableBehaviorImpl.select.apply(this, arguments);
},
_onFocus: function(event) {
if (Polymer.IronMenuBehaviorImpl._shiftTabPressed) {
return;
}
// do not focus the menu itself
this.blur();
// clear the cached focus item
this._setFocusedItem(null);
this._defaultFocusAsync = this.async(function() {
// focus the selected item when the menu receives focus, or the first item
// if no item is selected
var selectedItem = this.multi ? (this.selectedItems && this.selectedItems[0]) : this.selectedItem;
if (selectedItem) {
this._setFocusedItem(selectedItem);
} else {
this._setFocusedItem(this.items[0]);
}
// async 100ms to wait for `select` to get called from `_itemActivate`
}, 100);
},
_onUpKey: function() {
// up and down arrows moves the focus
this._focusPrevious();
},
_onDownKey: function() {
this._focusNext();
},
_onEscKey: function() {
// esc blurs the control
this.focusedItem.blur();
},
_onEnterKey: function(event) {
// enter activates the item unless it is disabled
this._activateFocused(event.detail.keyboardEvent);
},
_onKeydown: function(event) {
if (this.keyboardEventMatchesKeys(event, 'up down esc enter')) {
return;
}
// all other keys focus the menu item starting with that character
this._focusWithKeyboardEvent(event);
},
_focusWithKeyboardEvent: function(event) {
for (var i = 0, item; item = this.items[i]; i++) {
var attr = this.attrForItemTitle || 'textContent';
var title = item[attr] || item.getAttribute(attr);
if (title && title.trim().charAt(0).toLowerCase() === String.fromCharCode(event.keyCode).toLowerCase()) {
this._setFocusedItem(item);
break;
}
}
},
_activateFocused: function(event) {
if (!this.focusedItem.hasAttribute('disabled')) {
this._activateHandler(event);
}
},
_focusPrevious: function() {
var length = this.items.length;
var index = (Number(this.indexOf(this.focusedItem)) - 1 + length) % length;
this._setFocusedItem(this.items[index]);
},
_focusNext: function() {
var index = (Number(this.indexOf(this.focusedItem)) + 1) % this.items.length;
this._setFocusedItem(this.items[index]);
}
};
Polymer.IronMenuBehaviorImpl._shiftTabPressed = false;
/** @polymerBehavior Polymer.IronMenuBehavior */
Polymer.IronMenuBehavior = [
Polymer.IronMultiSelectableBehavior,
Polymer.IronA11yKeysBehavior,
Polymer.IronMenuBehaviorImpl
];
</script>

65
dashboard-ui/bower_components/iron-menu-behavior/iron-menubar-behavior.html vendored Normal file
View file

@ -0,0 +1,65 @@
<!--
@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.html">
<script>
/**
* `Polymer.IronMenubarBehavior` implements accessible menubar behavior.
*
* @polymerBehavior Polymer.IronMenubarBehavior
*/
Polymer.IronMenubarBehaviorImpl = {
hostAttributes: {
'role': 'menubar'
},
keyBindings: {
'left': '_onLeftKey',
'right': '_onRightKey'
},
_onUpKey: function(event) {
this._activateFocused(event.detail.keyboardEvent);
},
_onDownKey: function(event) {
this._activateFocused(event.detail.keyboardEvent);
},
_onLeftKey: function() {
this._focusPrevious();
},
_onRightKey: function() {
this._focusNext();
},
_onKeydown: function(event) {
if (this.keyboardEventMatchesKeys(event, 'up down left right esc enter')) {
return;
}
// all other keys focus the menu item starting with that character
this._focusWithKeyboardEvent(event);
}
};
/** @polymerBehavior Polymer.IronMenubarBehavior */
Polymer.IronMenubarBehavior = [
Polymer.IronMenuBehavior,
Polymer.IronMenubarBehaviorImpl
];
</script>

35
dashboard-ui/bower_components/iron-menu-behavior/test/index.html vendored Normal file
View file

@ -0,0 +1,35 @@
<!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>iron-menu-behavior 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([
'iron-menu-behavior.html',
'iron-menubar-behavior.html'
]);
</script>
</body>
</html>

108
dashboard-ui/bower_components/iron-menu-behavior/test/iron-menu-behavior.html vendored Normal file
View file

@ -0,0 +1,108 @@
<!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>iron-menu-behavior 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="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="test-menu.html">
</head>
<body>
<test-fixture id="basic">
<template>
<test-menu>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
</test-menu>
</template>
</test-fixture>
<test-fixture id="multi">
<template>
<test-menu multi>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
</test-menu>
</template>
</test-fixture>
<script>
suite('menu a11y tests', function() {
test('menu has role="menu"', function() {
var menu = fixture('basic');
assert.equal(menu.getAttribute('role'), 'menu', 'has role="menu"');
});
test('first item gets focus when menu is focused', function(done) {
var menu = fixture('basic');
menu.focus();
setTimeout(function() {
assert.equal(document.activeElement, menu.firstElementChild, 'document.activeElement is first item')
done();
// wait for async in _onFocus
}, 200);
});
test('selected item gets focus when menu is focused', function(done) {
var menu = fixture('basic');
menu.selected = 1;
menu.focus();
setTimeout(function() {
assert.equal(document.activeElement, menu.selectedItem, 'document.activeElement is selected item');
done();
// wait for async in _onFocus
}, 200);
});
test('last activated item in a multi select menu is focused', function(done) {
var menu = fixture('multi');
menu.selected = 0;
menu.items[1].click();
setTimeout(function() {
assert.equal(document.activeElement, menu.items[1], 'document.activeElement is last activated item');
done();
// wait for async in _onFocus
}, 200);
});
test('deselection in a multi select menu focuses deselected item', function(done) {
var menu = fixture('multi');
menu.selected = 0;
menu.items[0].click();
setTimeout(function() {
assert.equal(document.activeElement, menu.items[0], 'document.activeElement is last activated item');
done();
// wait for async in _onFocus
}, 200);
});
});
</script>
</body>
</html>

108
dashboard-ui/bower_components/iron-menu-behavior/test/iron-menubar-behavior.html vendored Normal file
View file

@ -0,0 +1,108 @@
<!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>iron-menubar-behavior 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="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="test-menubar.html">
</head>
<body>
<test-fixture id="basic">
<template>
<test-menubar>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
</test-menubar>
</template>
</test-fixture>
<test-fixture id="multi">
<template>
<test-menubar multi>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
</test-menubar>
</template>
</test-fixture>
<script>
suite('menubar a11y tests', function() {
test('menubar has role="menubar"', function() {
var menubar = fixture('basic');
assert.equal(menubar.getAttribute('role'), 'menubar', 'has role="menubar"');
});
test('first item gets focus when menubar is focused', function(done) {
var menubar = fixture('basic');
menubar.focus();
setTimeout(function() {
assert.equal(document.activeElement, menubar.firstElementChild, 'document.activeElement is first item')
done();
// wait for async in _onFocus
}, 200);
});
test('selected item gets focus when menubar is focused', function(done) {
var menubar = fixture('basic');
menubar.selected = 1;
menubar.focus();
setTimeout(function() {
assert.equal(document.activeElement, menubar.selectedItem, 'document.activeElement is selected item');
done();
// wait for async in _onFocus
}, 200);
});
test('last activated item in a multi select menubar is focused', function(done) {
var menubar = fixture('multi');
menubar.selected = 0;
menubar.items[1].click();
setTimeout(function() {
assert.equal(document.activeElement, menubar.items[1], 'document.activeElement is last activated item');
done();
// wait for async in _onFocus
}, 200);
});
test('deselection in a multi select menubar focuses deselected item', function(done) {
var menubar = fixture('multi');
menubar.selected = 0;
menubar.items[0].click();
setTimeout(function() {
assert.equal(document.activeElement, menubar.items[0], 'document.activeElement is last activated item');
done();
// wait for async in _onFocus
}, 200);
});
});
</script>
</body>
</html>

40
dashboard-ui/bower_components/iron-menu-behavior/test/test-menu.html vendored Normal file
View file

@ -0,0 +1,40 @@
<!--
@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.html">
<dom-module id="test-menu">
<template>
<content></content>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'test-menu',
behaviors: [
Polymer.IronMenuBehavior
]
});
})();
</script>

40
dashboard-ui/bower_components/iron-menu-behavior/test/test-menubar.html vendored Normal file
View file

@ -0,0 +1,40 @@
<!--
@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-menubar-behavior.html">
<dom-module id="test-menubar">
<template>
<content></content>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'test-menubar',
behaviors: [
Polymer.IronMenubarBehavior
]
});
})();
</script>

26
dashboard-ui/bower_components/paper-drawer-panel/paper-drawer-panel.css vendored
View file

@ -6,8 +6,8 @@ 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;
position: absolute;
@ -24,16 +24,16 @@ iron-selector > #drawer {
left: 0;
height: 100%;
background-color: white;
will-change: transform;
box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
@apply(--paper-drawer-panel-drawer-container);
}
.transition > #drawer {
transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s;
transition: transform ease-in-out 0.3s, width ease-in-out 0.3s;
transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;
transition: transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;
}
.left-drawer > #drawer {
@ -88,6 +88,10 @@ iron-selector > #main {
background-color: rgba(0, 0, 0, 0.3);
}
.narrow-layout > #drawer {
will-change: transform;
}
.narrow-layout > #drawer.iron-selected {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
}
@ -107,19 +111,24 @@ iron-selector > #main {
.right-drawer.narrow-layout > #drawer:not(.iron-selected) {
left: auto;
visibility: hidden;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.right-drawer.narrow-layout.dragging > #drawer:not(.iron-selected),
.right-drawer.narrow-layout.peeking > #drawer:not(.iron-selected) {
visibility: visible;
}
.narrow-layout > #main {
left: 0 !important;
padding: 0;
}
.right-drawer.narrow-layout > #main {
left: 0;
right: 0;
padding: 0;
}
.narrow-layout > #main:not(.iron-selected) > #scrim,
@ -133,8 +142,9 @@ iron-selector > #main {
min-height: 100%;
left: 0;
right: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {

926
dashboard-ui/bower_components/paper-drawer-panel/paper-drawer-panel.html vendored
View file

@ -105,487 +105,489 @@ To change the drawer container when it's in the right side:
-->
<dom-module id="paper-drawer-panel">
<link rel="import" type="css" href="paper-drawer-panel.css">
<link rel="import" type="css" href="paper-drawer-panel.css">
<template>
<iron-media-query
id="mq"
on-query-matches-changed="_onQueryMatchesChanged"
query="[[_computeMediaQuery(forceNarrow, responsiveWidth)]]">
</iron-media-query>
<template>
<iron-media-query id="mq"
on-query-matches-changed="_onQueryMatchesChanged"
query="[[_computeMediaQuery(forceNarrow, responsiveWidth)]]">
</iron-media-query>
<iron-selector
attr-for-selected="id"
class$="[[_computeIronSelectorClass(narrow, transition, dragging, rightDrawer)]]"
activate-event=""
selected="[[selected]]">
<iron-selector attr-for-selected="id"
class$="[[_computeIronSelectorClass(narrow, transition, dragging, rightDrawer, peeking)]]"
activate-event=""
selected="[[selected]]">
<div id="main" style$="[[_computeMainStyle(narrow, rightDrawer, drawerWidth)]]">
<content select="[main]"></content>
<div id="scrim" on-tap="closeDrawer"></div>
</div>
<div id="main" style$="[[_computeMainStyle(narrow, rightDrawer, drawerWidth)]]">
<content select="[main]"></content>
<div id="scrim" on-tap="closeDrawer"></div>
</div>
<div id="drawer" style$="[[_computeDrawerStyle(drawerWidth)]]">
<content select="[drawer]"></content>
</div>
<div id="drawer" style$="[[_computeDrawerStyle(drawerWidth)]]">
<content select="[drawer]"></content>
</div>
</iron-selector>
</template>
</iron-selector>
</template>
</dom-module>
<script>
(function() {
(function () {
'use strict';
'use strict';
// this would be the only `paper-drawer-panel` in
// the whole app that can be in `dragging` state
var sharedPanel = null;
// this would be the only `paper-drawer-panel` in
// the whole app that can be in `dragging` state
var sharedPanel = null;
function classNames(obj) {
var classes = [];
for (var key in obj) {
if (obj.hasOwnProperty(key) && obj[key]) {
classes.push(key);
}
}
return classes.join(' ');
}
Polymer({
is: 'paper-drawer-panel',
/**
* Fired when the narrow layout changes.
*
* @event paper-responsive-change {{narrow: boolean}} detail -
* narrow: true if the panel is in narrow layout.
*/
/**
* Fired when the selected panel changes.
*
* Listening for this event is an alternative to observing changes in the `selected` attribute.
* This event is fired both when a panel is selected and deselected.
* The `isSelected` detail property contains the selection state.
*
* @event paper-select {{isSelected: boolean, item: Object}} detail -
* isSelected: True for selection and false for deselection.
* item: The panel that the event refers to.
*/
properties: {
/**
* The panel to be selected when `paper-drawer-panel` changes to narrow
* layout.
*/
defaultSelected: {
type: String,
value: 'main'
},
/**
* If true, swipe from the edge is disable.
*/
disableEdgeSwipe: {
type: Boolean,
value: false
},
/**
* If true, swipe to open/close the drawer is disabled.
*/
disableSwipe: {
type: Boolean,
value: false
},
/**
* Whether the user is dragging the drawer interactively.
*/
dragging: {
type: Boolean,
value: false,
readOnly: true,
notify: true
},
/**
* Width of the drawer panel.
*/
drawerWidth: {
type: String,
value: '256px'
},
/**
* How many pixels on the side of the screen are sensitive to edge
* swipes and peek.
*/
edgeSwipeSensitivity: {
type: Number,
value: 30
},
/**
* If true, ignore `responsiveWidth` setting and force the narrow layout.
*/
forceNarrow: {
type: Boolean,
value: false
},
/**
* Whether the browser has support for the transform CSS property.
*/
hasTransform: {
type: Boolean,
value: function() {
return 'transform' in this.style;
}
},
/**
* Whether the browser has support for the will-change CSS property.
*/
hasWillChange: {
type: Boolean,
value: function() {
return 'willChange' in this.style;
}
},
/**
* Returns true if the panel is in narrow layout. This is useful if you
* need to show/hide elements based on the layout.
*/
narrow: {
reflectToAttribute: true,
type: Boolean,
value: false,
readOnly: true,
notify: true
},
/**
* Whether the drawer is peeking out from the edge.
*/
peeking: {
type: Boolean,
value: false,
readOnly: true,
notify: true
},
/**
* Max-width when the panel changes to narrow layout.
*/
responsiveWidth: {
type: String,
value: '640px'
},
/**
* If true, position the drawer to the right.
*/
rightDrawer: {
type: Boolean,
value: false
},
/**
* The panel that is being selected. `drawer` for the drawer panel and
* `main` for the main panel.
*/
selected: {
reflectToAttribute: true,
notify: true,
type: String,
value: null
},
/**
* The attribute on elements that should toggle the drawer on tap, also elements will
* automatically be hidden in wide layout.
*/
drawerToggleAttribute: {
type: String,
value: 'paper-drawer-toggle'
},
/**
* Whether the transition is enabled.
*/
transition: {
type: Boolean,
value: false
},
},
listeners: {
tap: '_onTap',
track: '_onTrack',
down: '_downHandler',
up: '_upHandler'
},
observers: [
'_forceNarrowChanged(forceNarrow, defaultSelected)'
],
/**
* Toggles the panel open and closed.
*
* @method togglePanel
*/
togglePanel: function() {
if (this._isMainSelected()) {
this.openDrawer();
} else {
this.closeDrawer();
}
},
/**
* Opens the drawer.
*
* @method openDrawer
*/
openDrawer: function() {
this.selected = 'drawer';
},
/**
* Closes the drawer.
*
* @method closeDrawer
*/
closeDrawer: function() {
this.selected = 'main';
},
ready: function() {
// Avoid transition at the beginning e.g. page loads and enable
// transitions only after the element is rendered and ready.
this.transition = true;
},
_computeIronSelectorClass: function(narrow, transition, dragging, rightDrawer) {
return classNames({
dragging: dragging,
'narrow-layout': narrow,
'right-drawer': rightDrawer,
'left-drawer': !rightDrawer,
transition: transition
});
},
_computeDrawerStyle: function(drawerWidth) {
return 'width:' + drawerWidth + ';';
},
_computeMainStyle: function(narrow, rightDrawer, drawerWidth) {
var style = '';
style += 'left:' + ((narrow || rightDrawer) ? '0' : drawerWidth) + ';';
if (rightDrawer) {
style += 'right:' + (narrow ? '' : drawerWidth) + ';';
} else {
style += 'right:;';
}
return style;
},
_computeMediaQuery: function(forceNarrow, responsiveWidth) {
return forceNarrow ? '' : '(max-width: ' + responsiveWidth + ')';
},
_computeSwipeOverlayHidden: function(narrow, disableEdgeSwipe) {
return !narrow || disableEdgeSwipe;
},
_onTrack: function(e) {
if (sharedPanel && this !== sharedPanel) {
return;
}
switch (e.detail.state) {
case 'start':
this._trackStart(e);
break;
case 'track':
this._trackX(e);
break;
case 'end':
this._trackEnd(e);
break;
}
},
_responsiveChange: function(narrow) {
this._setNarrow(narrow);
if (this.narrow) {
this.selected = this.defaultSelected;
}
this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all');
this.fire('paper-responsive-change', {narrow: this.narrow});
},
_onQueryMatchesChanged: function(e) {
this._responsiveChange(e.detail.value);
},
_forceNarrowChanged: function() {
// set the narrow mode only if we reached the `responsiveWidth`
this._responsiveChange(this.forceNarrow || this.$.mq.queryMatches);
},
_swipeAllowed: function() {
return this.narrow && !this.disableSwipe;
},
_isMainSelected: function() {
return this.selected === 'main';
},
_startEdgePeek: function() {
this.width = this.$.drawer.offsetWidth;
this._moveDrawer(this._translateXForDeltaX(this.rightDrawer ?
-this.edgeSwipeSensitivity : this.edgeSwipeSensitivity));
this._setPeeking(true);
},
_stopEdgePeek: function() {
if (this.peeking) {
this._setPeeking(false);
this._moveDrawer(null);
}
},
_downHandler: function(e) {
if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(e) && !sharedPanel) {
this._startEdgePeek();
// grab this panel
sharedPanel = this;
}
},
_upHandler: function() {
this._stopEdgePeek();
// release the panel
sharedPanel = null;
},
_onTap: function(e) {
var targetElement = Polymer.dom(e).localTarget;
var isTargetToggleElement = targetElement &&
this.drawerToggleAttribute &&
targetElement.hasAttribute(this.drawerToggleAttribute);
if (isTargetToggleElement) {
this.togglePanel();
}
},
_isEdgeTouch: function(e) {
var x = e.detail.x;
return !this.disableEdgeSwipe && this._swipeAllowed() &&
(this.rightDrawer ?
x >= this.offsetWidth - this.edgeSwipeSensitivity :
x <= this.edgeSwipeSensitivity);
},
_trackStart: function(event) {
if (this._swipeAllowed()) {
sharedPanel = this;
this._setDragging(true);
if (this._isMainSelected()) {
this._setDragging(this.peeking || this._isEdgeTouch(event));
}
if (this.dragging) {
this.width = this.$.drawer.offsetWidth;
this.transition = false;
}
}
},
_translateXForDeltaX: function(deltaX) {
var isMain = this._isMainSelected();
if (this.rightDrawer) {
return Math.max(0, isMain ? this.width + deltaX : deltaX);
} else {
return Math.min(0, isMain ? deltaX - this.width : deltaX);
}
},
_trackX: function(e) {
if (this.dragging) {
var dx = e.detail.dx;
if (this.peeking) {
if (Math.abs(dx) <= this.edgeSwipeSensitivity) {
// Ignore trackx until we move past the edge peek.
return;
function classNames(obj) {
var classes = [];
for (var key in obj) {
if (obj.hasOwnProperty(key) && obj[key]) {
classes.push(key);
}
}
this._setPeeking(false);
}
this._moveDrawer(this._translateXForDeltaX(dx));
}
},
_trackEnd: function(e) {
if (this.dragging) {
var xDirection = e.detail.dx > 0;
this._setDragging(false);
this.transition = true;
sharedPanel = null;
this._moveDrawer(null);
if (this.rightDrawer) {
this[xDirection ? 'closeDrawer' : 'openDrawer']();
} else {
this[xDirection ? 'openDrawer' : 'closeDrawer']();
}
}
},
_transformForTranslateX: function(translateX) {
if (translateX === null) {
return '';
return classes.join(' ');
}
return this.hasWillChange ? 'translateX(' + translateX + 'px)' :
'translate3d(' + translateX + 'px, 0, 0)';
},
Polymer({
_moveDrawer: function(translateX) {
var s = this.$.drawer.style;
is: 'paper-drawer-panel',
if (this.hasTransform) {
s.transform = this._transformForTranslateX(translateX);
} else {
s.webkitTransform = this._transformForTranslateX(translateX);
}
}
/**
* Fired when the narrow layout changes.
*
* @event paper-responsive-change {{narrow: boolean}} detail -
* narrow: true if the panel is in narrow layout.
*/
});
/**
* Fired when the a panel is selected.
*
* Listening for this event is an alternative to observing changes in the `selected` attribute.
* This event is fired both when a panel is selected.
*
* @event iron-select {{item: Object}} detail -
* item: The panel that the event refers to.
*/
}());
/**
* Fired when a panel is deselected.
*
* Listening for this event is an alternative to observing changes in the `selected` attribute.
* This event is fired both when a panel is deselected.
*
* @event iron-deselect {{item: Object}} detail -
* item: The panel that the event refers to.
*/
properties: {
</script>
/**
* The panel to be selected when `paper-drawer-panel` changes to narrow
* layout.
*/
defaultSelected: {
type: String,
value: 'main'
},
/**
* If true, swipe from the edge is disable.
*/
disableEdgeSwipe: {
type: Boolean,
value: false
},
/**
* If true, swipe to open/close the drawer is disabled.
*/
disableSwipe: {
type: Boolean,
value: false
},
/**
* Whether the user is dragging the drawer interactively.
*/
dragging: {
type: Boolean,
value: false,
readOnly: true,
notify: true
},
/**
* Width of the drawer panel.
*/
drawerWidth: {
type: String,
value: '256px'
},
/**
* How many pixels on the side of the screen are sensitive to edge
* swipes and peek.
*/
edgeSwipeSensitivity: {
type: Number,
value: 30
},
/**
* If true, ignore `responsiveWidth` setting and force the narrow layout.
*/
forceNarrow: {
type: Boolean,
value: false
},
/**
* Whether the browser has support for the transform CSS property.
*/
hasTransform: {
type: Boolean,
value: function () {
return 'transform' in this.style;
}
},
/**
* Whether the browser has support for the will-change CSS property.
*/
hasWillChange: {
type: Boolean,
value: function () {
return 'willChange' in this.style;
}
},
/**
* Returns true if the panel is in narrow layout. This is useful if you
* need to show/hide elements based on the layout.
*/
narrow: {
reflectToAttribute: true,
type: Boolean,
value: false,
readOnly: true,
notify: true
},
/**
* Whether the drawer is peeking out from the edge.
*/
peeking: {
type: Boolean,
value: false,
readOnly: true,
notify: true
},
/**
* Max-width when the panel changes to narrow layout.
*/
responsiveWidth: {
type: String,
value: '640px'
},
/**
* If true, position the drawer to the right.
*/
rightDrawer: {
type: Boolean,
value: false
},
/**
* The panel that is being selected. `drawer` for the drawer panel and
* `main` for the main panel.
*/
selected: {
reflectToAttribute: true,
notify: true,
type: String,
value: null
},
/**
* The attribute on elements that should toggle the drawer on tap, also elements will
* automatically be hidden in wide layout.
*/
drawerToggleAttribute: {
type: String,
value: 'paper-drawer-toggle'
},
/**
* Whether the transition is enabled.
*/
transition: {
type: Boolean,
value: false
},
},
listeners: {
tap: '_onTap',
track: '_onTrack',
down: '_downHandler',
up: '_upHandler'
},
observers: [
'_forceNarrowChanged(forceNarrow, defaultSelected)'
],
/**
* Toggles the panel open and closed.
*
* @method togglePanel
*/
togglePanel: function () {
if (this._isMainSelected()) {
this.openDrawer();
} else {
this.closeDrawer();
}
},
/**
* Opens the drawer.
*
* @method openDrawer
*/
openDrawer: function () {
this.selected = 'drawer';
this.fire('paper-drawer-panel-open');
},
/**
* Closes the drawer.
*
* @method closeDrawer
*/
closeDrawer: function () {
this.selected = 'main';
this.fire('paper-drawer-panel-close');
},
ready: function () {
// Avoid transition at the beginning e.g. page loads and enable
// transitions only after the element is rendered and ready.
this.transition = true;
},
_computeIronSelectorClass: function (narrow, transition, dragging, rightDrawer, peeking) {
return classNames({
dragging: dragging,
'narrow-layout': narrow,
'right-drawer': rightDrawer,
'left-drawer': !rightDrawer,
transition: transition,
peeking: peeking
});
},
_computeDrawerStyle: function (drawerWidth) {
return 'width:' + drawerWidth + ';';
},
_computeMainStyle: function (narrow, rightDrawer, drawerWidth) {
var style = '';
style += 'left:' + ((narrow || rightDrawer) ? '0' : drawerWidth) + ';';
if (rightDrawer) {
style += 'right:' + (narrow ? '' : drawerWidth) + ';';
}
return style;
},
_computeMediaQuery: function (forceNarrow, responsiveWidth) {
return forceNarrow ? '' : '(max-width: ' + responsiveWidth + ')';
},
_computeSwipeOverlayHidden: function (narrow, disableEdgeSwipe) {
return !narrow || disableEdgeSwipe;
},
_onTrack: function (event) {
if (sharedPanel && this !== sharedPanel) {
return;
}
switch (event.detail.state) {
case 'start':
this._trackStart(event);
break;
case 'track':
this._trackX(event);
break;
case 'end':
this._trackEnd(event);
break;
}
},
_responsiveChange: function (narrow) {
this._setNarrow(narrow);
if (this.narrow) {
this.selected = this.defaultSelected;
}
this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all');
this.fire('paper-responsive-change', { narrow: this.narrow });
},
_onQueryMatchesChanged: function (event) {
this._responsiveChange(event.detail.value);
},
_forceNarrowChanged: function () {
// set the narrow mode only if we reached the `responsiveWidth`
this._responsiveChange(this.forceNarrow || this.$.mq.queryMatches);
},
_swipeAllowed: function () {
return this.narrow && !this.disableSwipe;
},
_isMainSelected: function () {
return this.selected === 'main';
},
_startEdgePeek: function () {
this.width = this.$.drawer.offsetWidth;
this._moveDrawer(this._translateXForDeltaX(this.rightDrawer ?
-this.edgeSwipeSensitivity : this.edgeSwipeSensitivity));
this._setPeeking(true);
},
_stopEdgePeek: function () {
if (this.peeking) {
this._setPeeking(false);
this._moveDrawer(null);
}
},
_downHandler: function (event) {
if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(event) && !sharedPanel) {
this._startEdgePeek();
// cancel selection
event.preventDefault();
// grab this panel
sharedPanel = this;
}
},
_upHandler: function () {
this._stopEdgePeek();
// release the panel
sharedPanel = null;
},
_onTap: function (event) {
var targetElement = Polymer.dom(event).localTarget;
var isTargetToggleElement = targetElement &&
this.drawerToggleAttribute &&
targetElement.hasAttribute(this.drawerToggleAttribute);
if (isTargetToggleElement) {
this.togglePanel();
}
},
_isEdgeTouch: function (event) {
var x = event.detail.x;
return !this.disableEdgeSwipe && this._swipeAllowed() &&
(this.rightDrawer ?
x >= this.offsetWidth - this.edgeSwipeSensitivity :
x <= this.edgeSwipeSensitivity);
},
_trackStart: function (event) {
if (this._swipeAllowed()) {
sharedPanel = this;
this._setDragging(true);
if (this._isMainSelected()) {
this._setDragging(this.peeking || this._isEdgeTouch(event));
}
if (this.dragging) {
this.width = this.$.drawer.offsetWidth;
this.transition = false;
}
}
},
_translateXForDeltaX: function (deltaX) {
var isMain = this._isMainSelected();
if (this.rightDrawer) {
return Math.max(0, isMain ? this.width + deltaX : deltaX);
} else {
return Math.min(0, isMain ? deltaX - this.width : deltaX);
}
},
_trackX: function (event) {
if (this.dragging) {
var dx = event.detail.dx;
if (this.peeking) {
if (Math.abs(dx) <= this.edgeSwipeSensitivity) {
// Ignore trackx until we move past the edge peek.
return;
}
this._setPeeking(false);
}
this._moveDrawer(this._translateXForDeltaX(dx));
}
},
_trackEnd: function (event) {
if (this.dragging) {
var xDirection = event.detail.dx > 0;
this._setDragging(false);
this.transition = true;
sharedPanel = null;
this._moveDrawer(null);
if (this.rightDrawer) {
this[xDirection ? 'closeDrawer' : 'openDrawer']();
} else {
this[xDirection ? 'openDrawer' : 'closeDrawer']();
}
}
},
_transformForTranslateX: function (translateX) {
if (translateX === null) {
return '';
}
return this.hasWillChange ? 'translateX(' + translateX + 'px)' :
'translate3d(' + translateX + 'px, 0, 0)';
},
_moveDrawer: function (translateX) {
this.transform(this._transformForTranslateX(translateX), this.$.drawer);
}
});
}());
</script>

42
dashboard-ui/bower_components/paper-menu/.bower.json vendored Normal file
View file

@ -0,0 +1,42 @@
{
"name": "paper-menu",
"version": "1.0.0",
"description": "Implements an accessible material design menu",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"polymer",
"menu"
],
"main": "paper-menu.html",
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/paper-menu"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/paper-menu",
"ignore": [],
"dependencies": {
"iron-menu-behavior": "PolymerElements/iron-menu-behavior#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"paper-item": "PolymerElements/paper-item#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.0.0",
"_resolution": {
"type": "version",
"tag": "v1.0.0",
"commit": "0642450ec9df0fc0b1d909842f436c3dea79ed1e"
},
"_source": "git://github.com/PolymerElements/paper-menu.git",
"_target": "~1.0.0",
"_originalSource": "PolymerElements/paper-menu",
"_direct": true
}

1
dashboard-ui/bower_components/paper-menu/.gitignore vendored Normal file
View file

@ -0,0 +1 @@
bower_components/

32
dashboard-ui/bower_components/paper-menu/bower.json vendored Normal file
View file

@ -0,0 +1,32 @@
{
"name": "paper-menu",
"version": "1.0.0",
"description": "Implements an accessible material design menu",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"polymer",
"menu"
],
"main": "paper-menu.html",
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/paper-menu"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/paper-menu",
"ignore": [],
"dependencies": {
"iron-menu-behavior": "PolymerElements/iron-menu-behavior#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"paper-item": "PolymerElements/paper-item#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}

81
dashboard-ui/bower_components/paper-menu/demo/index.html vendored Normal file
View file

@ -0,0 +1,81 @@
<!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-menu demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../paper-item/paper-item.html">
<link rel="import" href="../paper-menu.html">
<link rel="import" href="../../paper-styles/paper-styles.html">
<link rel="import" href="../../paper-styles/demo-pages.html">
<style>
.horizontal-section {
padding: 0 !important;
}
.avatar {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
background: #ccc;
}
</style>
</head>
<body>
<div class="horizontal center-justified layout">
<div>
<h4>Standard</h4>
<div class="horizontal-section">
<paper-menu class="list">
<paper-item>Inbox</paper-item>
<paper-item>Starred</paper-item>
<paper-item>Sent mail</paper-item>
<paper-item>Drafts</paper-item>
</paper-menu>
</div>
</div>
<div>
<h4>Pre-selected</h4>
<div class="horizontal-section">
<paper-menu class="list" 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-menu>
</div>
</div>
<div>
<h4>Multi-select</h4>
<div class="horizontal-section">
<paper-menu class="list" multi>
<paper-item>Bold</paper-item>
<paper-item>Italic</paper-item>
<paper-item>Underline</paper-item>
<paper-item>Strikethrough</paper-item>
</paper-menu>
</div>
</div>
</div>
</body>
</html>

35
dashboard-ui/bower_components/paper-menu/hero.svg vendored Normal file
View file

@ -0,0 +1,35 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
<g id="background" display="none">
<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
</g>
<g id="label">
</g>
<g id="art">
<g>
<circle cx="86.5" cy="39" r="4"/>
<path d="M138,44c-2,0-3.6-2.4-4.6-4.6c-1.1-2.1-1.7-3.4-3-3.4s-2,1.3-3,3.4c-1.1,2.1-2.2,4.6-4.9,4.6c-2.6,0-3.8-2.4-4.9-4.6
c-1.1-2.1-1.8-3.4-3.1-3.4c-1.3,0-2,1.3-3.1,3.4c-1.1,2.1-2.3,4.6-4.9,4.6c-2.6,0-4.1-2.4-5.1-4.6C100.3,37.3,100,36,98,36v-2
c3,0,4.1,2.4,5.1,4.6c1.1,2.1,1.9,3.4,3.2,3.4c1.3,0,2.1-1.3,3.2-3.4c1.1-2.1,2.3-4.6,4.9-4.6c2.6,0,3.8,2.4,4.9,4.6
c1.1,2.1,1.8,3.4,3.1,3.4c1.3,0,2-1.3,3.1-3.4c1.1-2.1,2.3-4.6,4.9-4.6s3.6,2.4,4.6,4.6c1.1,2.1,1.9,3.4,2.9,3.4V44z"/>
<circle cx="86.5" cy="63" r="4"/>
<path d="M138,68c-2,0-3.6-2.4-4.6-4.6c-1.1-2.1-1.7-3.4-3-3.4s-2,1.3-3,3.4c-1.1,2.1-2.2,4.6-4.9,4.6c-2.6,0-3.8-2.4-4.9-4.6
c-1.1-2.1-1.8-3.4-3.1-3.4c-1.3,0-2,1.3-3.1,3.4c-1.1,2.1-2.3,4.6-4.9,4.6c-2.6,0-4.1-2.4-5.1-4.6C100.3,61.3,100,60,98,60v-2
c3,0,4.1,2.4,5.1,4.6c1.1,2.1,1.9,3.4,3.2,3.4c1.3,0,2.1-1.3,3.2-3.4c1.1-2.1,2.3-4.6,4.9-4.6c2.6,0,3.8,2.4,4.9,4.6
c1.1,2.1,1.8,3.4,3.1,3.4c1.3,0,2-1.3,3.1-3.4c1.1-2.1,2.3-4.6,4.9-4.6s3.6,2.4,4.6,4.6c1.1,2.1,1.9,3.4,2.9,3.4V68z"/>
<circle cx="86.5" cy="88" r="4"/>
<path d="M138,93c-2,0-3.6-2.4-4.6-4.6c-1.1-2.1-1.7-3.4-3-3.4s-2,1.3-3,3.4c-1.1,2.1-2.2,4.6-4.9,4.6c-2.6,0-3.8-2.4-4.9-4.6
c-1.1-2.1-1.8-3.4-3.1-3.4c-1.3,0-2,1.3-3.1,3.4c-1.1,2.1-2.3,4.6-4.9,4.6c-2.6,0-4.1-2.4-5.1-4.6C100.3,86.3,100,85,98,85v-2
c3,0,4.1,2.4,5.1,4.6c1.1,2.1,1.9,3.4,3.2,3.4c1.3,0,2.1-1.3,3.2-3.4c1.1-2.1,2.3-4.6,4.9-4.6c2.6,0,3.8,2.4,4.9,4.6
c1.1,2.1,1.8,3.4,3.1,3.4c1.3,0,2-1.3,3.1-3.4c1.1-2.1,2.3-4.6,4.9-4.6s3.6,2.4,4.6,4.6c1.1,2.1,1.9,3.4,2.9,3.4V93z"/>
<path d="M151,102H73V24h78V102z M75,100h74V26H75V100z"/>
</g>
<g id="ic_x5F_add_x0D_">
</g>
</g>
<g id="Guides">
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

30
dashboard-ui/bower_components/paper-menu/index.html vendored Normal file
View file

@ -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-menu</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>

133
dashboard-ui/bower_components/paper-menu/paper-menu.html vendored Normal file
View file

@ -0,0 +1,133 @@
<!--
@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/paper-styles.html">
<!--
`<paper-menu>` implements an accessible menu control with Material Design styling. The focused item
is highlighted, and the selected item has bolded text.
<paper-menu>
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
</paper-menu>
Make a multi-select menu with the `multi` attribute. Items in a multi-select menu can be deselected,
and multiple item can be selected.
<paper-menu multi>
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
</paper-menu>
### Styling
The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--paper-menu-background-color` | Menu background color | `--primary-background-color`
`-paper-menu-color` | Menu foreground color | `--primary-text-color`
`--paper-menu-disabled-color` | Foreground color for a disabled item | `--disabled-text-color`
`--paper-menu` | Mixin applied to the menu | `{}`
`--paper-menu-selected-item` | Mixin applied to the selected item | `{}`
`--paper-menu-focused-item` | Mixin applied to the focused item | `{}`
`--paper-menu-focused-item-after` | Mixin applied to the ::after pseudo-element for the focused item | `{}`
### Accessibility
`<paper-menu>` has `role="menu"` by default. A multi-select menu will also have
`aria-multiselectable` set. It implements key bindings to navigate through the menu with the up and
down arrow keys, esc to exit the menu, and enter to activate a menu item. Typing the first letter
of a menu item will also focus it.
@group Paper Elements
@element paper-menu
@hero hero.svg
@demo demo/index.html
-->
<dom-module id="paper-menu">
<style>
:host {
display: block;
padding: 8px 0;
background: var(--paper-menu-background-color, --primary-background-color);
color: var(--paper-menu-color, --primary-text-color);
@apply(--paper-menu);
}
/* need a wrapper element to make this higher specificity than the :host rule in paper-item */
.content > ::content > .iron-selected {
font-weight: bold;
@apply(--paper-menu-selected-item);
}
.content > ::content > [disabled] {
color: var(--paper-menu-disabled-color, --disabled-text-color);
}
.content > ::content > *:focus {
position: relative;
outline: 0;
@apply(--paper-menu-colored-focused-item);
}
.content > ::content > *:focus:after {
@apply(--layout-fit);
background: currentColor;
/* FIXME move to paper-styles for next widget */
opacity: 0.12;
content: '';
@apply(--paper-menu-colored-focused-item-after);
}
.content > ::content > *[colored]:focus:after {
opacity: 0.26;
}
</style>
<template>
<div class="content">
<content></content>
</div>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'paper-menu',
behaviors: [
Polymer.IronMenuBehavior
]
});
})();
</script>

34
dashboard-ui/bower_components/paper-menu/test/index.html vendored Normal file
View file

@ -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-menu 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-menu.html'
]);
</script>
</body>
</html>

67
dashboard-ui/bower_components/paper-menu/test/paper-menu.html vendored Normal file
View file

@ -0,0 +1,67 @@
<!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-menu 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="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="../paper-menu.html">
</head>
<body>
<test-fixture id="basic">
<template>
<paper-menu>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
</paper-menu>
</template>
</test-fixture>
<script>
suite('<paper-menu>', function() {
var menu;
setup(function() {
menu = fixture('basic');
});
test('selected item is styled', function() {
var boldDiv = document.createElement('div');
boldDiv.style.fontWeight = 'bold';
document.body.appendChild(boldDiv);
menu.selected = 1;
assert.equal(getComputedStyle(menu.selectedItem).fontWeight,
getComputedStyle(boldDiv).fontWeight, 'selected item is bold');
});
});
</script>
</body>
</html>