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

Restore dashboard theme option

Browse source
This commit is contained in:
Bill Thornton 2020-12-21 10:38:54 -05:00
parent 0585806c0b
commit 95d58db5f9
3 changed files with 23 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/components/displaySettings/displaySettings.js
View file

@ -17,21 +17,17 @@ import template from './displaySettings.template.html';
/* eslint-disable indent */ /* eslint-disable indent */
function fillThemes(context, userSettings) { function fillThemes(select, selectedTheme) {
const select = context.querySelector('#selectTheme');
skinManager.getThemes().then(themes => { skinManager.getThemes().then(themes => {
select.innerHTML = themes.map(t => { select.innerHTML = themes.map(t => {
return `<option value="${t.id}">${t.name}</option>`; return `<option value="${t.id}">${t.name}</option>`;
}).join(''); }).join('');
// get default theme // get default theme
const defaultTheme = themes.find(theme => { const defaultTheme = themes.find(theme => theme.default);
return theme.default;
});
// set the current theme // set the current theme
select.value = userSettings.theme() || defaultTheme.id; select.value = selectedTheme || defaultTheme.id;
}); });
} }
@ -89,6 +85,8 @@ import template from './displaySettings.template.html';
context.querySelector('.learnHowToContributeContainer').classList.add('hide'); context.querySelector('.learnHowToContributeContainer').classList.add('hide');
} }
context.querySelector('.selectDashboardThemeContainer').classList.toggle('hide', !user.Policy.IsAdministrator);
if (appHost.supports('screensaver')) { if (appHost.supports('screensaver')) {
context.querySelector('.selectScreensaverContainer').classList.remove('hide'); context.querySelector('.selectScreensaverContainer').classList.remove('hide');
} else { } else {
@ -111,7 +109,9 @@ import template from './displaySettings.template.html';
context.querySelector('.fldThemeVideo').classList.add('hide'); context.querySelector('.fldThemeVideo').classList.add('hide');
} }
fillThemes(context, userSettings); fillThemes(context.querySelector('#selectTheme'), userSettings.theme());
fillThemes(context.querySelector('#selectDashboardTheme'), userSettings.dashboardTheme());
loadScreensavers(context, userSettings); loadScreensavers(context, userSettings);
context.querySelector('.chkDisplayMissingEpisodes').checked = user.Configuration.DisplayMissingEpisodes || false; context.querySelector('.chkDisplayMissingEpisodes').checked = user.Configuration.DisplayMissingEpisodes || false;
@ -147,6 +147,7 @@ import template from './displaySettings.template.html';
userSettingsInstance.enableThemeSongs(context.querySelector('#chkThemeSong').checked); userSettingsInstance.enableThemeSongs(context.querySelector('#chkThemeSong').checked);
userSettingsInstance.enableThemeVideos(context.querySelector('#chkThemeVideo').checked); userSettingsInstance.enableThemeVideos(context.querySelector('#chkThemeVideo').checked);
userSettingsInstance.theme(context.querySelector('#selectTheme').value); userSettingsInstance.theme(context.querySelector('#selectTheme').value);
userSettingsInstance.dashboardTheme(context.querySelector('#selectDashboardTheme').value);
userSettingsInstance.screensaver(context.querySelector('.selectScreensaver').value); userSettingsInstance.screensaver(context.querySelector('.selectScreensaver').value);
userSettingsInstance.libraryPageSize(context.querySelector('#txtLibraryPageSize').value); userSettingsInstance.libraryPageSize(context.querySelector('#txtLibraryPageSize').value);

4
src/components/displaySettings/displaySettings.template.html
View file

@ -126,6 +126,10 @@
<select id="selectTheme" is="emby-select" label="${LabelTheme}"></select> <select id="selectTheme" is="emby-select" label="${LabelTheme}"></select>
</div> </div>
<div class="selectContainer selectDashboardThemeContainer hide">
<select id="selectDashboardTheme" is="emby-select" label="${LabelDashboardTheme}"></select>
</div>
<div class="selectContainer hide selectScreensaverContainer"> <div class="selectContainer hide selectScreensaverContainer">
<select is="emby-select" class="selectScreensaver" label="${LabelScreensaver}"></select> <select is="emby-select" class="selectScreensaver" label="${LabelScreensaver}"></select>
</div> </div>

12
src/scripts/autoThemes.js
View file

@ -1,8 +1,8 @@
import * as userSettings from './settings/userSettings'; import * as userSettings from './settings/userSettings';
import * as webSettings from './settings/webSettings';
import skinManager from './themeManager'; import skinManager from './themeManager';
import { Events } from 'jellyfin-apiclient'; import { Events } from 'jellyfin-apiclient';
import ServerConnections from '../components/ServerConnections'; import ServerConnections from '../components/ServerConnections';
import { pageClassOn } from '../scripts/clientUtils';
// Set the default theme when loading // Set the default theme when loading
skinManager.setTheme(userSettings.theme()) skinManager.setTheme(userSettings.theme())
@ -12,6 +12,14 @@ skinManager.setTheme(userSettings.theme())
.then(() => document.body.classList.add('force-scroll')); .then(() => document.body.classList.add('force-scroll'));
// set the saved theme once a user authenticates // set the saved theme once a user authenticates
Events.on(ServerConnections, 'localusersignedin', function (e, user) { Events.on(ServerConnections, 'localusersignedin', () => {
skinManager.setTheme(userSettings.theme()); skinManager.setTheme(userSettings.theme());
}); });
pageClassOn('viewbeforeshow', 'page', function () {
if (this.classList.contains('type-interior')) {
skinManager.setTheme(userSettings.dashboardTheme());
} else {
skinManager.setTheme(userSettings.theme());
}
});