diff --git a/dashboard-ui/bower_components/emby-webcomponents/.bower.json b/dashboard-ui/bower_components/emby-webcomponents/.bower.json index 25e6b4389..f0bf96b10 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/.bower.json +++ b/dashboard-ui/bower_components/emby-webcomponents/.bower.json @@ -16,12 +16,12 @@ }, "devDependencies": {}, "ignore": [], - "version": "1.2.12", - "_release": "1.2.12", + "version": "1.2.13", + "_release": "1.2.13", "_resolution": { "type": "version", - "tag": "1.2.12", - "commit": "7f5e97c93b067629c7e3d0da3599ec812ad573b4" + "tag": "1.2.13", + "commit": "23c88db1b8b062fa6b738b724c2360d398164cad" }, "_source": "https://github.com/MediaBrowser/emby-webcomponents.git", "_target": "^1.2.0", diff --git a/dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.css b/dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.css index 177a06e6c..f1239370e 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.css +++ b/dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.css @@ -1,6 +1,31 @@ .actionSheet { display: flex; justify-content: center; + padding: 0; + border: none; + border-radius: 2px; + box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); + + /*opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + z-index: 999; + transform-origin: 100% 0; + display: block; + background: #fff; + margin: 0; + padding: 0; + border: none; + border-radius: 2px; + position: absolute; + top: 0; + left: 0; + overflow: hidden; + box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); + will-change: transform; + transition: transform .3s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1); + transition: transform .3s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1); + z-index: -1;*/ } .actionSheet.centered .actionSheetContent { @@ -10,7 +35,7 @@ .actionSheetContent { margin: 0 !important; - padding: 1em 1em !important; + padding: .4em 0 !important; flex-direction: column; display: flex; justify-content: center; @@ -18,7 +43,7 @@ } .actionSheetMenuItem { - padding: .5em .5em; + padding: .7em 1.5em; margin: 0; text-transform: none; text-align: inherit; @@ -47,8 +72,14 @@ h1.actionSheetTitle { margin: .5em 0 1em !important; + padding: 0 1em; } h2.actionSheetTitle { margin: .25em 0 .55em !important; + padding: 0 1em; +} + +.actionSheet.extraSpacing { + font-size: 108%; } diff --git a/dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.js b/dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.js index 7eab9db44..342472cdb 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.js +++ b/dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.js @@ -22,18 +22,6 @@ return results; } - var docElem = doc.documentElement; - var docElemValues = { - clientTop: docElem.clientTop, - clientLeft: docElem.clientLeft - }; - - var win = doc.defaultView; - var winValues = { - pageXOffset: win.pageXOffset, - pageYOffset: win.pageYOffset - }; - var box; var elem; @@ -57,7 +45,7 @@ return results; } - function getPosition(options) { + function getPosition(options, dlg) { var windowHeight = window.innerHeight; @@ -70,9 +58,9 @@ pos.top += options.positionTo.offsetHeight / 2; pos.left += options.positionTo.offsetWidth / 2; - // Account for popup size - we can't predict this yet so just estimate - pos.top -= (45 * options.items.length) / 2; - pos.left -= 80; + // Account for popup size + pos.top -= ((dlg.offsetHeight || 300) / 2); + pos.left -= ((dlg.offsetWidth || 160) / 2); // Avoid showing too close to the bottom pos.top = Math.min(pos.top, windowHeight - 300); @@ -94,16 +82,13 @@ function show(options) { - var pos = options.positionTo ? getPosition(options) : null; - // items // positionTo // showCancel // title var dialogOptions = { removeOnClose: true, - enableHistory: options.enableHistory, - refit: pos == null + enableHistory: options.enableHistory }; var backButton = false; @@ -122,6 +107,10 @@ var dlg = dialogHelper.createDialog(dialogOptions); + if (!layoutManager.tv) { + dlg.classList.add('extraSpacing'); + } + dlg.classList.add('actionSheet'); var html = ''; @@ -142,6 +131,10 @@ html += '
'; + options.items.forEach(function (o) { + o.ironIcon = o.selected ? 'check' : null; + }); + var itemsWithIcons = options.items.filter(function (o) { return o.ironIcon; }); @@ -155,7 +148,6 @@ } var enablePaperMenu = !layoutManager.tv; - enablePaperMenu = false; var itemTagName = 'paper-button'; if (enablePaperMenu) { @@ -168,7 +160,7 @@ var option = options.items[i]; var autoFocus = option.selected ? ' autoFocus' : ''; - html += '<' + itemTagName + autoFocus + ' noink class="actionSheetMenuItem" data-id="' + option.id + '" style="display:block;">'; + html += '<' + itemTagName + autoFocus + ' class="actionSheetMenuItem" data-id="' + option.id + '" style="display:block;">'; if (option.ironIcon) { html += ''; @@ -231,6 +223,8 @@ dialogHelper.open(dlg); + var pos = options.positionTo ? getPosition(options, dlg) : null; + if (pos) { dlg.style.position = 'fixed'; dlg.style.margin = 0; diff --git a/dashboard-ui/bower_components/emby-webcomponents/dialoghelper/dialoghelper.css b/dashboard-ui/bower_components/emby-webcomponents/dialoghelper/dialoghelper.css index eb34d4386..86619cba4 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/dialoghelper/dialoghelper.css +++ b/dashboard-ui/bower_components/emby-webcomponents/dialoghelper/dialoghelper.css @@ -1,6 +1,6 @@ .dialog { margin: 0; - border-radius: 3px; + border-radius: 2px; z-index: 999999 !important; position: fixed; margin: 24px 40px; @@ -10,6 +10,7 @@ height: auto; border: 0; padding: 0; + will-change: transform; } .dialog.fixedSize { diff --git a/dashboard-ui/bower_components/emby-webcomponents/layoutmanager.js b/dashboard-ui/bower_components/emby-webcomponents/layoutmanager.js index 996bc08de..df108a932 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/layoutmanager.js +++ b/dashboard-ui/bower_components/emby-webcomponents/layoutmanager.js @@ -1,23 +1,40 @@ define(['browser'], function (browser) { + function setLayout(self, layout, selectedLayout) { + + if (layout == selectedLayout) { + self[layout] = true; + document.documentElement.classList.add('layout-' + layout); + } else { + self[layout] = false; + document.documentElement.classList.remove('layout-' + layout); + } + } + function layoutManager() { var self = this; - self.setFormFactor = function (formFactor) { + self.layout = function (layout) { - self.mobile = false; - self.tv = false; - - self[formFactor] = true; + setLayout(self, 'mobile', layout); + setLayout(self, 'tv', layout); + setLayout(self, 'desktop', layout); }; - // Take a guess at initial layout. The consuming app can override - if (browser.mobile) { - self.setFormFactor('mobile'); - } else { - self.setFormFactor('desktop'); - } + self.autoLayout = function () { + + // Take a guess at initial layout. The consuming app can override + if (browser.mobile) { + self.layout('mobile'); + } else if (browser.tv) { + self.layout('tv'); + } else { + self.layout('desktop'); + } + }; + + self.autoLayout(); }; return new layoutManager(); diff --git a/dashboard-ui/bower_components/emby-webcomponents/scrollstyles.css b/dashboard-ui/bower_components/emby-webcomponents/scrollstyles.css new file mode 100644 index 000000000..6549afd50 --- /dev/null +++ b/dashboard-ui/bower_components/emby-webcomponents/scrollstyles.css @@ -0,0 +1,49 @@ +.smoothScrollX { + overflow-x: scroll; + -webkit-overflow-scrolling: touch; + overflow-y: hidden; + scroll-behavior: smooth; +} + +.hiddenScrollX { + overflow-x: scroll; + -webkit-overflow-scrolling: touch; + overflow-y: hidden; + white-space: nowrap; + scroll-behavior: smooth; +} + +.hiddenScrollX, .layout-tv .smoothScrollX, .layout-mobile .smoothScrollX { + -ms-overflow-style: none; + overflow: -moz-scrollbars-none; +} + + .hiddenScrollX::-webkit-scrollbar, .layout-tv .smoothScrollX::-webkit-scrollbar, .layout-mobile .smoothScrollX::-webkit-scrollbar { + height: 0 !important; + display: none; + } + + +.smoothScrollY { + overflow-y: auto; + -webkit-overflow-scrolling: touch; + overflow-x: hidden; + scroll-behavior: smooth; +} + +.hiddenScrollY, .layout-tv .smoothScrollY, .layout-mobile .smoothScrollY { + overflow-y: auto; + -webkit-overflow-scrolling: touch; + overflow-x: hidden; + scroll-behavior: smooth; +} + +.hiddenScrollY { + -ms-overflow-style: none; + overflow: -moz-scrollbars-none; +} + + .hiddenScrollY::-webkit-scrollbar, .layout-tv .smoothScrollY::-webkit-scrollbar, .layout-mobile .smoothScrollY::-webkit-scrollbar { + width: 0 !important; + display: none; + } diff --git a/dashboard-ui/bower_components/iron-selector/.bower.json b/dashboard-ui/bower_components/iron-selector/.bower.json index c88ed41aa..43e942ccc 100644 --- a/dashboard-ui/bower_components/iron-selector/.bower.json +++ b/dashboard-ui/bower_components/iron-selector/.bower.json @@ -36,7 +36,7 @@ "tag": "v1.4.0", "commit": "554f7418fdbd97688eb21518b5f8172167d53a95" }, - "_source": "git://github.com/polymerelements/iron-selector.git", + "_source": "git://github.com/PolymerElements/iron-selector.git", "_target": "^1.0.0", - "_originalSource": "polymerelements/iron-selector" + "_originalSource": "PolymerElements/iron-selector" } \ No newline at end of file diff --git a/dashboard-ui/components/favoriteitems.js b/dashboard-ui/components/favoriteitems.js index 9a0266fa3..2621f4013 100644 --- a/dashboard-ui/components/favoriteitems.js +++ b/dashboard-ui/components/favoriteitems.js @@ -1,4 +1,4 @@ -define(['libraryBrowser'], function (libraryBrowser) { +define(['libraryBrowser', 'scrollStyles'], function (libraryBrowser) { function enableScrollX() { return browserInfo.mobile && AppInfo.enableAppLayouts; diff --git a/dashboard-ui/components/tvguide/tvguide.js b/dashboard-ui/components/tvguide/tvguide.js index 766cf1964..ce6eb0896 100644 --- a/dashboard-ui/components/tvguide/tvguide.js +++ b/dashboard-ui/components/tvguide/tvguide.js @@ -1,4 +1,4 @@ -define(['jQuery', 'livetvcss', 'scripts/livetvcomponents'], function ($) { +define(['jQuery', 'livetvcss', 'scripts/livetvcomponents', 'scrollStyles'], function ($) { return function (options) { diff --git a/dashboard-ui/components/tvguide/tvguide.template.html b/dashboard-ui/components/tvguide/tvguide.template.html index cfd25509c..a92f85aea 100644 --- a/dashboard-ui/components/tvguide/tvguide.template.html +++ b/dashboard-ui/components/tvguide/tvguide.template.html @@ -5,11 +5,11 @@
-
+
-
+
diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css index 0bd9988e1..f8f4f73bc 100644 --- a/dashboard-ui/css/site.css +++ b/dashboard-ui/css/site.css @@ -563,52 +563,6 @@ div[data-role="controlgroup"] a.ui-btn-active { color: #fff !important; } -.smoothScrollX { - overflow-x: scroll; - -webkit-overflow-scrolling: touch; - overflow-y: hidden; -} - -.hiddenScrollX { - overflow-x: scroll; - -webkit-overflow-scrolling: touch; - overflow-y: hidden; - white-space: nowrap; -} - -.touch .hiddenScrollX { - -ms-overflow-style: none; - overflow: -moz-scrollbars-none; -} - - .touch .hiddenScrollX::-webkit-scrollbar { - height: 0 !important; - display: none; - } - - -.smoothScrollY { - overflow-y: auto; - -webkit-overflow-scrolling: touch; - overflow-x: hidden; -} - -.hiddenScrollY, .ui-panel-inner { - overflow-y: auto; - -webkit-overflow-scrolling: touch; - overflow-x: hidden; -} - -.touch .hiddenScrollY { - -ms-overflow-style: none; - overflow: -moz-scrollbars-none; -} - - .touch .hiddenScrollY::-webkit-scrollbar, .touch .ui-panel-inner::-webkit-scrollbar { - width: 0 !important; - display: none; - } - /** * Note: I have omitted any vendor-prefixes for clarity. * Adding them is left as an exercise for the reader. diff --git a/dashboard-ui/scripts/homeupcoming.js b/dashboard-ui/scripts/homeupcoming.js index 65a7b880d..369f6413c 100644 --- a/dashboard-ui/scripts/homeupcoming.js +++ b/dashboard-ui/scripts/homeupcoming.js @@ -1,4 +1,4 @@ -define(['jQuery'], function ($) { +define(['jQuery', 'scrollStyles'], function ($) { function loadUpcoming(page) { Dashboard.showLoadingMsg(); diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js index 1177c262f..8294b781b 100644 --- a/dashboard-ui/scripts/itemdetailpage.js +++ b/dashboard-ui/scripts/itemdetailpage.js @@ -1,4 +1,4 @@ -define(['layoutManager', 'jQuery'], function (layoutManager, $) { +define(['layoutManager', 'jQuery', 'scrollStyles'], function (layoutManager, $) { var currentItem; diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index b06140098..ff2b96a06 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -1,4 +1,4 @@ -define(['playlistManager', 'appSettings', 'appStorage', 'jQuery'], function (playlistManager, appSettings, appStorage, $) { +define(['playlistManager', 'appSettings', 'appStorage', 'jQuery', 'scrollStyles'], function (playlistManager, appSettings, appStorage, $) { var libraryBrowser = (function (window, document, screen) { diff --git a/dashboard-ui/scripts/livetvsuggested.js b/dashboard-ui/scripts/livetvsuggested.js index 6c81df036..e4f0719e6 100644 --- a/dashboard-ui/scripts/livetvsuggested.js +++ b/dashboard-ui/scripts/livetvsuggested.js @@ -1,4 +1,4 @@ -define(['jQuery'], function ($) { +define(['jQuery', 'scrollStyles'], function ($) { function enableScrollX() { return browserInfo.mobile && AppInfo.enableAppLayouts; diff --git a/dashboard-ui/scripts/mediaplayer-video.js b/dashboard-ui/scripts/mediaplayer-video.js index 710212331..c6ef7c3d5 100644 --- a/dashboard-ui/scripts/mediaplayer-video.js +++ b/dashboard-ui/scripts/mediaplayer-video.js @@ -1,4 +1,4 @@ -define(['appSettings', 'jQuery'], function (appSettings, $) { +define(['appSettings', 'jQuery', 'scrollStyles'], function (appSettings, $) { function createVideoPlayer(self) { @@ -465,7 +465,7 @@ html += ''; if (item.Chapters && item.Chapters.length) { - html += '