mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
rework guest invite popup
This commit is contained in:
Luke Pulverenti
parent
559ff97dd7
commit
dc0ebc82c7
10 changed files with 230 additions and 193 deletions
150
dashboard-ui/components/guestinviter/guestinviter.js
Normal file
150
dashboard-ui/components/guestinviter/guestinviter.js
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
define(['paperdialoghelper', 'paper-input', 'paper-button', 'jqmcollapsible'], function (paperDialogHelper) {
|
||||
|
||||
function renderLibrarySharingList(context, result) {
|
||||
|
||||
var folderHtml = '';
|
||||
|
||||
folderHtml += '<div data-role="controlgroup">';
|
||||
|
||||
folderHtml += result.Items.map(function (i) {
|
||||
|
||||
var currentHtml = '';
|
||||
|
||||
var id = 'chkShareFolder' + i.Id;
|
||||
|
||||
currentHtml += '<label for="' + id + '">' + i.Name + '</label>';
|
||||
|
||||
var isChecked = true;
|
||||
var checkedHtml = isChecked ? ' checked="checked"' : '';
|
||||
|
||||
currentHtml += '<input data-mini="true" class="chkShareFolder" data-folderid="' + i.Id + '" type="checkbox" id="' + id + '"' + checkedHtml + ' />';
|
||||
|
||||
return currentHtml;
|
||||
|
||||
}).join('');
|
||||
|
||||
folderHtml += '</div>';
|
||||
|
||||
$('.librarySharingList', context).html(folderHtml).trigger('create');
|
||||
}
|
||||
|
||||
function inviteUser(dlg) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
ApiClient.getJSON(ApiClient.getUrl("Channels", {})).then(function (channelsResult) {
|
||||
|
||||
var shareExcludes = $(".chkShareFolder:checked", dlg).get().map(function (i) {
|
||||
|
||||
return i.getAttribute('data-folderid');
|
||||
});
|
||||
|
||||
// Add/Update connect info
|
||||
ApiClient.ajax({
|
||||
|
||||
type: "POST",
|
||||
url: ApiClient.getUrl('Connect/Invite'),
|
||||
dataType: 'json',
|
||||
data: {
|
||||
|
||||
ConnectUsername: $('#txtConnectUsername', dlg).val(),
|
||||
EnabledLibraries: shareExcludes.join(','),
|
||||
SendingUserId: Dashboard.getCurrentUserId(),
|
||||
EnableLiveTv: false
|
||||
}
|
||||
|
||||
}).then(function (result) {
|
||||
|
||||
dlg.submitted = true;
|
||||
paperDialogHelper.close(dlg);
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
||||
showNewUserInviteMessage(dlg, result);
|
||||
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function showNewUserInviteMessage(page, result) {
|
||||
|
||||
if (!result.IsNewUserInvitation && !result.IsPending) {
|
||||
|
||||
// It was immediately approved
|
||||
return;
|
||||
}
|
||||
|
||||
var message = result.IsNewUserInvitation ?
|
||||
Globalize.translate('MessageInvitationSentToNewUser', result.GuestDisplayName) :
|
||||
Globalize.translate('MessageInvitationSentToUser', result.GuestDisplayName);
|
||||
|
||||
Dashboard.alert({
|
||||
message: message,
|
||||
title: Globalize.translate('HeaderInvitationSent')
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
show: function () {
|
||||
return new Promise(function (resolve, reject) {
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', 'components/guestinviter/guestinviter.template.html', true);
|
||||
|
||||
xhr.onload = function (e) {
|
||||
|
||||
var template = this.response;
|
||||
var dlg = paperDialogHelper.createDialog({
|
||||
removeOnClose: true,
|
||||
size: 'small'
|
||||
});
|
||||
|
||||
dlg.classList.add('ui-body-a');
|
||||
dlg.classList.add('background-theme-a');
|
||||
|
||||
dlg.classList.add('formDialog');
|
||||
|
||||
var html = '';
|
||||
|
||||
html += Globalize.translateDocument(template);
|
||||
|
||||
dlg.innerHTML = html;
|
||||
// needed for the collapsible
|
||||
document.body.appendChild(dlg);
|
||||
$(dlg).trigger('create');
|
||||
|
||||
paperDialogHelper.open(dlg);
|
||||
|
||||
dlg.addEventListener('iron-overlay-closed', function () {
|
||||
|
||||
if (dlg.submitted) {
|
||||
resolve();
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
});
|
||||
|
||||
dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
|
||||
|
||||
paperDialogHelper.close(dlg);
|
||||
});
|
||||
|
||||
dlg.querySelector('form').addEventListener('submit', function (e) {
|
||||
|
||||
inviteUser(dlg);
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
ApiClient.getJSON(ApiClient.getUrl("Library/MediaFolders", { IsHidden: false })).then(function (result) {
|
||||
|
||||
renderLibrarySharingList(dlg, result);
|
||||
});
|
||||
}
|
||||
|
||||
xhr.send();
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<div class="dialogHeader">
|
||||
<paper-icon-button icon="close" class="btnCancel" tabindex="-1"></paper-icon-button>
|
||||
<div class="dialogHeaderTitle">
|
||||
${HeaderInviteUser}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="addUserForm" style="max-width: none;margin:0;">
|
||||
|
||||
<paper-input type="text" id="txtConnectUsername" value="" placeholder="${PlaceholderUsername}" label="${LabelConnectGuestUserName}" required></paper-input>
|
||||
<div class="fieldDescription">
|
||||
<div>${LabelConnectGuestUserNameHelp}</div>
|
||||
<div style="margin-top: .25em;"><a href="http://emby.media/connect" target="_blank">${ButtonLearnMoreAboutEmbyConnect}</a></div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div data-role="collapsible">
|
||||
<h2>${HeaderShareMediaFolders}</h2>
|
||||
<div>
|
||||
<div class="librarySharingList" style="margin-top:1em;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="fieldDescription" style="margin-top:.5em;">${MessageGuestSharingPermissionsHelp}</p>
|
||||
<br />
|
||||
<button type="submit" data-role="none" class="clearButton">
|
||||
<paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSendInvitation}</span></paper-button>
|
||||
</button>
|
||||
</form>
|
||||
|
|
@ -29,10 +29,7 @@
|
|||
<div class="fieldDescription">${LabelPersonRoleHelp}</div>
|
||||
</div>
|
||||
<br />
|
||||
<input type="hidden" id="fldPersonIndex" />
|
||||
<p>
|
||||
<button type="submit" data-role="none" class="clearButton">
|
||||
<paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonOk}</span></paper-button>
|
||||
</button>
|
||||
</p>
|
||||
<button type="submit" data-role="none" class="clearButton">
|
||||
<paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonOk}</span></paper-button>
|
||||
</button>
|
||||
</form>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
|
||||
.sidebarDivider {
|
||||
height: 1px;
|
||||
background: #ddd;
|
||||
background: #eaeaea;
|
||||
margin: .5em 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1123,7 +1123,7 @@ paper-input + .fieldDescription {
|
|||
}
|
||||
|
||||
.background-theme-a, paper-dialog.background-theme-a {
|
||||
background-color: #f7f7f7;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.ui-page-theme-a .content-secondary {
|
||||
|
|
|
|||
|
|
@ -406,7 +406,7 @@
|
|||
<input type="radio" name="radioTranscodingTab" class="radioTabButton" id="radioTranscodingAdvanced" value="tabTranscodingAdvanced">
|
||||
<label for="radioTranscodingAdvanced">${TabAdvanced}</label>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<div class="tabContent tabTranscodingBasics" style="display: none;">
|
||||
<div style="margin: 1em 0;">
|
||||
<label for="selectTranscodingProfileType">${LabelType}</label>
|
||||
|
|
|
|||
|
|
@ -949,7 +949,8 @@
|
|||
$(this).siblings().removeClass('ui-btn-active');
|
||||
$(this).addClass('ui-btn-active');
|
||||
|
||||
var elem = $('.' + this.getAttribute('data-value'), page);
|
||||
var value = this.tagName == 'A' ? this.getAttribute('data-value') : this.value;
|
||||
var elem = $('.' + value, page);
|
||||
elem.siblings('.tabContent').hide();
|
||||
|
||||
elem.show();
|
||||
|
|
|
|||
|
|
@ -1,33 +1,5 @@
|
|||
(function (document, window, $) {
|
||||
|
||||
function renderLibrarySharingList(page, result) {
|
||||
|
||||
var folderHtml = '';
|
||||
|
||||
folderHtml += '<div data-role="controlgroup">';
|
||||
|
||||
folderHtml += result.Items.map(function (i) {
|
||||
|
||||
var currentHtml = '';
|
||||
|
||||
var id = 'chkShareFolder' + i.Id;
|
||||
|
||||
currentHtml += '<label for="' + id + '">' + i.Name + '</label>';
|
||||
|
||||
var isChecked = true;
|
||||
var checkedHtml = isChecked ? ' checked="checked"' : '';
|
||||
|
||||
currentHtml += '<input data-mini="true" class="chkShareFolder" data-folderid="' + i.Id + '" type="checkbox" id="' + id + '"' + checkedHtml + ' />';
|
||||
|
||||
return currentHtml;
|
||||
|
||||
}).join('');
|
||||
|
||||
folderHtml += '</div>';
|
||||
|
||||
$('.librarySharingList', page).html(folderHtml).trigger('create');
|
||||
}
|
||||
|
||||
function deleteUser(page, id) {
|
||||
|
||||
var msg = Globalize.translate('DeleteUserConfirmation');
|
||||
|
|
@ -218,35 +190,34 @@
|
|||
|
||||
function showPendingUserMenu(elem) {
|
||||
|
||||
require(['jqmpopup'], function () {
|
||||
var menuItems = [];
|
||||
|
||||
menuItems.push({
|
||||
name: Globalize.translate('ButtonCancel'),
|
||||
id: 'delete',
|
||||
ironIcon: 'delete'
|
||||
});
|
||||
|
||||
require(['actionsheet'], function (actionsheet) {
|
||||
|
||||
var card = $(elem).parents('.card');
|
||||
var page = $(elem).parents('.page');
|
||||
var id = card.attr('data-id');
|
||||
|
||||
$('.userMenu', page).popup("close").remove();
|
||||
actionsheet.show({
|
||||
items: menuItems,
|
||||
positionTo: card,
|
||||
callback: function (menuItemId) {
|
||||
|
||||
var html = '<div data-role="popup" class="userMenu tapHoldMenu" data-theme="a">';
|
||||
switch (menuItemId) {
|
||||
|
||||
html += '<ul data-role="listview" style="min-width: 180px;">';
|
||||
html += '<li data-role="list-divider">' + Globalize.translate('HeaderMenu') + '</li>';
|
||||
|
||||
html += '<li><a href="#" class="btnDelete" data-id="' + id + '">' + Globalize.translate('ButtonCancel') + '</a></li>';
|
||||
|
||||
html += '</ul>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
page.append(html);
|
||||
|
||||
var flyout = $('.userMenu', page).popup({ positionTo: elem || "window" }).trigger('create').popup("open").on("popupafterclose", function () {
|
||||
|
||||
$(this).off("popupafterclose").remove();
|
||||
|
||||
});
|
||||
|
||||
$('.btnDelete', flyout).on('click', function () {
|
||||
cancelAuthorization(page, this.getAttribute('data-id'));
|
||||
$('.userMenu', page).popup("close").remove();
|
||||
case 'delete':
|
||||
cancelAuthorization(page, id);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -352,86 +323,13 @@
|
|||
|
||||
renderPendingGuests(page, pending);
|
||||
});
|
||||
|
||||
ApiClient.getJSON(ApiClient.getUrl("Library/MediaFolders", { IsHidden: false })).then(function (result) {
|
||||
|
||||
renderLibrarySharingList(page, result);
|
||||
});
|
||||
}
|
||||
|
||||
function inviteUser(page) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
ApiClient.getJSON(ApiClient.getUrl("Channels", {})).then(function (channelsResult) {
|
||||
|
||||
var shareExcludes = $(".chkShareFolder:checked", page).get().map(function (i) {
|
||||
|
||||
return i.getAttribute('data-folderid');
|
||||
});
|
||||
|
||||
// Add/Update connect info
|
||||
ApiClient.ajax({
|
||||
|
||||
type: "POST",
|
||||
url: ApiClient.getUrl('Connect/Invite'),
|
||||
dataType: 'json',
|
||||
data: {
|
||||
|
||||
ConnectUsername: $('#txtConnectUsername', page).val(),
|
||||
EnabledLibraries: shareExcludes.join(','),
|
||||
SendingUserId: Dashboard.getCurrentUserId(),
|
||||
EnableLiveTv: false
|
||||
}
|
||||
|
||||
}).then(function (result) {
|
||||
|
||||
$('#popupInvite').popup('close');
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
|
||||
showNewUserInviteMessage(page, result);
|
||||
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function showNewUserInviteMessage(page, result) {
|
||||
|
||||
if (!result.IsNewUserInvitation && !result.IsPending) {
|
||||
|
||||
// It was immediately approved
|
||||
loadData(page);
|
||||
return;
|
||||
}
|
||||
|
||||
var message = result.IsNewUserInvitation ?
|
||||
Globalize.translate('MessageInvitationSentToNewUser', result.GuestDisplayName) :
|
||||
Globalize.translate('MessageInvitationSentToUser', result.GuestDisplayName);
|
||||
|
||||
// Need a timeout because jquery mobile will not show a popup while a previous one is in the act of closing
|
||||
setTimeout(function () {
|
||||
|
||||
Dashboard.alert({
|
||||
message: message,
|
||||
title: Globalize.translate('HeaderInvitationSent'),
|
||||
callback: function () {
|
||||
loadData(page);
|
||||
}
|
||||
});
|
||||
|
||||
}, 300);
|
||||
}
|
||||
|
||||
function showInvitePopup(page) {
|
||||
|
||||
Dashboard.getCurrentUser().then(function (user) {
|
||||
|
||||
if (user.ConnectUserId) {
|
||||
|
||||
$('#popupInvite', page).popup('open');
|
||||
$('#txtConnectUsername', page).val('');
|
||||
} else {
|
||||
if (!user.ConnectUserId) {
|
||||
|
||||
var msg = Globalize.translate('MessageConnectAccountRequiredToInviteGuest');
|
||||
|
||||
|
|
@ -444,22 +342,18 @@
|
|||
message: msg,
|
||||
title: Globalize.translate('HeaderInviteGuest')
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
require(['components/guestinviter/guestinviter'], function (guestinviter) {
|
||||
|
||||
guestinviter.show().then(function () {
|
||||
loadData(page);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
var form = this;
|
||||
|
||||
var page = $(form).parents('.page');
|
||||
|
||||
inviteUser(page);
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
$(document).on('pageinit', "#userProfilesPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
|
@ -474,8 +368,6 @@
|
|||
Dashboard.navigate('usernew.html');
|
||||
});
|
||||
|
||||
$('.addUserForm').off('submit', onSubmit).on('submit', onSubmit);
|
||||
|
||||
}).on('pagebeforeshow', "#userProfilesPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
|
|
|||
12
dashboard-ui/thirdparty/paper-button-style.css
vendored
12
dashboard-ui/thirdparty/paper-button-style.css
vendored
|
|
@ -537,15 +537,23 @@ paper-dialog paper-radio-group paper-radio-button {
|
|||
}
|
||||
|
||||
div.dialogHeader {
|
||||
margin: 0 0 2.5em !important;
|
||||
margin: 0 0 2em !important;
|
||||
padding: .35em .5em;
|
||||
background-color: #101010;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: normal;
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
.background-theme-a div.dialogHeader {
|
||||
background-color: #52B54B;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.background-theme-b div.dialogHeader {
|
||||
background-color: #101010;
|
||||
}
|
||||
|
||||
.dialogHeaderTitle {
|
||||
margin-left: .75em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>${TitleUsers}</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="userProfilesPage" data-role="page" class="page type-interior userProfilesPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Users" data-require="jqmpopup,jqmcollapsible,scripts/userprofilespage">
|
||||
<div id="userProfilesPage" data-role="page" class="page type-interior userProfilesPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Users" data-require="scripts/userprofilespage">
|
||||
|
||||
<div data-role="content">
|
||||
<div class="content-primary">
|
||||
|
|
@ -41,48 +41,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div data-role="popup" id="popupInvite" data-theme="a">
|
||||
|
||||
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-icon-delete ui-btn-icon-notext ui-btn-right">${ButtonClose}</a>
|
||||
|
||||
<div class="ui-bar-a" style="text-align: center; padding: 5px 20px;">
|
||||
<h3 style="margin: .5em;">${HeaderInviteUser}</h3>
|
||||
</div>
|
||||
|
||||
<div style="padding:10px 20px;">
|
||||
|
||||
<p style="margin:1em 0 1.25em;">${HeaderInviteUserHelp}</p>
|
||||
<form class="addUserForm">
|
||||
<div>
|
||||
<label for="txtConnectUsername">${LabelConnectGuestUserName}</label>
|
||||
<input type="text" id="txtConnectUsername" value="" placeholder="${PlaceholderUsername}" required="required">
|
||||
<div class="fieldDescription">
|
||||
<div>${LabelConnectGuestUserNameHelp}</div>
|
||||
<div style="margin-top: .75em;"><a href="http://emby.media/connect" target="_blank">${ButtonLearnMoreAboutEmbyConnect}</a></div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div data-role="collapsible" data-mini="true">
|
||||
<h2>${HeaderShareMediaFolders}</h2>
|
||||
<div>
|
||||
<div class="librarySharingList" style="margin-top:1em;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin:1.25em 0;" class="fieldDescription">${MessageGuestSharingPermissionsHelp}</div>
|
||||
<div>
|
||||
<button type="submit" data-icon="mail" data-theme="b" data-mini="true">${ButtonSendInvitation}</button>
|
||||
<a href="#" data-rel="back" data-icon="delete" data-role="button" data-mini="true">${ButtonCancel}</a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue