From 45925bacb6375f860484afcbd3881bc483d1395a Mon Sep 17 00:00:00 2001
From: Nariman Jelveh <n.jelveh@gmail.com>
Date: Tue, 27 Aug 2024 17:11:48 -0700
Subject: [PATCH] Improve the usability of the Settings tab in Dev Center

---
 src/dev-center/css/style.css    |   1 +
 src/dev-center/js/dev-center.js | 109 ++++++++++++++++++++------------
 2 files changed, 70 insertions(+), 40 deletions(-)

diff --git a/src/dev-center/css/style.css b/src/dev-center/css/style.css
index 02a9f376..cc32ab3a 100644
--- a/src/dev-center/css/style.css
+++ b/src/dev-center/css/style.css
@@ -264,6 +264,7 @@ section {
 
 label, input[type="text"] {
     display: block;
+    user-select: none;
 }
 
 #delete-app {
diff --git a/src/dev-center/js/dev-center.js b/src/dev-center/js/dev-center.js
index 9be94f51..a603f3d2 100644
--- a/src/dev-center/js/dev-center.js
+++ b/src/dev-center/js/dev-center.js
@@ -475,6 +475,7 @@ function generate_edit_app_section(app) {
                 <div class="success" id="edit-app-success">App has been successfully updated.<span class="close-success-msg">&times;</span></div>
                 <input type="hidden" id="edit-app-uid" value="${html_encode(app.uid)}">
 
+                <h3 style="border-bottom: 1px solid #EEE; margin-top: 40px;">Basic Info</h3>
                 <label for="edit-app-title">Title</label>
                 <input type="text" id="edit-app-title" placeholder="My Awesome App!" value="${html_encode(app.title)}">
 
@@ -487,45 +488,6 @@ function generate_edit_app_section(app) {
                 <label for="edit-app-app-id">App ID</label>
                 <input type="text" style="width: 362px;" class="app-uid" value="${html_encode(app.uid)}" readonly>
 
-                <div>
-                    <input type="checkbox" id="edit-app-background" name="edit-app-background" value="true" style="margin-top:30px;" ${app.background ? 'checked' : ''}>
-                    <label for="edit-app-background" style="display: inline;">Run as a background process.</label>
-                </div>
-
-                <div>
-                    <input type="checkbox" id="edit-app-fullpage-on-landing" name="edit-app-fullpage-on-landing" value="true" style="margin-top:30px;" ${app.metadata?.fullpage_on_landing ? 'checked' : ''}>
-                    <label for="edit-app-fullpage-on-landing" style="display: inline;">Load in full-page mode when a user lands directly on this app.</label>
-                </div>
-
-                <div>
-                    <input type="checkbox" id="edit-app-maximize-on-start" name="edit-app-maximize-on-start" value="true" style="margin-top:30px;" ${maximize_on_start ? 'checked' : ''}>
-                    <label for="edit-app-maximize-on-start" style="display: inline;">Maximize window on start</label>
-                </div>
-                
-                <div>
-                    <label for="edit-app-window-width">Window Width</label>
-                    <input type="number" id="edit-app-window-width" placeholder="800" value="${html_encode(app.metadata?.window_size?.width ?? 800)}" style="width:200px;" ${maximize_on_start ? 'disabled' : ''}>
-                    <label for="edit-app-window-height">Window Height</label>
-                    <input type="number" id="edit-app-window-height" placeholder="600" value="${html_encode(app.metadata?.window_size?.height ?? 600)}" style="width:200px;" ${maximize_on_start ? 'disabled' : ''}>
-                </div>
-
-                <div style="margin-top:30px;">
-                    <label for="edit-app-window-top">Window Top</label>
-                    <input type="number" id="edit-app-window-top" placeholder="100" value="${app.metadata?.window_position?.top ? html_encode(app.metadata.window_position.top) : ''}" style="width:200px;" ${maximize_on_start ? 'disabled' : ''}>
-                    <label for="edit-app-window-left">Window Left</label>
-                    <input type="number" id="edit-app-window-left" placeholder="100" value="${app.metadata?.window_position?.left ? html_encode(app.metadata.window_position.left) : ''}" style="width:200px;" ${maximize_on_start ? 'disabled' : ''}>
-                </div>
-
-                <div style="margin-top:30px;">
-                    <input type="checkbox" id="edit-app-window-resizable" name="edit-app-window-resizable" value="true" ${app.metadata?.window_resizable ? 'checked' : ''}>
-                    <label for="edit-app-window-resizable" style="display: inline;">Window Resizable</label>
-                </div>
-
-                <div style="margin-top:30px;">
-                    <input type="checkbox" id="edit-app-hide-titlebar" name="edit-app-hide-titlebar" value="true" ${app.metadata?.hide_titlebar ? 'checked' : ''}>
-                    <label for="edit-app-hide-titlebar" style="display: inline;">Hide Titlebar</label>
-                </div>
-
                 <label for="edit-app-icon">Icon</label>
                 <div id="edit-app-icon" style="background-image:url(${!app.icon ? './img/app.svg' : html_encode(app.icon)});" ${app.icon ? 'data-url="' + html_encode(app.icon) + '"' : ''}>
                     <div id="change-app-icon">Change App Icon</div>
@@ -539,6 +501,47 @@ function generate_edit_app_section(app) {
                 <p style="margin-top: 10px; font-size:13px;">A comma-separated list of file type specifiers. For example if you include <code>.txt</code>, your apps could be opened when a user clicks on a TXT file.</p>
                 <textarea id="edit-app-filetype-associations" placeholder=".txt, .jpg, application/json">${app.filetype_associations}</textarea>
 
+                <h3 style="border-bottom: 1px solid #EEE; margin-top: 50px; margin-bottom: 0px;">Window Settings</h3>
+                <div>
+                    <input type="checkbox" id="edit-app-background" name="edit-app-background" value="true" style="margin-top:30px;" ${app.background ? 'checked' : ''}>
+                    <label for="edit-app-background" style="display: inline;">Run as a background process.</label>
+                </div>
+
+                <div>
+                    <input type="checkbox" id="edit-app-fullpage-on-landing" name="edit-app-fullpage-on-landing" value="true" style="margin-top:30px;" ${app.metadata?.fullpage_on_landing ? 'checked' : ''} ${app.background ? 'disabled' : ''}>
+                    <label for="edit-app-fullpage-on-landing" style="display: inline;">Load in full-page mode when a user lands directly on this app.</label>
+                </div>
+
+                <div>
+                    <input type="checkbox" id="edit-app-maximize-on-start" name="edit-app-maximize-on-start" value="true" style="margin-top:30px;" ${maximize_on_start ? 'checked' : ''} ${app.background ? 'disabled' : ''}>
+                    <label for="edit-app-maximize-on-start" style="display: inline;">Maximize window on start</label>
+                </div>
+                
+                <div>
+                    <label for="edit-app-window-width">Initial window width</label>
+                    <input type="number" id="edit-app-window-width" placeholder="800" value="${html_encode(app.metadata?.window_size?.width ?? 800)}" style="width:200px;" ${maximize_on_start || app.background ? 'disabled' : ''}>
+                    <label for="edit-app-window-height">Initial window height</label>
+                    <input type="number" id="edit-app-window-height" placeholder="600" value="${html_encode(app.metadata?.window_size?.height ?? 600)}" style="width:200px;" ${maximize_on_start || app.background ? 'disabled' : ''}>
+                </div>
+
+                <div style="margin-top:30px;">
+                    <label for="edit-app-window-top">Initial window top</label>
+                    <input type="number" id="edit-app-window-top" placeholder="100" value="${app.metadata?.window_position?.top ? html_encode(app.metadata.window_position.top) : ''}" style="width:200px;" ${maximize_on_start || app.background ? 'disabled' : ''}>
+                    <label for="edit-app-window-left">Initial window left</label>
+                    <input type="number" id="edit-app-window-left" placeholder="100" value="${app.metadata?.window_position?.left ? html_encode(app.metadata.window_position.left) : ''}" style="width:200px;" ${maximize_on_start || app.background ? 'disabled' : ''}>
+                </div>
+
+                <div style="margin-top:30px;">
+                    <input type="checkbox" id="edit-app-window-resizable" name="edit-app-window-resizable" value="true" ${app.metadata?.window_resizable ? 'checked' : ''} ${app.background ? 'disabled' : ''}>
+                    <label for="edit-app-window-resizable" style="display: inline;">Resizable window</label>
+                </div>
+
+                <div style="margin-top:30px;">
+                    <input type="checkbox" id="edit-app-hide-titlebar" name="edit-app-hide-titlebar" value="true" ${app.metadata?.hide_titlebar ? 'checked' : ''} ${app.background ? 'disabled' : ''}>
+                    <label for="edit-app-hide-titlebar" style="display: inline;">Hide window titlebar</label>
+                </div>
+
+                <hr style="margin-top: 40px;">
                 <button type="button" class="edit-app-save-btn button button-primary">Save</button>
             </form>
         </div>
@@ -2084,4 +2087,30 @@ $(document).on('change', '#edit-app-maximize-on-start', function (e) {
         $('#edit-app-window-width, #edit-app-window-height').prop('disabled', false);
         $('#edit-app-window-top, #edit-app-window-left').prop('disabled', false);
     }
-})
\ No newline at end of file
+})
+
+$(document).on('change', '#edit-app-background', function (e) {
+    if($('#edit-app-background').is(":checked")){
+        disable_window_settings()
+    }else{
+        enable_window_settings()
+    }
+})
+
+function disable_window_settings(){
+    $('#edit-app-maximize-on-start').prop('disabled', true);
+    $('#edit-app-fullpage-on-landing').prop('disabled', true);
+    $('#edit-app-window-width, #edit-app-window-height').prop('disabled', true);
+    $('#edit-app-window-top, #edit-app-window-left').prop('disabled', true);
+    $('#edit-app-window-resizable').prop('disabled', true);
+    $('#edit-app-hide-titlebar').prop('disabled', true);
+}
+
+function enable_window_settings(){
+    $('#edit-app-maximize-on-start').prop('disabled', false);
+    $('#edit-app-fullpage-on-landing').prop('disabled', false);
+    $('#edit-app-window-width, #edit-app-window-height').prop('disabled', false);
+    $('#edit-app-window-top, #edit-app-window-left').prop('disabled', false);
+    $('#edit-app-window-resizable').prop('disabled', false);
+    $('#edit-app-hide-titlebar').prop('disabled', false);
+}
\ No newline at end of file