Move user settings menu to react (#6675)
* Move user settings menu to react * Add default href value to LinkButton * Use loading component while data is pending
This commit is contained in:
Bill Thornton
@@ -1,127 +0,0 @@
|
||||
<div id="myPreferencesMenuPage" data-role="page" class="page libraryPage userPreferencesPage noSecondaryNavPage" data-title="${Settings}" data-backbutton="true">
|
||||
<div class="padded-left padded-right padded-bottom-page padded-top">
|
||||
<div class="readOnlyContent" style="margin: 0 auto;">
|
||||
<div class="verticalSection verticalSection-extrabottompadding">
|
||||
<h2 class="sectionTitle headerUsername" style="padding-left:.25em;"></h2>
|
||||
<a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="lnkUserProfile listItem-border">
|
||||
<div class="listItem">
|
||||
<span class="material-icons listItemIcon listItemIcon-transparent person" aria-hidden="true"></span>
|
||||
<div class="listItemBody">
|
||||
<div class="listItemBodyText">${Profile}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="lnkQuickConnectPreferences listItem-border hide">
|
||||
<div class="listItem">
|
||||
<span class="material-icons listItemIcon listItemIcon-transparent phonelink_lock" aria-hidden="true"></span>
|
||||
<div class="listItemBody">
|
||||
<div class="listItemBodyText">${QuickConnect}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="lnkDisplayPreferences listItem-border">
|
||||
<div class="listItem">
|
||||
<span class="material-icons listItemIcon listItemIcon-transparent tv" aria-hidden="true"></span>
|
||||
<div class="listItemBody">
|
||||
<div class="listItemBodyText">${Display}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="lnkHomePreferences listItem-border">
|
||||
<div class="listItem">
|
||||
<span class="material-icons listItemIcon listItemIcon-transparent home" aria-hidden="true"></span>
|
||||
<div class="listItemBody">
|
||||
<div class="listItemBodyText">${Home}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="lnkPlaybackPreferences listItem-border">
|
||||
<div class="listItem">
|
||||
<span class="material-icons listItemIcon listItemIcon-transparent play_circle_filled" aria-hidden="true"></span>
|
||||
<div class="listItemBody">
|
||||
<div class="listItemBodyText">${TitlePlayback}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="lnkSubtitlePreferences listItem-border">
|
||||
<div class="listItem">
|
||||
<span class="material-icons listItemIcon listItemIcon-transparent closed_caption" aria-hidden="true"></span>
|
||||
<div class="listItemBody">
|
||||
<div class="listItemBodyText">${Subtitles}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="clientSettings listItem-border">
|
||||
<div class="listItem">
|
||||
<span class="material-icons listItemIcon listItemIcon-transparent devices_other" aria-hidden="true"></span>
|
||||
<div class="listItemBody">
|
||||
<div class="listItemBodyText">${ClientSettings}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="lnkControlsPreferences listItem-border">
|
||||
<div class="listItem">
|
||||
<span class="material-icons listItemIcon listItemIcon-transparent keyboard" aria-hidden="true"></span>
|
||||
<div class="listItemBody">
|
||||
<div class="listItemBodyText">${Controls}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="adminSection verticalSection verticalSection-extrabottompadding hide">
|
||||
<h2 class="sectionTitle" style="padding-left:.25em;">${HeaderAdmin}</h2>
|
||||
<a is="emby-linkbutton" href="#/dashboard" style="display:block;padding:0;margin:0;" class="listItem-border">
|
||||
<div class="listItem">
|
||||
<span class="material-icons listItemIcon listItemIcon-transparent dashboard" aria-hidden="true"></span>
|
||||
<div class="listItemBody">
|
||||
<div class="listItemBodyText">${TabDashboard}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a is="emby-linkbutton" href="#/metadata" style="display:block;padding:0;margin:0;" class="listItem-border">
|
||||
<div class="listItem">
|
||||
<span class="material-icons listItemIcon listItemIcon-transparent mode_edit" aria-hidden="true"></span>
|
||||
<div class="listItemBody">
|
||||
<div class="listItemBodyText">${MetadataManager}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="userSection verticalSection verticalSection-extrabottompadding">
|
||||
<h2 class="sectionTitle" style="padding-left:.25em;">${HeaderUser}</h2>
|
||||
<a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="selectServer hide listItem-border">
|
||||
<div class="listItem">
|
||||
<span class="material-icons listItemIcon listItemIcon-transparent storage" aria-hidden="true"></span>
|
||||
<div class="listItemBody">
|
||||
<div class="listItemBodyText">${SelectServer}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="btnLogout listItem-border">
|
||||
<div class="listItem">
|
||||
<span class="material-icons listItemIcon listItemIcon-transparent exit_to_app" aria-hidden="true"></span>
|
||||
<div class="listItemBody">
|
||||
<div class="listItemBodyText">${ButtonSignOut}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a is="emby-linkbutton" data-ripple="false" href="#" style="display:block;padding:0;margin:0;" class="exitApp listItem-border">
|
||||
<div class="listItem">
|
||||
<span class="material-icons listItemIcon listItemIcon-transparent close" aria-hidden="true"></span>
|
||||
<div class="listItemBody">
|
||||
<div class="listItemBodyText">${ButtonExitApp}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,75 +0,0 @@
|
||||
import { appHost } from '../../../components/apphost';
|
||||
import '../../../components/listview/listview.scss';
|
||||
import '../../../elements/emby-button/emby-button';
|
||||
import layoutManager from '../../../components/layoutManager';
|
||||
import Dashboard from '../../../utils/dashboard';
|
||||
|
||||
export default function (view, params) {
|
||||
view.querySelector('.btnLogout').addEventListener('click', function () {
|
||||
Dashboard.logout();
|
||||
});
|
||||
|
||||
view.querySelector('.selectServer').addEventListener('click', function () {
|
||||
Dashboard.selectServer();
|
||||
});
|
||||
|
||||
view.querySelector('.clientSettings').addEventListener('click', function () {
|
||||
window.NativeShell.openClientSettings();
|
||||
});
|
||||
|
||||
view.querySelector('.exitApp').addEventListener('click', function () {
|
||||
appHost.exit();
|
||||
});
|
||||
|
||||
view.addEventListener('viewshow', function () {
|
||||
// this page can also be used by admins to change user preferences from the user edit page
|
||||
const userId = params.userId || Dashboard.getCurrentUserId();
|
||||
const page = this;
|
||||
|
||||
page.querySelector('.lnkUserProfile').setAttribute('href', '#/userprofile?userId=' + userId);
|
||||
page.querySelector('.lnkDisplayPreferences').setAttribute('href', '#/mypreferencesdisplay?userId=' + userId);
|
||||
page.querySelector('.lnkHomePreferences').setAttribute('href', '#/mypreferenceshome?userId=' + userId);
|
||||
page.querySelector('.lnkPlaybackPreferences').setAttribute('href', '#/mypreferencesplayback?userId=' + userId);
|
||||
page.querySelector('.lnkSubtitlePreferences').setAttribute('href', '#/mypreferencessubtitles?userId=' + userId);
|
||||
page.querySelector('.lnkQuickConnectPreferences').setAttribute('href', '#/quickconnect?userId=' + userId);
|
||||
page.querySelector('.lnkControlsPreferences').setAttribute('href', '#/mypreferencescontrols?userId=' + userId);
|
||||
|
||||
const supportsClientSettings = appHost.supports('clientsettings');
|
||||
page.querySelector('.clientSettings').classList.toggle('hide', !supportsClientSettings);
|
||||
|
||||
const supportsExitMenu = appHost.supports('exitmenu');
|
||||
page.querySelector('.exitApp').classList.toggle('hide', !supportsExitMenu);
|
||||
|
||||
const supportsMultiServer = appHost.supports('multiserver');
|
||||
page.querySelector('.selectServer').classList.toggle('hide', !supportsMultiServer);
|
||||
|
||||
page.querySelector('.lnkControlsPreferences').classList.toggle('hide', layoutManager.mobile);
|
||||
|
||||
ApiClient.getQuickConnect('Enabled')
|
||||
.then(enabled => {
|
||||
if (enabled === true) {
|
||||
page.querySelector('.lnkQuickConnectPreferences').classList.remove('hide');
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.debug('Failed to get QuickConnect status');
|
||||
});
|
||||
ApiClient.getUser(userId).then(function (user) {
|
||||
page.querySelector('.headerUsername').innerText = user.Name;
|
||||
if (user.Policy.IsAdministrator && !layoutManager.tv) {
|
||||
page.querySelector('.adminSection').classList.remove('hide');
|
||||
}
|
||||
});
|
||||
|
||||
// Hide the actions if user preferences are being edited for a different user
|
||||
if (params.userId && params.userId !== Dashboard.getCurrentUserId) {
|
||||
page.querySelector('.userSection').classList.add('hide');
|
||||
page.querySelector('.adminSection').classList.add('hide');
|
||||
page.querySelector('.lnkControlsPreferences').classList.add('hide');
|
||||
}
|
||||
|
||||
import('../../../components/autoFocuser').then(({ default: autoFocuser }) => {
|
||||
autoFocuser.autoFocus(view);
|
||||
});
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user