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] {

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

@ -108,15 +108,13 @@ To change the drawer container when it's in the right side:
<link rel="import" type="css" href="paper-drawer-panel.css">
<template>
<iron-media-query
id="mq"
<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)]]"
<iron-selector attr-for-selected="id"
class$="[[_computeIronSelectorClass(narrow, transition, dragging, rightDrawer, peeking)]]"
activate-event=""
selected="[[selected]]">
@ -167,17 +165,24 @@ To change the drawer container when it's in the right side:
*/
/**
* Fired when the selected panel changes.
* 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 and deselected.
* The `isSelected` detail property contains the selection state.
* This event is fired both when a panel is selected.
*
* @event paper-select {{isSelected: boolean, item: Object}} detail -
* isSelected: True for selection and false for deselection.
* @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: {
/**
@ -359,6 +364,7 @@ To change the drawer container when it's in the right side:
*/
openDrawer: function () {
this.selected = 'drawer';
this.fire('paper-drawer-panel-open');
},
/**
@ -368,6 +374,7 @@ To change the drawer container when it's in the right side:
*/
closeDrawer: function () {
this.selected = 'main';
this.fire('paper-drawer-panel-close');
},
ready: function () {
@ -376,13 +383,14 @@ To change the drawer container when it's in the right side:
this.transition = true;
},
_computeIronSelectorClass: function(narrow, transition, dragging, rightDrawer) {
_computeIronSelectorClass: function (narrow, transition, dragging, rightDrawer, peeking) {
return classNames({
dragging: dragging,
'narrow-layout': narrow,
'right-drawer': rightDrawer,
'left-drawer': !rightDrawer,
transition: transition
transition: transition,
peeking: peeking
});
},
@ -397,8 +405,6 @@ To change the drawer container when it's in the right side:
if (rightDrawer) {
style += 'right:' + (narrow ? '' : drawerWidth) + ';';
} else {
style += 'right:;';
}
return style;
@ -412,19 +418,19 @@ To change the drawer container when it's in the right side:
return !narrow || disableEdgeSwipe;
},
_onTrack: function(e) {
_onTrack: function (event) {
if (sharedPanel && this !== sharedPanel) {
return;
}
switch (e.detail.state) {
switch (event.detail.state) {
case 'start':
this._trackStart(e);
this._trackStart(event);
break;
case 'track':
this._trackX(e);
this._trackX(event);
break;
case 'end':
this._trackEnd(e);
this._trackEnd(event);
break;
}
@ -441,8 +447,8 @@ To change the drawer container when it's in the right side:
this.fire('paper-responsive-change', { narrow: this.narrow });
},
_onQueryMatchesChanged: function(e) {
this._responsiveChange(e.detail.value);
_onQueryMatchesChanged: function (event) {
this._responsiveChange(event.detail.value);
},
_forceNarrowChanged: function () {
@ -472,9 +478,11 @@ To change the drawer container when it's in the right side:
}
},
_downHandler: function(e) {
if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(e) && !sharedPanel) {
_downHandler: function (event) {
if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(event) && !sharedPanel) {
this._startEdgePeek();
// cancel selection
event.preventDefault();
// grab this panel
sharedPanel = this;
}
@ -486,8 +494,8 @@ To change the drawer container when it's in the right side:
sharedPanel = null;
},
_onTap: function(e) {
var targetElement = Polymer.dom(e).localTarget;
_onTap: function (event) {
var targetElement = Polymer.dom(event).localTarget;
var isTargetToggleElement = targetElement &&
this.drawerToggleAttribute &&
targetElement.hasAttribute(this.drawerToggleAttribute);
@ -497,8 +505,8 @@ To change the drawer container when it's in the right side:
}
},
_isEdgeTouch: function(e) {
var x = e.detail.x;
_isEdgeTouch: function (event) {
var x = event.detail.x;
return !this.disableEdgeSwipe && this._swipeAllowed() &&
(this.rightDrawer ?
@ -532,9 +540,9 @@ To change the drawer container when it's in the right side:
}
},
_trackX: function(e) {
_trackX: function (event) {
if (this.dragging) {
var dx = e.detail.dx;
var dx = event.detail.dx;
if (this.peeking) {
if (Math.abs(dx) <= this.edgeSwipeSensitivity) {
@ -548,9 +556,9 @@ To change the drawer container when it's in the right side:
}
},
_trackEnd: function(e) {
_trackEnd: function (event) {
if (this.dragging) {
var xDirection = e.detail.dx > 0;
var xDirection = event.detail.dx > 0;
this._setDragging(false);
this.transition = true;
@ -575,13 +583,7 @@ To change the drawer container when it's in the right side:
},
_moveDrawer: function (translateX) {
var s = this.$.drawer.style;
if (this.hasTransform) {
s.transform = this._transformForTranslateX(translateX);
} else {
s.webkitTransform = this._transformForTranslateX(translateX);
}
this.transform(this._transformForTranslateX(translateX), this.$.drawer);
}
});

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>

4
dashboard-ui/css/librarybrowser.css
View file

@ -609,8 +609,8 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
}
.darkScrollbars ::-webkit-scrollbar {
width: 12px;
height: 12px;
width: 10px;
height: 10px;
}
.darkScrollbars ::-webkit-scrollbar-button:start:decrement,

172
dashboard-ui/css/librarymenu.css
View file

@ -8,14 +8,10 @@
.sidebarDivider {
height: 1px;
background: #333;
background: #ddd;
margin: .5em 0;
}
.ui-page-theme-a .sidebarDivider {
background: #ddd !important;
}
.headerBackButton {
padding-right: 5px !important;
}
@ -41,6 +37,40 @@
vertical-align: middle;
}
.mainDrawerPanel {
position: static !important;
width: auto !important;
height: auto !important;
}
.mainDrawerPanelPreInit #drawer {
display: none !important;
}
.mainDrawerPanel #drawer {
z-index: 1000 !important;
position: fixed !important;
bottom: 0;
height: auto !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
}
.mainDrawerPanel #main {
left: 0 !important;
position: static !important;
}
.mainDrawer {
height: auto !important;
border-right: 1px solid #e0e0e0;
}
.mainDrawerContent {
padding-bottom: 40px;
}
.headerButton {
margin: 0;
background-color: transparent;
@ -80,10 +110,14 @@
border-width: 0 !important;
}
.libraryMenuButton, .dashboardMenuButton {
.mainDrawerButton {
padding-left: 10px !important;
}
.hideMainDrawer .mainDrawerButton {
display: none;
}
.barMenuInner {
padding: 6px 10px;
}
@ -191,23 +225,6 @@
vertical-align: top;
}
.librarySidebarLinks {
margin-left: -1em;
margin-right: -1em;
margin-top: -1em;
padding-top: 0;
}
.librarySidebarLinks a {
font-weight: 300 !important;
padding: .8em 20px .8em 0;
}
.librarySidebarLinks a:hover {
background-color: #383838 !important;
color: #fff !important;
}
.viewMenuSecondary {
position: absolute;
top: 0;
@ -216,12 +233,7 @@
}
.selectedMediaFolder {
background-color: #38c !important;
color: #fff !important;
}
.itemDetailPage .selectedMediaFolder {
background-color: rgba(51,136,204,.8) !important;
background-color: #f2f2f2 !important;
}
.ui-panel.ui-body-b {
@ -255,20 +267,6 @@
}
}
@media all and (min-width: 800px) {
.dashboardDocument .dashboardMenuButton {
display: none !important;
}
}
@media all and (max-width: 800px) {
.dashboardDocument .libraryMenuButton {
display: none !important;
}
}
@media all and (max-width: 800px) {
/* The sidebar isn't visible at this size, so there's no way to navigate within the editor */
@ -277,14 +275,96 @@
}
}
@media all and (min-width: 800px) {
.dashboardDocument .dashboardDrawerContent {
display: none !important;
}
}
@media all and (max-width: 800px) {
/* They can use the left menu */
.dashboardEntryHeaderButton {
.dashboardDocument .libraryDrawerContent {
display: none !important;
}
}
.libraryDocument .dashboardMenuButton {
.drawerUserPanel {
background: url(images/splash.jpg);
background-size: cover;
background-position: center center;
margin-bottom: 1em;
position: relative;
color: #fff;
height: 140px;
}
.drawerUserPanelInner {
background-color: rgba(0, 0, 0, .75);
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.drawerUserPanelContent {
color: #fff;
font-weight: 500;
padding: 1.1em;
font-size: 14px;
}
.drawerUserPanelUserImage {
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
border-radius: 1000px;
vertical-align: middle;
}
.drawerUserPanelUserName {
padding-top: 1.5em;
padding-left: .25em;
}
.libraryDocument .dashboardDrawerContent {
display: none !important;
}
.dashboardDocument .lnkMySync {
display: none !important;
}
.dashboardDocument .lnkManageServer {
display: none !important;
}
.darkDrawer {
background-color: #282828 !important;
}
.darkDrawer .sidebarLinkIcon {
color: #ccc !important;
}
.darkDrawer .sidebarLinkText, .darkDrawer .sidebarLink {
color: #fff !important;
font-weight: 300 !important;
}
.darkDrawer .sidebarHeader {
color: #bbb !important;
}
.darkDrawer .sidebarDivider {
background: #555 !important;
}
.darkDrawer .sidebarLink:hover {
background: #444;
}
.darkDrawer .sidebarLink.selectedSidebarLink, .darkDrawer .selectedMediaFolder {
background: #444 !important;
}

33
dashboard-ui/css/site.css
View file

@ -296,6 +296,7 @@
/* jQuery mobile adds a text shadow that seems unnecessary. */
* {
text-shadow: none !important;
-webkit-font-smoothing: antialiased;
}
/* Remove IE mobile 300ms tap delay */
@ -693,9 +694,9 @@ h1 .imageLink {
.sidebarLink {
display: block;
padding: .6em 20px .6em 0;
padding: .8em 20px .8em 0;
text-decoration: none;
color: inherit !important;
color: #111 !important;
font-weight: 500 !important;
font-size: 14px;
vertical-align: middle;
@ -706,46 +707,28 @@ h1 .imageLink {
}
.sidebarLink.selectedSidebarLink {
margin-right: 0;
}
.ui-page-theme-a .selectedSidebarLink {
background: #f2f2f2 !important;
}
.ui-page-theme-b .selectedSidebarLink {
background: #38c !important;
color: #fff !important;
}
.sidebarLinkIcon {
font-size: 16px;
width: 66px;
font-size: 20px;
width: 72px!important;
text-align: center;
vertical-align: middle;
color: #ddd;
color: #7f7f7f;
}
.sidebarLinkIcon + span {
vertical-align: middle;
}
.ui-page-theme-a .sidebarLinkIcon {
color: #666;
}
.sidebarHeader {
padding-left: 20px;
margin: 15px 0 10px;
font-size: 90%;
color: #ccc;
color: #666;
font-weight: 500;
}
.ui-page-theme-a .sidebarHeader {
color: #888;
}
.invalidEntry {
background-color: lightpink !important;
}

478
dashboard-ui/scripts/librarymenu.js
View file

@ -11,12 +11,7 @@
html += '<button type="button" data-role="none" class="headerButton headerButtonLeft headerBackButton"><div class="fa fa-chevron-left"></div></button>';
}
html += '<button type="button" data-role="none" title="Menu" class="headerButton dashboardMenuButton barsMenuButton headerButtonLeft">';
html += '<div class="barMenuInner fa fa-bars">';
html += '</div>';
html += '</button>';
html += '<button type="button" data-role="none" title="Menu" class="headerButton libraryMenuButton barsMenuButton headerButtonLeft">';
html += '<button type="button" data-role="none" title="Menu" class="headerButton mainDrawerButton barsMenuButton headerButtonLeft">';
html += '<div class="barMenuInner fa fa-bars">';
html += '</div>';
html += '</button>';
@ -25,9 +20,9 @@
html += '<div class="viewMenuSecondary">';
html += '<button id="btnCast" class="btnCast btnDefaultCast headerButton headerButtonRight" type="button" data-role="none" style="display:none;"><div class="headerSelectedPlayer"></div><i class="material-icons btnCastImageDefault">cast</i><i class="material-icons btnCastImageActive">cast_connected</i></button>';
html += '<button id="btnCast" class="btnCast btnDefaultCast headerButton headerButtonRight hide" type="button" data-role="none"><div class="headerSelectedPlayer"></div><i class="material-icons btnCastImageDefault">cast</i><i class="material-icons btnCastImageActive">cast_connected</i></button>';
html += '<button onclick="Search.showSearchPanel();" type="button" data-role="none" class="headerButton headerButtonRight headerSearchButton" style="display:none;"><i class="material-icons">search</i></button>';
html += '<button onclick="Search.showSearchPanel();" type="button" data-role="none" class="headerButton headerButtonRight headerSearchButton hide"><i class="material-icons">search</i></button>';
html += '<div class="viewMenuSearch hide">';
html += '<form class="viewMenuSearchForm">';
html += '<input type="text" data-role="none" data-type="search" class="headerSearchInput" autocomplete="off" spellcheck="off" />';
@ -36,7 +31,7 @@
html += '</form>';
html += '</div>';
html += '<button onclick="VoiceInputManager.startListening();" type="button" data-role="none" class="headerButton headerButtonRight headerVoiceButton" style="display:none;"><i class="material-icons">mic</i></button>';
html += '<button onclick="VoiceInputManager.startListening();" type="button" data-role="none" class="headerButton headerButtonRight headerVoiceButton hide"><i class="material-icons">mic</i></button>';
if (!showUserAtTop()) {
html += '<button class="headerButton headerButtonRight headerUserButton" type="button" data-role="none" onclick="Dashboard.showUserFlyout(this);">';
@ -45,7 +40,7 @@
}
if (!$.browser.mobile && !AppInfo.isNativeApp) {
html += '<a href="dashboard.html" class="headerButton headerButtonRight dashboardEntryHeaderButton" style="display:none;"><i class="material-icons">settings</i></a>';
html += '<a href="dashboard.html" class="headerButton headerButtonRight dashboardEntryHeaderButton hide"><i class="material-icons">settings</i></a>';
//html += '<a href="dashboard.html" class="headerButton headerButtonRight dashboardEntryHeaderButton clearLink" style="display:none;"><paper-icon-button icon="settings"></paper-icon-button></a>';
}
@ -78,29 +73,29 @@
var header = $('.viewMenuBar');
if (user.localUser) {
$('.btnCast', header).show();
$('.headerSearchButton', header).show();
$('.btnCast', header).visible(true);
$('.headerSearchButton', header).visible(true);
requirejs(['voice/voice'], function () {
if (VoiceInputManager.isSupported()) {
$('.headerVoiceButton', header).show();
$('.headerVoiceButton', header).visible(true);
} else {
$('.headerVoiceButton', header).hide();
$('.headerVoiceButton', header).visible(false);
}
});
} else {
$('.btnCast', header).hide();
$('.headerVoiceButton', header).hide();
$('.headerSearchButton', header).hide();
$('.btnCast', header).visible(false);
$('.headerVoiceButton', header).visible(false);
$('.headerSearchButton', header).visible(false);
}
if (user.canManageServer) {
$('.dashboardEntryHeaderButton', header).show();
$('.dashboardEntryHeaderButton', header).visible(true);
} else {
$('.dashboardEntryHeaderButton', header).hide();
$('.dashboardEntryHeaderButton', header).visible(false);
}
var userButtonHtml = '';
@ -128,12 +123,14 @@
if (AppInfo.isTouchPreferred) {
$('.libraryMenuButton').on('click', showLibraryMenu);
$('.dashboardMenuButton').on('click', showDashboardMenu);
if ('ontouchend' in document) {
$('.mainDrawerButton').on('touchend', openMainDrawer);
} else {
$('.mainDrawerButton').on('click', openMainDrawer);
}
} else {
$('.libraryMenuButton').createHoverTouch().on('hovertouch', showLibraryMenu);
$('.dashboardMenuButton').createHoverTouch().on('hovertouch', showDashboardMenu);
$('.mainDrawerButton').createHoverTouch().on('hovertouch', openMainDrawer);
}
$('.headerBackButton').on('click', onBackClick);
@ -141,23 +138,6 @@
// Have to wait for document ready here because otherwise
// we may see the jQM redirect back and forth problem
$(initViewMenuBarHeadroom);
//$('.headerButtonViewMenu').off('click', onViewButtonClick).on('click', onViewButtonClick);
if (AppInfo.isNativeApp) {
$(document).off('swiperight.drawer').on('swiperight.drawer', '.libraryPage', onSwipeRight);
}
}
function onSwipeRight(event) {
if (event.swipestop && event.swipestop.coords) {
var x = event.swipestop.coords[0];
if (x < 50) {
showLibraryMenu();
}
}
}
function initViewMenuBarHeadroom() {
@ -186,13 +166,160 @@
return LibraryBrowser.getHref(item, context);
}
function getViewsHtml() {
var requiresDrawerRefresh = true;
var requiresDashboardDrawerRefresh = true;
function openMainDrawer() {
var drawerPanel = $('.mainDrawerPanel')[0];
drawerPanel.openDrawer();
}
function onMainDrawerOpened() {
if ($.browser.mobile) {
$(document.body).addClass('bodyWithPopupOpen');
}
var drawer = $('.mainDrawerPanel .mainDrawer');
ConnectionManager.user(window.ApiClient).done(function (user) {
if (requiresDrawerRefresh) {
ensureDrawerStructure(drawer);
refreshUserInfoInDrawer(user, drawer);
refreshLibraryInfoInDrawer(user, drawer);
refreshBottomUserInfoInDrawer(user, drawer);
$(document).trigger('libraryMenuCreated');
updateLibraryMenu(user.localUser);
}
if (requiresDrawerRefresh || requiresDashboardDrawerRefresh) {
refreshDashboardInfoInDrawer($.mobile.activePage, user, drawer);
requiresDashboardDrawerRefresh = false;
}
requiresDrawerRefresh = false;
updateSidebarOnClicks();
updateLibraryNavLinks($.mobile.activePage);
});
}
function onMainDrawerClosed() {
$(document.body).removeClass('bodyWithPopupOpen');
}
function closeMainDrawer() {
var drawerPanel = $('.mainDrawerPanel')[0];
drawerPanel.closeDrawer();
}
function updateSidebarOnClicks() {
$('.mainDrawerContent a').off('click.closeMainDrawer').on('click.closeMainDrawer', closeMainDrawer);
}
function ensureDrawerStructure(drawer) {
if ($('.mainDrawerContent', drawer).length) {
return;
}
var html = '<div class="mainDrawerContent">';
html += '<div class="userheader">';
html += '</div>';
html += '<div class="libraryDrawerContent">';
html += '</div>';
html += '<div class="dashboardDrawerContent">';
html += '</div>';
html += '<div class="userFooter">';
html += '</div>';
html += '</div>';
$(drawer).html(html);
}
function refreshUserInfoInDrawer(user, drawer) {
var html = '';
var userAtTop = showUserAtTop();
var homeHref = window.ApiClient ? 'index.html' : 'selectserver.html';
var hasUserImage = user.imageUrl && AppInfo.enableUserImage;
if (userAtTop) {
html += '<div class="drawerUserPanel">';
html += '<div class="drawerUserPanelInner">';
html += '<div class="drawerUserPanelContent">';
var imgWidth = 60;
if (hasUserImage) {
var url = user.imageUrl;
if (user.supportsImageParams) {
url += "&width=" + (imgWidth * Math.max(devicePixelRatio || 1, 2));
html += '<div class="lazy drawerUserPanelUserImage" data-src="' + url + '" style="width:' + imgWidth + 'px;height:' + imgWidth + 'px;"></div>';
}
} else {
html += '<div class="fa fa-user drawerUserPanelUserImage" style="font-size:' + imgWidth + 'px;"></div>';
}
html += '<div class="drawerUserPanelUserName">';
html += user.name;
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="remote" href="index.html"><iron-icon icon="home" class="sidebarLinkIcon" style="color:#2196F3;"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonHome') + '</span></a>';
} else {
html += '<div style="margin-top:5px;"></div>';
html += '<a class="lnkMediaFolder sidebarLink" href="' + homeHref + '">';
html += '<div class="lazy" data-src="css/images/mblogoicon.png" style="width:' + 28 + 'px;height:' + 28 + 'px;background-size:contain;background-repeat:no-repeat;background-position:center center;border-radius:1000px;vertical-align:middle;margin:0 1.6em 0 1.5em;display:inline-block;"></div>';
html += Globalize.translate('ButtonHome');
html += '</a>';
}
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="remote" href="nowplaying.html"><iron-icon icon="tablet-android" class="sidebarLinkIcon" style="color:#673AB7;"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonRemote') + '</span></a>';
$('.userheader', drawer).html(html).lazyChildren();
}
function refreshLibraryInfoInDrawer(user, drawer) {
var html = '';
html += '<div class="sidebarDivider"></div>';
html += '<div class="libraryMenuOptions">';
html += '</div>';
$('.libraryDrawerContent', drawer).html(html);
}
function refreshDashboardInfoInDrawer(page, user, drawer) {
var html = '';
html += '<div class="sidebarDivider"></div>';
html += Dashboard.getToolsMenuHtml(page);
$('.dashboardDrawerContent', drawer).html(html);
}
function refreshBottomUserInfoInDrawer(user, drawer) {
var html = '';
html += '<div class="adminMenuOptions">';
html += '<div class="sidebarDivider"></div>';
@ -200,90 +327,57 @@
html += Globalize.translate('HeaderAdmin');
html += '</div>';
html += '<a class="sidebarLink lnkMediaFolder lnkManageServer" data-itemid="dashboard" href="#"><span class="fa fa-server sidebarLinkIcon"></span>' + Globalize.translate('ButtonManageServer') + '</a>';
html += '<a class="sidebarLink lnkMediaFolder editorViewMenu" data-itemid="editor" href="edititemmetadata.html"><span class="fa fa-edit sidebarLinkIcon"></span>' + Globalize.translate('ButtonMetadataManager') + '</a>';
html += '<a class="sidebarLink lnkMediaFolder lnkManageServer" data-itemid="dashboard" href="#"><iron-icon icon="dashboard" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonManageServer') + '</span></a>';
html += '<a class="sidebarLink lnkMediaFolder editorViewMenu" data-itemid="editor" href="edititemmetadata.html"><iron-icon icon="mode-edit" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonMetadataManager') + '</span></a>';
if (!$.browser.mobile && !AppInfo.isTouchPreferred) {
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="reports" href="reports.html"><span class="fa fa-bar-chart sidebarLinkIcon"></span>' + Globalize.translate('ButtonReports') + '</a>';
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="reports" href="reports.html"><iron-icon icon="insert-chart" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonReports') + '</span></a>';
}
html += '</div>';
html += '<div class="userMenuOptions">';
html += '<div class="sidebarDivider"></div>';
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="inbox" href="notificationlist.html"><span class="fa fa-inbox sidebarLinkIcon"></span>';
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="inbox" href="notificationlist.html"><iron-icon icon="inbox" class="sidebarLinkIcon"></iron-icon>';
html += Globalize.translate('ButtonInbox');
html += '<div class="btnNotifications"><div class="btnNotificationsInner">0</div></div>';
html += '</a>';
html += '<a class="sidebarLink lnkMediaFolder syncViewMenu" data-itemid="mysync" href="mysync.html"><span class="fa fa-refresh sidebarLinkIcon" ></span>' + Globalize.translate('ButtonSync') + '</a>';
if (user.localUser) {
html += '<a class="sidebarLink lnkMediaFolder lnkMySettings" data-itemid="mysync" href="mypreferencesdisplay.html?userId=' + user.localUser.Id + '"><iron-icon icon="settings" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonSettings') + '</span></a>';
}
html += '<a class="sidebarLink lnkMediaFolder lnkMySync" data-itemid="mysync" href="mysync.html"><iron-icon icon="refresh" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonSync') + '</span></a>';
if (Dashboard.isConnectMode()) {
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="selectserver" href="selectserver.html"><span class="fa fa-globe sidebarLinkIcon"></span>' + Globalize.translate('ButtonSelectServer') + '</a>';
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="selectserver" href="selectserver.html"><span class="fa fa-globe sidebarLinkIcon"></span><span class="sidebarLinkText">' + Globalize.translate('ButtonSelectServer') + '</span></a>';
}
if (showUserAtTop()) {
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="logout" href="#" onclick="Dashboard.logout();"><span class="fa fa-lock sidebarLinkIcon"></span>' + Globalize.translate('ButtonSignOut') + '</a>';
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="logout" href="#" onclick="Dashboard.logout();"><iron-icon icon="lock" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonSignOut') + '</span></a>';
}
html += '</div>';
$('.userFooter', drawer).html(html);
return html;
$('.lnkManageServer', drawer).on('click', onManageServerClicked);
}
function showLibraryMenu() {
function updateLibraryMenu(user) {
var page = $.mobile.activePage;
var panel;
if (!user) {
ConnectionManager.user(window.ApiClient).done(function (user) {
panel = getLibraryMenu(user);
updateLibraryNavLinks(page);
panel = $(panel).panel('toggle').off('mouseleave.librarymenu');
if (!AppInfo.isTouchPreferred) {
panel.on('mouseleave.librarymenu', function () {
$(this).panel("close");
});
}
});
}
function showDashboardMenu() {
var page = $.mobile.activePage;
var panel = getDashboardMenu(page);
panel = $(panel).panel('toggle').off('mouseleave.librarymenu');
if (!AppInfo.isTouchPreferred) {
panel.on('mouseleave.librarymenu', function () {
$(this).panel("close");
});
}
}
function updateLibraryMenu(panel) {
var apiClient = window.ApiClient;
if (!apiClient) {
$('.adminMenuOptions').hide();
$('.syncViewMenu').hide();
$('.userMenuOptions').hide();
$('.adminMenuOptions').visible(false);
$('.lnkMySync').visible(false);
$('.userMenuOptions').visible(false);
return;
}
var userId = Dashboard.getCurrentUserId();
var apiClient = window.ApiClient;
apiClient.getUserViews(userId).done(function (result) {
var items = result.Items;
@ -295,8 +389,8 @@
html += items.map(function (i) {
var iconCssClass = 'fa';
var icon = 'folder';
var color = 'inherit';
var itemId = i.Id;
if (i.CollectionType == "channels") {
@ -310,40 +404,49 @@
}
if (i.CollectionType == "photos") {
iconCssClass += ' fa-photo';
icon = 'photo-library';
color = "#009688";
}
else if (i.CollectionType == "music" || i.CollectionType == "musicvideos") {
iconCssClass += ' fa-music';
icon = 'library-music';
color = '#FB8521';
}
else if (i.CollectionType == "books") {
iconCssClass += ' fa-book';
icon = 'library-books';
color = "#1AA1E1";
}
else if (i.CollectionType == "playlists") {
iconCssClass += ' fa-list';
icon = 'view-list';
color = "#795548";
}
else if (i.CollectionType == "games") {
iconCssClass += ' fa-gamepad';
icon = 'games';
color = "#F44336";
}
else if (i.CollectionType == "movies") {
iconCssClass += ' fa-film';
icon = 'video-library';
color = '#CE5043';
}
else if (i.CollectionType == "channels" || i.Type == 'Channel') {
iconCssClass += ' fa-globe';
icon = 'videocam';
color = '#E91E63';
}
else if (i.CollectionType == "tvshows" || i.CollectionType == "livetv") {
iconCssClass += ' fa-video-camera';
else if (i.CollectionType == "tvshows") {
icon = 'tv';
color = "#4CAF50";
}
else {
iconCssClass += ' fa-folder-open-o';
else if (i.CollectionType == "livetv") {
icon = 'live-tv';
color = "#293AAE";
}
return '<a data-itemid="' + itemId + '" class="lnkMediaFolder sidebarLink" href="' + getItemHref(i, i.CollectionType) + '"><span class="' + iconCssClass + ' sidebarLinkIcon"></span><span class="sectionName">' + i.Name + '</span></a>';
return '<a data-itemid="' + itemId + '" class="lnkMediaFolder sidebarLink" href="' + getItemHref(i, i.CollectionType) + '"><iron-icon icon="' + icon + '" class="sidebarLinkIcon" style="color:' + color + '"></iron-icon><span class="sectionName">' + i.Name + '</span></a>';
}).join('');
var elem = $('.libraryMenuOptions').html(html);
$('.sidebarLink', elem).on('click', function () {
$('.sidebarLink', elem).off('click.updateText').on('click.updateText', function () {
var section = $('.sectionName', this)[0];
var text = section ? section.innerHTML : this.innerHTML;
@ -351,111 +454,29 @@
$('.libraryMenuButtonText').html(text);
});
updateSidebarOnClicks();
});
Dashboard.getCurrentUser().done(function (user) {
if (user.Policy.IsAdministrator) {
$('.adminMenuOptions').show();
$('.adminMenuOptions').visible(true);
} else {
$('.adminMenuOptions').hide();
$('.adminMenuOptions').visible(false);
}
if (user.Policy.EnableSync) {
$('.syncViewMenu').show();
$('.lnkMySync').visible(true);
} else {
$('.syncViewMenu').hide();
$('.lnkMySync').visible(false);
}
});
}
function showUserAtTop() {
return $.browser.mobile || AppInfo.isNativeApp;
}
var requiresLibraryMenuRefresh = false;
var requiresViewMenuRefresh = false;
function getLibraryMenu(user) {
var panel = $('#libraryPanel');
if (!panel.length) {
var html = '';
html += '<div data-role="panel" id="libraryPanel" class="libraryPanel" data-position="left" data-display="overlay" data-position-fixed="true" data-theme="b">';
html += '<div class="sidebarLinks librarySidebarLinks">';
var userAtTop = showUserAtTop();
var homeHref = window.ApiClient ? 'index.html' : 'selectserver.html';
var userHref = user.localUser && user.localUser.Policy.EnableUserPreferenceAccess ?
'mypreferencesdisplay.html?userId=' + user.localUser.Id :
(user.localUser ? ('mypreferenceswebclient.html?userId=' + user.localUser.Id) : '#');
var hasUserImage = user.imageUrl && AppInfo.enableUserImage;
if (userAtTop) {
var paddingLeft = hasUserImage ? 'padding-left:.7em;' : '';
html += '<a style="margin-top:0;' + paddingLeft + 'display:block;color:#fff;text-decoration:none;font-size:16px;font-weight:400!important;background: #111;" href="' + userHref + '">';
var imgWidth = 44;
if (hasUserImage) {
var url = user.imageUrl;
if (user.supportsImageParams) {
url += "&width=" + (imgWidth * Math.max(devicePixelRatio || 1, 2));
}
html += '<div class="lazy" data-src="' + url + '" style="width:' + imgWidth + 'px;height:' + imgWidth + 'px;background-size:contain;background-repeat:no-repeat;background-position:center center;border-radius:1000px;vertical-align:middle;margin-right:.8em;display:inline-block;"></div>';
} else {
html += '<span class="fa fa-user sidebarLinkIcon"></span>';
}
html += user.name;
html += '</a>';
html += '<div class="sidebarDivider" style="margin-top:0;"></div>';
html += '<a class="lnkMediaFolder sidebarLink" href="' + homeHref + '"><span class="fa fa-home sidebarLinkIcon"></span><span>' + Globalize.translate('ButtonHome') + '</span></a>';
} else {
html += '<div style="margin-top:5px;"></div>';
html += '<a class="lnkMediaFolder sidebarLink" href="' + homeHref + '">';
html += '<div class="lazy" data-src="css/images/mblogoicon.png" style="width:' + 28 + 'px;height:' + 28 + 'px;background-size:contain;background-repeat:no-repeat;background-position:center center;border-radius:1000px;vertical-align:middle;margin:0 1.4em 0 1.3em;display:inline-block;"></div>';
html += Globalize.translate('ButtonHome');
html += '</a>';
}
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="remote" href="nowplaying.html"><span class="fa fa-tablet sidebarLinkIcon"></span>' + Globalize.translate('ButtonRemote') + '</a>';
html += '<div class="sidebarDivider"></div>';
html += getViewsHtml();
html += '</div>';
html += '</div>';
$(document.body).append(html).trigger('libraryMenuCreated');
panel = $('#libraryPanel').panel({}).lazyChildren().trigger('create');
$('.lnkManageServer', panel).on('click', onManageServerClicked);
updateLibraryMenu();
}
else if (requiresLibraryMenuRefresh) {
updateLibraryMenu();
requiresLibraryMenuRefresh = false;
}
return panel;
}
function onManageServerClicked() {
requirejs(["scripts/registrationservices"], function () {
@ -467,29 +488,6 @@
});
}
function getDashboardMenu(page) {
var panel = $('#dashboardPanel', page);
if (!panel.length) {
var html = '';
html += '<div data-role="panel" id="dashboardPanel" class="dashboardPanel" data-position="left" data-display="overlay" data-position-fixed="true" data-theme="b">';
html += '<div style="margin: 0 -1em;">';
html += '</div>';
html += '</div>';
$(document.body).append(html);
panel = $('#dashboardPanel').panel({}).trigger('create');
}
return panel;
}
function setLibraryMenuText(text) {
$('.libraryMenuButtonText').html('<span>' + text + '</span>');
@ -502,8 +500,6 @@
}
window.LibraryMenu = {
showLibraryMenu: showLibraryMenu,
getTopParentId: getTopParentId,
setText: setLibraryMenuText
@ -618,7 +614,7 @@
function buildViewMenuBar(page) {
if ($(page).hasClass('standalonePage')) {
$('.viewMenuBar').hide();
$('.viewMenuBar').visible(false);
return;
}
@ -626,7 +622,7 @@
$('.viewMenuBar').remove();
}
var viewMenuBar = $('.viewMenuBar').show();
var viewMenuBar = $('.viewMenuBar').visible(true);
if (!$('.viewMenuBar').length) {
renderHeader();
@ -656,6 +652,8 @@
var page = this;
requiresDashboardDrawerRefresh = true;
if (updateViewMenuBarBeforePageShow) {
onPageBeforeShowDocumentReady(page);
}
@ -695,9 +693,11 @@
var jpage = $(page);
var isLibraryPage = jpage.hasClass('libraryPage');
var darkDrawer = false;
if (isLibraryPage) {
$(document.body).addClass('libraryDocument').removeClass('dashboardDocument');
$(document.body).addClass('libraryDocument').removeClass('dashboardDocument').removeClass('hideMainDrawer');
if (AppInfo.enableBottomTabs) {
$(page).addClass('noSecondaryNavPage');
@ -714,15 +714,24 @@
initHeadRoom(this);
});
}
if (!$.browser.mobile) {
darkDrawer = true;
}
}
else if (jpage.hasClass('type-interior')) {
$(document.body).addClass('dashboardDocument').removeClass('libraryDocument');
$(document.body).addClass('dashboardDocument').removeClass('libraryDocument').removeClass('hideMainDrawer');
} else {
$(document.body).removeClass('dashboardDocument').removeClass('libraryDocument');
$(document.body).removeClass('dashboardDocument').removeClass('libraryDocument').addClass('hideMainDrawer');
}
if (AppInfo.enableBackButton)
{
if (darkDrawer) {
$('.mainDrawerPanel #drawer').addClass('darkDrawer');
} else {
$('.mainDrawerPanel #drawer').removeClass('darkDrawer');
}
if (AppInfo.enableBackButton) {
updateBackButton(page);
}
}
@ -771,7 +780,13 @@
requirejs(["thirdparty/headroom"], function () {
// construct an instance of Headroom, passing the element
var headroom = new Headroom(elem);
var headroom = new Headroom(elem, {
// or scroll tolerance per direction
tolerance: {
down: 40,
up: 0
}
});
// initialise
headroom.init();
$(elem).addClass('headroomEnabled');
@ -796,15 +811,14 @@
}).on('localusersignedin localusersignedout', function () {
requiresLibraryMenuRefresh = true;
requiresViewMenuRefresh = true;
requiresDrawerRefresh = true;
});
});
$(function () {
$(MediaController).on('playerchange', function () {
updateCastIcon();
});
$('.mainDrawerPanel').on('paper-drawer-panel-open', onMainDrawerOpened).on('paper-drawer-panel-close', onMainDrawerClosed);
});
})(window, document, jQuery, window.devicePixelRatio);

123
dashboard-ui/scripts/site.js
View file

@ -817,15 +817,7 @@ var Dashboard = {
}
},
ensureToolsMenu: function (page) {
var sidebar = $('.toolsSidebar', page);
if (!sidebar.length) {
var html = '<div class="content-secondary toolsSidebar">';
html += '<div class="sidebarLinks">';
getToolsMenuHtml: function (page) {
var items = Dashboard.getToolsMenuLinks(page);
@ -853,11 +845,16 @@ var Dashboard = {
var icon = item.icon;
if (icon) {
if (icon.indexOf('fa') == 0) {
menuHtml += '<span class="fa ' + icon + ' sidebarLinkIcon"' + style + '></span>';
} else {
menuHtml += '<i class="material-icons sidebarLinkIcon"' + style + '>' + icon + '</i>';
}
menuHtml += '<iron-icon icon="' + icon + '" class="sidebarLinkIcon"' + style + '></iron-icon>';
//if (icon.indexOf('fa') == 0) {
// menuHtml += '<span class="fa ' + icon + ' sidebarLinkIcon"' + style + '></span>';
//}
//else if (icon.indexOf('fa') == 0) {
// menuHtml += '<span class="fa ' + icon + ' sidebarLinkIcon"' + style + '></span>';
//}
//else {
// menuHtml += '<i class="material-icons sidebarLinkIcon"' + style + '>' + icon + '</i>';
//}
}
menuHtml += '<span class="sidebarLinkText">';
@ -872,43 +869,26 @@ var Dashboard = {
}
}
html += menuHtml;
return menuHtml;
},
ensureToolsMenu: function (page) {
var sidebar = $('.toolsSidebar', page);
if (!sidebar.length) {
var html = '<div class="content-secondary toolsSidebar">';
html += '<div class="sidebarLinks">';
html += Dashboard.getToolsMenuHtml(page);
// sidebarLinks
html += '</div>';
// content-secondary
html += '</div>';
html += '<div data-role="panel" id="dashboardPanel" class="dashboardPanel" data-position="left" data-display="overlay" data-position-fixed="true" data-theme="a">';
html += '<p class="libraryPanelHeader" style="margin: 15px 0 15px 20px;"><a href="index.html" class="imageLink"><img src="css/images/mblogoicon.png" /><span style="color:#333;">EMBY</span></a></p>';
html += '<div class="sidebarLinks">';
html += menuHtml;
// sidebarLinks
html += '<div class="sidebarDivider"></div>';
html += '<div class="userMenuOptions">';
if (Dashboard.isConnectMode()) {
html += '<a class="sidebarLink" data-itemid="selectserver" href="selectserver.html"><span class="fa fa-globe sidebarLinkIcon"></span>';
html += '<span class="sidebarLinkText">';
html += Globalize.translate('ButtonSelectServer');
html += '</span>';
html += '</a>';
}
html += '<a class="sidebarLink" data-itemid="logout" href="#" onclick="Dashboard.logout();"><span class="fa fa-sign-out sidebarLinkIcon"></span>';
html += '<span class="sidebarLinkText">';
html += Globalize.translate('ButtonSignOut');
html += '</span>';
html += '</a>';
html += '</div>';
html += '</div>';
html += '</div>';
$('.content-primary', page).before(html);
$(page).trigger('create');
}
@ -925,41 +905,41 @@ var Dashboard = {
name: Globalize.translate('TabServer'),
href: "dashboard.html",
selected: page.hasClass("dashboardHomePage"),
icon: 'fa-dashboard',
icon: 'dashboard',
color: '#38c'
}, {
name: Globalize.translate('TabDevices'),
href: "devices.html",
selected: page.hasClass("devicesPage"),
icon: 'fa-tablet',
icon: 'tablet',
color: '#ECA403'
}, {
name: Globalize.translate('TabUsers'),
href: "userprofiles.html",
selected: page.hasClass("userProfilesPage"),
icon: 'fa-users',
icon: 'people',
color: '#679C34'
}, {
name: Globalize.translate('TabLibrary'),
divider: true,
href: "library.html",
selected: page.hasClass("mediaLibraryPage"),
icon: 'fa-film'
icon: 'video-library'
}, {
name: Globalize.translate('TabMetadata'),
href: "metadata.html",
selected: page.hasClass('metadataConfigurationPage'),
icon: 'fa-file-text'
icon: 'details'
}, {
name: Globalize.translate('TabPlayback'),
href: "playbackconfiguration.html",
selected: page.hasClass('playbackConfigurationPage'),
icon: 'fa-play-circle'
icon: 'play-circle-filled'
}, {
name: Globalize.translate('TabSync'),
href: "syncactivity.html",
selected: page.hasClass('syncConfigurationPage') || (isServicesPage && context == 'sync'),
icon: 'fa-refresh'
icon: 'refresh'
}, {
divider: true,
name: Globalize.translate('TabExtras')
@ -967,31 +947,31 @@ var Dashboard = {
name: Globalize.translate('TabAutoOrganize'),
href: "autoorganizelog.html",
selected: page.hasClass("organizePage"),
icon: 'fa-files-o',
icon: 'folder',
color: '#01C0DD'
}, {
name: Globalize.translate('TabDLNA'),
href: "dlnasettings.html",
selected: page.hasClass("dlnaPage"),
icon: 'fa-film',
icon: 'tv',
color: '#E5342E'
}, {
name: Globalize.translate('TabLiveTV'),
href: "livetvstatus.html",
selected: page.hasClass("liveTvSettingsPage") || (isServicesPage && context == 'livetv'),
icon: 'fa-video-camera',
icon: 'live-tv',
color: '#293AAE'
}, {
name: Globalize.translate('TabNotifications'),
href: "notificationsettings.html",
selected: page.hasClass("notificationConfigurationPage"),
icon: 'fa-wifi',
icon: 'notifications',
color: 'brown'
}, {
name: Globalize.translate('TabPlugins'),
href: "plugins.html",
selected: page.hasClass("pluginConfigurationPage"),
icon: 'fa-plus-circle',
icon: 'add-shopping-cart',
color: '#9D22B1'
}, {
divider: true,
@ -1000,20 +980,20 @@ var Dashboard = {
name: Globalize.translate('TabAdvanced'),
href: "advanced.html",
selected: page.hasClass("advancedConfigurationPage"),
icon: 'fa-gears',
icon: 'settings',
color: '#F16834'
}, {
name: Globalize.translate('TabScheduledTasks'),
href: "scheduledtasks.html",
selected: page.hasClass("scheduledTasksConfigurationPage"),
icon: 'fa-clock-o',
icon: 'schedule',
color: '#38c'
}, {
name: Globalize.translate('TabHelp'),
divider: true,
href: "support.html",
selected: pageElem.id == "supportPage" || pageElem.id == "logPage" || pageElem.id == "supporterPage" || pageElem.id == "supporterKeyPage" || pageElem.id == "aboutPage",
icon: 'fa-info-circle',
icon: 'help',
color: '#679C34'
}];
@ -1675,12 +1655,6 @@ var AppInfo = {};
}
}
}
else {
if (!$.browser.tv) {
AppInfo.enableHeadRoom = true;
}
}
if (!AppInfo.hasLowImageBandwidth) {
AppInfo.enableStudioTabs = true;
@ -1703,6 +1677,15 @@ var AppInfo = {};
}
}
if (!$.browser.tv && !isIOS) {
// Don't enable headroom on mobile chrome when the address bar is visible
// With two bars hiding and showing it gets a little awkward
if (AppInfo.isNativeApp || window.navigator.standalone || !$.browser.mobile) {
AppInfo.enableHeadRoom = true;
}
}
AppInfo.enableUserImage = true;
AppInfo.hasPhysicalVolumeButtons = isCordova || isMobile;
@ -2063,6 +2046,12 @@ var AppInfo = {};
$.extend(AppInfo, Dashboard.getAppInfo(appName, deviceId, deviceName));
$(document).on('WebComponentsReady', function () {
var drawer = $('.mainDrawerPanel').removeClass('mainDrawerPanelPreInit')[0];
drawer.forceNarrow = true;
drawer.drawerWidth = screen.availWidth >= 330 ? "310px" : "270px";
drawer.transition = true;
if (Dashboard.isConnectMode()) {
require(['appstorage'], function () {
@ -2154,7 +2143,7 @@ $(document).on('pagecreate', ".page", function () {
current = newTheme;
}
if (current == 'b') {
if (current == 'b' && !$.browser.mobile) {
$(document.body).addClass('darkScrollbars');
} else {
$(document.body).removeClass('darkScrollbars');

4
dashboard-ui/themes/ios.css
View file

@ -81,10 +81,6 @@ h1, h1 a {
font-weight: 400;
}
.librarySidebarLinks a {
font-weight: 400 !important;
}
.libraryMenuButtonText {
font-weight: 500 !important;
position: relative;

19
dashboard-ui/thirdparty/emby-icons.html vendored
View file

@ -64,6 +64,25 @@ See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for
<g id="tablet-android"><path d="M18 0H6C4.34 0 3 1.34 3 3v18c0 1.66 1.34 3 3 3h12c1.66 0 3-1.34 3-3V3c0-1.66-1.34-3-3-3zm-4 22h-4v-1h4v1zm5.25-3H4.75V3h14.5v16z" /></g>
<g id="view-comfy"><path d="M3 9h4V5H3v4zm0 5h4v-4H3v4zm5 0h4v-4H8v4zm5 0h4v-4h-4v4zM8 9h4V5H8v4zm5-4v4h4V5h-4zm5 9h4v-4h-4v4zM3 19h4v-4H3v4zm5 0h4v-4H8v4zm5 0h4v-4h-4v4zm5 0h4v-4h-4v4zm0-14v4h4V5h-4z" /></g>
<g id="videocam"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" /></g>
<g id="schedule"><path fill-opacity=".9" d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zM12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z" /></g>
<g id="help"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" /></g>
<g id="tv"><path d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z" /></g>
<g id="live-tv"><path d="M21 6h-7.59l3.29-3.29L16 2l-4 4-4-4-.71.71L10.59 6H3c-1.1 0-2 .89-2 2v12c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.11-.9-2-2-2zm0 14H3V8h18v12zM9 10v8l7-4z" /></g>
<g id="notifications"><path d="M11.5 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6.5-6v-5.5c0-3.07-2.13-5.64-5-6.32V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5v.68c-2.87.68-5 3.25-5 6.32V16l-2 2v1h17v-1l-2-2z" /></g>
<g id="add-shopping-cart"><path d="M11 9h2V6h3V4h-3V1h-2v3H8v2h3v3zm-4 9c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-9.83-3.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.86-7.01L19.42 4h-.01l-1.1 2-2.76 5H8.53l-.13-.27L6.16 6l-.95-2-.94-2H1v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.13 0-.25-.11-.25-.25z" /></g>
<g id="play-circle-filled"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z" /></g>
<g id="folder"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" /></g>
<g id="details"><path d="M3 4l9 16 9-16H3zm3.38 2h11.25L12 16 6.38 6z" /></g>
<g id="video-library"><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8 12.5v-9l6 4.5-6 4.5z" /></g>
<g id="people"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z" /></g>
<g id="tablet"><path d="M21 4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 1.99-.9 1.99-2L23 6c0-1.1-.9-2-2-2zm-2 14H5V6h14v12z" /></g>
<g id="dashboard"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z" /></g>
<g id="insert-chart"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z" /></g>
<g id="inbox"><path d="M19 3H4.99c-1.1 0-1.98.9-1.98 2L3 19c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12h-4c0 1.66-1.34 3-3 3s-3-1.34-3-3H4.99V5H19v10zm-3-5h-2V7h-4v3H8l4 4 4-4z" /></g>
<g id="photo-library"><path d="M22 16V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2zm-11-4l2.03 2.71L16 11l4 5H8l3-4zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z" /></g>
<g id="view-list"><path d="M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z" /></g>
<g id="library-music"><path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 5h-3v5.5c0 1.38-1.12 2.5-2.5 2.5S10 13.88 10 12.5s1.12-2.5 2.5-2.5c.57 0 1.08.19 1.5.51V5h4v2zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6z" /></g>
<g id="home"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /></g>
</defs>
</svg>
</iron-iconset-svg>

120
dashboard-ui/vulcanize-out.html
View file

@ -12853,8 +12853,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;
@ -12871,16 +12871,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 {
@ -12935,6 +12935,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);
}
@ -12954,19 +12958,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,
@ -12980,8 +12989,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] {
@ -12993,7 +13003,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
<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>
@ -13042,17 +13052,24 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
*/
/**
* Fired when the selected panel changes.
* 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 and deselected.
* The `isSelected` detail property contains the selection state.
* This event is fired both when a panel is selected.
*
* @event paper-select {{isSelected: boolean, item: Object}} detail -
* isSelected: True for selection and false for deselection.
* @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: {
/**
@ -13234,6 +13251,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
*/
openDrawer: function () {
this.selected = 'drawer';
this.fire('paper-drawer-panel-open');
},
/**
@ -13243,6 +13261,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
*/
closeDrawer: function () {
this.selected = 'main';
this.fire('paper-drawer-panel-close');
},
ready: function () {
@ -13251,13 +13270,14 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
this.transition = true;
},
_computeIronSelectorClass: function(narrow, transition, dragging, rightDrawer) {
_computeIronSelectorClass: function (narrow, transition, dragging, rightDrawer, peeking) {
return classNames({
dragging: dragging,
'narrow-layout': narrow,
'right-drawer': rightDrawer,
'left-drawer': !rightDrawer,
transition: transition
transition: transition,
peeking: peeking
});
},
@ -13272,8 +13292,6 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
if (rightDrawer) {
style += 'right:' + (narrow ? '' : drawerWidth) + ';';
} else {
style += 'right:;';
}
return style;
@ -13287,19 +13305,19 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
return !narrow || disableEdgeSwipe;
},
_onTrack: function(e) {
_onTrack: function (event) {
if (sharedPanel && this !== sharedPanel) {
return;
}
switch (e.detail.state) {
switch (event.detail.state) {
case 'start':
this._trackStart(e);
this._trackStart(event);
break;
case 'track':
this._trackX(e);
this._trackX(event);
break;
case 'end':
this._trackEnd(e);
this._trackEnd(event);
break;
}
@ -13316,8 +13334,8 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
this.fire('paper-responsive-change', { narrow: this.narrow });
},
_onQueryMatchesChanged: function(e) {
this._responsiveChange(e.detail.value);
_onQueryMatchesChanged: function (event) {
this._responsiveChange(event.detail.value);
},
_forceNarrowChanged: function () {
@ -13347,9 +13365,11 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
}
},
_downHandler: function(e) {
if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(e) && !sharedPanel) {
_downHandler: function (event) {
if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(event) && !sharedPanel) {
this._startEdgePeek();
// cancel selection
event.preventDefault();
// grab this panel
sharedPanel = this;
}
@ -13361,8 +13381,8 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
sharedPanel = null;
},
_onTap: function(e) {
var targetElement = Polymer.dom(e).localTarget;
_onTap: function (event) {
var targetElement = Polymer.dom(event).localTarget;
var isTargetToggleElement = targetElement &&
this.drawerToggleAttribute &&
targetElement.hasAttribute(this.drawerToggleAttribute);
@ -13372,8 +13392,8 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
}
},
_isEdgeTouch: function(e) {
var x = e.detail.x;
_isEdgeTouch: function (event) {
var x = event.detail.x;
return !this.disableEdgeSwipe && this._swipeAllowed() &&
(this.rightDrawer ?
@ -13407,9 +13427,9 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
}
},
_trackX: function(e) {
_trackX: function (event) {
if (this.dragging) {
var dx = e.detail.dx;
var dx = event.detail.dx;
if (this.peeking) {
if (Math.abs(dx) <= this.edgeSwipeSensitivity) {
@ -13423,9 +13443,9 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
}
},
_trackEnd: function(e) {
_trackEnd: function (event) {
if (this.dragging) {
var xDirection = e.detail.dx > 0;
var xDirection = event.detail.dx > 0;
this._setDragging(false);
this.transition = true;
@ -13450,21 +13470,14 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
},
_moveDrawer: function (translateX) {
var s = this.$.drawer.style;
if (this.hasTransform) {
s.transform = this._transformForTranslateX(translateX);
} else {
s.webkitTransform = this._transformForTranslateX(translateX);
}
this.transform(this._transformForTranslateX(translateX), this.$.drawer);
}
});
}());
</script>
<iron-iconset-svg name="icons" size="24">
</script><iron-iconset-svg name="icons" size="24">
<svg>
<defs>
<g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></g>
@ -13495,6 +13508,25 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
<g id="tablet-android"><path d="M18 0H6C4.34 0 3 1.34 3 3v18c0 1.66 1.34 3 3 3h12c1.66 0 3-1.34 3-3V3c0-1.66-1.34-3-3-3zm-4 22h-4v-1h4v1zm5.25-3H4.75V3h14.5v16z"></path></g>
<g id="view-comfy"><path d="M3 9h4V5H3v4zm0 5h4v-4H3v4zm5 0h4v-4H8v4zm5 0h4v-4h-4v4zM8 9h4V5H8v4zm5-4v4h4V5h-4zm5 9h4v-4h-4v4zM3 19h4v-4H3v4zm5 0h4v-4H8v4zm5 0h4v-4h-4v4zm5 0h4v-4h-4v4zm0-14v4h4V5h-4z"></path></g>
<g id="videocam"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"></path></g>
<g id="schedule"><path fill-opacity=".9" d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zM12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"></path></g>
<g id="help"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"></path></g>
<g id="tv"><path d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z"></path></g>
<g id="live-tv"><path d="M21 6h-7.59l3.29-3.29L16 2l-4 4-4-4-.71.71L10.59 6H3c-1.1 0-2 .89-2 2v12c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.11-.9-2-2-2zm0 14H3V8h18v12zM9 10v8l7-4z"></path></g>
<g id="notifications"><path d="M11.5 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6.5-6v-5.5c0-3.07-2.13-5.64-5-6.32V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5v.68c-2.87.68-5 3.25-5 6.32V16l-2 2v1h17v-1l-2-2z"></path></g>
<g id="add-shopping-cart"><path d="M11 9h2V6h3V4h-3V1h-2v3H8v2h3v3zm-4 9c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-9.83-3.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.86-7.01L19.42 4h-.01l-1.1 2-2.76 5H8.53l-.13-.27L6.16 6l-.95-2-.94-2H1v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.13 0-.25-.11-.25-.25z"></path></g>
<g id="play-circle-filled"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"></path></g>
<g id="folder"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"></path></g>
<g id="details"><path d="M3 4l9 16 9-16H3zm3.38 2h11.25L12 16 6.38 6z"></path></g>
<g id="video-library"><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8 12.5v-9l6 4.5-6 4.5z"></path></g>
<g id="people"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"></path></g>
<g id="tablet"><path d="M21 4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 1.99-.9 1.99-2L23 6c0-1.1-.9-2-2-2zm-2 14H5V6h14v12z"></path></g>
<g id="dashboard"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"></path></g>
<g id="insert-chart"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"></path></g>
<g id="inbox"><path d="M19 3H4.99c-1.1 0-1.98.9-1.98 2L3 19c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12h-4c0 1.66-1.34 3-3 3s-3-1.34-3-3H4.99V5H19v10zm-3-5h-2V7h-4v3H8l4 4 4-4z"></path></g>
<g id="photo-library"><path d="M22 16V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2zm-11-4l2.03 2.71L16 11l4 5H8l3-4zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z"></path></g>
<g id="view-list"><path d="M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z"></path></g>
<g id="library-music"><path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 5h-3v5.5c0 1.38-1.12 2.5-2.5 2.5S10 13.88 10 12.5s1.12-2.5 2.5-2.5c.57 0 1.08.19 1.5.51V5h4v2zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6z"></path></g>
<g id="home"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path></g>
</defs>
</svg>
</iron-iconset-svg>