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
     //---------------------------------------------