1
0
Fork 0
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 2016-02-08 23:46:25 -05:00
parent 559ff97dd7
commit dc0ebc82c7
10 changed files with 230 additions and 193 deletions

View 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();
});
}
};
});

View file

@ -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>

View file

@ -29,10 +29,7 @@
<div class="fieldDescription">${LabelPersonRoleHelp}</div> <div class="fieldDescription">${LabelPersonRoleHelp}</div>
</div> </div>
<br /> <br />
<input type="hidden" id="fldPersonIndex" /> <button type="submit" data-role="none" class="clearButton">
<p> <paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonOk}</span></paper-button>
<button type="submit" data-role="none" class="clearButton"> </button>
<paper-button raised class="submit block"><iron-icon icon="check"></iron-icon><span>${ButtonOk}</span></paper-button>
</button>
</p>
</form> </form>

View file

@ -12,7 +12,7 @@
.sidebarDivider { .sidebarDivider {
height: 1px; height: 1px;
background: #ddd; background: #eaeaea;
margin: .5em 0; margin: .5em 0;
} }

View file

@ -1123,7 +1123,7 @@ paper-input + .fieldDescription {
} }
.background-theme-a, paper-dialog.background-theme-a { .background-theme-a, paper-dialog.background-theme-a {
background-color: #f7f7f7; background-color: #f4f4f4;
} }
.ui-page-theme-a .content-secondary { .ui-page-theme-a .content-secondary {

View file

@ -406,7 +406,7 @@
<input type="radio" name="radioTranscodingTab" class="radioTabButton" id="radioTranscodingAdvanced" value="tabTranscodingAdvanced"> <input type="radio" name="radioTranscodingTab" class="radioTabButton" id="radioTranscodingAdvanced" value="tabTranscodingAdvanced">
<label for="radioTranscodingAdvanced">${TabAdvanced}</label> <label for="radioTranscodingAdvanced">${TabAdvanced}</label>
</div> </div>
<br/>
<div class="tabContent tabTranscodingBasics" style="display: none;"> <div class="tabContent tabTranscodingBasics" style="display: none;">
<div style="margin: 1em 0;"> <div style="margin: 1em 0;">
<label for="selectTranscodingProfileType">${LabelType}</label> <label for="selectTranscodingProfileType">${LabelType}</label>

View file

@ -949,7 +949,8 @@
$(this).siblings().removeClass('ui-btn-active'); $(this).siblings().removeClass('ui-btn-active');
$(this).addClass('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.siblings('.tabContent').hide();
elem.show(); elem.show();

View file

@ -1,33 +1,5 @@
(function (document, window, $) { (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) { function deleteUser(page, id) {
var msg = Globalize.translate('DeleteUserConfirmation'); var msg = Globalize.translate('DeleteUserConfirmation');
@ -218,35 +190,34 @@
function showPendingUserMenu(elem) { 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 card = $(elem).parents('.card');
var page = $(elem).parents('.page'); var page = $(elem).parents('.page');
var id = card.attr('data-id'); 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;">'; case 'delete':
html += '<li data-role="list-divider">' + Globalize.translate('HeaderMenu') + '</li>'; cancelAuthorization(page, id);
break;
html += '<li><a href="#" class="btnDelete" data-id="' + id + '">' + Globalize.translate('ButtonCancel') + '</a></li>'; default:
break;
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();
}); });
}); });
} }
@ -352,86 +323,13 @@
renderPendingGuests(page, pending); 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) { function showInvitePopup(page) {
Dashboard.getCurrentUser().then(function (user) { Dashboard.getCurrentUser().then(function (user) {
if (user.ConnectUserId) { if (!user.ConnectUserId) {
$('#popupInvite', page).popup('open');
$('#txtConnectUsername', page).val('');
} else {
var msg = Globalize.translate('MessageConnectAccountRequiredToInviteGuest'); var msg = Globalize.translate('MessageConnectAccountRequiredToInviteGuest');
@ -444,22 +342,18 @@
message: msg, message: msg,
title: Globalize.translate('HeaderInviteGuest') 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 () { $(document).on('pageinit', "#userProfilesPage", function () {
var page = this; var page = this;
@ -474,8 +368,6 @@
Dashboard.navigate('usernew.html'); Dashboard.navigate('usernew.html');
}); });
$('.addUserForm').off('submit', onSubmit).on('submit', onSubmit);
}).on('pagebeforeshow', "#userProfilesPage", function () { }).on('pagebeforeshow', "#userProfilesPage", function () {
var page = this; var page = this;

View file

@ -537,15 +537,23 @@ paper-dialog paper-radio-group paper-radio-button {
} }
div.dialogHeader { div.dialogHeader {
margin: 0 0 2.5em !important; margin: 0 0 2em !important;
padding: .35em .5em; padding: .35em .5em;
background-color: #101010;
display: flex; display: flex;
align-items: center; align-items: center;
line-height: normal; line-height: normal;
font-size: 110%; font-size: 110%;
} }
.background-theme-a div.dialogHeader {
background-color: #52B54B;
color: #fff;
}
.background-theme-b div.dialogHeader {
background-color: #101010;
}
.dialogHeaderTitle { .dialogHeaderTitle {
margin-left: .75em; margin-left: .75em;
} }

View file

@ -4,7 +4,7 @@
<title>${TitleUsers}</title> <title>${TitleUsers}</title>
</head> </head>
<body> <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 data-role="content">
<div class="content-primary"> <div class="content-primary">
@ -41,48 +41,6 @@
</div> </div>
</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>
</div> </div>
</body> </body>