From 27b13f9a7cfca223731f60731ae5f33388a9355d Mon Sep 17 00:00:00 2001
From: kovacsv <viktorkovacs@gmail.com>
Date: Sun, 10 Oct 2021 10:34:51 +0200
Subject: [PATCH] Custom checkbox and radio button style.

---
 website/o3dv/css/O3DVIcons/checkmark.svg | 41 ++++++++++++++++++++++
 website/o3dv/css/controls.css            | 44 ++++++++++++++++++++++++
 website/o3dv/css/dialogs.css             |  6 ----
 website/o3dv/css/website.css             |  6 ++++
 website/o3dv/js/settingssidebarpanel.js  |  4 +--
 website/o3dv/js/sharingdialog.js         |  7 ++--
 6 files changed, 97 insertions(+), 11 deletions(-)
 create mode 100644 website/o3dv/css/O3DVIcons/checkmark.svg

diff --git a/website/o3dv/css/O3DVIcons/checkmark.svg b/website/o3dv/css/O3DVIcons/checkmark.svg
new file mode 100644
index 0000000..a96c5d1
--- /dev/null
+++ b/website/o3dv/css/O3DVIcons/checkmark.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   id="logo"
+   version="1.1"
+   viewBox="0 0 14 14"
+   xml:space="preserve"
+   sodipodi:docname="checkmark.svg"
+   width="14"
+   height="14"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview38"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="true"
+     inkscape:zoom="25.966667"
+     inkscape:cx="8.9922978"
+     inkscape:cy="11.803594"
+     inkscape:window-width="1920"
+     inkscape:window-height="1017"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="logo"><inkscape:grid
+       type="xygrid"
+       id="grid941" /></sodipodi:namedview><defs
+     id="defs5"><clipPath
+       id="d-5"><path
+         id="use2"
+         d="M -5,-1 H 57 V 61 H -5 Z" /></clipPath></defs><path
+     style="fill:none;stroke:#fafafa;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 3,7 3,3 5,-6"
+     id="path982"
+     sodipodi:nodetypes="ccc" /></svg>
diff --git a/website/o3dv/css/controls.css b/website/o3dv/css/controls.css
index 999a5a3..40b5a16 100644
--- a/website/o3dv/css/controls.css
+++ b/website/o3dv/css/controls.css
@@ -74,14 +74,58 @@ div.ov_tooltip
 	box-shadow: var(--ov_shadow);
 }
 
+input.ov_dialog_text
+{
+	color: var(--ov_dialog_foreground_color);
+	background: var(--ov_dialog_background_color);
+}
+
 input.ov_radio_button
 {
 	margin-right: 10px;
 }
 
+input.ov_radio_button
+{
+	position: relative;
+	top: 2px;
+	width: 14px;
+	height: 14px;
+	margin-right: 10px;
+	border: 1px solid var(--ov_foreground_color);
+	border-radius: 50%;
+	transition: 0.2s all linear;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+}
+
+input.ov_radio_button:checked
+{
+	border: 5px solid var(--ov_button_color);
+}
+
 input.ov_checkbox
 {
+	position: relative;
+	top: 4px;
+	width: 14px;
+	height: 14px;
 	margin-right: 10px;
+	border-radius: 2px;
+	border: 1px solid var(--ov_foreground_color);
+	transition: 0.2s all linear;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+}
+
+input.ov_checkbox:checked
+{
+	background-color: var(--ov_button_color);
+	background-image: url('O3DVIcons/checkmark.svg');
+	background-position: center;
+	border: 0px;
 }
 
 @media (hover)
diff --git a/website/o3dv/css/dialogs.css b/website/o3dv/css/dialogs.css
index c72255e..848167a 100644
--- a/website/o3dv/css/dialogs.css
+++ b/website/o3dv/css/dialogs.css
@@ -13,12 +13,6 @@ div.ov_dialog
 	border-radius: 5px;
 }
 
-div.ov_dialog input
-{
-	color: var(--ov_dialog_foreground_color);
-	background: var(--ov_dialog_background_color);
-}
-
 div.ov_dialog textarea
 {
 	color: var(--ov_dialog_foreground_color);
diff --git a/website/o3dv/css/website.css b/website/o3dv/css/website.css
index 684f5ae..1c685ab 100644
--- a/website/o3dv/css/website.css
+++ b/website/o3dv/css/website.css
@@ -257,6 +257,12 @@ div.ov_sidebar_content div.ov_sidebar_settings_row
 }
 
 div.ov_sidebar_content div.ov_sidebar_settings_padded
+{
+	margin: 10px 0px 0px 40px;
+	float: left;
+}
+
+div.ov_sidebar_content div.ov_sidebar_settings_comment
 {
 	color: var(--ov_light_icon_color);
 	margin: 10px 0px 0px 40px;
diff --git a/website/o3dv/js/settingssidebarpanel.js b/website/o3dv/js/settingssidebarpanel.js
index 9a4a2d2..8d825f5 100644
--- a/website/o3dv/js/settingssidebarpanel.js
+++ b/website/o3dv/js/settingssidebarpanel.js
@@ -99,10 +99,10 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel
             );
             onChange (ovColor);
         });
-        $('<div>').addClass ('ov_sidebar_settings_padded').html (description).appendTo (contentDiv);
+        $('<div>').addClass ('ov_sidebar_settings_comment').html (description).appendTo (contentDiv);
         let warningDiv = null;
         if (warningText !== null) {
-            warningDiv = $('<div>').addClass ('ov_sidebar_settings_padded').appendTo (contentDiv);
+            warningDiv = $('<div>').addClass ('ov_sidebar_settings_comment').appendTo (contentDiv);
             OV.CreateSvgIcon (warningDiv, 'warning', 'left_inline light');
             $('<div>').addClass ('ov_sidebar_settings_warning').html (warningText).appendTo (warningDiv);
         }
diff --git a/website/o3dv/js/sharingdialog.js b/website/o3dv/js/sharingdialog.js
index a83cbe3..4bf926a 100644
--- a/website/o3dv/js/sharingdialog.js
+++ b/website/o3dv/js/sharingdialog.js
@@ -3,8 +3,9 @@ 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_checkbox').attr ('id', id).appendTo (line);
-        $('<label>').attr ('for', id).html (text).appendTo (line);
+        let label = $('<label>').attr ('for', id).appendTo (line);
+        let check = $('<input>').attr ('type', 'checkbox').attr ('checked', 'true').addClass ('ov_checkbox').attr ('id', id).appendTo (label);
+        $('<span>').html (text).appendTo (label);
         check.change (() => {
             onChange (check.prop ('checked'));
         });
@@ -41,7 +42,7 @@ OV.ShowSharingDialog = function (importer, settings, camera)
         let copyText = 'Copy';
         let copiedText = 'Copied';
         let container = $('<div>').addClass ('ov_dialog_copyable_input').appendTo (parentDiv);
-        let input = $('<input>').prop ('readonly', true).appendTo (container);
+        let input = $('<input>').addClass ('ov_dialog_text').prop ('readonly', true).appendTo (container);
         let button = $('<div>').addClass ('ov_button').addClass ('outline').addClass ('ov_dialog_copyable_input_button').html (copyText).appendTo (container);
         button.click (() => {
             OV.CopyToClipboard (getText ());