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

update shared dialogs

This commit is contained in:
Luke Pulverenti 2016-05-13 02:22:02 -04:00
parent 1190972d6c
commit 6e6017eeaf
16 changed files with 208 additions and 125 deletions

View file

@ -16,12 +16,12 @@
},
"devDependencies": {},
"ignore": [],
"version": "1.2.94",
"_release": "1.2.94",
"version": "1.3.7",
"_release": "1.3.7",
"_resolution": {
"type": "version",
"tag": "1.2.94",
"commit": "3f1eacda1566966e6b33b198f96ae046f9d49ad2"
"tag": "1.3.7",
"commit": "106e16436f7c13ea1317d2bf98c89eac8fa63668"
},
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "^1.2.0",

View file

@ -88,7 +88,8 @@
// title
var dialogOptions = {
removeOnClose: true,
enableHistory: options.enableHistory
enableHistory: options.enableHistory,
scrollY: false
};
var backButton = false;

View file

@ -4,7 +4,6 @@
z-index: 999999 !important;
position: fixed;
margin: 24px 40px;
-webkit-overflow-scrolling: touch;
-webkit-font-smoothing: antialiased;
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
height: auto;
@ -32,21 +31,6 @@
max-width: 70%;
}
.dialog.scrollY {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
}
.dialog.hiddenScroll::-webkit-scrollbar {
display: none;
}
.dialog.hiddenScroll {
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
@media all and (min-width: 1280px) and (min-height: 720px) {
.dialog.medium {
@ -80,14 +64,9 @@
}
.dialog > * {
margin-top: 20px;
padding: 0 24px;
}
.dialog > *:first-child {
margin-top: 24px;
}
.dialog .buttons {
position: relative;
padding: 8px 8px 8px 24px;

View file

@ -1,4 +1,4 @@
define(['historyManager', 'focusManager', 'browser', 'layoutManager', 'inputManager', 'css!./dialoghelper.css'], function (historyManager, focusManager, browser, layoutManager, inputManager) {
define(['historyManager', 'focusManager', 'browser', 'layoutManager', 'inputManager', 'scrollHelper', 'css!./dialoghelper.css', 'scrollStyles'], function (historyManager, focusManager, browser, layoutManager, inputManager, scrollHelper) {
function dialogHashHandler(dlg, hash, resolve) {
@ -380,11 +380,12 @@
dlg.classList.add('dialog');
dlg.classList.add('scrollY');
if (options.scrollY !== false) {
dlg.classList.add('smoothScrollY');
if (layoutManager.tv || layoutManager.mobile) {
// Need scrollbars for mouse use
dlg.classList.add('hiddenScroll');
if (layoutManager.tv) {
scrollHelper.centerFocus.on(dlg, false);
}
}
if (options.removeOnClose) {

View file

@ -0,0 +1,44 @@
.formDialog {
display: flex;
flex-direction: column;
}
.formDialog .dialogHeader {
padding: .35em .5em;
display: flex;
align-items: center;
background-color: #101010;
flex-shrink: 0;
}
.formDialog .dialogHeaderTitle {
margin-left: .75em;
}
.formDialog form {
margin: 0 auto;
}
.formDialog .dialogContent {
flex-grow: 1;
flex-shrink: 0;
width: 100%;
height: 100%;
}
.formDialog .dialogContentInner {
padding-bottom: 50vh;
padding-top: 1.5em;
}
@media all and (min-width: 1000px) {
.formDialog form {
max-width: 70vw;
}
}
.layout-tv .formDialog .dialogHeader {
padding-top: 1.5em;
padding-bottom: 1.5em;
}

View file

@ -70,7 +70,7 @@
var limit = 5;
context.querySelector('.guideRequiresUnlock').classList.remove('hide');
context.querySelector('.unlockText').innerHTML = globalize.translate('MessageLiveTvGuideRequiresUnlock', limit);
context.querySelector('.unlockText').innerHTML = globalize.translate('LiveTvGuideRequiresUnlock', limit);
return limit;
});

View file

@ -0,0 +1,3 @@
.recordingDialog .btnSubmit {
background-color: #cc3333;
}

View file

@ -1,4 +1,4 @@
define(['dialogHelper', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'paper-checkbox', 'paper-input', 'paper-icon-button-light'], function (dialogHelper, mediaInfo, appHost, connectionManager, require, loading) {
define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'scrollStyles', 'paper-checkbox', 'paper-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper) {
var currentProgramId;
var currentServerId;
@ -39,7 +39,7 @@
function hideSeriesRecordingFields(context) {
slideUpToHide(context.querySelector('#seriesFields'));
context.querySelector('.btnSubmitContainer').classList.remove('hide');
context.querySelector('.btnSubmit').classList.remove('hide');
context.querySelector('.supporterContainer').classList.add('hide');
}
@ -125,14 +125,14 @@
function showSeriesRecordingFields(context, apiClient) {
slideDownToShow(context.querySelector('#seriesFields'));
context.querySelector('.btnSubmitContainer').classList.remove('hide');
context.querySelector('.btnSubmit').classList.remove('hide');
getRegistration(currentProgramId, apiClient).then(function (regInfo) {
if (regInfo.IsValid) {
context.querySelector('.btnSubmitContainer').classList.remove('hide');
context.querySelector('.btnSubmit').classList.remove('hide');
} else {
context.querySelector('.btnSubmitContainer').classList.add('hide');
context.querySelector('.btnSubmit').classList.add('hide');
}
if (regInfo.IsRegistered) {
@ -160,7 +160,7 @@
elem.classList.remove('hide');
elem.style.overflow = 'hidden';
elem.style.overflowY = 'hidden';
requestAnimationFrame(function () {
@ -181,7 +181,7 @@
return;
}
elem.style.overflow = 'hidden';
elem.style.overflowY = 'hidden';
requestAnimationFrame(function () {
@ -195,10 +195,21 @@
});
}
function onPremiereLinkClicked(e) {
require(['shell'], function (shell) {
shell.openUrl('https://emby.media/premiere');
});
e.preventDefault();
return false;
}
function init(context) {
var apiClient = connectionManager.getApiClient(currentServerId);
context.querySelector('.lnkPremiere').addEventListener('click', onPremiereLinkClicked);
context.querySelector('#chkRecordSeries').addEventListener('change', function () {
if (this.checked) {
@ -208,6 +219,22 @@
}
});
context.querySelector('.btnSubmit').addEventListener('click', function () {
// Do a fake form submit this the button isn't a real submit button
var fakeSubmit = document.createElement('input');
fakeSubmit.setAttribute('type', 'submit');
fakeSubmit.style.display = 'none';
var form = context.querySelector('form');
form.appendChild(fakeSubmit);
fakeSubmit.click();
// Seeing issues in smart tv browsers where the form does not get submitted if the button is removed prior to the submission actually happening
setTimeout(function () {
form.removeChild(fakeSubmit);
}, 500);
});
context.querySelector('.btnCancel').addEventListener('click', function () {
closeDialog(false);
@ -325,32 +352,37 @@
loading.show();
require(['text!./recordingcreator.template.html'], function (template) {
var dlg = dialogHelper.createDialog({
removeOnClose: true,
size: 'small'
});
dlg.classList.add('ui-body-b');
dlg.classList.add('background-theme-b');
var dialogOptions = {
removeOnClose: true,
scrollY: false
};
if (layoutManager.tv) {
dialogOptions.size = 'fullscreen';
} else {
dialogOptions.size = 'small';
}
var dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog');
dlg.classList.add('recordingDialog');
var html = '';
html += Globalize.translateDocument(template);
html += globalize.translateDocument(template, 'sharedcomponents');
dlg.innerHTML = html;
document.body.appendChild(dlg);
dialogHelper.open(dlg);
currentDialog = dlg;
dlg.addEventListener('close', function () {
if (recordingCreated) {
require(['toast'], function (toast) {
toast(Globalize.translate('MessageRecordingScheduled'));
toast(globalize.translate('RecordingScheduled'));
});
resolve();
} else {
@ -358,10 +390,18 @@
}
});
if (layoutManager.tv) {
scrollHelper.centerFocus.on(dlg.querySelector('.dialogContent'), false);
}
hideSeriesRecordingFields(dlg);
init(dlg);
reload(dlg, itemId);
setTimeout(function () {
dialogHelper.open(dlg);
}, 1000);
});
});
}

View file

@ -1,44 +1,41 @@
<div class="dialogHeader">
<button is="paper-icon-button-light" class="btnCancel" tabindex="-1"><iron-icon icon="arrow-back"></iron-icon></button>
<button is="paper-icon-button-light" class="btnCancel" tabindex="-1"><iron-icon icon="nav:arrow-back"></iron-icon></button>
<div class="dialogHeaderTitle">
${HeaderNewRecording}
</div>
</div>
<form class="liveTvNewRecordingForm" style="margin: 0 auto;">
<div class="dialogContent smoothScrollY">
<form class="dialogContentInner">
<h1 class="itemName"></h1>
<p class="itemEpisodeName"></p>
<p class="itemMiscInfo itemMiscInfoPrimary"></p>
<p class="itemMiscInfo itemMiscInfoSecondary"></p>
<p class="itemMiscInfoPrimary" style="display: flex; align-items: center;"></p>
<p class="itemMiscInfoSecondary" style="display: flex; align-items: center;"></p>
<div id="eligibleForSeriesFields" class="hide">
<br />
<div>
<paper-checkbox id="chkRecordSeries">${OptionRecordSeries}</paper-checkbox>
<paper-checkbox id="chkRecordSeries">${RecordSeries}</paper-checkbox>
</div>
<br />
<div id="seriesFields" class="hide">
<div>
<h1>${HeaderDays}</h1>
<h1>${Days}</h1>
</div>
<div class="paperCheckboxList">
<paper-checkbox id="chkSunday">${OptionSunday}</paper-checkbox>
<paper-checkbox id="chkMonday">${OptionMonday}</paper-checkbox>
<paper-checkbox id="chkTuesday">${OptionTuesday}</paper-checkbox>
<paper-checkbox id="chkWednesday">${OptionWednesday}</paper-checkbox>
<paper-checkbox id="chkThursday">${OptionThursday}</paper-checkbox>
<paper-checkbox id="chkFriday">${OptionFriday}</paper-checkbox>
<paper-checkbox id="chkSaturday">${OptionSaturday}</paper-checkbox>
</div>
<div>
<h1>${HeaderRepeatingOptions}</h1>
<paper-checkbox id="chkSunday">${Sunday}</paper-checkbox>
<paper-checkbox id="chkMonday">${Monday}</paper-checkbox>
<paper-checkbox id="chkTuesday">${Tuesday}</paper-checkbox>
<paper-checkbox id="chkWednesday">${Wednesday}</paper-checkbox>
<paper-checkbox id="chkThursday">${Thursday}</paper-checkbox>
<paper-checkbox id="chkFriday">${Friday}</paper-checkbox>
<paper-checkbox id="chkSaturday">${Saturday}</paper-checkbox>
</div>
<br />
<div class="paperCheckboxList">
<paper-checkbox id="chkNewOnly">${OptionRecordOnlyNewEpisodes}</paper-checkbox>
<paper-checkbox id="chkAnyTime">${OptionRecordAnytime}</paper-checkbox>
<paper-checkbox id="chkAllChannels">${OptionRecordOnAllChannels}</paper-checkbox>
<paper-checkbox id="chkNewOnly">${RecordOnlyNewEpisodes}</paper-checkbox>
<paper-checkbox id="chkAnyTime">${RecordAnytime}</paper-checkbox>
<paper-checkbox id="chkAllChannels">${RecordOnAllChannels}</paper-checkbox>
</div>
</div>
</div>
@ -46,28 +43,27 @@
<br />
<paper-checkbox id="chkConvertRecordings">${OptionConvertRecordingsToStreamingFormat}</paper-checkbox>
<div class="fieldDescription paperCheckboxFieldDescription">${OptionConvertRecordingsToStreamingFormatHelp}</div>
<div class="fieldDescription paperCheckboxFieldDescription btnSupporterForConverting hide"><a href="https://emby.media/premiere" target="_blank" class="accent">${FeatureRequiresEmbyPremiere}</a></div>
<div class="fieldDescription paperCheckboxFieldDescription btnSupporterForConverting hide"><a target="_blank" class="accent lnkPremiere">${FeatureRequiresEmbyPremiere}</a></div>
</div>
<br />
<div>
<paper-input type="number" id="txtPrePaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPrePaddingMinutes}"></paper-input>
<paper-input type="number" id="txtPrePaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${PrePaddingMinutes}"></paper-input>
</div>
<br />
<div>
<paper-input type="number" id="txtPostPaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPostPaddingMinutes}"></paper-input>
<paper-input type="number" id="txtPostPaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${PostPaddingMinutes}"></paper-input>
</div>
<br />
<div>
<div class="supporterContainer hide">
<p>${MessageActiveSubscriptionRequiredSeriesRecordings}</p>
<p class="supporterTrial hide">${HeaderEnjoyDayTrial}</p>
<a class="clearLink btnSupporter hide" href="http://emby.media/premiere" target="_blank"><paper-button raised class="accent block"><iron-icon icon="check"></iron-icon><span>${HeaderBecomeProjectSupporter}</span></paper-button></a>
<a class="clearLink btnSupporter hide" href="http://emby.media/premiere" target="_blank"><paper-button raised class="accent block"><iron-icon icon="nav:check"></iron-icon><span>${HeaderBecomeProjectSupporter}</span></paper-button></a>
</div>
<button type="submit" data-role="none" class="clearButton btnSubmitContainer">
<paper-button raised class="submit block" style="background:#cc3333;" autoFocus><iron-icon icon="videocam"></iron-icon><span>${ButtonRecord}</span></paper-button>
</button>
<paper-button raised class="submit btnSubmit block"><iron-icon icon="mediainfo:fiber-manual-record"></iron-icon><span>${Record}</span></paper-button>
</div>
<br />
<br />
<br />
</form>
</div>

View file

@ -118,7 +118,8 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
dlg = dialogHelper.createDialog({
exitAnimationDuration: options.interactive ? 400 : 800,
size: 'fullscreen',
autoFocus: false
autoFocus: false,
scrollY: false
});
dlg.classList.add('slideshowDialog');

View file

@ -2,7 +2,7 @@
"ValueSpecialEpisodeName": "Special - {0}",
"Share": "Share",
"ServerUpdateNeeded": "This Emby Server needs to be updated. To download the latest version, please visit {0}",
"MessageLiveTvGuideRequiresUnlock": "The Live TV Guide is currently limited to {0} channels. Click the unlock button to learn how to enjoy the full experience.",
"LiveTvGuideRequiresUnlock": "The Live TV Guide is currently limited to {0} channels. Click the unlock button to learn how to enjoy the full experience.",
"AttributeNew": "New",
"AttributePremiere": "Premiere",
"AttributeLive": "Live",
@ -22,5 +22,28 @@
"HeaderSelectDate": "Select Date",
"ButtonOk": "Ok",
"ButtonCancel": "Cancel",
"ButtonGotIt": "Got It"
"ButtonGotIt": "Got It",
"RecordingScheduled": "Recording scheduled.",
"HeaderNewRecording": "New Recording",
"Sunday": "Sunday",
"Monday": "Monday",
"Tuesday": "Tuesday",
"Wednesday": "Wednesday",
"Thursday": "Thursday",
"Friday": "Friday",
"Saturday": "Saturday",
"Days": "Days",
"RecordSeries": "Record series",
"PrePaddingMinutes": "Pre-padding minutes:",
"PostPaddingMinutes": "Post-padding minutes:",
"RecordOnAllChannels": "Record on all channels",
"RecordAnytime": "Record at any time",
"RecordOnlyNewEpisodes": "Record only new episodes",
"HeaderBecomeProjectSupporter": "Get Emby Premiere",
"HeaderEnjoyDayTrial": "Enjoy a 14 Day Free Trial",
"MessageActiveSubscriptionRequiredSeriesRecordings": "An active Emby Premiere subscription is required in order to create automated series recordings.",
"OptionConvertRecordingsToStreamingFormat": "Automatically convert recordings to a streaming friendly format",
"OptionConvertRecordingsToStreamingFormatHelp": "Recordings will be converted on the fly to MP4 for easy playback on your devices.",
"FeatureRequiresEmbyPremiere": "This feature requires an active Emby Premiere subscription.",
"Record": "Record"
}

View file

@ -30,14 +30,14 @@
"web-component-tester": "polymer/web-component-tester#^3.4.0"
},
"ignore": [],
"homepage": "https://github.com/polymerelements/iron-a11y-announcer",
"homepage": "https://github.com/PolymerElements/iron-a11y-announcer",
"_release": "1.0.4",
"_resolution": {
"type": "version",
"tag": "v1.0.4",
"commit": "5ce3eb8c4282bb53cd72e348858dc6be6b4c50b9"
},
"_source": "git://github.com/polymerelements/iron-a11y-announcer.git",
"_source": "git://github.com/PolymerElements/iron-a11y-announcer.git",
"_target": "^1.0.0",
"_originalSource": "polymerelements/iron-a11y-announcer"
"_originalSource": "PolymerElements/iron-a11y-announcer"
}

View file

@ -36,7 +36,7 @@
"tag": "v1.5.1",
"commit": "e3e34408fad8f7cde59c4255cf3fe90f7dcf91d8"
},
"_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"
}

View file

@ -45,7 +45,7 @@
"tag": "v1.0.11",
"commit": "e3c1ab0c72905b58fb4d9adc2921ea73b5c085a5"
},
"_source": "git://github.com/polymerelements/paper-behaviors.git",
"_source": "git://github.com/PolymerElements/paper-behaviors.git",
"_target": "^1.0.0",
"_originalSource": "polymerelements/paper-behaviors"
"_originalSource": "PolymerElements/paper-behaviors"
}

View file

@ -32,14 +32,14 @@
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0"
},
"ignore": [],
"homepage": "https://github.com/polymerelements/paper-ripple",
"homepage": "https://github.com/PolymerElements/paper-ripple",
"_release": "1.0.5",
"_resolution": {
"type": "version",
"tag": "v1.0.5",
"commit": "d72e7a9a8ab518b901ed18dde492df3b87a93be5"
},
"_source": "git://github.com/polymerelements/paper-ripple.git",
"_source": "git://github.com/PolymerElements/paper-ripple.git",
"_target": "^1.0.0",
"_originalSource": "polymerelements/paper-ripple"
"_originalSource": "PolymerElements/paper-ripple"
}

View file

@ -538,11 +538,6 @@ div.dialogHeader {
color: #fff;
}
.ui-body-a .pageContentPaperMaterial {
background-color: #fff;
padding: 1.5em;
}
.ui-body-b div.dialogHeader {
background-color: #101010;
}