Option to switch between themes without opening a model #400

2023-06-28 20:35:31 +02:00 · 2023-06-28 20:35:31 +02:00 · 8edce119cd
commit 8edce119cd
parent 1ec2f1df36
11 changed files with 242 additions and 160 deletions
--- a/assets/icons/dark_mode.svg
+++ b/assets/icons/dark_mode.svg
@ -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>
--- a/assets/icons/light_mode.svg
+++ b/assets/icons/light_mode.svg
@ -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>
--- a/source/website/css/O3DVIcons/O3DVIcons.woff
+++ b/source/website/css/O3DVIcons/O3DVIcons.woff
--- a/source/website/css/icons.css
+++ b/source/website/css/icons.css
@ -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";
+}
--- a/source/website/css/website.css
+++ b/source/website/css/website.css
@ -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);
--- a/source/website/settings.js
+++ b/source/website/settings.js
@ -10,18 +10,24 @@ export const Theme =

 export class Settings
 {
-    constructor ()
+    constructor (themeId)
    {
+        this.themeId = themeId;
        this.environmentMapName = 'fishermans_bastion';
        this.backgroundIsEnvMap = false;
-        this.backgroundColor = new RGBAColor (255, 255, 255, 255);
-        this.defaultColor = new RGBColor (200, 200, 200);
+        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);
    }
 }
--- a/source/website/sidebar.js
+++ b/source/website/sidebar.js
@ -62,13 +62,15 @@ export class Sidebar
            },
            onEdgeDisplayChanged : () => {
                this.callbacks.onEdgeDisplayChanged ();
-            },
-            onThemeChanged : () => {
-                this.callbacks.onThemeChanged ();
            }
        });
    }

+    UpdateControlsStatus ()
+    {
+        this.settingsPanel.UpdateControlsStatus ();
+    }
+
    UpdateControlsVisibility ()
    {
        this.settingsPanel.UpdateControlsVisibility ();
--- a/source/website/sidebarsettingspanel.js
+++ b/source/website/sidebarsettingspanel.js
@ -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);
-                }
-                this.modelDisplaySection.Update ();
-                this.importParametersSection.Update ();
-                callbacks.onThemeChanged ();
-            }
-        });
+    }
+
+    UpdateControlsStatus ()
+    {
+        this.modelDisplaySection.Update ();
+        this.importParametersSection.Update ();
    }

    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 ()
--- a/source/website/website.js
+++ b/source/website/website.js
@ -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 ();
            },
--- a/website/info/css/O3DVIcons.woff
+++ b/website/info/css/O3DVIcons.woff
--- a/website/info/css/icons.css
+++ b/website/info/css/icons.css
@ -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";
+}