diff --git a/website/o3dv/settingssidebarpanel.js b/website/o3dv/settingssidebarpanel.js index 2184d2e..b3d8581 100644 --- a/website/o3dv/settingssidebarpanel.js +++ b/website/o3dv/settingssidebarpanel.js @@ -12,28 +12,21 @@ OV.SettingsSidebarPanel = class extends OV.SidebarPanel InitSettings (settings) { - let table = $('
').addClass ('ov_property_table').appendTo (this.contentDiv); - - let backgroundColorParams = settings.backgroundColor; - this.AddColorInput (table, backgroundColorParams, function (newVal) { - backgroundColorParams.onChange (newVal); - }); - + this.AddColorParameters (settings.backgroundColor, 'Background Color', 'Changing the background color affects only the visualization.'); + this.AddColorParameters (settings.defaultColor, 'Default Color', 'Default color is used when no material was defined in the file.'); } - AddColorInput (table, params, onChange) + AddColorParameters (params, title, description) { - let row = $('
').addClass ('ov_property_table_row').appendTo (table); - let nameColum = $('
').addClass ('ov_property_table_cell ov_property_table_name').appendTo (row); - let valueColumn = $('
').addClass ('ov_property_table_cell ov_property_table_value').appendTo (row); - nameColum.html (params.name + ':').attr ('title', params.name); - - let colorInput = $('').attr ('type', 'color').addClass ('ov_sidebar_color').appendTo (valueColumn); + $('
').addClass ('ov_sidebar_subtitle').html (title).appendTo (this.contentDiv); + let contentDiv = $('
').addClass ('ov_sidebar_settings_content').appendTo (this.contentDiv); + let colorColumn = $('
').addClass ('ov_sidebar_small_column').appendTo (contentDiv); + $('
').addClass ('ov_sidebar_column').html (description).appendTo (contentDiv); + let colorInput = $('').attr ('type', 'color').addClass ('ov_sidebar_color').appendTo (colorColumn); colorInput.val ('#' + OV.ColorToHexString (params.defaultValue)); - colorInput.change (function () { let colorStr = colorInput.val ().substr (1); - onChange (OV.HexStringToColor (colorStr)); - }); - } + params.onChange (OV.HexStringToColor (colorStr)); + }); + } }; diff --git a/website/o3dv/website.css b/website/o3dv/website.css index 51d4db8..eddad15 100644 --- a/website/o3dv/website.css +++ b/website/o3dv/website.css @@ -284,14 +284,37 @@ div.ov_sidebar_title img.ov_sidebar_title_img cursor: pointer; } +div.ov_sidebar_subtitle +{ + +} + div.ov_sidebar_content { overflow: auto; } +div.ov_sidebar_content div.ov_sidebar_settings_content +{ + margin: 10px 0px; + overflow: auto; +} + +div.ov_sidebar_content div.ov_sidebar_small_column +{ + width: 50px; + float: left; +} + +div.ov_sidebar_content div.ov_sidebar_column +{ + width: 250px; + float: left; +} + div.ov_sidebar_content input.ov_sidebar_color { - width: 64px; + width: 30px; height: 18px; } diff --git a/website/o3dv/website.js b/website/o3dv/website.js index b7312ef..4d75c20 100644 --- a/website/o3dv/website.js +++ b/website/o3dv/website.js @@ -450,13 +450,20 @@ OV.Website = class settingsPanel.InitSettings ({ backgroundColor : { - name : 'Background Color', defaultValue : this.viewerSettings.backgroundColor, onChange : function (newVal) { obj.viewerSettings.backgroundColor = newVal; obj.viewer.SetBackgroundColor (newVal); obj.cookieHandler.SetColorVal ('ov_background_color', newVal); } + }, + defaultColor : { + defaultValue : this.importSettings.defaultColor, + onChange : function (newVal) { + obj.importSettings.defaultColor = newVal; + obj.cookieHandler.SetColorVal ('ov_default_color', newVal); + obj.ReloadFiles (); + } } });