From 197c2542b508514b2c92210cd44bb17aa81545fe Mon Sep 17 00:00:00 2001
From: kovacsv <viktorkovacs@gmail.com>
Date: Thu, 2 Sep 2021 21:03:14 +0200
Subject: [PATCH] Add theme settings to sidebar panel.

---
 website/o3dv/css/controls.css           | 10 +++++++++
 website/o3dv/css/dialogs.css            |  5 -----
 website/o3dv/css/website.css            |  8 ++++++-
 website/o3dv/js/exportdialog.js         |  2 +-
 website/o3dv/js/settingssidebarpanel.js | 30 +++++++++++++++++++++++--
 website/o3dv/js/sharingdialog.js        |  2 +-
 website/o3dv/js/website.js              | 16 ++++---------
 7 files changed, 51 insertions(+), 22 deletions(-)

diff --git a/website/o3dv/css/controls.css b/website/o3dv/css/controls.css
index cbf2421..999a5a3 100644
--- a/website/o3dv/css/controls.css
+++ b/website/o3dv/css/controls.css
@@ -74,6 +74,16 @@ div.ov_tooltip
 	box-shadow: var(--ov_shadow);
 }
 
+input.ov_radio_button
+{
+	margin-right: 10px;
+}
+
+input.ov_checkbox
+{
+	margin-right: 10px;
+}
+
 @media (hover)
 {
 
diff --git a/website/o3dv/css/dialogs.css b/website/o3dv/css/dialogs.css
index d665397..285f077 100644
--- a/website/o3dv/css/dialogs.css
+++ b/website/o3dv/css/dialogs.css
@@ -150,11 +150,6 @@ div.ov_dialog div.ov_dialog_row
 	overflow: auto;
 }
 
-div.ov_dialog input.ov_dialog_checkradio
-{
-	margin-right: 10px;
-}
-
 div.ov_popup
 {
 	color: var(--ov_dialog_foreground_color);
diff --git a/website/o3dv/css/website.css b/website/o3dv/css/website.css
index 339e144..a40f2b3 100644
--- a/website/o3dv/css/website.css
+++ b/website/o3dv/css/website.css
@@ -246,7 +246,13 @@ div.ov_sidebar_content div.ov_sidebar_settings_content
 	overflow: auto;
 }
 
-div.ov_sidebar_content div.ov_sidebar_settings_description
+div.ov_sidebar_content div.ov_sidebar_settings_row
+{
+	margin: 5px 0px;
+	overflow: auto;
+}
+
+div.ov_sidebar_content div.ov_sidebar_settings_padded
 {
 	color: var(--ov_light_icon_color);
 	margin: 10px 0px 0px 40px;
diff --git a/website/o3dv/js/exportdialog.js b/website/o3dv/js/exportdialog.js
index 099c044..90e73ca 100644
--- a/website/o3dv/js/exportdialog.js
+++ b/website/o3dv/js/exportdialog.js
@@ -136,7 +136,7 @@ OV.ExportDialog = class
         for (let i = 0; i < exportFormat.formats.length; i++) {
             let format = exportFormat.formats[i];
             let formatDiv = $('<div>').addClass ('ov_dialog_row').appendTo (this.formatParameters.formatSettingsDiv);
-            let formatInput = $('<input>').addClass ('ov_dialog_checkradio').attr ('type', 'radio').attr ('id', format.name).attr ('name', 'format').appendTo (formatDiv);
+            let formatInput = $('<input>').addClass ('ov_radio_button').attr ('type', 'radio').attr ('id', format.name).attr ('name', 'format').appendTo (formatDiv);
             $('<label>').attr ('for', format.name).html (format.name).appendTo (formatDiv);
             if (i === 0) {
                 formatInput.prop ('checked', true);
diff --git a/website/o3dv/js/settingssidebarpanel.js b/website/o3dv/js/settingssidebarpanel.js
index 007cc5d..4aaf62f 100644
--- a/website/o3dv/js/settingssidebarpanel.js
+++ b/website/o3dv/js/settingssidebarpanel.js
@@ -37,6 +37,7 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
             settings.defaultColor,
             callbacks.onDefaultColorChange
         );
+        this.AddThemeParameter (settings.themeId, callbacks.onThemeChange);
         this.AddResetToDefaultsButton (defaultSettings, callbacks);
     }
 
@@ -95,10 +96,10 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
             );
             onChange (ovColor);
         });
-        $('<div>').addClass ('ov_sidebar_settings_description').html (description).appendTo (contentDiv);
+        $('<div>').addClass ('ov_sidebar_settings_padded').html (description).appendTo (contentDiv);
         let warningDiv = null;
         if (warningText !== null) {
-            warningDiv = $('<div>').addClass ('ov_sidebar_settings_description').appendTo (contentDiv);
+            warningDiv = $('<div>').addClass ('ov_sidebar_settings_padded').appendTo (contentDiv);
             OV.CreateSvgIcon (warningDiv, 'warning', 'left_inline light');
             $('<div>').addClass ('ov_sidebar_settings_warning').html (warningText).appendTo (warningDiv);
         }
@@ -108,8 +109,33 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
         };
     }
 
+    AddThemeParameter (defaultValue, onChange)
+    {
+        function AddRadioButton (contentDiv, defaultValue, themeId, themeName, onChange)
+        {
+            let row = $('<div>').addClass ('ov_sidebar_settings_row').appendTo (contentDiv);
+            let radio = $('<input>').addClass ('ov_radio_button').attr ('type', 'radio').attr ('id', themeId).attr ('name', 'theme').appendTo (row);
+            $('<label>').attr ('for', themeId).html (themeName).appendTo (row);
+            radio.prop ('checked', themeId === defaultValue);
+            radio.change (() => {
+                onChange (themeId);
+            });
+        }
+
+        let contentDiv = $('<div>').addClass ('ov_sidebar_settings_content').appendTo (this.contentDiv);
+        // TODO: icon
+        let titleDiv = $('<div>').addClass ('ov_sidebar_subtitle').html ('Appearance').appendTo (contentDiv);
+        let buttonsDiv = $('<div>').addClass ('ov_sidebar_settings_padded').appendTo (contentDiv);
+        AddRadioButton (buttonsDiv, defaultValue, OV.Theme.Light, 'Light', onChange);
+        AddRadioButton (buttonsDiv, defaultValue, OV.Theme.Dark, 'Dark', onChange);
+        AddRadioButton (buttonsDiv, defaultValue, OV.Theme.System, 'System', onChange);
+        return;
+
+    }
+
     AddResetToDefaultsButton (defaultSettings, callbacks)
     {
+        // TODO: reset appearance
         let resetToDefaultsButton = $('<div>').addClass ('ov_button').addClass ('outline').addClass ('ov_sidebar_button').html ('Reset to Default').appendTo (this.contentDiv);
         resetToDefaultsButton.click (() => {
             this.backgroundColorInput.pickr.setColor ('#' + OV.ColorToHexString (defaultSettings.backgroundColor));
diff --git a/website/o3dv/js/sharingdialog.js b/website/o3dv/js/sharingdialog.js
index 4f34447..34fecda 100644
--- a/website/o3dv/js/sharingdialog.js
+++ b/website/o3dv/js/sharingdialog.js
@@ -3,7 +3,7 @@ OV.ShowSharingDialog = function (importer, settings, camera)
     function AddCheckboxLine (parentDiv, text, id, onChange)
     {
         let line = $('<div>').addClass ('ov_dialog_row').appendTo (parentDiv);
-        let check = $('<input>').attr ('type', 'checkbox').attr ('checked', 'true').addClass ('ov_dialog_checkradio').attr ('id', id).appendTo (line);
+        let check = $('<input>').attr ('type', 'checkbox').attr ('checked', 'true').addClass ('ov_checkbox').attr ('id', id).appendTo (line);
         $('<label>').attr ('for', id).html (text).appendTo (line);
         check.change (() => {
             onChange (check.prop ('checked'));
diff --git a/website/o3dv/js/website.js b/website/o3dv/js/website.js
index ac78322..6778e5f 100644
--- a/website/o3dv/js/website.js
+++ b/website/o3dv/js/website.js
@@ -288,7 +288,7 @@ OV.Website = class
                 this.settings.backgroundColor = new OV.Color (255, 255, 255);
                 this.settings.defaultColor = new OV.Color (200, 200, 200);
             } else if (calculatedTheme === OV.Theme.Dark) {
-                this.settings.backgroundColor = new OV.Color (0, 0, 0);
+                this.settings.backgroundColor = new OV.Color (42, 43, 46);
                 this.settings.defaultColor = new OV.Color (200, 200, 200);
             } else {
                 return;
@@ -412,17 +412,6 @@ OV.Website = class
             this.dialog = OV.ShowSharingDialog (importer, this.settings, this.viewer.GetCamera ());
         });
 
-        // TODO: remove
-        AddButton (this.toolbar, this.eventHandler, 'share', 'Dark Mode', true, () => {
-            let themeId = OV.Theme.Light;
-            if (this.settings.themeId === OV.Theme.Dark) {
-                themeId = OV.Theme.Light;
-            } else {
-                themeId = OV.Theme.Dark;
-            }
-            this.SwitchTheme (themeId, true);
-        });        
-
         this.parameters.fileInput.on ('change', (ev) => {
             if (ev.target.files.length > 0) {
                 this.eventHandler.HandleEvent ('model_load_started', { source : 'open_file' });
@@ -587,6 +576,9 @@ OV.Website = class
                         this.modelLoader.ReplaceDefaultMaterialColor (newVal);
                     }
                     this.viewer.Render ();
+                },
+                onThemeChange : (newVal) => {
+                    this.SwitchTheme (newVal, true);
                 }
             }
         );