Doni/ModelHandle
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add theme settings to sidebar panel.

Browse Source
This commit is contained in:
kovacsv 2021-09-02 21:03:14 +02:00
parent e956c40ffe
commit 197c2542b5
7 changed files with 51 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
website/o3dv/css/controls.css
View File

@ -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)
{

5
website/o3dv/css/dialogs.css
View File

@ -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);

8
website/o3dv/css/website.css
View File

@ -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;

2
website/o3dv/js/exportdialog.js
View File

@ -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);

30
website/o3dv/js/settingssidebarpanel.js
View File

@ -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));

2
website/o3dv/js/sharingdialog.js
View File

@ -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'));

16
website/o3dv/js/website.js
View File

@ -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);
}
}
);