From 7d752911cb473aa0db8c94f02313b57846d7e194 Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Mon, 12 Dec 2016 00:41:24 -0500 Subject: [PATCH] update guide style --- .../emby-webcomponents/.bower.json | 8 +- .../emby-webcomponents/datetime.js | 58 +++++++-- .../emby-tabs/emby-tabs.css | 8 +- .../emby-webcomponents/emby-tabs/emby-tabs.js | 7 ++ .../guide/guide-settings.js | 40 +++++- .../guide/guide-settings.template.html | 23 +++- .../emby-webcomponents/guide/guide.css | 117 ++++++++---------- .../emby-webcomponents/guide/guide.js | 103 ++++++--------- .../guide/tvguide.template.html | 42 +++---- .../indicators/indicators.js | 21 +++- .../metadataeditor/metadataeditor.js | 4 +- .../scroller/smoothscroller.js | 5 + .../emby-webcomponents/scrollstyles.css | 4 +- dashboard-ui/css/librarymenu.css | 2 +- dashboard-ui/scripts/librarybrowser.js | 2 +- 15 files changed, 268 insertions(+), 176 deletions(-) diff --git a/dashboard-ui/bower_components/emby-webcomponents/.bower.json b/dashboard-ui/bower_components/emby-webcomponents/.bower.json index 0770229f2..90aa70df1 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/.bower.json +++ b/dashboard-ui/bower_components/emby-webcomponents/.bower.json @@ -14,12 +14,12 @@ }, "devDependencies": {}, "ignore": [], - "version": "1.4.381", - "_release": "1.4.381", + "version": "1.4.382", + "_release": "1.4.382", "_resolution": { "type": "version", - "tag": "1.4.381", - "commit": "2a3f7a75f989eb2c1086deac144f40f15baffefc" + "tag": "1.4.382", + "commit": "6d310465e6467b924653f526c91bcfb0b5f4920e" }, "_source": "https://github.com/MediaBrowser/emby-webcomponents.git", "_target": "^1.2.1", diff --git a/dashboard-ui/bower_components/emby-webcomponents/datetime.js b/dashboard-ui/bower_components/emby-webcomponents/datetime.js index 8ec07af93..6c9321862 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/datetime.js +++ b/dashboard-ui/bower_components/emby-webcomponents/datetime.js @@ -110,30 +110,70 @@ return locale; } + function getOptionList(options) { + + var list = []; + + for (var i in options) { + list.push({ + name: i, + value: options[i] + }); + } + + return list; + } + function toLocaleString(date, options) { + options = options || {}; + var currentLocale = getCurrentLocale(); - return currentLocale && toLocaleTimeStringSupportsLocales ? - date.toLocaleString(currentLocale, options || {}) : - date.toLocaleString(); + if (currentLocale && toLocaleTimeStringSupportsLocales) { + return date.toLocaleString(currentLocale, options); + } + + return date.toLocaleString(); } function toLocaleDateString(date, options) { + options = options || {}; + var currentLocale = getCurrentLocale(); - return currentLocale && toLocaleTimeStringSupportsLocales ? - date.toLocaleDateString(currentLocale, options || {}) : - date.toLocaleDateString(); + if (currentLocale && toLocaleTimeStringSupportsLocales) { + return date.toLocaleDateString(currentLocale, options); + } + + // This is essentially a hard-coded polyfill + var optionList = getOptionList(options); + if (optionList.length === 1 && optionList[0].name === 'weekday') { + var weekday = []; + weekday[0] = "Sun"; + weekday[1] = "Mon"; + weekday[2] = "Tue"; + weekday[3] = "Wed"; + weekday[4] = "Thu"; + weekday[5] = "Fri"; + weekday[6] = "Sat"; + return weekday[date.getDay()]; + } + + return date.toLocaleDateString(); } function toLocaleTimeString(date, options) { + options = options || {}; + var currentLocale = getCurrentLocale(); - return currentLocale && toLocaleTimeStringSupportsLocales ? - date.toLocaleTimeString(currentLocale, options || {}).toLowerCase() : - date.toLocaleTimeString().toLowerCase(); + if (currentLocale && toLocaleTimeStringSupportsLocales) { + return date.toLocaleTimeString(currentLocale, options); + } + + return date.toLocaleTimeString(); } function getDisplayTime(date) { diff --git a/dashboard-ui/bower_components/emby-webcomponents/emby-tabs/emby-tabs.css b/dashboard-ui/bower_components/emby-webcomponents/emby-tabs/emby-tabs.css index db3e6ff57..e89f0a0f5 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/emby-tabs/emby-tabs.css +++ b/dashboard-ui/bower_components/emby-webcomponents/emby-tabs/emby-tabs.css @@ -8,7 +8,7 @@ width: auto; font-family: inherit; font-size: inherit; - color: #aaa !important; + color: #aaa; display: inline-block; vertical-align: middle; flex-shrink: 0; @@ -17,7 +17,7 @@ transition: none !important; position: relative; text-transform: uppercase; - font-weight: bold !important; + font-weight: bold; height: auto; min-width: initial; line-height: initial; @@ -26,11 +26,11 @@ } .emby-tab-button:focus { - font-weight: bold !important; + font-weight: bold; } .emby-tab-button-active { - color: #52B54B !important; + color: #52B54B; border-color: #52B54B; } diff --git a/dashboard-ui/bower_components/emby-webcomponents/emby-tabs/emby-tabs.js b/dashboard-ui/bower_components/emby-webcomponents/emby-tabs/emby-tabs.js index 6b6031b60..1962b0859 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/emby-tabs/emby-tabs.js +++ b/dashboard-ui/bower_components/emby-webcomponents/emby-tabs/emby-tabs.js @@ -212,6 +212,13 @@ initSelectionBar(this); }; + EmbyTabs.refresh = function () { + + if (this.scroller) { + this.scroller.reload(); + } + }; + EmbyTabs.attachedCallback = function () { initScroller(this); diff --git a/dashboard-ui/bower_components/emby-webcomponents/guide/guide-settings.js b/dashboard-ui/bower_components/emby-webcomponents/guide/guide-settings.js index a9453cee3..e95d750c9 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/guide/guide-settings.js +++ b/dashboard-ui/bower_components/emby-webcomponents/guide/guide-settings.js @@ -1,6 +1,42 @@ define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectionManager', 'require', 'loading', 'scrollHelper', 'emby-checkbox', 'emby-radio', 'css!./../formdialog', 'material-icons'], function (dialogHelper, globalize, userSettings, layoutManager, connectionManager, require, loading, scrollHelper) { 'use strict'; + function saveCategories(context, options) { + + var categories = []; + + var chkCategorys = context.querySelectorAll('.chkCategory'); + for (var i = 0, length = chkCategorys.length; i < length; i++) { + + var type = chkCategorys[i].getAttribute('data-type'); + + if (chkCategorys[i].checked) { + categories.push(type); + } + } + + if (categories.length >= 4) { + categories.push('series'); + } + + // differentiate between none and all + categories.push('all'); + options.categories = categories; + } + + function loadCategories(context, options) { + + var selectedCategories = options.categories || []; + + var chkCategorys = context.querySelectorAll('.chkCategory'); + for (var i = 0, length = chkCategorys.length; i < length; i++) { + + var type = chkCategorys[i].getAttribute('data-type'); + + chkCategorys[i].checked = !selectedCategories.length || selectedCategories.indexOf(type) !== -1; + } + } + function save(context) { var i, length; @@ -65,7 +101,7 @@ } } - function showEditor() { + function showEditor(options) { return new Promise(function (resolve, reject) { @@ -106,6 +142,7 @@ } save(dlg); + saveCategories(dlg, options); if (settingsChanged) { resolve(); @@ -123,6 +160,7 @@ } load(dlg); + loadCategories(dlg, options); dialogHelper.open(dlg); }); }); diff --git a/dashboard-ui/bower_components/emby-webcomponents/guide/guide-settings.template.html b/dashboard-ui/bower_components/emby-webcomponents/guide/guide-settings.template.html index 2fd24e785..d3395992d 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/guide/guide-settings.template.html +++ b/dashboard-ui/bower_components/emby-webcomponents/guide/guide-settings.template.html @@ -40,8 +40,29 @@
+ +

${Categories}

+
+ + + + +
+ \ No newline at end of file diff --git a/dashboard-ui/bower_components/emby-webcomponents/guide/guide.css b/dashboard-ui/bower_components/emby-webcomponents/guide/guide.css index 834f1ec80..4c64124b9 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/guide/guide.css +++ b/dashboard-ui/bower_components/emby-webcomponents/guide/guide.css @@ -7,15 +7,17 @@ .tvGuideHeader { white-space: nowrap; width: 100%; + flex-direction: column; flex-shrink: 0; display: flex; - padding-left: 3.4em; } -.guideContent { +.guideHeaderDateSelection { + font-size: 90%; +} + +.guideHeaderTimeslots { display: flex; - flex-grow: 1; - overflow: hidden; } .tvProgramSectionHeader { @@ -44,6 +46,7 @@ .channelTimeslotHeader { flex-shrink: 0; + justify-content: center; } .timeslotHeaders { @@ -178,29 +181,6 @@ } } -.btnSelectDate { - padding-left: .5em; - text-transform: none; - font-weight: normal; -} - -.btnSelectDateContent { - display: flex; - align-items: center; - justify-content: center; -} - -.guideDateText { - font-size: 80%; -} - -@media all and (min-width: 1600px) { - - .guideDateText { - font-size: 92%; - } -} - .btnGuideViewSettings { margin: 0; flex-shrink: 0; @@ -210,13 +190,6 @@ font-size: 1.5em !important; } -@media all and (max-width: 1280px) { - - .btnGuideViewSettings { - display: none; - } -} - .selectDateIcon { flex-shrink: 0; } @@ -392,29 +365,6 @@ flex-shrink: 0; } -.btnCategories { - margin: 0 .3em 0 .5em !important; - padding: 0 !important; - flex-shrink: 0; - background: rgba(40, 40, 40, .9); - border-radius: 0 !important; - width: 2.6em; - font-weight: normal !important; - position: relative; -} - -.btnCategoriesText { - transform: rotate(90deg); - text-transform: uppercase; - transform-origin: left; - margin-left: 1.2em; - letter-spacing: .25em; - position: absolute; - top: 0; - margin-top: 1em; - white-space: nowrap; -} - .channelList { display: flex; flex-direction: column; @@ -424,11 +374,11 @@ contain: layout style; } -.programCell, .channelHeaderCell, .btnSelectDate { +.programCell, .channelHeaderCell { outline: none !important; } - .programCell:focus, .channelHeaderCell:focus, .btnSelectDate:focus { + .programCell:focus, .channelHeaderCell:focus { background-color: #555; } @@ -453,10 +403,6 @@ .tvGuideHeader { padding-left: 0; } - - .btnCategories { - display: none; - } } .guideRequiresUnlock { @@ -470,3 +416,48 @@ /* This is needed to combat the rubber banding in iOS */ padding-bottom: 100px; } + +.guideDateTabsSlider { + text-align: center; +} + +.guide-date-tab-button { + font-weight: 500 !important; + color: inherit !important; + padding-top: .8em !important; + padding-bottom: .8em !important; + opacity: .3; +} + + .guide-date-tab-button.emby-tab-button-active { + color: #52B54B !important; + border-color: transparent !important; + opacity: 1; + font-weight: 500 !important; + } + + .guide-date-tab-button:focus { + color: #52B54B !important; + opacity: 1; + } + +.layout-tv .guide-date-tab-button:focus { + background-color: #52B54B !important; + color: #fff !important; +} + +@media all and (min-width: 1200px) { + + .guide-date-tab-button { + padding-left: 1em !important; + padding-right: 1em !important; + } +} + +@media all and (min-width: 1400px) { + + .guide-date-tab-button { + padding-left: 1.1em !important; + padding-right: 1.1em !important; + } +} diff --git a/dashboard-ui/bower_components/emby-webcomponents/guide/guide.js b/dashboard-ui/bower_components/emby-webcomponents/guide/guide.js index 6df0fc78a..7a0189f17 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/guide/guide.js +++ b/dashboard-ui/bower_components/emby-webcomponents/guide/guide.js @@ -1,21 +1,10 @@ -define(['require', 'browser', 'globalize', 'connectionManager', 'serverNotifications', 'loading', 'datetime', 'focusManager', 'userSettings', 'imageLoader', 'events', 'layoutManager', 'itemShortcuts', 'registrationServices', 'dom', 'clearButtonStyle', 'css!./guide.css', 'programStyles', 'material-icons', 'scrollStyles', 'emby-button', 'paper-icon-button-light'], function (require, browser, globalize, connectionManager, serverNotifications, loading, datetime, focusManager, userSettings, imageLoader, events, layoutManager, itemShortcuts, registrationServices, dom) { +define(['require', 'browser', 'globalize', 'connectionManager', 'serverNotifications', 'loading', 'datetime', 'focusManager', 'userSettings', 'imageLoader', 'events', 'layoutManager', 'itemShortcuts', 'registrationServices', 'dom', 'clearButtonStyle', 'css!./guide.css', 'programStyles', 'material-icons', 'scrollStyles', 'emby-button', 'paper-icon-button-light', 'emby-tabs'], function (require, browser, globalize, connectionManager, serverNotifications, loading, datetime, focusManager, userSettings, imageLoader, events, layoutManager, itemShortcuts, registrationServices, dom) { 'use strict'; function showViewSettings(instance) { require(['guide-settings-dialog'], function (guideSettingsDialog) { - guideSettingsDialog.show().then(function () { - instance.refresh(); - }); - }); - } - - function showCategoryOptions(instance) { - - require(['guide-categories-dialog'], function (guideCategoriesDialog) { - guideCategoriesDialog.show(instance.categoryOptions).then(function (categoryOptions) { - - instance.categoryOptions = categoryOptions; + guideSettingsDialog.show(instance.categoryOptions).then(function () { instance.refresh(); }); }); @@ -233,8 +222,8 @@ channelQuery.SortBy = "DatePlayed"; channelQuery.SortOrder = "Descending"; } else { - channelQuery.SortBy = "SortName"; - channelQuery.SortOrder = "Ascending"; + channelQuery.SortBy = null; + channelQuery.SortOrder = null; } var date = newStartDate; @@ -753,13 +742,22 @@ currentDate = newStartDate; reloadGuide(page, newStartDate); - - var dateText = datetime.toLocaleDateString(date, { weekday: 'short', month: 'short', day: 'numeric' }); - - page.querySelector('.guideDateText').innerHTML = dateText; } - var dateOptions = []; + function getDateTabText(date, isActive, tabIndex) { + + var cssClass = isActive ? 'emby-tab-button guide-date-tab-button emby-tab-button-active' : 'emby-tab-button guide-date-tab-button'; + + var html = ''; + + return html; + } function setDateRange(page, guideInfo) { @@ -778,18 +776,8 @@ start = new Date(Math.max(today, start)); - dateOptions = []; - - while (start <= end) { - - dateOptions.push({ - name: datetime.toLocaleDateString(start, { weekday: 'long', month: 'long', day: 'numeric' }), - id: start.getTime() - }); - - start.setDate(start.getDate() + 1); - start.setHours(0, 0, 0, 0); - } + var dateTabsHtml = ''; + var tabIndex = 0; var date = new Date(); @@ -797,6 +785,19 @@ date.setTime(currentDate.getTime()); } + while (start <= end) { + + var isActive = date.getDate() === start.getDate() && date.getMonth() === start.getMonth() && date.getFullYear() === start.getFullYear(); + + dateTabsHtml += getDateTabText(start, isActive, tabIndex); + + start.setDate(start.getDate() + 1); + start.setHours(0, 0, 0, 0); + } + + page.querySelector('.emby-tabs-slider').innerHTML = dateTabsHtml; + page.querySelector('.guideDateTabs').refresh(); + changeDate(page, date); } @@ -812,29 +813,6 @@ }); } - function selectDate(page) { - - var selectedDate = currentDate || new Date(); - dateOptions.forEach(function (d) { - d.selected = new Date(d.id).getDate() === selectedDate.getDate(); - }); - - require(['actionsheet'], function (actionsheet) { - - actionsheet.show({ - items: dateOptions, - title: globalize.translate('sharedcomponents#HeaderSelectDate'), - callback: function (id) { - - var date = new Date(); - date.setTime(parseInt(id)); - changeDate(page, date); - } - }); - - }); - } - function setScrollEvents(view, enabled) { if (layoutManager.tv) { @@ -958,11 +936,6 @@ passive: true }); - context.querySelector('.btnSelectDate').addEventListener('click', function () { - selectDate(context); - restartAutoRefresh(); - }); - context.querySelector('.btnUnlockGuide').addEventListener('click', function () { currentStartIndex = 0; reloadPage(context); @@ -986,9 +959,13 @@ restartAutoRefresh(); }); - context.querySelector('.btnCategories').addEventListener('click', function () { - showCategoryOptions(self); - restartAutoRefresh(); + context.querySelector('.guideDateTabsSlider').addEventListener('click', function (e) { + var tabButton = dom.parentWithClass(e.target, 'guide-date-tab-button'); + if (tabButton) { + var date = new Date(); + date.setTime(parseInt(tabButton.getAttribute('data-date'))); + changeDate(context, date); + } }); context.classList.add('tvguide'); diff --git a/dashboard-ui/bower_components/emby-webcomponents/guide/tvguide.template.html b/dashboard-ui/bower_components/emby-webcomponents/guide/tvguide.template.html index 701c60e14..322ed2c1d 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/guide/tvguide.template.html +++ b/dashboard-ui/bower_components/emby-webcomponents/guide/tvguide.template.html @@ -1,34 +1,30 @@ 
-
- - +
+
+ +
+
+ +
+
-
-
+
- -
- -
-
-
- -
-
+
+
+
+
diff --git a/dashboard-ui/bower_components/emby-webcomponents/indicators/indicators.js b/dashboard-ui/bower_components/emby-webcomponents/indicators/indicators.js index bba4ec148..9a151e02d 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/indicators/indicators.js +++ b/dashboard-ui/bower_components/emby-webcomponents/indicators/indicators.js @@ -49,13 +49,30 @@ define(['css!./indicators.css', 'material-icons'], function () { function enablePlayedIndicator(item) { - if (item.Type === "Series" || item.Type === "Season" || item.Type === "BoxSet" || item.MediaType === "Video" || item.MediaType === "Game" || item.MediaType === "Book") { - + if (item.MediaType === 'Video') { if (item.Type !== 'TvChannel') { return true; } } + if (item.MediaType === 'Audio') { + if (item.Type === 'AudioPodcast') { + return true; + } + if (item.Type === 'AudioBook') { + return true; + } + } + + if (item.Type === "Series" || + item.Type === "Season" || + item.Type === "BoxSet" || + item.MediaType === "Game" || + item.MediaType === "Book" || + item.MediaType === "Recording") { + return true; + } + return false; } diff --git a/dashboard-ui/bower_components/emby-webcomponents/metadataeditor/metadataeditor.js b/dashboard-ui/bower_components/emby-webcomponents/metadataeditor/metadataeditor.js index 2e74d77d2..e7a7b1e39 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/metadataeditor/metadataeditor.js +++ b/dashboard-ui/bower_components/emby-webcomponents/metadataeditor/metadataeditor.js @@ -700,14 +700,14 @@ showElement('#fldCustomRating', context); } + showElement('#tagsCollapsible', context); + if (item.Type === "TvChannel") { - hideElement('#tagsCollapsible', context); hideElement('#metadataSettingsCollapsible', context); hideElement('#fldPremiereDate', context); hideElement('#fldDateAdded', context); hideElement('#fldYear', context); } else { - showElement('#tagsCollapsible', context); showElement('#metadataSettingsCollapsible', context); showElement('#fldPremiereDate', context); showElement('#fldDateAdded', context); diff --git a/dashboard-ui/bower_components/emby-webcomponents/scroller/smoothscroller.js b/dashboard-ui/bower_components/emby-webcomponents/scroller/smoothscroller.js index 5a1ab3ba2..013fc0248 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/scroller/smoothscroller.js +++ b/dashboard-ui/bower_components/emby-webcomponents/scroller/smoothscroller.js @@ -873,6 +873,11 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'scrollStyles'], func } } else { slideeElement.style['will-change'] = 'transform'; + if (o.horizontal) { + slideeElement.classList.add('animatedScrollX'); + } else { + slideeElement.classList.add('animatedScrollY'); + } } dragSourceElement.addEventListener('mousedown', dragInitSlidee); diff --git a/dashboard-ui/bower_components/emby-webcomponents/scrollstyles.css b/dashboard-ui/bower_components/emby-webcomponents/scrollstyles.css index 99aa0005b..31cd8dc30 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/scrollstyles.css +++ b/dashboard-ui/bower_components/emby-webcomponents/scrollstyles.css @@ -35,8 +35,8 @@ } .darkScroller::-webkit-scrollbar { - width: 10px; - height: 10px; + width: 8px; + height: 8px; } .darkScroller::-webkit-scrollbar-button:start:decrement, diff --git a/dashboard-ui/css/librarymenu.css b/dashboard-ui/css/librarymenu.css index 1b6edfc87..25e3f2925 100644 --- a/dashboard-ui/css/librarymenu.css +++ b/dashboard-ui/css/librarymenu.css @@ -20,7 +20,7 @@ z-index: 1; margin: 0 !important; /* Page needs to supply padding */ - top: 102px !important; + top: 98px !important; transition: transform 200ms ease-out; } diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index 717470315..15d873471 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -97,7 +97,7 @@ } if (elem.classList) { - return !elem.classList.contains('hiddenScrollX') && !elem.classList.contains('smoothScrollX') && !elem.classList.contains('libraryViewNav'); + return !elem.classList.contains('hiddenScrollX') && !elem.classList.contains('smoothScrollX') && !elem.classList.contains('animatedScrollX'); } return true;