diff --git a/dashboard-ui/bower_components/iron-menu-behavior/.bower.json b/dashboard-ui/bower_components/iron-menu-behavior/.bower.json new file mode 100644 index 0000000000..7ca24d4128 --- /dev/null +++ b/dashboard-ui/bower_components/iron-menu-behavior/.bower.json @@ -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" +} \ No newline at end of file diff --git a/dashboard-ui/bower_components/iron-menu-behavior/.gitignore b/dashboard-ui/bower_components/iron-menu-behavior/.gitignore new file mode 100644 index 0000000000..8d4ae2536a --- /dev/null +++ b/dashboard-ui/bower_components/iron-menu-behavior/.gitignore @@ -0,0 +1 @@ +bower_components diff --git a/dashboard-ui/bower_components/iron-menu-behavior/bower.json b/dashboard-ui/bower_components/iron-menu-behavior/bower.json new file mode 100644 index 0000000000..f0d453c1bd --- /dev/null +++ b/dashboard-ui/bower_components/iron-menu-behavior/bower.json @@ -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" + } +} diff --git a/dashboard-ui/bower_components/iron-menu-behavior/demo/index.html b/dashboard-ui/bower_components/iron-menu-behavior/demo/index.html new file mode 100644 index 0000000000..6e64d2a2c2 --- /dev/null +++ b/dashboard-ui/bower_components/iron-menu-behavior/demo/index.html @@ -0,0 +1,100 @@ + + + + + + + + + + iron-menu-behavior demo + + + + + + + + + + + + +
+ +
Simple menu
+ + +
  • item 0
    • +
  • item 1
    • +
  • item 2
    • +
  • item 3
    • +     + +
    + +
    + +
    Multi-select menu
    + + +
  • item 0
    • +
  • item 1
    • +
  • item 2
    • +
  • item 3
    • +
  • item 4
    • +     + +
    + +
    + +
    Simple menubar
    + + +
  • item 0
    • +
  • item 1
    • +
  • item 2
    • +
  • item 3
    • +     + +
    + +
    +
    Multi-select menubar
    + + +
  • item 0
    • +
  • item 1
    • +
  • item 2
    • +
  • item 3
    • +
  • item 4
    • +     +
    + + diff --git a/dashboard-ui/bower_components/iron-menu-behavior/demo/simple-menu.html b/dashboard-ui/bower_components/iron-menu-behavior/demo/simple-menu.html new file mode 100644 index 0000000000..cd1c7cf113 --- /dev/null +++ b/dashboard-ui/bower_components/iron-menu-behavior/demo/simple-menu.html @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + diff --git a/dashboard-ui/bower_components/iron-menu-behavior/demo/simple-menubar.html b/dashboard-ui/bower_components/iron-menu-behavior/demo/simple-menubar.html new file mode 100644 index 0000000000..ad38ecf3d9 --- /dev/null +++ b/dashboard-ui/bower_components/iron-menu-behavior/demo/simple-menubar.html @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + diff --git a/dashboard-ui/bower_components/iron-menu-behavior/index.html b/dashboard-ui/bower_components/iron-menu-behavior/index.html new file mode 100644 index 0000000000..2c643c4a03 --- /dev/null +++ b/dashboard-ui/bower_components/iron-menu-behavior/index.html @@ -0,0 +1,30 @@ + + + + + + + + + iron-menu-behavior + + + + + + + + + + + + + diff --git a/dashboard-ui/bower_components/iron-menu-behavior/iron-menu-behavior.html b/dashboard-ui/bower_components/iron-menu-behavior/iron-menu-behavior.html new file mode 100644 index 0000000000..aa58c7fe6b --- /dev/null +++ b/dashboard-ui/bower_components/iron-menu-behavior/iron-menu-behavior.html @@ -0,0 +1,214 @@ + + + + + + + diff --git a/dashboard-ui/bower_components/iron-menu-behavior/iron-menubar-behavior.html b/dashboard-ui/bower_components/iron-menu-behavior/iron-menubar-behavior.html new file mode 100644 index 0000000000..e25304a5ec --- /dev/null +++ b/dashboard-ui/bower_components/iron-menu-behavior/iron-menubar-behavior.html @@ -0,0 +1,65 @@ + + + + + + diff --git a/dashboard-ui/bower_components/iron-menu-behavior/test/index.html b/dashboard-ui/bower_components/iron-menu-behavior/test/index.html new file mode 100644 index 0000000000..4b1c82f6ce --- /dev/null +++ b/dashboard-ui/bower_components/iron-menu-behavior/test/index.html @@ -0,0 +1,35 @@ + + + + + + iron-menu-behavior tests + + + + + + + + + + + + + + diff --git a/dashboard-ui/bower_components/iron-menu-behavior/test/iron-menu-behavior.html b/dashboard-ui/bower_components/iron-menu-behavior/test/iron-menu-behavior.html new file mode 100644 index 0000000000..309dbb163a --- /dev/null +++ b/dashboard-ui/bower_components/iron-menu-behavior/test/iron-menu-behavior.html @@ -0,0 +1,108 @@ + + + + + + iron-menu-behavior tests + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/dashboard-ui/bower_components/iron-menu-behavior/test/iron-menubar-behavior.html b/dashboard-ui/bower_components/iron-menu-behavior/test/iron-menubar-behavior.html new file mode 100644 index 0000000000..b007b1c1a7 --- /dev/null +++ b/dashboard-ui/bower_components/iron-menu-behavior/test/iron-menubar-behavior.html @@ -0,0 +1,108 @@ + + + + + + iron-menubar-behavior tests + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/dashboard-ui/bower_components/iron-menu-behavior/test/test-menu.html b/dashboard-ui/bower_components/iron-menu-behavior/test/test-menu.html new file mode 100644 index 0000000000..19b166214b --- /dev/null +++ b/dashboard-ui/bower_components/iron-menu-behavior/test/test-menu.html @@ -0,0 +1,40 @@ + + + + + + + + + + + + diff --git a/dashboard-ui/bower_components/iron-menu-behavior/test/test-menubar.html b/dashboard-ui/bower_components/iron-menu-behavior/test/test-menubar.html new file mode 100644 index 0000000000..5f7ecbcdbe --- /dev/null +++ b/dashboard-ui/bower_components/iron-menu-behavior/test/test-menubar.html @@ -0,0 +1,40 @@ + + + + + + + + + + + + diff --git a/dashboard-ui/bower_components/paper-drawer-panel/paper-drawer-panel.css b/dashboard-ui/bower_components/paper-drawer-panel/paper-drawer-panel.css index ab7c568efc..747f0bb77f 100644 --- a/dashboard-ui/bower_components/paper-drawer-panel/paper-drawer-panel.css +++ b/dashboard-ui/bower_components/paper-drawer-panel/paper-drawer-panel.css @@ -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] { diff --git a/dashboard-ui/bower_components/paper-drawer-panel/paper-drawer-panel.html b/dashboard-ui/bower_components/paper-drawer-panel/paper-drawer-panel.html index 148cfeb1c2..c7f27f29e9 100644 --- a/dashboard-ui/bower_components/paper-drawer-panel/paper-drawer-panel.html +++ b/dashboard-ui/bower_components/paper-drawer-panel/paper-drawer-panel.html @@ -105,487 +105,489 @@ To change the drawer container when it's in the right side: --> - + - + /** + * The panel to be selected when `paper-drawer-panel` changes to narrow + * layout. + */ + defaultSelected: { + type: String, + value: 'main' + }, + + /** + * If true, swipe from the edge is disable. + */ + disableEdgeSwipe: { + type: Boolean, + value: false + }, + + /** + * If true, swipe to open/close the drawer is disabled. + */ + disableSwipe: { + type: Boolean, + value: false + }, + + /** + * Whether the user is dragging the drawer interactively. + */ + dragging: { + type: Boolean, + value: false, + readOnly: true, + notify: true + }, + + /** + * Width of the drawer panel. + */ + drawerWidth: { + type: String, + value: '256px' + }, + + /** + * How many pixels on the side of the screen are sensitive to edge + * swipes and peek. + */ + edgeSwipeSensitivity: { + type: Number, + value: 30 + }, + + /** + * If true, ignore `responsiveWidth` setting and force the narrow layout. + */ + forceNarrow: { + type: Boolean, + value: false + }, + + /** + * Whether the browser has support for the transform CSS property. + */ + hasTransform: { + type: Boolean, + value: function () { + return 'transform' in this.style; + } + }, + + /** + * Whether the browser has support for the will-change CSS property. + */ + hasWillChange: { + type: Boolean, + value: function () { + return 'willChange' in this.style; + } + }, + + /** + * Returns true if the panel is in narrow layout. This is useful if you + * need to show/hide elements based on the layout. + */ + narrow: { + reflectToAttribute: true, + type: Boolean, + value: false, + readOnly: true, + notify: true + }, + + /** + * Whether the drawer is peeking out from the edge. + */ + peeking: { + type: Boolean, + value: false, + readOnly: true, + notify: true + }, + + /** + * Max-width when the panel changes to narrow layout. + */ + responsiveWidth: { + type: String, + value: '640px' + }, + + /** + * If true, position the drawer to the right. + */ + rightDrawer: { + type: Boolean, + value: false + }, + + /** + * The panel that is being selected. `drawer` for the drawer panel and + * `main` for the main panel. + */ + selected: { + reflectToAttribute: true, + notify: true, + type: String, + value: null + }, + + /** + * The attribute on elements that should toggle the drawer on tap, also elements will + * automatically be hidden in wide layout. + */ + drawerToggleAttribute: { + type: String, + value: 'paper-drawer-toggle' + }, + + /** + * Whether the transition is enabled. + */ + transition: { + type: Boolean, + value: false + }, + + }, + + listeners: { + tap: '_onTap', + track: '_onTrack', + down: '_downHandler', + up: '_upHandler' + }, + + observers: [ + '_forceNarrowChanged(forceNarrow, defaultSelected)' + ], + + /** + * Toggles the panel open and closed. + * + * @method togglePanel + */ + togglePanel: function () { + if (this._isMainSelected()) { + this.openDrawer(); + } else { + this.closeDrawer(); + } + }, + + /** + * Opens the drawer. + * + * @method openDrawer + */ + openDrawer: function () { + this.selected = 'drawer'; + this.fire('paper-drawer-panel-open'); + }, + + /** + * Closes the drawer. + * + * @method closeDrawer + */ + closeDrawer: function () { + this.selected = 'main'; + this.fire('paper-drawer-panel-close'); + }, + + ready: function () { + // Avoid transition at the beginning e.g. page loads and enable + // transitions only after the element is rendered and ready. + this.transition = true; + }, + + _computeIronSelectorClass: function (narrow, transition, dragging, rightDrawer, peeking) { + return classNames({ + dragging: dragging, + 'narrow-layout': narrow, + 'right-drawer': rightDrawer, + 'left-drawer': !rightDrawer, + transition: transition, + peeking: peeking + }); + }, + + _computeDrawerStyle: function (drawerWidth) { + return 'width:' + drawerWidth + ';'; + }, + + _computeMainStyle: function (narrow, rightDrawer, drawerWidth) { + var style = ''; + + style += 'left:' + ((narrow || rightDrawer) ? '0' : drawerWidth) + ';'; + + if (rightDrawer) { + style += 'right:' + (narrow ? '' : drawerWidth) + ';'; + } + + return style; + }, + + _computeMediaQuery: function (forceNarrow, responsiveWidth) { + return forceNarrow ? '' : '(max-width: ' + responsiveWidth + ')'; + }, + + _computeSwipeOverlayHidden: function (narrow, disableEdgeSwipe) { + return !narrow || disableEdgeSwipe; + }, + + _onTrack: function (event) { + if (sharedPanel && this !== sharedPanel) { + return; + } + switch (event.detail.state) { + case 'start': + this._trackStart(event); + break; + case 'track': + this._trackX(event); + break; + case 'end': + this._trackEnd(event); + break; + } + + }, + + _responsiveChange: function (narrow) { + this._setNarrow(narrow); + + if (this.narrow) { + this.selected = this.defaultSelected; + } + + this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all'); + this.fire('paper-responsive-change', { narrow: this.narrow }); + }, + + _onQueryMatchesChanged: function (event) { + this._responsiveChange(event.detail.value); + }, + + _forceNarrowChanged: function () { + // set the narrow mode only if we reached the `responsiveWidth` + this._responsiveChange(this.forceNarrow || this.$.mq.queryMatches); + }, + + _swipeAllowed: function () { + return this.narrow && !this.disableSwipe; + }, + + _isMainSelected: function () { + return this.selected === 'main'; + }, + + _startEdgePeek: function () { + this.width = this.$.drawer.offsetWidth; + this._moveDrawer(this._translateXForDeltaX(this.rightDrawer ? + -this.edgeSwipeSensitivity : this.edgeSwipeSensitivity)); + this._setPeeking(true); + }, + + _stopEdgePeek: function () { + if (this.peeking) { + this._setPeeking(false); + this._moveDrawer(null); + } + }, + + _downHandler: function (event) { + if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(event) && !sharedPanel) { + this._startEdgePeek(); + // cancel selection + event.preventDefault(); + // grab this panel + sharedPanel = this; + } + }, + + _upHandler: function () { + this._stopEdgePeek(); + // release the panel + sharedPanel = null; + }, + + _onTap: function (event) { + var targetElement = Polymer.dom(event).localTarget; + var isTargetToggleElement = targetElement && + this.drawerToggleAttribute && + targetElement.hasAttribute(this.drawerToggleAttribute); + + if (isTargetToggleElement) { + this.togglePanel(); + } + }, + + _isEdgeTouch: function (event) { + var x = event.detail.x; + + return !this.disableEdgeSwipe && this._swipeAllowed() && + (this.rightDrawer ? + x >= this.offsetWidth - this.edgeSwipeSensitivity : + x <= this.edgeSwipeSensitivity); + }, + + _trackStart: function (event) { + if (this._swipeAllowed()) { + sharedPanel = this; + this._setDragging(true); + + if (this._isMainSelected()) { + this._setDragging(this.peeking || this._isEdgeTouch(event)); + } + + if (this.dragging) { + this.width = this.$.drawer.offsetWidth; + this.transition = false; + } + } + }, + + _translateXForDeltaX: function (deltaX) { + var isMain = this._isMainSelected(); + + if (this.rightDrawer) { + return Math.max(0, isMain ? this.width + deltaX : deltaX); + } else { + return Math.min(0, isMain ? deltaX - this.width : deltaX); + } + }, + + _trackX: function (event) { + if (this.dragging) { + var dx = event.detail.dx; + + if (this.peeking) { + if (Math.abs(dx) <= this.edgeSwipeSensitivity) { + // Ignore trackx until we move past the edge peek. + return; + } + this._setPeeking(false); + } + + this._moveDrawer(this._translateXForDeltaX(dx)); + } + }, + + _trackEnd: function (event) { + if (this.dragging) { + var xDirection = event.detail.dx > 0; + + this._setDragging(false); + this.transition = true; + sharedPanel = null; + this._moveDrawer(null); + + if (this.rightDrawer) { + this[xDirection ? 'closeDrawer' : 'openDrawer'](); + } else { + this[xDirection ? 'openDrawer' : 'closeDrawer'](); + } + } + }, + + _transformForTranslateX: function (translateX) { + if (translateX === null) { + return ''; + } + + return this.hasWillChange ? 'translateX(' + translateX + 'px)' : + 'translate3d(' + translateX + 'px, 0, 0)'; + }, + + _moveDrawer: function (translateX) { + this.transform(this._transformForTranslateX(translateX), this.$.drawer); + } + + }); + + }()); + + \ No newline at end of file diff --git a/dashboard-ui/bower_components/paper-menu/.bower.json b/dashboard-ui/bower_components/paper-menu/.bower.json new file mode 100644 index 0000000000..75f9604b52 --- /dev/null +++ b/dashboard-ui/bower_components/paper-menu/.bower.json @@ -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 +} \ No newline at end of file diff --git a/dashboard-ui/bower_components/paper-menu/.gitignore b/dashboard-ui/bower_components/paper-menu/.gitignore new file mode 100644 index 0000000000..fbe05fc93b --- /dev/null +++ b/dashboard-ui/bower_components/paper-menu/.gitignore @@ -0,0 +1 @@ +bower_components/ diff --git a/dashboard-ui/bower_components/paper-menu/bower.json b/dashboard-ui/bower_components/paper-menu/bower.json new file mode 100644 index 0000000000..dd2a5cde00 --- /dev/null +++ b/dashboard-ui/bower_components/paper-menu/bower.json @@ -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" + } +} diff --git a/dashboard-ui/bower_components/paper-menu/demo/index.html b/dashboard-ui/bower_components/paper-menu/demo/index.html new file mode 100644 index 0000000000..9734cac337 --- /dev/null +++ b/dashboard-ui/bower_components/paper-menu/demo/index.html @@ -0,0 +1,81 @@ + + + + + + + + + + paper-menu demo + + + + + + + + + + + +
    +
    +

    Standard

    +
    + + Inbox + Starred + Sent mail + Drafts + +
    +
    + +
    +

    Pre-selected

    +
    + + Inbox + Starred + Sent mail + Drafts + +
    +
    + +
    +

    Multi-select

    +
    + + Bold + Italic + Underline + Strikethrough + +
    +
    +
    + + diff --git a/dashboard-ui/bower_components/paper-menu/hero.svg b/dashboard-ui/bower_components/paper-menu/hero.svg new file mode 100644 index 0000000000..91af1f60ea --- /dev/null +++ b/dashboard-ui/bower_components/paper-menu/hero.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/dashboard-ui/bower_components/paper-menu/index.html b/dashboard-ui/bower_components/paper-menu/index.html new file mode 100644 index 0000000000..fc8841148b --- /dev/null +++ b/dashboard-ui/bower_components/paper-menu/index.html @@ -0,0 +1,30 @@ + + + + + + + + + paper-menu + + + + + + + + + + + + + diff --git a/dashboard-ui/bower_components/paper-menu/paper-menu.html b/dashboard-ui/bower_components/paper-menu/paper-menu.html new file mode 100644 index 0000000000..45ecd722c5 --- /dev/null +++ b/dashboard-ui/bower_components/paper-menu/paper-menu.html @@ -0,0 +1,133 @@ + + + + + + + + + + + + + + + + + diff --git a/dashboard-ui/bower_components/paper-menu/test/index.html b/dashboard-ui/bower_components/paper-menu/test/index.html new file mode 100644 index 0000000000..e6b26d5498 --- /dev/null +++ b/dashboard-ui/bower_components/paper-menu/test/index.html @@ -0,0 +1,34 @@ + + + + + + paper-menu tests + + + + + + + + + + + + + + diff --git a/dashboard-ui/bower_components/paper-menu/test/paper-menu.html b/dashboard-ui/bower_components/paper-menu/test/paper-menu.html new file mode 100644 index 0000000000..5856775710 --- /dev/null +++ b/dashboard-ui/bower_components/paper-menu/test/paper-menu.html @@ -0,0 +1,67 @@ + + + + + + paper-menu tests + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index 62b55c1025..21cb57f0a7 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/dashboard-ui/css/librarybrowser.css @@ -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, diff --git a/dashboard-ui/css/librarymenu.css b/dashboard-ui/css/librarymenu.css index 92a42c81f6..81631a2c73 100644 --- a/dashboard-ui/css/librarymenu.css +++ b/dashboard-ui/css/librarymenu.css @@ -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 (max-width: 800px) { +@media all and (min-width: 800px) { - /* They can use the left menu */ - .dashboardEntryHeaderButton { + .dashboardDocument .dashboardDrawerContent { display: none !important; } } -.libraryDocument .dashboardMenuButton { +@media all and (max-width: 800px) { + + .dashboardDocument .libraryDrawerContent { + display: none !important; + } +} + +.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; -} \ No newline at end of file +} + +.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; + } diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css index ad8ff342da..b02b16366f 100644 --- a/dashboard-ui/css/site.css +++ b/dashboard-ui/css/site.css @@ -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; + background: #f2f2f2 !important; } -.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; } diff --git a/dashboard-ui/scripts/librarymenu.js b/dashboard-ui/scripts/librarymenu.js index 20be1c8e31..9cd6f04796 100644 --- a/dashboard-ui/scripts/librarymenu.js +++ b/dashboard-ui/scripts/librarymenu.js @@ -11,12 +11,7 @@ html += ''; } - html += ''; - - html += ''; @@ -25,9 +20,9 @@ html += '
    '; - html += ''; + html += ''; - html += ''; + html += ''; html += '
    '; html += '
    '; html += ''; @@ -36,7 +31,7 @@ html += '
    '; html += '
    '; - html += ''; + html += ''; if (!showUserAtTop()) { html += '
    '; html += '
    '; html += '
    '; - html += ''; + html += ''; html += Globalize.translate('ButtonInbox'); html += '
    0
    '; html += '    '; - html += '' + Globalize.translate('ButtonSync') + ''; + if (user.localUser) { + html += '' + Globalize.translate('ButtonSettings') + ''; + } + + html += '' + Globalize.translate('ButtonSync') + ''; if (Dashboard.isConnectMode()) { - html += '' + Globalize.translate('ButtonSelectServer') + ''; + html += '' + Globalize.translate('ButtonSelectServer') + ''; } if (showUserAtTop()) { - html += '' + Globalize.translate('ButtonSignOut') + ''; + html += '' + Globalize.translate('ButtonSignOut') + ''; } html += '
    '; + $('.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 '' + i.Name + ''; + return '' + i.Name + ''; }).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').visible(true); + } else { + $('.adminMenuOptions').visible(false); + } - if (user.Policy.IsAdministrator) { - $('.adminMenuOptions').show(); - } else { - $('.adminMenuOptions').hide(); - } - - if (user.Policy.EnableSync) { - $('.syncViewMenu').show(); - } else { - $('.syncViewMenu').hide(); - } - }); + if (user.Policy.EnableSync) { + $('.lnkMySync').visible(true); + } else { + $('.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 += '
    '; - - html += '
    '; - - 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 += ''; - - var imgWidth = 44; - - if (hasUserImage) { - var url = user.imageUrl; - - if (user.supportsImageParams) { - url += "&width=" + (imgWidth * Math.max(devicePixelRatio || 1, 2)); - } - - html += '
    '; - } else { - html += ''; - } - - html += user.name; - html += '    '; - - html += '
    '; - - html += '' + Globalize.translate('ButtonHome') + ''; - } else { - html += '
    '; - - html += ''; - html += '
    '; - html += Globalize.translate('ButtonHome'); - html += '    '; - } - - html += '' + Globalize.translate('ButtonRemote') + ''; - - html += '
    '; - - html += getViewsHtml(); - html += '
    '; - - html += '
    '; - - $(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 += '
    '; - - html += '
    '; - - html += '
    '; - - html += '
    '; - - $(document.body).append(html); - panel = $('#dashboardPanel').panel({}).trigger('create'); - } - - return panel; - } - function setLibraryMenuText(text) { $('.libraryMenuButtonText').html('' + text + ''); @@ -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); diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index a3d7f8f36d..026485e79f 100644 --- a/dashboard-ui/scripts/site.js +++ b/dashboard-ui/scripts/site.js @@ -817,6 +817,61 @@ var Dashboard = { } }, + getToolsMenuHtml: function (page) { + + var items = Dashboard.getToolsMenuLinks(page); + + var i, length, item; + var menuHtml = ''; + + for (i = 0, length = items.length; i < length; i++) { + + item = items[i]; + + if (item.divider) { + menuHtml += "
    "; + } + + if (item.href) { + + var style = item.color ? ' style="color:' + item.color + '"' : ''; + + if (item.selected) { + menuHtml += ''; + } else { + menuHtml += ''; + } + + var icon = item.icon; + + if (icon) { + menuHtml += ''; + //if (icon.indexOf('fa') == 0) { + // menuHtml += ''; + //} + //else if (icon.indexOf('fa') == 0) { + // menuHtml += ''; + //} + //else { + // menuHtml += '' + icon + ''; + //} + } + + menuHtml += ''; + menuHtml += item.name; + menuHtml += ''; + menuHtml += ''; + } else { + + menuHtml += '
    '; + menuHtml += item.name; + menuHtml += '
    '; + } + } + + return menuHtml; + }, + ensureToolsMenu: function (page) { var sidebar = $('.toolsSidebar', page); @@ -827,88 +882,13 @@ var Dashboard = { html += '
    '; - var items = Dashboard.getToolsMenuLinks(page); - - var i, length, item; - var menuHtml = ''; - - for (i = 0, length = items.length; i < length; i++) { - - item = items[i]; - - if (item.divider) { - menuHtml += "
    "; - } - - if (item.href) { - - var style = item.color ? ' style="color:' + item.color + '"' : ''; - - if (item.selected) { - menuHtml += ''; - } else { - menuHtml += ''; - } - - var icon = item.icon; - - if (icon) { - if (icon.indexOf('fa') == 0) { - menuHtml += ''; - } else { - menuHtml += '' + icon + ''; - } - } - - menuHtml += ''; - menuHtml += item.name; - menuHtml += ''; - menuHtml += ''; - } else { - - menuHtml += '
    '; - menuHtml += item.name; - menuHtml += '
    '; - } - } - - html += menuHtml; + html += Dashboard.getToolsMenuHtml(page); // sidebarLinks html += '
    '; // content-secondary html += ''; - html += '
    '; - - html += '

    EMBY

    '; - - html += '
    '; - html += menuHtml; - // sidebarLinks - - html += '
    '; - html += '
    '; - - if (Dashboard.isConnectMode()) { - html += ''; - html += ''; - html += Globalize.translate('ButtonSelectServer'); - html += ''; - html += ''; - } - - html += ''; - html += ''; - html += Globalize.translate('ButtonSignOut'); - html += ''; - html += ''; - - html += '
    '; - - html += '
    '; - html += '
    '; - $('.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'); diff --git a/dashboard-ui/themes/ios.css b/dashboard-ui/themes/ios.css index 666d814779..22b9445359 100644 --- a/dashboard-ui/themes/ios.css +++ b/dashboard-ui/themes/ios.css @@ -81,10 +81,6 @@ h1, h1 a { font-weight: 400; } -.librarySidebarLinks a { - font-weight: 400 !important; -} - .libraryMenuButtonText { font-weight: 500 !important; position: relative; diff --git a/dashboard-ui/thirdparty/emby-icons.html b/dashboard-ui/thirdparty/emby-icons.html index fa946ea05a..ce13121586 100644 --- a/dashboard-ui/thirdparty/emby-icons.html +++ b/dashboard-ui/thirdparty/emby-icons.html @@ -64,6 +64,25 @@ See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for - + + + + + + + + + + + + + + + + + + + + diff --git a/dashboard-ui/vulcanize-out.html b/dashboard-ui/vulcanize-out.html index b206314b75..46c344ee29 100644 --- a/dashboard-ui/vulcanize-out.html +++ b/dashboard-ui/vulcanize-out.html @@ -12844,7 +12844,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN }); - - - + /** + * The panel to be selected when `paper-drawer-panel` changes to narrow + * layout. + */ + defaultSelected: { + type: String, + value: 'main' + }, + + /** + * If true, swipe from the edge is disable. + */ + disableEdgeSwipe: { + type: Boolean, + value: false + }, + + /** + * If true, swipe to open/close the drawer is disabled. + */ + disableSwipe: { + type: Boolean, + value: false + }, + + /** + * Whether the user is dragging the drawer interactively. + */ + dragging: { + type: Boolean, + value: false, + readOnly: true, + notify: true + }, + + /** + * Width of the drawer panel. + */ + drawerWidth: { + type: String, + value: '256px' + }, + + /** + * How many pixels on the side of the screen are sensitive to edge + * swipes and peek. + */ + edgeSwipeSensitivity: { + type: Number, + value: 30 + }, + + /** + * If true, ignore `responsiveWidth` setting and force the narrow layout. + */ + forceNarrow: { + type: Boolean, + value: false + }, + + /** + * Whether the browser has support for the transform CSS property. + */ + hasTransform: { + type: Boolean, + value: function () { + return 'transform' in this.style; + } + }, + + /** + * Whether the browser has support for the will-change CSS property. + */ + hasWillChange: { + type: Boolean, + value: function () { + return 'willChange' in this.style; + } + }, + + /** + * Returns true if the panel is in narrow layout. This is useful if you + * need to show/hide elements based on the layout. + */ + narrow: { + reflectToAttribute: true, + type: Boolean, + value: false, + readOnly: true, + notify: true + }, + + /** + * Whether the drawer is peeking out from the edge. + */ + peeking: { + type: Boolean, + value: false, + readOnly: true, + notify: true + }, + + /** + * Max-width when the panel changes to narrow layout. + */ + responsiveWidth: { + type: String, + value: '640px' + }, + + /** + * If true, position the drawer to the right. + */ + rightDrawer: { + type: Boolean, + value: false + }, + + /** + * The panel that is being selected. `drawer` for the drawer panel and + * `main` for the main panel. + */ + selected: { + reflectToAttribute: true, + notify: true, + type: String, + value: null + }, + + /** + * The attribute on elements that should toggle the drawer on tap, also elements will + * automatically be hidden in wide layout. + */ + drawerToggleAttribute: { + type: String, + value: 'paper-drawer-toggle' + }, + + /** + * Whether the transition is enabled. + */ + transition: { + type: Boolean, + value: false + }, + + }, + + listeners: { + tap: '_onTap', + track: '_onTrack', + down: '_downHandler', + up: '_upHandler' + }, + + observers: [ + '_forceNarrowChanged(forceNarrow, defaultSelected)' + ], + + /** + * Toggles the panel open and closed. + * + * @method togglePanel + */ + togglePanel: function () { + if (this._isMainSelected()) { + this.openDrawer(); + } else { + this.closeDrawer(); + } + }, + + /** + * Opens the drawer. + * + * @method openDrawer + */ + openDrawer: function () { + this.selected = 'drawer'; + this.fire('paper-drawer-panel-open'); + }, + + /** + * Closes the drawer. + * + * @method closeDrawer + */ + closeDrawer: function () { + this.selected = 'main'; + this.fire('paper-drawer-panel-close'); + }, + + ready: function () { + // Avoid transition at the beginning e.g. page loads and enable + // transitions only after the element is rendered and ready. + this.transition = true; + }, + + _computeIronSelectorClass: function (narrow, transition, dragging, rightDrawer, peeking) { + return classNames({ + dragging: dragging, + 'narrow-layout': narrow, + 'right-drawer': rightDrawer, + 'left-drawer': !rightDrawer, + transition: transition, + peeking: peeking + }); + }, + + _computeDrawerStyle: function (drawerWidth) { + return 'width:' + drawerWidth + ';'; + }, + + _computeMainStyle: function (narrow, rightDrawer, drawerWidth) { + var style = ''; + + style += 'left:' + ((narrow || rightDrawer) ? '0' : drawerWidth) + ';'; + + if (rightDrawer) { + style += 'right:' + (narrow ? '' : drawerWidth) + ';'; + } + + return style; + }, + + _computeMediaQuery: function (forceNarrow, responsiveWidth) { + return forceNarrow ? '' : '(max-width: ' + responsiveWidth + ')'; + }, + + _computeSwipeOverlayHidden: function (narrow, disableEdgeSwipe) { + return !narrow || disableEdgeSwipe; + }, + + _onTrack: function (event) { + if (sharedPanel && this !== sharedPanel) { + return; + } + switch (event.detail.state) { + case 'start': + this._trackStart(event); + break; + case 'track': + this._trackX(event); + break; + case 'end': + this._trackEnd(event); + break; + } + + }, + + _responsiveChange: function (narrow) { + this._setNarrow(narrow); + + if (this.narrow) { + this.selected = this.defaultSelected; + } + + this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all'); + this.fire('paper-responsive-change', { narrow: this.narrow }); + }, + + _onQueryMatchesChanged: function (event) { + this._responsiveChange(event.detail.value); + }, + + _forceNarrowChanged: function () { + // set the narrow mode only if we reached the `responsiveWidth` + this._responsiveChange(this.forceNarrow || this.$.mq.queryMatches); + }, + + _swipeAllowed: function () { + return this.narrow && !this.disableSwipe; + }, + + _isMainSelected: function () { + return this.selected === 'main'; + }, + + _startEdgePeek: function () { + this.width = this.$.drawer.offsetWidth; + this._moveDrawer(this._translateXForDeltaX(this.rightDrawer ? + -this.edgeSwipeSensitivity : this.edgeSwipeSensitivity)); + this._setPeeking(true); + }, + + _stopEdgePeek: function () { + if (this.peeking) { + this._setPeeking(false); + this._moveDrawer(null); + } + }, + + _downHandler: function (event) { + if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(event) && !sharedPanel) { + this._startEdgePeek(); + // cancel selection + event.preventDefault(); + // grab this panel + sharedPanel = this; + } + }, + + _upHandler: function () { + this._stopEdgePeek(); + // release the panel + sharedPanel = null; + }, + + _onTap: function (event) { + var targetElement = Polymer.dom(event).localTarget; + var isTargetToggleElement = targetElement && + this.drawerToggleAttribute && + targetElement.hasAttribute(this.drawerToggleAttribute); + + if (isTargetToggleElement) { + this.togglePanel(); + } + }, + + _isEdgeTouch: function (event) { + var x = event.detail.x; + + return !this.disableEdgeSwipe && this._swipeAllowed() && + (this.rightDrawer ? + x >= this.offsetWidth - this.edgeSwipeSensitivity : + x <= this.edgeSwipeSensitivity); + }, + + _trackStart: function (event) { + if (this._swipeAllowed()) { + sharedPanel = this; + this._setDragging(true); + + if (this._isMainSelected()) { + this._setDragging(this.peeking || this._isEdgeTouch(event)); + } + + if (this.dragging) { + this.width = this.$.drawer.offsetWidth; + this.transition = false; + } + } + }, + + _translateXForDeltaX: function (deltaX) { + var isMain = this._isMainSelected(); + + if (this.rightDrawer) { + return Math.max(0, isMain ? this.width + deltaX : deltaX); + } else { + return Math.min(0, isMain ? deltaX - this.width : deltaX); + } + }, + + _trackX: function (event) { + if (this.dragging) { + var dx = event.detail.dx; + + if (this.peeking) { + if (Math.abs(dx) <= this.edgeSwipeSensitivity) { + // Ignore trackx until we move past the edge peek. + return; + } + this._setPeeking(false); + } + + this._moveDrawer(this._translateXForDeltaX(dx)); + } + }, + + _trackEnd: function (event) { + if (this.dragging) { + var xDirection = event.detail.dx > 0; + + this._setDragging(false); + this.transition = true; + sharedPanel = null; + this._moveDrawer(null); + + if (this.rightDrawer) { + this[xDirection ? 'closeDrawer' : 'openDrawer'](); + } else { + this[xDirection ? 'openDrawer' : 'closeDrawer'](); + } + } + }, + + _transformForTranslateX: function (translateX) { + if (translateX === null) { + return ''; + } + + return this.hasWillChange ? 'translateX(' + translateX + 'px)' : + 'translate3d(' + translateX + 'px, 0, 0)'; + }, + + _moveDrawer: function (translateX) { + this.transform(this._transformForTranslateX(translateX), this.$.drawer); + } + + }); + + }()); + + @@ -13495,7 +13508,26 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] { - + + + + + + + + + + + + + + + + + + + +