update scroll styles

2025-03-30 19:56:21 +00:00 · 2016-04-11 00:24:16 -04:00 · 2016-04-11 00:24:16 -04:00 · ca13b8cbc2
commit ca13b8cbc2
parent 308b423658
23 changed files with 153 additions and 106 deletions
--- 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",
--- 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%;
 }
--- 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 += '<div class="actionSheetScroller">';

+        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 += '<iron-icon class="actionSheetItemIcon" icon="' + option.ironIcon + '"></iron-icon>';
@ -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;
--- 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 {
--- a/dashboard-ui/bower_components/emby-webcomponents/layoutmanager.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/layoutmanager.js
@ -1,24 +1,41 @@
 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);
        };

+        self.autoLayout = function () {
+
            // Take a guess at initial layout. The consuming app can override
            if (browser.mobile) {
-            self.setFormFactor('mobile');
+                self.layout('mobile');
+            } else if (browser.tv) {
+                self.layout('tv');
            } else {
-            self.setFormFactor('desktop');
+                self.layout('desktop');
            }
        };

+        self.autoLayout();
+    };
+
    return new layoutManager();
 });
--- a/dashboard-ui/bower_components/emby-webcomponents/scrollstyles.css
+++ 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;
+    }
--- 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"
 }
--- 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;
--- 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) {

--- a/dashboard-ui/components/tvguide/tvguide.template.html
+++ b/dashboard-ui/components/tvguide/tvguide.template.html
@ -5,11 +5,11 @@
                <a class="btnSelectDate" href="#" style="display:block;padding-left:5px;color:#fff;text-decoration:none;font-weight:normal!important;padding:5px 10px 4px 0;font-size:13px;"><iron-icon icon="schedule" style="margin-right:3px;width:18px;height:18px;"></iron-icon><span class="currentDate" style="vertical-align: middle;"></span></a>
            </div>
        </div>
-        <div class="timeslotHeaders hiddenScrollX"></div>
+        <div class="timeslotHeaders smoothScrollX"></div>
    </div>
    <div class="programContainer">
        <div class="channelList"></div>
-        <div class="programGrid hiddenScrollX"></div>
+        <div class="programGrid smoothScrollX"></div>
    </div>
    <div class="channelPaging"></div>
 </div>
--- 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.
--- 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();
--- 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;

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

--- 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;
--- 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 += '</div>';

            if (item.Chapters && item.Chapters.length) {
-                html += '<div class="tabScenes nowPlayingTab hiddenScrollX" style="display:none;white-space:nowrap;margin-bottom:2em;">';
+                html += '<div class="tabScenes nowPlayingTab smoothScrollX" style="display:none;white-space:nowrap;margin-bottom:2em;">';
                var chapterIndex = 0;
                html += item.Chapters.map(function (c) {

@ -512,7 +512,7 @@
            }

            if (item.People && item.People.length) {
-                html += '<div class="tabCast nowPlayingTab hiddenScrollX" style="display:none;white-space:nowrap;">';
+                html += '<div class="tabCast nowPlayingTab smoothScrollX" style="display:none;white-space:nowrap;">';
                html += item.People.map(function (cast) {

                    var personHtml = '<div class="tileItem smallPosterTileItem" style="width:300px;">';
--- a/dashboard-ui/scripts/moviesrecommended.js
+++ b/dashboard-ui/scripts/moviesrecommended.js
@ -1,4 +1,4 @@
-define(['jQuery', 'libraryBrowser'], function ($, libraryBrowser) {
+define(['jQuery', 'libraryBrowser', 'scrollStyles'], function ($, libraryBrowser) {

    function getView() {

--- a/dashboard-ui/scripts/musicrecommended.js
+++ b/dashboard-ui/scripts/musicrecommended.js
@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define(['jQuery', 'scrollStyles'], function ($) {

    function itemsPerRow() {

--- a/dashboard-ui/scripts/search.js
+++ b/dashboard-ui/scripts/search.js
@ -1,4 +1,4 @@
-define(['libraryBrowser'], function (libraryBrowser) {
+define(['libraryBrowser', 'scrollStyles'], function (libraryBrowser) {

    var searchHintTimeout;

--- a/dashboard-ui/scripts/sections.js
+++ b/dashboard-ui/scripts/sections.js
@ -1,4 +1,4 @@
-define(['libraryBrowser', 'jQuery'], function (LibraryBrowser, $) {
+define(['libraryBrowser', 'jQuery', 'scrollStyles'], function (LibraryBrowser, $) {

    function getUserViews(userId) {

--- a/dashboard-ui/scripts/site.js
+++ b/dashboard-ui/scripts/site.js
@ -1977,6 +1977,7 @@ var AppInfo = {};
        define("robotoFont", ['css!' + embyWebComponentsBowerPath + '/fonts/roboto/style']);
        define("opensansFont", ['css!' + embyWebComponentsBowerPath + '/fonts/opensans/style']);
        define("montserratFont", ['css!' + embyWebComponentsBowerPath + '/fonts/montserrat/style']);
+        define("scrollStyles", ['css!' + embyWebComponentsBowerPath + '/scrollstyles']);

        define("viewcontainer", ['components/viewcontainer-lite'], returnFirstDependency);
        define('queryString', [bowerPath + '/query-string/index'], function () {
@ -2615,7 +2616,7 @@ var AppInfo = {};

        defineRoute({
            path: '/livetvtimer.html',
-            dependencies: [],
+            dependencies: ['scrollStyles'],
            autoFocus: false
        });

--- a/dashboard-ui/scripts/tvrecommended.js
+++ b/dashboard-ui/scripts/tvrecommended.js
@ -1,4 +1,4 @@
-define(['libraryBrowser', 'scripts/alphapicker'], function (libraryBrowser) {
+define(['libraryBrowser', 'scripts/alphapicker', 'scrollStyles'], function (libraryBrowser) {

    return function (view, params) {

--- a/dashboard-ui/scripts/tvupcoming.js
+++ b/dashboard-ui/scripts/tvupcoming.js
@ -1,4 +1,4 @@
-define([], function () {
+define(['scrollStyles'], function () {

    function loadUpcoming(context, params) {