Merge pull request #191 from meetqy/main

Make showing/hiding the clock configurable

src/UI/Settings/UIWindowSettings.js

@@ -40,6 +40,7 @@ async function UIWindowSettings(options){
                 h += `<div class="settings-sidebar-item disable-user-select" data-settings="usage" style="background-image: url(${icons['speedometer-outline.svg']});">${i18n('usage')}</div>`;
                 h += `<div class="settings-sidebar-item disable-user-select" data-settings="account" style="background-image: url(${icons['user.svg']});">${i18n('account')}</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>`;
 
             // content
@@ -124,9 +125,21 @@ async function UIWindowSettings(options){
                             h += `<div class="language-item ${window.locale === lang.code ? 'active': ''}" data-lang="${lang.code}" data-english-name="${html_encode(lang.english_name)}">${lang.name}</div>`;
                         }
                     h += `</div>`;
-
                 h += `</div>`;
 
+                // Clock
+                h += `<div class="settings-content" data-settings="clock">`;
+                     h += `<h1>${i18n('clock')}</h1>`;
+                     h += `<div style="display: flex;align-items: center">`
+                        h += `<span>${i18n('visibility')}:</span>`
+                        h += `<select class="change-clock-visible" style="margin-left: 10px;flex: 1">`
+                            h += `<option value="auto">${i18n('clock_visible_auto')}</option>`
+                            h += `<option value="hide">${i18n('clock_visible_hide')}</option>`
+                            h += `<option value="show">${i18n('clock_visible_show')}</option>`
+                        h += `</select>`
+                     h += `</div>`
+                h += `</div>`;      
+
             h += `</div>`;
         h += `</div>`;
         h += `</div>`;
@@ -344,6 +357,15 @@ async function UIWindowSettings(options){
             })
         });
 
+        $(el_window).on('change', 'select.change-clock-visible', function(e){
+            const $this = $(this);  
+            const value = $this.val();
+
+            window.change_clock_visible(value);
+        })
+
+        window.change_clock_visible();
+
         resolve(el_window);
     });
 }

src/UI/UIDesktop.js

@@ -505,6 +505,7 @@ async function UIDesktop(options){
     const user_preferences = {
         show_hidden_files: JSON.parse(await puter.kv.get('user_preferences.show_hidden_files')),
         language: await puter.kv.get('user_preferences.language'),
+        clock_visible: await puter.kv.get('user_preferences.clock_visible'),
     };
 
     // update default apps
@@ -1028,7 +1029,6 @@ async function UIDesktop(options){
             }
         })
     }
-
 }
 
 $(document).on('contextmenu taphold', '.taskbar', function(event){
@@ -1379,14 +1379,15 @@ document.addEventListener('fullscreenchange', (event) => {
     // document.fullscreenElement will point to the element that
     // is in fullscreen mode if there is one. If there isn't one,
     // the value of the property is null.
+
     if (document.fullscreenElement) {
         $('.fullscreen-btn').css('background-image', `url(${window.icons['shrink.svg']})`);
         $('.fullscreen-btn').attr('title', 'Exit Full Screen');
-        $('#clock').show();
+        window.user_preferences.clock_visible === 'auto' && $('#clock').show();
     } else {
         $('.fullscreen-btn').css('background-image', `url(${window.icons['fullscreen.svg']})`);
         $('.fullscreen-btn').attr('title', 'Enter Full Screen');
-        $('#clock').hide();
+        window.user_preferences.clock_visible === 'auto' && $('#clock').hide();
     }
 })
 

src/UI/UITaskbar.js

@@ -45,6 +45,9 @@ async function UITaskbar(options){
 
     $('.desktop').append(h);
 
+    // init clock visibility
+    window.change_clock_visible();
+
     //---------------------------------------------
     // add `Start` to taskbar
     //---------------------------------------------

src/globals.js

@@ -97,6 +97,7 @@ if (window.user_preferences === null) {
     window.user_preferences = {
         show_hidden_files: false,
         language: navigator.language.split("-")[0] || navigator.userLanguage || 'en',
+        clock_visible: 'auto',
     }
 }
 

src/helpers.js

@@ -3655,4 +3655,25 @@ window.save_desktop_item_positions = ()=>{
 window.delete_desktop_item_positions = ()=>{
     desktop_item_positions = {}
     puter.kv.del('desktop_item_positions');
+}
+
+window.change_clock_visible = (clock_visible) => {
+    let newValue = clock_visible || window.user_preferences.clock_visible;
+    
+    
+    newValue === 'auto' && is_fullscreen() ? $('#clock').show() : $('#clock').hide();
+
+    newValue === 'show' && $('#clock').show();
+    newValue === 'hide' && $('#clock').hide();
+
+    if(clock_visible) {
+        // save clock_visible to user preferences
+        window.mutate_user_preferences({
+            clock_visible: newValue
+        });
+
+        return;
+    }
+
+    $('select.change-clock-visible').val(window.user_preferences.clock_visible);
 }

src/i18n/translations/en.js

@@ -60,6 +60,10 @@ const en = {
         credits: "Credits",
         current_password: "Current Password",
         cut: 'Cut',
+        clock: "Clock",
+        clock_visible_hide: 'Hide - Always hidden',
+        clock_visible_show: 'Show - Always visible',
+        clock_visible_auto: 'Auto - Default, visible only in full-screen mode.',
         date_modified: 'Date modified',
         delete: 'Delete',
         delete_account: "Delete Account",
@@ -198,6 +202,7 @@ const en = {
         username: "Username",
         username_changed: 'Username updated successfully.',
         versions: "Versions",
+        visibility: 'Visibility',
         yes: 'Yes',
         yes_release_it: 'Yes, Release It',
         you_have_been_referred_to_puter_by_a_friend: "You have been referred to Puter by a friend!",

src/i18n/translations/zh.js

@@ -50,6 +50,10 @@ const zh = {
         create_shortcut: "创建快捷方式",
         current_password: "当前密码",
         cut: '剪切',
+        clock: "时间",
+        clock_visible_hide: '隐藏 - 始终隐藏',
+        clock_visible_show: '显示 - 始终显示',
+        clock_visible_auto: '自动 - 默认值，全屏显示',
         date_modified: '修改日期',
         delete: '删除',
         delete_permanently: "永久删除",
@@ -157,6 +161,7 @@ const zh = {
         upload_here: '在此上传',
         username: "用户名",
         username_changed: '用户名已成功更新。',
+        visibility: "可见性",
         versions: "版本",
         yes_release_it: '是的，释放它',
         you_have_been_referred_to_puter_by_a_friend: "您已经被朋友推荐到 Puter！",

src/icons/clock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="59" height="59" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>