1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update dialogs

This commit is contained in:
Luke Pulverenti 2016-09-07 03:08:20 -04:00
parent 48cce38282
commit 4ffca7a9df
11 changed files with 193 additions and 45 deletions

View file

@ -14,12 +14,12 @@
}, },
"devDependencies": {}, "devDependencies": {},
"ignore": [], "ignore": [],
"version": "1.4.223", "version": "1.4.225",
"_release": "1.4.223", "_release": "1.4.225",
"_resolution": { "_resolution": {
"type": "version", "type": "version",
"tag": "1.4.223", "tag": "1.4.225",
"commit": "e3fce0848cb9f7839d98090ea55c80f0a5ff672d" "commit": "d3651f587ddad96e72c9b34ccf2d93cf7e2fafd3"
}, },
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git", "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "^1.2.1", "_target": "^1.2.1",

View file

@ -73,6 +73,10 @@
} }
}); });
dlg.querySelector('.btnCancel').addEventListener('click', function () {
dialogHelper.close(dlg);
});
if (layoutManager.tv) { if (layoutManager.tv) {
scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false); scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
} }

View file

@ -44,19 +44,30 @@
color: #fff; color: #fff;
} }
.newTvProgram { .guideProgramIndicator {
color: yellow;
text-transform: uppercase; text-transform: uppercase;
border-radius: .3em;
margin-right: .5em;
color: #fff;
font-size: 82%;
padding: .25em;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
}
.newTvProgram {
background: #64A239;
} }
.liveTvProgram { .liveTvProgram {
color: #64A239; background: #2196F3;
text-transform: uppercase;
} }
.premiereTvProgram { .premiereTvProgram {
color: orange; background: #EF6C00;
text-transform: uppercase;
} }
.programAccent { .programAccent {
@ -226,6 +237,47 @@
font-weight: normal; font-weight: normal;
} }
.btnSelectDateContent {
display: flex;
align-items: center;
justify-content: center;
}
.guideDateText {
font-size: 80%;
}
@media all and (min-width: 1600px) {
.guideDateText {
display: flex;
}
.guideDateTextDate {
margin-left: .25em;
}
}
.btnGuideViewSettings {
margin: 0;
flex-shrink: 0;
}
.btnGuideViewSettingsIcon {
font-size: 1.5em !important;
}
@media all and (max-width: 1280px) {
.btnGuideViewSettings {
display: none;
}
}
.selectDateIcon {
flex-shrink: 0;
}
.channelHeaderCell { .channelHeaderCell {
border-bottom: .65vh solid #121212 !important; border-bottom: .65vh solid #121212 !important;
background-size: auto 70%; background-size: auto 70%;

View file

@ -182,6 +182,8 @@
if (channelsResult.TotalRecordCount > channelLimit) { if (channelsResult.TotalRecordCount > channelLimit) {
context.querySelector('.guideOptions').classList.remove('hide');
btnPreviousPage.classList.remove('hide'); btnPreviousPage.classList.remove('hide');
btnNextPage.classList.remove('hide'); btnNextPage.classList.remove('hide');
@ -198,8 +200,7 @@
} }
} else { } else {
btnPreviousPage.classList.add('hide'); context.querySelector('.guideOptions').classList.add('hide');
btnNextPage.classList.add('hide');
} }
apiClient.getLiveTvPrograms({ apiClient.getLiveTvPrograms({
@ -373,13 +374,13 @@
html += '<div class="' + guideProgramNameClass + '">'; html += '<div class="' + guideProgramNameClass + '">';
if (program.IsLive && options.showLiveIndicator) { if (program.IsLive && options.showLiveIndicator) {
html += '<span class="liveTvProgram">' + globalize.translate('sharedcomponents#AttributeLive') + '&nbsp;</span>'; html += '<span class="liveTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#AttributeLive') + '</span>';
} }
else if (program.IsPremiere && options.showPremiereIndicator) { else if (program.IsPremiere && options.showPremiereIndicator) {
html += '<span class="premiereTvProgram">' + globalize.translate('sharedcomponents#AttributePremiere') + '&nbsp;</span>'; html += '<span class="premiereTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#AttributePremiere') + '</span>';
} }
else if (program.IsSeries && !program.IsRepeat && options.showNewIndicator) { else if (program.IsSeries && !program.IsRepeat && options.showNewIndicator) {
html += '<span class="newTvProgram">' + globalize.translate('sharedcomponents#AttributeNew') + '&nbsp;</span>'; html += '<span class="newTvProgram guideProgramIndicator">' + globalize.translate('sharedcomponents#AttributeNew') + '</span>';
} }
html += program.Name; html += program.Name;
@ -424,7 +425,7 @@
// Normally we'd want to just let responsive css handle this, // Normally we'd want to just let responsive css handle this,
// but since mobile browsers are often underpowered, // but since mobile browsers are often underpowered,
// it can help performance to get them out of the markup // it can help performance to get them out of the markup
var showIndicators = false; var showIndicators = true;
var options = { var options = {
showHdIcon: showIndicators, showHdIcon: showIndicators,
@ -637,11 +638,15 @@
var day = weekday[date.getDay()]; var day = weekday[date.getDay()];
date = datetime.toLocaleDateString(date); date = datetime.toLocaleDateString(date);
var parts = [];
if (date.toLowerCase().indexOf(day.toLowerCase()) == -1) { if (date.toLowerCase().indexOf(day.toLowerCase()) == -1) {
return day + " " + date; parts.push(day);
} }
return date; parts.push(date);
return parts;
} }
function changeDate(page, date) { function changeDate(page, date) {
@ -653,7 +658,14 @@
reloadGuide(page, newStartDate); reloadGuide(page, newStartDate);
page.querySelector('.dateText').innerHTML = getFutureDateText(date); var dateText = getFutureDateText(date);
if (dateText.length == 1) {
dateText = dateText[0];
} else {
dateText = '<div>' + dateText[0] + '</div><div class="guideDateTextDate">' + dateText[1] + '</div>';
}
page.querySelector('.guideDateText').innerHTML = dateText;
} }
var dateOptions = []; var dateOptions = [];
@ -680,7 +692,7 @@
while (start <= end) { while (start <= end) {
dateOptions.push({ dateOptions.push({
name: getFutureDateText(start), name: getFutureDateText(start).join(' '),
id: start.getTime() id: start.getTime()
}); });
@ -880,7 +892,7 @@
reloadPage(context); reloadPage(context);
}); });
context.querySelector('.btnViewSettings').addEventListener('click', function () { context.querySelector('.btnGuideViewSettings').addEventListener('click', function () {
showViewSettings(self); showViewSettings(self);
}); });

View file

@ -1,21 +1,15 @@
<div class="guideOptions"> <div class="tvGuideHeader">
<button is="emby-button" type="button" class="btnSelectDate">
<i class="md-icon">&#xE916;</i>
<span class="dateText"></span>
</button>
<button is="paper-icon-button-light" type="button" class="btnViewSettings">
<i class="md-icon">&#xE42A;</i>
</button>
<button is="paper-icon-button-light" type="button" class="btnPreviousPage hide">
<i class="md-icon">&#xE5C4;</i>
</button>
<button is="paper-icon-button-light" type="button" class="btnNextPage hide">
<i class="md-icon">&#xE5C8;</i>
</button>
</div>
<div class="tvGuideHeader">
<div class="channelTimeslotHeader"> <div class="channelTimeslotHeader">
<button is="emby-button" type="button" class="btnSelectDate block">
<div class="btnSelectDateContent">
<div class="guideDateText">
</div>
<i class="md-icon selectDateIcon">&#xE5C5;</i>
</div>
</button>
<button is="paper-icon-button-light" type="button" class="btnGuideViewSettings">
<i class="md-icon btnGuideViewSettingsIcon">&#xE42A;</i>
</button>
</div> </div>
<div class="timeslotHeaders smoothScrollX guideScroller" style="scroll-behavior: auto;"></div> <div class="timeslotHeaders smoothScrollX guideScroller" style="scroll-behavior: auto;"></div>
</div> </div>
@ -34,3 +28,12 @@
<span>${UnlockGuide}</span> <span>${UnlockGuide}</span>
</button> </button>
</div> </div>
<div class="guideOptions hide">
<button is="paper-icon-button-light" type="button" class="btnPreviousPage">
<i class="md-icon">&#xE5C4;</i>
</button>
<button is="paper-icon-button-light" type="button" class="btnNextPage">
<i class="md-icon">&#xE5C8;</i>
</button>
</div>

View file

@ -30,7 +30,7 @@
<div class="homePageSection"> <div class="homePageSection">
<div> <div>
<h1 class="listHeader nextUpHeader" style="display: inline-block; vertical-align: middle;">${HeaderNextUp}</h1> <h1 class="listHeader nextUpHeader" style="display: inline-block; vertical-align: middle;">${HeaderNextUp}</h1>
<button is="emby-button" type="button" class="raised submit mini categorySyncButton" data-category="NextUp"> <button is="emby-button" type="button" class="raised submit mini categorySyncButton accent" data-category="NextUp">
<i class="md-icon">sync</i> <i class="md-icon">sync</i>
<span>${ButtonSync}</span> <span>${ButtonSync}</span>
</button> </button>

View file

@ -78,7 +78,7 @@
<div> <div>
<h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderLatestRecordings}</h1> <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderLatestRecordings}</h1>
<button is="emby-button" type="button" class="raised more mini" data-type="latest">${ButtonMore}</button> <button is="emby-button" type="button" class="raised more mini" data-type="latest">${ButtonMore}</button>
<button is="emby-button" type="button" class="raised submit mini categorySyncButton" data-category="Latest"> <button is="emby-button" type="button" class="raised submit mini accent categorySyncButton" data-category="Latest">
<span>${ButtonSync}</span> <span>${ButtonSync}</span>
</button> </button>
</div> </div>
@ -117,6 +117,12 @@
<div is="emby-itemscontainer" class="recordingItems itemsContainer"></div> <div is="emby-itemscontainer" class="recordingItems itemsContainer"></div>
<br /> <br />
</div> </div>
<div id="recordingGroups" class="hide homePageSection">
<div>
<h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderRecordingGroups}</h1>
</div>
<div id="recordingGroupItems"></div>
</div>
</div> </div>
<div class="pageTabContent ehsContent" id="scheduleTab" data-index="4"> <div class="pageTabContent ehsContent" id="scheduleTab" data-index="4">
<div id="activeRecordings" class="homePageSection hide"> <div id="activeRecordings" class="homePageSection hide">

View file

@ -26,7 +26,7 @@
<div id="resumableSection" class="homePageSection hide"> <div id="resumableSection" class="homePageSection hide">
<div> <div>
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderResume}</h1> <h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderResume}</h1>
<button is="emby-button" type="button" class="raised submit mini categorySyncButton" data-category="Resume"> <button is="emby-button" type="button" class="raised submit mini categorySyncButton accent" data-category="Resume">
<i class="md-icon">sync</i> <i class="md-icon">sync</i>
<span>${ButtonSync}</span> <span>${ButtonSync}</span>
</button> </button>
@ -39,7 +39,7 @@
<div class="homePageSection"> <div class="homePageSection">
<div> <div>
<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderLatestMovies}</h1> <h1 class="listHeader" style="display:inline-block;vertical-align:middle;">${HeaderLatestMovies}</h1>
<button is="emby-button" type="button" class="raised submit mini categorySyncButton" data-category="Latest"> <button is="emby-button" type="button" class="raised submit mini categorySyncButton accent" data-category="Latest">
<i class="md-icon">sync</i> <i class="md-icon">sync</i>
<span>${ButtonSync}</span> <span>${ButtonSync}</span>
</button> </button>

View file

@ -11,6 +11,14 @@
if (params.type == 'Recordings') { if (params.type == 'Recordings') {
query.IsInProgress = false; query.IsInProgress = false;
if (params.groupid) {
query.GroupId = params.groupid;
}
} else if (params.type == 'RecordingSeries') {
query.SortOrder = 'SortName';
query.SortOrder = 'Ascending';
} else { } else {
query.HasAired = false; query.HasAired = false;
query.SortBy = 'StartDate,SortName'; query.SortBy = 'StartDate,SortName';

View file

@ -1,5 +1,59 @@
define(['components/categorysyncbuttons', 'cardBuilder', 'scripts/livetvcomponents', 'emby-button', 'listViewStyle', 'emby-itemscontainer'], function (categorysyncbuttons, cardBuilder) { define(['components/categorysyncbuttons', 'cardBuilder', 'scripts/livetvcomponents', 'emby-button', 'listViewStyle', 'emby-itemscontainer'], function (categorysyncbuttons, cardBuilder) {
function getRecordingGroupHtml(group) {
var html = '';
html += '<div class="listItem">';
html += '<button type="button" is="emby-button" class="fab mini autoSize blue" item-icon><i class="md-icon">live_tv</i></button>';
html += '<div class="listItemBody two-line">';
html += '<a href="livetvitems.html?type=Recordings&groupid=' + group.Id + '" class="clearLink">';
html += '<div>';
html += group.Name;
html += '</div>';
html += '<div class="secondary">';
if (group.RecordingCount == 1) {
html += Globalize.translate('ValueItemCount', group.RecordingCount);
} else {
html += Globalize.translate('ValueItemCountPlural', group.RecordingCount);
}
html += '</div>';
html += '</a>';
html += '</div>';
html += '</div>';
return html;
}
function renderRecordingGroups(context, groups) {
if (groups.length) {
context.querySelector('#recordingGroups').classList.remove('hide');
} else {
context.querySelector('#recordingGroups').classList.add('hide');
}
var html = '';
html += '<div class="paperList">';
for (var i = 0, length = groups.length; i < length; i++) {
html += getRecordingGroupHtml(groups[i]);
}
html += '</div>';
context.querySelector('#recordingGroupItems').innerHTML = html;
Dashboard.hideLoadingMsg();
}
function enableScrollX() { function enableScrollX() {
return browserInfo.mobile && AppInfo.enableAppLayouts; return browserInfo.mobile && AppInfo.enableAppLayouts;
} }
@ -181,6 +235,15 @@
renderEpisodeRecordings(context); renderEpisodeRecordings(context);
renderSportsRecordings(context); renderSportsRecordings(context);
renderKidsRecordings(context); renderKidsRecordings(context);
ApiClient.getLiveTvRecordingGroups({
userId: Dashboard.getCurrentUserId()
}).then(function (result) {
renderRecordingGroups(context, result.Items);
});
} }
function onMoreClick(e) { function onMoreClick(e) {

View file

@ -30,7 +30,7 @@
<div id="resumableSection" class="homePageSection"> <div id="resumableSection" class="homePageSection">
<div> <div>
<h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderResume}</h1> <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderResume}</h1>
<button is="emby-button" type="button" class="raised submit mini categorySyncButton" data-category="Resume"> <button is="emby-button" type="button" class="raised submit mini categorySyncButton accent" data-category="Resume">
<i class="md-icon">sync</i> <i class="md-icon">sync</i>
<span>${ButtonSync}</span> <span>${ButtonSync}</span>
</button> </button>
@ -43,7 +43,7 @@
<div class="homePageSection"> <div class="homePageSection">
<div> <div>
<h1 class="listHeader nextUpHeader" style="display: inline-block; vertical-align: middle;">${HeaderNextUp}</h1> <h1 class="listHeader nextUpHeader" style="display: inline-block; vertical-align: middle;">${HeaderNextUp}</h1>
<button is="emby-button" type="button" class="raised submit mini categorySyncButton" data-category="NextUp"> <button is="emby-button" type="button" class="raised submit mini categorySyncButton accent" data-category="NextUp">
<i class="md-icon">sync</i> <i class="md-icon">sync</i>
<span>${ButtonSync}</span> <span>${ButtonSync}</span>
</button> </button>
@ -57,7 +57,7 @@
<div class="homePageSection"> <div class="homePageSection">
<div> <div>
<h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderLatestEpisodes}</h1> <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderLatestEpisodes}</h1>
<button is="emby-button" type="button" class="raised submit mini categorySyncButton" data-category="Latest"> <button is="emby-button" type="button" class="raised submit mini categorySyncButton accent" data-category="Latest">
<i class="md-icon">sync</i> <i class="md-icon">sync</i>
<span>${ButtonSync}</span> <span>${ButtonSync}</span>
</button> </button>