From b59f52ae77bdf069f9c37be04567c1bee8e672d4 Mon Sep 17 00:00:00 2001 From: kovacsv Date: Wed, 15 Dec 2021 18:15:48 +0100 Subject: [PATCH] Add toggle button for edge settings and dark mode. --- source/viewer/domutils.js | 44 ++++++++++++++++ website/o3dv/css/controls.css | 32 ++++++++++++ website/o3dv/css/sidebar.css | 7 +++ website/o3dv/js/sidebarsettingspanel.js | 69 +++++++++---------------- 4 files changed, 106 insertions(+), 46 deletions(-) diff --git a/source/viewer/domutils.js b/source/viewer/domutils.js index 09b69d0..982cf57 100644 --- a/source/viewer/domutils.js +++ b/source/viewer/domutils.js @@ -164,6 +164,50 @@ OV.SelectRadioButton = function (radioButtons, selectedId) } }; +OV.AddToggle = function (parentElement, className) +{ + function UpdateStatus (toggle, status) + { + if (status) { + toggle.classList.add ('on'); + } else { + toggle.classList.remove ('on'); + } + } + + let status = false; + let onChange = null; + + let toggleClassName = 'ov_toggle'; + if (className) { + toggleClassName += ' ' + className; + } + let toggle = OV.AddDiv (parentElement, toggleClassName); + OV.AddDiv (toggle, 'ov_toggle_slider'); + + toggle.addEventListener ('click', () => { + status = !status; + UpdateStatus (toggle, status); + if (onChange) { + onChange (); + } + }); + + return { + element : toggle, + GetStatus : () => { + return status; + }, + SetStatus : (newStatus) => { + status = newStatus; + UpdateStatus (toggle, status); + }, + OnChange : (onChangeHandler) => { + onChange = onChangeHandler; + } + }; +}; + OV.CreateDiv = function (className, innerHTML) { return OV.CreateDomElement ('div', className, innerHTML); diff --git a/website/o3dv/css/controls.css b/website/o3dv/css/controls.css index f683a9e..162dd01 100644 --- a/website/o3dv/css/controls.css +++ b/website/o3dv/css/controls.css @@ -166,6 +166,38 @@ span.ov_slider_label bottom: -4px; } +div.ov_toggle +{ + width: 24px; + height: 8px; + padding: 2px; + transition: 0.4s; + border: 1px solid var(--ov_foreground_color); + border-radius: 10px; + cursor: pointer; +} + +div.ov_toggle_slider +{ + width: 6px; + height: 6px; + transition: .4s; + border-radius: 8px; + border: 1px solid var(--ov_foreground_color); +} + +div.ov_toggle.on +{ + background: var(--ov_foreground_color); +} + +div.ov_toggle.on div.ov_toggle_slider +{ + background: var(--ov_background_color); + transform: translateX(16px); + border: 1px solid var(--ov_background_color); +} + @media (hover) { diff --git a/website/o3dv/css/sidebar.css b/website/o3dv/css/sidebar.css index 37d3db6..12000e6 100644 --- a/website/o3dv/css/sidebar.css +++ b/website/o3dv/css/sidebar.css @@ -27,6 +27,13 @@ div.ov_sidebar_subtitle overflow: hidden; } +div.ov_sidebar_subtitle div.ov_sidebar_subtitle_toggle +{ + margin-right: 10px; + margin-top: 3px; + float: left; +} + div.ov_sidebar_subtitle div.ov_sidebar_subtitle_icon { width: 30px; diff --git a/website/o3dv/js/sidebarsettingspanel.js b/website/o3dv/js/sidebarsettingspanel.js index 593de97..2b5880f 100644 --- a/website/o3dv/js/sidebarsettingspanel.js +++ b/website/o3dv/js/sidebarsettingspanel.js @@ -83,7 +83,7 @@ OV.SettingsEdgeDisplaySection = class constructor (parentDiv) { this.parentDiv = parentDiv; - this.buttons = null; + this.edgeDisplayToggle = null; this.pickr = null; this.thresholdSlider = null; this.thresholdSliderValue = null; @@ -92,19 +92,17 @@ OV.SettingsEdgeDisplaySection = class Init (showEdges, edgeColor, edgeThreshold, callbacks) { - function AddRadioButton (contentDiv, id, text, onChange) - { - let row = OV.AddDiv (contentDiv, 'ov_sidebar_settings_row'); - return OV.AddRadioButton (row, 'edge_display', id, text, onChange); - } - let contentDiv = OV.AddDiv (this.parentDiv, 'ov_sidebar_settings_content'); let titleDiv = OV.AddDiv (contentDiv, 'ov_sidebar_subtitle'); - OV.AddSvgIconElement (titleDiv, 'edges', 'ov_sidebar_subtitle_icon'); - OV.AddDiv (titleDiv, 'ov_sidebar_subtitle_text', 'Edge Display'); - let buttonsDiv = OV.AddDiv (contentDiv, 'ov_sidebar_settings_padded'); + this.edgeDisplayToggle = OV.AddToggle (titleDiv, 'ov_sidebar_subtitle_toggle'); + OV.AddDiv (titleDiv, 'ov_sidebar_subtitle_text', 'Show Edges'); + this.edgeSettingsDiv = OV.AddDiv (contentDiv, 'ov_sidebar_settings_padded'); + this.edgeDisplayToggle.OnChange (() => { + OV.ShowDomElement (this.edgeSettingsDiv, this.edgeDisplayToggle.GetStatus ()); + callbacks.onShowEdgesChange (this.edgeDisplayToggle.GetStatus () ? true : false); + }); let edgeColorRow = OV.AddDiv (this.edgeSettingsDiv, 'ov_sidebar_settings_row'); let predefinedEdgeColors = ['#ffffff', '#e3e3e3', '#c9c9c9', '#898989', '#5f5f5f', '#494949', '#383838', '#0f0f0f']; @@ -128,29 +126,19 @@ OV.SettingsEdgeDisplaySection = class this.thresholdSlider.value = edgeThreshold; this.thresholdSliderValue.innerHTML = edgeThreshold; - this.buttons = []; - let offButton = AddRadioButton (buttonsDiv, 'off', 'Don\'t Show Edges', () => { - OV.ShowDomElement (this.edgeSettingsDiv, false); - callbacks.onShowEdgesChange (false); - }); - let onButton = AddRadioButton (buttonsDiv, 'on', 'Show Edges', () => { - OV.ShowDomElement (this.edgeSettingsDiv, true); - callbacks.onShowEdgesChange (true); - }); - this.buttons.push (offButton); - this.buttons.push (onButton); - - OV.SelectRadioButton (this.buttons, showEdges ? 'on' : 'off'); + this.edgeDisplayToggle.SetStatus (showEdges); this.ShowEdgeSettings (showEdges); } Update (showEdges, edgeColor, edgeThreshold) { - if (this.buttons === null) { + if (this.edgeDisplayToggle === null) { return; } - OV.SelectRadioButton (this.buttons, showEdges ? 'on' : 'off'); + + this.edgeDisplayToggle.SetStatus (showEdges); this.ShowEdgeSettings (showEdges); + this.pickr.setColor ('#' + OV.ColorToHexString (edgeColor)); this.thresholdSlider.value = edgeThreshold; this.thresholdSliderValue.innerHTML = edgeThreshold; @@ -175,42 +163,31 @@ OV.SettingsThemeSection = class constructor (parentDiv) { this.parentDiv = parentDiv; - this.buttons = null; + this.darkModeToggle = null; } Init (themeId, onChange) { - function AddRadioButton (contentDiv, themeId, themeName, onChange) - { - let row = OV.AddDiv (contentDiv, 'ov_sidebar_settings_row'); - return OV.AddRadioButton (row, 'theme', themeId.toString (), themeName, onChange); - } - let contentDiv = OV.AddDiv (this.parentDiv, 'ov_sidebar_settings_content'); let titleDiv = OV.AddDiv (contentDiv, 'ov_sidebar_subtitle'); - OV.AddSvgIconElement (titleDiv, 'theme', 'ov_sidebar_subtitle_icon'); - OV.AddDiv (titleDiv, 'ov_sidebar_subtitle_text', 'Appearance'); - let buttonsDiv = OV.AddDiv (contentDiv, 'ov_sidebar_settings_padded'); - this.buttons = []; - let lightButton = AddRadioButton (buttonsDiv, OV.Theme.Light, 'Light', () => { - onChange (OV.Theme.Light); + this.darkModeToggle = OV.AddToggle (titleDiv, 'ov_sidebar_subtitle_toggle'); + this.darkModeToggle.OnChange (() => { + onChange (this.darkModeToggle.GetStatus () ? OV.Theme.Dark : OV.Theme.Light); }); - let darkButton = AddRadioButton (buttonsDiv, OV.Theme.Dark, 'Dark', () => { - onChange (OV.Theme.Dark); - }); - this.buttons.push (lightButton); - this.buttons.push (darkButton); + OV.AddDiv (titleDiv, 'ov_sidebar_subtitle_text', 'Dark Mode'); - OV.SelectRadioButton (this.buttons, themeId.toString ()); + let isDarkMode = (themeId === OV.Theme.Dark); + this.darkModeToggle.SetStatus (isDarkMode); } Update (themeId) { - if (this.buttons === null) { + if (this.darkModeToggle === null) { return; } - OV.SelectRadioButton (this.buttons, themeId.toString ()); + let isDarkMode = (themeId === OV.Theme.Dark); + this.darkModeToggle.SetStatus (isDarkMode); } };