tweak: Move clock settings to the 'Personalization' tab of 'Settings'

src/gui/src/UI/Settings/UITabClock.js

@@ -1,45 +0,0 @@
-/**
- * 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/>.
- */
-
-
-// About
-export default {
-    id: 'clock',
-    title_i18n_key: 'clock',
-    icon: 'clock.svg',
-    html: () => {
-        return `
-            <h1>${i18n('clock')}</h1>
-            <div style="display: flex;align-items: center">
-                <span>${i18n('visibility')}:</span>
-                <select class="change-clock-visible" style="margin-left: 10px;flex: 1">
-                    <option value="auto">${i18n('clock_visible_auto')}</option>
-                    <option value="hide">${i18n('clock_visible_hide')}</option>
-                    <option value="show">${i18n('clock_visible_show')}</option>
-                </select>
-            </div>`;
-    },
-    init: ($el_window) => {
-        $el_window.on('change', 'select.change-clock-visible', function(e){
-            window.change_clock_visible(this.value);
-        });
-
-        window.change_clock_visible();
-    },
-};

src/gui/src/UI/Settings/UITabPersonalization.js

@@ -40,8 +40,16 @@ export default {
                     <button class="button change-ui-colors" style="float:right;">${i18n('change_ui_colors')}</button>
                 </div>
             </div>
+            <div class="settings-card">
+                <strong style="flex-grow:1;">${i18n('clock_visibility')}</strong>
+                <select class="change-clock-visible" style="margin-left: 10px; max-width: 300px;">
+                    <option value="auto">${i18n('clock_visible_auto')}</option>
+                    <option value="hide">${i18n('clock_visible_hide')}</option>
+                    <option value="show">${i18n('clock_visible_show')}</option>
+                </select>
+            </div>
             <div class="settings-card" style="display: block; height: auto;">
-                <strong>${i18n('menubar_style')}</strong>
+                <strong style="margin: 15px 0 30px; display: block;">${i18n('menubar_style')}</strong>
                 <div style="flex-grow:1; margin-top: 10px;">
                     <div>
                         <label style="display:inline;" for="menubar_style_system">
@@ -50,7 +58,6 @@ export default {
                         <p style="margin-left: 17px; margin-top: 5px; margin-bottom: 20px;">Set the menubar based on the host system settings</p>
                         </label>
                     </div>
-
                     <div>
                         <label style="display:inline;" for="menubar_style_desktop">
                         <input type="radio" name="menubar_style" class="menubar_style" value="desktop" id="menubar_style_desktop">

src/gui/src/UI/Settings/UIWindowSettings.js

@@ -37,6 +37,11 @@ async function UIWindowSettings(options){
             h += `<button class="sidebar-toggle hidden-lg hidden-xl hidden-md"><div class="sidebar-toggle-button"><span></span><span></span><span></span></div></button>`;
             // sidebar
             h += `<div class="settings-sidebar disable-user-select disable-context-menu">`;
+                // if data-is_fullpage="1" show title saying "Settings"
+                if (options.window_options?.is_fullpage) {
+                    h += `<div class="settings-sidebar-title">${i18n('settings')}</div>`;
+                }
+
                 // sidebar items
                 h += `<div class="settings-sidebar-burger disable-context-menu disable-user-select" style="background-image: url(${window.icons['menu']});"></div>`;
                 tabs.forEach((tab, i) => {

src/gui/src/UI/UIDesktop.js

@@ -1071,7 +1071,7 @@ async function UIDesktop(options){
         // open settings
         UIWindowSettings({
             window_options:{
-                is_fullpage: true,
+                // is_fullpage: true,
             }
         });
     }

src/gui/src/css/style.css

@@ -3611,6 +3611,15 @@ fieldset[name=number-code] {
     margin-top: 1px;
 }
 
+.settings-sidebar-title{
+    margin-bottom: 20px; 
+    font-weight: bold; 
+    -webkit-font-smoothing: antialiased; 
+    margin-top: 15px; 
+    color: #8c8c8c; 
+    font-size: 19px;
+}
+
 .settings-sidebar-item {
     cursor: pointer;
     border-radius: 4px;

src/gui/src/globals.js

@@ -173,6 +173,10 @@ $( window ).on( "resize", function() {
     const new_desktop_width = window.innerWidth;
 
     $('.window').each((_, el) => {
+        // if data-is_fullpage="1" then the window is in fullpage mode
+        // and should not be resized
+        if($(el).attr('data-is_fullpage') === "1") return;
+
         const pos = $(el).position();
         const id = $(el).attr('id');
 

src/gui/src/i18n/translations/en.js

@@ -44,6 +44,7 @@ const en = {
         change_password: "Change Password",
         change_ui_colors: "Change UI Colors",
         change_username: "Change Username",
+        clock_visibility: 'Clock Visibility',
         close: 'Close',
         close_all_windows: "Close All Windows",
         close_all_windows_confirm: "Are you sure you want to close all windows?",

src/gui/src/services/SettingsService.js

@@ -24,7 +24,6 @@ import AccountTab from '../UI/Settings/UITabAccount.js';
 import SecurityTab from '../UI/Settings/UITabSecurity.js';
 import PersonalizationTab from '../UI/Settings/UITabPersonalization.js';
 import LanguageTag from '../UI/Settings/UITabLanguage.js';
-import ClockTab from '../UI/Settings/UITabClock.js';
 
 export class SettingsService extends Service {
     #tabs = [];
@@ -35,7 +34,6 @@ export class SettingsService extends Service {
             SecurityTab,
             PersonalizationTab,
             LanguageTag,
-            ClockTab,
             AboutTab,
         ].forEach(tab => {
             this.register_tab(tab);