Settings: Move 'Personalization' tab into its own file

This commit is contained in:
Sam Atkins 2024-04-15 16:50:29 +01:00
parent 0ed5b20627
commit 6d1c807879
2 changed files with 49 additions and 24 deletions

View File

@ -0,0 +1,47 @@
/**
* Copyright (C) 2024 Puter Technologies Inc.
*
* This file is part of Puter.
*
* Puter is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published
* by the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import UIWindowThemeDialog from '../UIWindowThemeDialog.js';
// About
export default {
id: 'personalization',
title_i18n_key: 'personalization',
icon: 'palette-outline.svg',
html: () => {
return `
<h1>${i18n('personalization')}</h1>
<div class="settings-card">
<strong>${i18n('ui_colors')}</strong>
<div style="flex-grow:1;">
<button class="button change-ui-colors" style="float:right;">${i18n('change_ui_colors')}</button>
</div>
</div>`;
},
init: ($el_window) => {
$el_window.find('.change-ui-colors').on('click', function (e) {
UIWindowThemeDialog({
window_options:{
parent_uuid: $el_window.attr('data-element_uuid'),
disable_parent_window: true,
parent_center: true,
}
});
});
},
};

View File

@ -26,6 +26,7 @@ import UIWindowConfirmUserDeletion from './UIWindowConfirmUserDeletion.js';
import AboutTab from './UITabAbout.js';
import UsageTab from './UITabUsage.js';
import AccountTab from './UITabAccount.js';
import PersonalizationTab from './UITabPersonalization.js';
import UIWindowThemeDialog from '../UIWindowThemeDialog.js';
import UIWindowManageSessions from '../UIWindowManageSessions.js';
@ -37,7 +38,7 @@ async function UIWindowSettings(options){
AboutTab,
UsageTab,
AccountTab,
// PersonalizationTab,
PersonalizationTab,
// LanguageTab,
// ClockTab,
];
@ -51,7 +52,6 @@ async function UIWindowSettings(options){
tabs.forEach((tab, i) => {
h += `<div class="settings-sidebar-item disable-user-select ${i === 0 ? 'active' : ''}" data-settings="${tab.id}" style="background-image: url(${icons[tab.icon]});">${i18n(tab.title_i18n_key)}</div>`;
});
h += `<div class="settings-sidebar-item disable-user-select" data-settings="personalization" style="background-image: url(${icons['palette-outline.svg']});">${i18n('personalization')}</div>`;
h += `<div class="settings-sidebar-item disable-user-select" data-settings="language" style="background-image: url(${icons['language.svg']});">${i18n('language')}</div>`;
h += `<div class="settings-sidebar-item disable-user-select" data-settings="clock" style="background-image: url(${icons['clock.svg']});">${i18n('clock')}</div>`;
h += `</div>`;
@ -65,18 +65,6 @@ async function UIWindowSettings(options){
</div>`;
});
// Personalization
h += `<div class="settings-content" data-settings="personalization">`;
h += `<h1>${i18n('personalization')}</h1>`;
// change password button
h += `<div class="settings-card">`;
h += `<strong>${i18n('ui_colors')}</strong>`;
h += `<div style="flex-grow:1;">`;
h += `<button class="button change-ui-colors" style="float:right;">${i18n('change_ui_colors')}</button>`;
h += `</div>`;
h += `</div>`;
h += `</div>`;
// Language
h += `<div class="settings-content" data-settings="language">`;
h += `<h1>${i18n('language')}</h1>`;
@ -147,16 +135,6 @@ async function UIWindowSettings(options){
const $el_window = $(el_window);
tabs.forEach(tab => tab.init($el_window));
$(el_window).find('.change-ui-colors').on('click', function (e) {
UIWindowThemeDialog({
window_options:{
parent_uuid: $(el_window).attr('data-element_uuid'),
disable_parent_window: true,
parent_center: true,
}
});
})
$(el_window).on('click', '.settings-sidebar-item', function(){
const $this = $(this);
const settings = $this.attr('data-settings');