Option to switch between themes without opening a model #400
This commit is contained in:
kovacsv
parent
1ec2f1df36
commit
8edce119cd
47
assets/icons/dark_mode.svg
Normal file
47
assets/icons/dark_mode.svg
Normal file
@ -0,0 +1,47 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
id="svg135"
|
||||
sodipodi:docname="dark_mode.svg"
|
||||
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
|
||||
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">
|
||||
<defs
|
||||
id="defs139" />
|
||||
<sodipodi:namedview
|
||||
id="namedview137"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
showgrid="true"
|
||||
inkscape:zoom="46.055556"
|
||||
inkscape:cx="9.0108565"
|
||||
inkscape:cy="9.0108565"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1009"
|
||||
inkscape:window-x="-8"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg135">
|
||||
<inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid258" />
|
||||
</sodipodi:namedview>
|
||||
<path
|
||||
d="m 14.549269,10.694684 c -0.553199,0.294 -1.158998,0.4762 -1.782596,0.5362 -0.623699,0.0599 -1.253097,-0.0036 -1.852096,-0.1868 C 9.7046806,10.673884 8.6912631,9.8382841 8.0973845,8.7209636 7.503516,7.6036735 7.3778863,6.2961934 7.7479854,5.0862633 8.1180745,3.8762832 8.9538324,2.8629431 10.07108,2.2690631 10.446179,2.078573 10.844178,1.936763 11.255277,1.847103 9.7371805,1.368443 8.1061045,1.385213 6.5980782,1.894973 5.0901819,2.4047431 3.783475,3.3810931 2.8671473,4.6827732 1.9509495,5.9844034 1.4725007,7.5437935 1.5012206,9.135404 c 0.02872,1.59158 0.5631086,3.13268 1.5257163,4.40038 0.9627476,1.2677 2.3037644,2.196301 3.8290807,2.651201 1.5254462,0.4551 3.1559624,0.4129 4.6558584,-0.1201 1.499796,-0.5332 2.791293,-1.529701 3.687191,-2.845401 0.895898,-1.3157 1.350197,-2.8824 1.296697,-4.4733304 -0.438499,0.8297304 -1.116897,1.5080304 -1.946495,1.9464304 z"
|
||||
stroke="#263238"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
id="path133"
|
||||
style="stroke-width:0.999999" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
50
assets/icons/light_mode.svg
Normal file
50
assets/icons/light_mode.svg
Normal file
@ -0,0 +1,50 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
version="1.1"
|
||||
id="svg4"
|
||||
sodipodi:docname="light_mode.svg"
|
||||
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
|
||||
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">
|
||||
<defs
|
||||
id="defs8" />
|
||||
<sodipodi:namedview
|
||||
id="namedview6"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
showgrid="true"
|
||||
inkscape:zoom="46.055556"
|
||||
inkscape:cx="9.0325693"
|
||||
inkscape:cy="9.0325693"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1009"
|
||||
inkscape:window-x="-8"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg4">
|
||||
<inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid423" />
|
||||
</sodipodi:namedview>
|
||||
<g
|
||||
id="heroicons-outline/sun"
|
||||
transform="translate(-0.5,-0.5)">
|
||||
<path
|
||||
id="Vector"
|
||||
d="m 9,2.25 v 1.6875 m 4.773,0.28953 -1.1933,1.19324 M 15.75,9 H 14.0625 M 13.773,13.773 12.5797,12.5797 M 9,14.0625 V 15.75 M 5.42027,12.5797 4.22703,13.773 M 3.9375,9 H 2.25 M 5.42027,5.42027 4.22703,4.22703 M 11.8125,9 c 0,1.5533 -1.2592,2.8125 -2.8125,2.8125 C 7.4467,11.8125 6.1875,10.5533 6.1875,9 6.1875,7.4467 7.4467,6.1875 9,6.1875 c 1.5533,0 2.8125,1.2592 2.8125,2.8125 z"
|
||||
stroke="#263238"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
@ -1,6 +1,6 @@
|
||||
@font-face {
|
||||
font-family: "O3DVIcons";
|
||||
src: url("O3DVIcons/O3DVIcons.woff?5b9efabdc2c1ef6b3990e38a69a1fb39") format("woff");
|
||||
src: url("O3DVIcons/O3DVIcons.woff?d27bdb5af135068ed4a9350e285e132e") format("woff");
|
||||
}
|
||||
|
||||
i[class^="icon-"]:before, i[class*=" icon-"]:before {
|
||||
@ -38,120 +38,126 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
|
||||
.icon-collapse:before {
|
||||
content: "\f108";
|
||||
}
|
||||
.icon-deisolate:before {
|
||||
.icon-dark_mode:before {
|
||||
content: "\f109";
|
||||
}
|
||||
.icon-details:before {
|
||||
.icon-deisolate:before {
|
||||
content: "\f10a";
|
||||
}
|
||||
.icon-donate:before {
|
||||
.icon-details:before {
|
||||
content: "\f10b";
|
||||
}
|
||||
.icon-download:before {
|
||||
.icon-donate:before {
|
||||
content: "\f10c";
|
||||
}
|
||||
.icon-expand:before {
|
||||
.icon-download:before {
|
||||
content: "\f10d";
|
||||
}
|
||||
.icon-export:before {
|
||||
.icon-expand:before {
|
||||
content: "\f10e";
|
||||
}
|
||||
.icon-feedback:before {
|
||||
.icon-export:before {
|
||||
content: "\f10f";
|
||||
}
|
||||
.icon-file_download:before {
|
||||
.icon-feedback:before {
|
||||
content: "\f110";
|
||||
}
|
||||
.icon-files:before {
|
||||
.icon-file_download:before {
|
||||
content: "\f111";
|
||||
}
|
||||
.icon-fit:before {
|
||||
.icon-files:before {
|
||||
content: "\f112";
|
||||
}
|
||||
.icon-fix_up_off:before {
|
||||
.icon-fit:before {
|
||||
content: "\f113";
|
||||
}
|
||||
.icon-fix_up_on:before {
|
||||
.icon-fix_up_off:before {
|
||||
content: "\f114";
|
||||
}
|
||||
.icon-flat_list:before {
|
||||
.icon-fix_up_on:before {
|
||||
content: "\f115";
|
||||
}
|
||||
.icon-flip:before {
|
||||
.icon-flat_list:before {
|
||||
content: "\f116";
|
||||
}
|
||||
.icon-github:before {
|
||||
.icon-flip:before {
|
||||
content: "\f117";
|
||||
}
|
||||
.icon-hidden:before {
|
||||
.icon-github:before {
|
||||
content: "\f118";
|
||||
}
|
||||
.icon-info:before {
|
||||
.icon-hidden:before {
|
||||
content: "\f119";
|
||||
}
|
||||
.icon-isolate:before {
|
||||
.icon-info:before {
|
||||
content: "\f11a";
|
||||
}
|
||||
.icon-materials:before {
|
||||
.icon-isolate:before {
|
||||
content: "\f11b";
|
||||
}
|
||||
.icon-measure_angle:before {
|
||||
.icon-light_mode:before {
|
||||
content: "\f11c";
|
||||
}
|
||||
.icon-measure_distance_parallel:before {
|
||||
.icon-materials:before {
|
||||
content: "\f11d";
|
||||
}
|
||||
.icon-measure_distance:before {
|
||||
.icon-measure_angle:before {
|
||||
content: "\f11e";
|
||||
}
|
||||
.icon-measure:before {
|
||||
.icon-measure_distance_parallel:before {
|
||||
content: "\f11f";
|
||||
}
|
||||
.icon-meshes:before {
|
||||
.icon-measure_distance:before {
|
||||
content: "\f120";
|
||||
}
|
||||
.icon-missing_files:before {
|
||||
.icon-measure:before {
|
||||
content: "\f121";
|
||||
}
|
||||
.icon-model:before {
|
||||
.icon-meshes:before {
|
||||
content: "\f122";
|
||||
}
|
||||
.icon-open_url:before {
|
||||
.icon-missing_files:before {
|
||||
content: "\f123";
|
||||
}
|
||||
.icon-open:before {
|
||||
.icon-model:before {
|
||||
content: "\f124";
|
||||
}
|
||||
.icon-print3d:before {
|
||||
.icon-open_url:before {
|
||||
content: "\f125";
|
||||
}
|
||||
.icon-settings:before {
|
||||
.icon-open:before {
|
||||
content: "\f126";
|
||||
}
|
||||
.icon-share:before {
|
||||
.icon-print3d:before {
|
||||
content: "\f127";
|
||||
}
|
||||
.icon-snapshot:before {
|
||||
.icon-settings:before {
|
||||
content: "\f128";
|
||||
}
|
||||
.icon-tree_mesh:before {
|
||||
.icon-share:before {
|
||||
content: "\f129";
|
||||
}
|
||||
.icon-tree_view:before {
|
||||
.icon-snapshot:before {
|
||||
content: "\f12a";
|
||||
}
|
||||
.icon-twitter:before {
|
||||
.icon-tree_mesh:before {
|
||||
content: "\f12b";
|
||||
}
|
||||
.icon-up_y:before {
|
||||
.icon-tree_view:before {
|
||||
content: "\f12c";
|
||||
}
|
||||
.icon-up_z:before {
|
||||
.icon-twitter:before {
|
||||
content: "\f12d";
|
||||
}
|
||||
.icon-visible:before {
|
||||
.icon-up_y:before {
|
||||
content: "\f12e";
|
||||
}
|
||||
.icon-warning:before {
|
||||
.icon-up_z:before {
|
||||
content: "\f12f";
|
||||
}
|
||||
.icon-visible:before {
|
||||
content: "\f130";
|
||||
}
|
||||
.icon-warning:before {
|
||||
content: "\f131";
|
||||
}
|
||||
|
||||
@ -207,6 +207,11 @@ div.ov_toolbar div.ov_toolbar_button
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
div.ov_toolbar div.ov_toolbar_button.align_right
|
||||
{
|
||||
float: right;
|
||||
}
|
||||
|
||||
div.ov_toolbar div.ov_toolbar_button.selected
|
||||
{
|
||||
background: var(--ov_toolbar_selected_color);
|
||||
|
||||
@ -10,18 +10,24 @@ export const Theme =
|
||||
|
||||
export class Settings
|
||||
{
|
||||
constructor ()
|
||||
constructor (themeId)
|
||||
{
|
||||
this.themeId = themeId;
|
||||
this.environmentMapName = 'fishermans_bastion';
|
||||
this.backgroundIsEnvMap = false;
|
||||
if (this.themeId === Theme.Light) {
|
||||
this.backgroundColor = new RGBAColor (255, 255, 255, 255);
|
||||
this.defaultColor = new RGBColor (200, 200, 200);
|
||||
} else if (this.themeId === Theme.Dark) {
|
||||
this.backgroundColor = new RGBAColor (42, 43, 46, 255);
|
||||
this.defaultColor = new RGBColor (200, 200, 200);
|
||||
}
|
||||
this.edgeSettings = new EdgeSettings (false, new RGBColor (0, 0, 0), 1);
|
||||
this.themeId = Theme.Light;
|
||||
}
|
||||
|
||||
LoadFromCookies ()
|
||||
{
|
||||
this.themeId = CookieGetIntVal ('ov_theme_id', Theme.Light);
|
||||
this.environmentMapName = CookieGetStringVal ('ov_environment_map', 'fishermans_bastion');
|
||||
this.backgroundIsEnvMap = CookieGetBoolVal ('ov_background_is_envmap', false);
|
||||
this.backgroundColor = CookieGetRGBAColorVal ('ov_background_color', new RGBAColor (255, 255, 255, 255));
|
||||
@ -29,11 +35,11 @@ export class Settings
|
||||
this.edgeSettings.showEdges = CookieGetBoolVal ('ov_show_edges', false);
|
||||
this.edgeSettings.edgeColor = CookieGetRGBColorVal ('ov_edge_color', new RGBColor (0, 0, 0));
|
||||
this.edgeSettings.edgeThreshold = CookieGetIntVal ('ov_edge_threshold', 1);
|
||||
this.themeId = CookieGetIntVal ('ov_theme_id', Theme.Light);
|
||||
}
|
||||
|
||||
SaveToCookies ()
|
||||
{
|
||||
CookieSetIntVal ('ov_theme_id', this.themeId);
|
||||
CookieSetStringVal ('ov_environment_map', this.environmentMapName);
|
||||
CookieSetBoolVal ('ov_background_is_envmap', this.backgroundIsEnvMap);
|
||||
CookieSetRGBAColorVal ('ov_background_color', this.backgroundColor);
|
||||
@ -41,6 +47,5 @@ export class Settings
|
||||
CookieSetBoolVal ('ov_show_edges', this.edgeSettings.showEdges);
|
||||
CookieSetRGBColorVal ('ov_edge_color', this.edgeSettings.edgeColor);
|
||||
CookieSetIntVal ('ov_edge_threshold', this.edgeSettings.edgeThreshold);
|
||||
CookieSetIntVal ('ov_theme_id', this.themeId);
|
||||
}
|
||||
}
|
||||
|
||||
@ -62,13 +62,15 @@ export class Sidebar
|
||||
},
|
||||
onEdgeDisplayChanged : () => {
|
||||
this.callbacks.onEdgeDisplayChanged ();
|
||||
},
|
||||
onThemeChanged : () => {
|
||||
this.callbacks.onThemeChanged ();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
UpdateControlsStatus ()
|
||||
{
|
||||
this.settingsPanel.UpdateControlsStatus ();
|
||||
}
|
||||
|
||||
UpdateControlsVisibility ()
|
||||
{
|
||||
this.settingsPanel.UpdateControlsVisibility ();
|
||||
|
||||
@ -3,7 +3,7 @@ import { AddDiv, AddDomElement, ShowDomElement, SetDomElementOuterHeight } from
|
||||
import { AddRangeSlider, AddToggle, AddCheckbox } from '../website/utils.js';
|
||||
import { CalculatePopupPositionToElementTopLeft } from './dialogs.js';
|
||||
import { PopupDialog } from './dialog.js';
|
||||
import { Settings, Theme } from './settings.js';
|
||||
import { Settings } from './settings.js';
|
||||
import { SidebarPanel } from './sidebarpanel.js';
|
||||
import { ShadingType } from '../engine/threejs/threeutils.js';
|
||||
import { CameraMode } from '../engine/viewer/camera.js';
|
||||
@ -416,45 +416,6 @@ class SettingsImportParametersSection extends SettingsSection
|
||||
}
|
||||
}
|
||||
|
||||
class SettingsAppearanceSection extends SettingsSection
|
||||
{
|
||||
constructor (parentDiv, settings)
|
||||
{
|
||||
super (parentDiv, 'Appearance', settings);
|
||||
this.darkModeToggle = null;
|
||||
}
|
||||
|
||||
Init (callbacks)
|
||||
{
|
||||
super.Init (callbacks);
|
||||
|
||||
let darkModeParameterDiv = AddDiv (this.contentDiv, 'ov_sidebar_parameter');
|
||||
|
||||
this.darkModeToggle = AddToggle (darkModeParameterDiv, 'ov_sidebar_parameter_toggle');
|
||||
this.darkModeToggle.OnChange (() => {
|
||||
this.settings.themeId = (this.darkModeToggle.GetStatus () ? Theme.Dark : Theme.Light);
|
||||
this.callbacks.onThemeChanged ();
|
||||
});
|
||||
AddDiv (darkModeParameterDiv, null, 'Dark Mode');
|
||||
|
||||
let isDarkMode = (this.settings.themeId === Theme.Dark);
|
||||
this.darkModeToggle.SetStatus (isDarkMode);
|
||||
}
|
||||
|
||||
Update ()
|
||||
{
|
||||
if (this.darkModeToggle !== null) {
|
||||
let isDarkMode = (this.settings.themeId === Theme.Dark);
|
||||
this.darkModeToggle.SetStatus (isDarkMode);
|
||||
}
|
||||
}
|
||||
|
||||
UpdateVisibility ()
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export class SidebarSettingsPanel extends SidebarPanel
|
||||
{
|
||||
constructor (parentDiv, settings)
|
||||
@ -465,7 +426,6 @@ export class SidebarSettingsPanel extends SidebarPanel
|
||||
this.sectionsDiv = AddDiv (this.contentDiv, 'ov_sidebar_settings_sections ov_thin_scrollbar');
|
||||
this.modelDisplaySection = new SettingsModelDisplaySection (this.sectionsDiv, this.settings);
|
||||
this.importParametersSection = new SettingsImportParametersSection (this.sectionsDiv, this.settings);
|
||||
this.appearanceSection = new SettingsAppearanceSection (this.sectionsDiv, this.settings);
|
||||
|
||||
this.resetToDefaultsButton = AddDiv (this.contentDiv, 'ov_button ov_panel_button outline', 'Reset to Default');
|
||||
this.resetToDefaultsButton.addEventListener ('click', () => {
|
||||
@ -492,7 +452,6 @@ export class SidebarSettingsPanel extends SidebarPanel
|
||||
{
|
||||
this.modelDisplaySection.Clear ();
|
||||
this.importParametersSection.Clear ();
|
||||
this.appearanceSection.Clear ();
|
||||
}
|
||||
|
||||
Init (callbacks)
|
||||
@ -530,20 +489,12 @@ export class SidebarSettingsPanel extends SidebarPanel
|
||||
this.callbacks.onDefaultColorChanged ();
|
||||
}
|
||||
});
|
||||
this.appearanceSection.Init ({
|
||||
onThemeChanged : () => {
|
||||
if (this.settings.themeId === Theme.Light) {
|
||||
this.settings.backgroundColor = new RGBAColor (255, 255, 255, 255);
|
||||
this.settings.defaultColor = new RGBColor (200, 200, 200);
|
||||
} else if (this.settings.themeId === Theme.Dark) {
|
||||
this.settings.backgroundColor = new RGBAColor (42, 43, 46, 255);
|
||||
this.settings.defaultColor = new RGBColor (200, 200, 200);
|
||||
}
|
||||
|
||||
UpdateControlsStatus ()
|
||||
{
|
||||
this.modelDisplaySection.Update ();
|
||||
this.importParametersSection.Update ();
|
||||
callbacks.onThemeChanged ();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
UpdateControlsVisibility ()
|
||||
@ -555,7 +506,8 @@ export class SidebarSettingsPanel extends SidebarPanel
|
||||
|
||||
ResetToDefaults ()
|
||||
{
|
||||
let defaultSettings = new Settings ();
|
||||
console.log (this.settings.themeId);
|
||||
let defaultSettings = new Settings (this.settings.themeId);
|
||||
|
||||
this.settings.environmentMapName = defaultSettings.environmentMapName;
|
||||
this.settings.backgroundIsEnvMap = defaultSettings.backgroundIsEnvMap;
|
||||
@ -563,13 +515,9 @@ export class SidebarSettingsPanel extends SidebarPanel
|
||||
this.settings.defaultColor = defaultSettings.defaultColor;
|
||||
this.settings.edgeSettings = defaultSettings.edgeSettings;
|
||||
this.settings.themeId = defaultSettings.themeId;
|
||||
|
||||
this.modelDisplaySection.Update ();
|
||||
this.importParametersSection.Update ();
|
||||
this.appearanceSection.Update ();
|
||||
|
||||
console.log (this.settings.themeId);
|
||||
this.UpdateControlsStatus ();
|
||||
this.callbacks.onEnvironmentMapChanged ();
|
||||
this.callbacks.onThemeChanged ();
|
||||
}
|
||||
|
||||
Resize ()
|
||||
|
||||
@ -186,7 +186,7 @@ export class Website
|
||||
constructor (parameters)
|
||||
{
|
||||
this.parameters = parameters;
|
||||
this.settings = new Settings ();
|
||||
this.settings = new Settings (Theme.Light);
|
||||
this.viewer = new Viewer ();
|
||||
this.measureTool = new MeasureTool (this.viewer, this.settings);
|
||||
this.hashHandler = new HashHandler ();
|
||||
@ -566,8 +566,12 @@ export class Website
|
||||
{
|
||||
this.settings.themeId = newThemeId;
|
||||
this.themeHandler.SwitchTheme (this.settings.themeId);
|
||||
this.settings.SaveToCookies ();
|
||||
if (resetColors) {
|
||||
let defaultSettings = new Settings (this.settings.themeId);
|
||||
this.settings.backgroundColor = defaultSettings.backgroundColor;
|
||||
this.settings.defaultColor = defaultSettings.defaultColor;
|
||||
this.sidebar.UpdateControlsStatus ();
|
||||
|
||||
this.viewer.SetBackgroundColor (this.settings.backgroundColor);
|
||||
let modelLoader = this.modelLoaderUI.GetModelLoader ();
|
||||
if (modelLoader.GetDefaultMaterial () !== null) {
|
||||
@ -575,6 +579,8 @@ export class Website
|
||||
modelLoader.ReplaceDefaultMaterialColor (this.settings.defaultColor);
|
||||
}
|
||||
}
|
||||
|
||||
this.settings.SaveToCookies ();
|
||||
}
|
||||
|
||||
InitViewer ()
|
||||
@ -666,7 +672,7 @@ export class Website
|
||||
AddButton (this.toolbar, 'flip', 'Flip up vector', ['only_on_model'], () => {
|
||||
this.viewer.FlipUpVector ();
|
||||
});
|
||||
AddSeparator (this.toolbar, ['only_on_model']);
|
||||
AddSeparator (this.toolbar, ['only_full_width', 'only_on_model']);
|
||||
AddRadioButton (this.toolbar, ['fix_up_on', 'fix_up_off'], ['Fixed up vector', 'Free orbit'], 0, ['only_full_width', 'only_on_model'], (buttonIndex) => {
|
||||
if (buttonIndex === 0) {
|
||||
this.viewer.SetFixUpVector (true);
|
||||
@ -675,7 +681,7 @@ export class Website
|
||||
}
|
||||
});
|
||||
AddSeparator (this.toolbar, ['only_full_width', 'only_on_model']);
|
||||
AddRadioButton (this.toolbar, ['camera_perspective', 'camera_orthographic'], ['Perspective camera', 'Orthographic camera'], 0, ['only_on_model'], (buttonIndex) => {
|
||||
AddRadioButton (this.toolbar, ['camera_perspective', 'camera_orthographic'], ['Perspective camera', 'Orthographic camera'], 0, ['only_full_width', 'only_on_model'], (buttonIndex) => {
|
||||
if (buttonIndex === 0) {
|
||||
this.viewer.SetCameraMode (CameraMode.Perspective);
|
||||
} else if (buttonIndex === 1) {
|
||||
@ -725,6 +731,17 @@ export class Website
|
||||
});
|
||||
});
|
||||
|
||||
let selectedTheme = (this.settings.themeId === Theme.Light ? 1 : 0);
|
||||
AddRadioButton (this.toolbar, ['dark_mode', 'light_mode'], ['Dark mode', 'Light mode'], selectedTheme, ['align_right'], (buttonIndex) => {
|
||||
if (buttonIndex === 0) {
|
||||
this.settings.themeId = Theme.Dark;
|
||||
} else if (buttonIndex === 1) {
|
||||
this.settings.themeId = Theme.Light;
|
||||
}
|
||||
HandleEvent ('theme_changed', this.settings.themeId === Theme.Light ? 'light' : 'dark');
|
||||
this.SwitchTheme (this.settings.themeId, true);
|
||||
});
|
||||
|
||||
this.parameters.fileInput.addEventListener ('change', (ev) => {
|
||||
if (ev.target.files.length > 0) {
|
||||
HandleEvent ('model_load_started', 'open_file');
|
||||
@ -796,10 +813,6 @@ export class Website
|
||||
HandleEvent ('edge_display_changed', this.settings.showEdges ? 'on' : 'off');
|
||||
this.UpdateEdgeDisplay ();
|
||||
},
|
||||
onThemeChanged : () => {
|
||||
HandleEvent ('theme_changed', this.settings.themeId === Theme.Light ? 'light' : 'dark');
|
||||
this.SwitchTheme (this.settings.themeId, true);
|
||||
},
|
||||
onResizeRequested : () => {
|
||||
this.layouter.Resize ();
|
||||
},
|
||||
|
||||
Binary file not shown.
@ -1,6 +1,6 @@
|
||||
@font-face {
|
||||
font-family: "O3DVIcons";
|
||||
src: url("./O3DVIcons.woff?5b9efabdc2c1ef6b3990e38a69a1fb39") format("woff");
|
||||
src: url("./O3DVIcons.woff?d27bdb5af135068ed4a9350e285e132e") format("woff");
|
||||
}
|
||||
|
||||
i[class^="icon-"]:before, i[class*=" icon-"]:before {
|
||||
@ -38,120 +38,126 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
|
||||
.icon-collapse:before {
|
||||
content: "\f108";
|
||||
}
|
||||
.icon-deisolate:before {
|
||||
.icon-dark_mode:before {
|
||||
content: "\f109";
|
||||
}
|
||||
.icon-details:before {
|
||||
.icon-deisolate:before {
|
||||
content: "\f10a";
|
||||
}
|
||||
.icon-donate:before {
|
||||
.icon-details:before {
|
||||
content: "\f10b";
|
||||
}
|
||||
.icon-download:before {
|
||||
.icon-donate:before {
|
||||
content: "\f10c";
|
||||
}
|
||||
.icon-expand:before {
|
||||
.icon-download:before {
|
||||
content: "\f10d";
|
||||
}
|
||||
.icon-export:before {
|
||||
.icon-expand:before {
|
||||
content: "\f10e";
|
||||
}
|
||||
.icon-feedback:before {
|
||||
.icon-export:before {
|
||||
content: "\f10f";
|
||||
}
|
||||
.icon-file_download:before {
|
||||
.icon-feedback:before {
|
||||
content: "\f110";
|
||||
}
|
||||
.icon-files:before {
|
||||
.icon-file_download:before {
|
||||
content: "\f111";
|
||||
}
|
||||
.icon-fit:before {
|
||||
.icon-files:before {
|
||||
content: "\f112";
|
||||
}
|
||||
.icon-fix_up_off:before {
|
||||
.icon-fit:before {
|
||||
content: "\f113";
|
||||
}
|
||||
.icon-fix_up_on:before {
|
||||
.icon-fix_up_off:before {
|
||||
content: "\f114";
|
||||
}
|
||||
.icon-flat_list:before {
|
||||
.icon-fix_up_on:before {
|
||||
content: "\f115";
|
||||
}
|
||||
.icon-flip:before {
|
||||
.icon-flat_list:before {
|
||||
content: "\f116";
|
||||
}
|
||||
.icon-github:before {
|
||||
.icon-flip:before {
|
||||
content: "\f117";
|
||||
}
|
||||
.icon-hidden:before {
|
||||
.icon-github:before {
|
||||
content: "\f118";
|
||||
}
|
||||
.icon-info:before {
|
||||
.icon-hidden:before {
|
||||
content: "\f119";
|
||||
}
|
||||
.icon-isolate:before {
|
||||
.icon-info:before {
|
||||
content: "\f11a";
|
||||
}
|
||||
.icon-materials:before {
|
||||
.icon-isolate:before {
|
||||
content: "\f11b";
|
||||
}
|
||||
.icon-measure_angle:before {
|
||||
.icon-light_mode:before {
|
||||
content: "\f11c";
|
||||
}
|
||||
.icon-measure_distance_parallel:before {
|
||||
.icon-materials:before {
|
||||
content: "\f11d";
|
||||
}
|
||||
.icon-measure_distance:before {
|
||||
.icon-measure_angle:before {
|
||||
content: "\f11e";
|
||||
}
|
||||
.icon-measure:before {
|
||||
.icon-measure_distance_parallel:before {
|
||||
content: "\f11f";
|
||||
}
|
||||
.icon-meshes:before {
|
||||
.icon-measure_distance:before {
|
||||
content: "\f120";
|
||||
}
|
||||
.icon-missing_files:before {
|
||||
.icon-measure:before {
|
||||
content: "\f121";
|
||||
}
|
||||
.icon-model:before {
|
||||
.icon-meshes:before {
|
||||
content: "\f122";
|
||||
}
|
||||
.icon-open_url:before {
|
||||
.icon-missing_files:before {
|
||||
content: "\f123";
|
||||
}
|
||||
.icon-open:before {
|
||||
.icon-model:before {
|
||||
content: "\f124";
|
||||
}
|
||||
.icon-print3d:before {
|
||||
.icon-open_url:before {
|
||||
content: "\f125";
|
||||
}
|
||||
.icon-settings:before {
|
||||
.icon-open:before {
|
||||
content: "\f126";
|
||||
}
|
||||
.icon-share:before {
|
||||
.icon-print3d:before {
|
||||
content: "\f127";
|
||||
}
|
||||
.icon-snapshot:before {
|
||||
.icon-settings:before {
|
||||
content: "\f128";
|
||||
}
|
||||
.icon-tree_mesh:before {
|
||||
.icon-share:before {
|
||||
content: "\f129";
|
||||
}
|
||||
.icon-tree_view:before {
|
||||
.icon-snapshot:before {
|
||||
content: "\f12a";
|
||||
}
|
||||
.icon-twitter:before {
|
||||
.icon-tree_mesh:before {
|
||||
content: "\f12b";
|
||||
}
|
||||
.icon-up_y:before {
|
||||
.icon-tree_view:before {
|
||||
content: "\f12c";
|
||||
}
|
||||
.icon-up_z:before {
|
||||
.icon-twitter:before {
|
||||
content: "\f12d";
|
||||
}
|
||||
.icon-visible:before {
|
||||
.icon-up_y:before {
|
||||
content: "\f12e";
|
||||
}
|
||||
.icon-warning:before {
|
||||
.icon-up_z:before {
|
||||
content: "\f12f";
|
||||
}
|
||||
.icon-visible:before {
|
||||
content: "\f130";
|
||||
}
|
||||
.icon-warning:before {
|
||||
content: "\f131";
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user