Add separator to meshes panel buttons.

tools/config.json

@@ -103,6 +103,8 @@
 		"website/o3dv/css/dialogs.css",
 		"website/o3dv/css/treeview.css",
 		"website/o3dv/css/panelset.css",
+		"website/o3dv/css/navigator.css",
+		"website/o3dv/css/sidebar.css",
 		"website/o3dv/css/website.css",
 		"website/o3dv/css/embed.css"
 	]

website/embed.html

@@ -90,6 +90,8 @@
 	<link rel="stylesheet" type="text/css" href="o3dv/css/dialogs.css">
 	<link rel="stylesheet" type="text/css" href="o3dv/css/treeview.css">
 	<link rel="stylesheet" type="text/css" href="o3dv/css/panelset.css">
+	<link rel="stylesheet" type="text/css" href="o3dv/css/navigator.css">
+	<link rel="stylesheet" type="text/css" href="o3dv/css/sidebar.css">
 	<link rel="stylesheet" type="text/css" href="o3dv/css/website.css">
 	<link rel="stylesheet" type="text/css" href="o3dv/css/embed.css">
 	<script type="text/javascript" src="o3dv/js/featureset.js"></script>

website/index.html

@@ -90,6 +90,8 @@
 	<link rel="stylesheet" type="text/css" href="o3dv/css/dialogs.css">
 	<link rel="stylesheet" type="text/css" href="o3dv/css/treeview.css">
 	<link rel="stylesheet" type="text/css" href="o3dv/css/panelset.css">
+	<link rel="stylesheet" type="text/css" href="o3dv/css/navigator.css">
+	<link rel="stylesheet" type="text/css" href="o3dv/css/sidebar.css">
 	<link rel="stylesheet" type="text/css" href="o3dv/css/website.css">
 	<link rel="stylesheet" type="text/css" href="o3dv/css/embed.css">
 	<script type="text/javascript" src="o3dv/js/featureset.js"></script>

website/o3dv/css/navigator.css

@@ -0,0 +1,95 @@
+
+div.ov_navigator_buttons
+{
+	border-bottom: 1px solid var(--ov_border_color);
+	margin-bottom: 10px;
+	padding: 5px 5px 5px 0px;
+	overflow: auto;
+}
+
+div.ov_navigator_buttons div.ov_navigator_button
+{
+	float: left;
+	cursor: pointer;
+	padding: 5px;
+}
+
+div.ov_navigator_buttons div.ov_navigator_button.right
+{
+	float: right;
+}
+
+div.ov_navigator_buttons div.ov_navigator_buttons_separator
+{
+	background: var(--ov_toolbar_separator_color);
+	width: 1px;
+	height: 28px;
+	margin: 0px 2px;
+	float: left;
+}
+
+div.ov_navigator_tree_title
+{
+	font-weight: bold;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	padding-bottom: 10px;
+	border-bottom: 1px solid var(--ov_border_color);
+}
+
+div.ov_navigator_tree_panel
+{
+	margin-top: 10px;
+	overflow: auto;
+}
+
+div.ov_navigator_info_panel
+{
+	margin-top: 10px;
+	border-top: 1px solid var(--ov_border_color);
+	overflow: auto;
+}
+
+div.ov_navigator_info_panel div.ov_navigator_info_button
+{
+	cursor: pointer;
+	margin-top: 10px;
+	border: 1px solid var(--ov_border_color);
+	border-radius: 5px;
+	overflow: auto;
+}
+
+div.ov_navigator_info_panel div.ov_navigator_info_button_text
+{
+	padding: 5px;
+	float: left;
+}
+
+div.ov_navigator_info_panel div.ov_navigator_info_button_icon
+{
+	color: var(--ov_light_icon_color);
+	padding: 6px;
+	float: right;
+}
+
+
+@media (hover)
+{
+
+div.ov_navigator_info_panel div.ov_navigator_info_panel_title:hover
+{
+	background: var(--ov_hover_color);
+}
+
+div.ov_navigator_info_panel div.ov_navigator_info_button:hover
+{
+	background: var(--ov_hover_color);
+}
+
+div.ov_navigator_buttons div.ov_navigator_button:hover
+{
+	background: var(--ov_hover_color);
+}
+
+}

website/o3dv/css/sidebar.css

@@ -0,0 +1,71 @@
+
+div.ov_sidebar_title
+{
+	font-weight: bold;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	padding-bottom: 10px;
+	margin-bottom: 10px;
+	border-bottom: 1px solid var(--ov_border_color);
+}
+
+div.ov_sidebar_title div.ov_sidebar_title_text
+{
+	float: left;
+}
+
+div.ov_sidebar_title div.ov_sidebar_title_img
+{
+	color: var(--ov_light_icon_color);
+	float: right;
+	cursor: pointer;
+}
+
+div.ov_sidebar_subtitle_icon
+{
+	width: 30px;
+	height: 18px;
+	margin-top: 2px;
+	margin-right: 10px;
+	float: left;
+}
+
+div.ov_sidebar_content
+{
+	overflow: auto;
+}
+
+div.ov_sidebar_content div.ov_sidebar_settings_content
+{
+	margin-bottom: 20px;
+	overflow: auto;
+}
+
+div.ov_sidebar_content div.ov_sidebar_settings_row
+{
+	margin: 5px 0px;
+	overflow: auto;
+}
+
+div.ov_sidebar_content div.ov_sidebar_settings_padded
+{
+	margin: 10px 0px 0px 40px;
+	float: left;
+}
+
+div.ov_sidebar_content div.ov_sidebar_settings_warning
+{
+	margin-left: 30px;
+}
+
+div.ov_sidebar_content button.pcr-button
+{
+	width: 30px;
+	height: 15px;
+	margin: 3px 10px 3px 0px;
+	border: 1px solid var(--ov_border_color);
+	box-shadow: none;
+	outline: none;
+	float: left;
+}

website/o3dv/css/website.css

@@ -165,142 +165,6 @@ div.ov_toolbar div.ov_toolbar_separator
 	float: left;
 }
 
-div.ov_navigator_buttons
-{
-	border-bottom: 1px solid var(--ov_border_color);
-	margin-bottom: 10px;
-	padding: 5px 5px 5px 0px;
-	overflow: auto;
-}
-
-div.ov_navigator_buttons div.ov_navigator_button
-{
-	float: left;
-	cursor: pointer;
-	padding: 5px;
-}
-
-div.ov_navigator_buttons div.ov_navigator_button.right
-{
-	float: right;
-}
-
-div.ov_navigator_tree_title
-{
-	font-weight: bold;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	padding-bottom: 10px;
-	border-bottom: 1px solid var(--ov_border_color);
-}
-
-div.ov_navigator_tree_panel
-{
-	margin-top: 10px;
-	overflow: auto;
-}
-
-div.ov_navigator_info_panel
-{
-	margin-top: 10px;
-	border-top: 1px solid var(--ov_border_color);
-	overflow: auto;
-}
-
-div.ov_navigator_info_panel div.ov_navigator_info_button
-{
-	cursor: pointer;
-	margin-top: 10px;
-	border: 1px solid var(--ov_border_color);
-	border-radius: 5px;
-	overflow: auto;
-}
-
-div.ov_navigator_info_panel div.ov_navigator_info_button_text
-{
-	padding: 5px;
-	float: left;
-}
-
-div.ov_navigator_info_panel div.ov_navigator_info_button_icon
-{
-	color: var(--ov_light_icon_color);
-	padding: 6px;
-	float: right;
-}
-
-div.ov_sidebar_title
-{
-	font-weight: bold;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	padding-bottom: 10px;
-	margin-bottom: 10px;
-	border-bottom: 1px solid var(--ov_border_color);
-}
-
-div.ov_sidebar_title div.ov_sidebar_title_text
-{
-	float: left;
-}
-
-div.ov_sidebar_title div.ov_sidebar_title_img
-{
-	color: var(--ov_light_icon_color);
-	float: right;
-	cursor: pointer;
-}
-
-div.ov_sidebar_subtitle_icon
-{
-	width: 30px;
-	height: 18px;
-	margin-top: 2px;
-	margin-right: 10px;
-	float: left;
-}
-
-div.ov_sidebar_content
-{
-	overflow: auto;
-}
-
-div.ov_sidebar_content div.ov_sidebar_settings_content
-{
-	margin-bottom: 20px;
-	overflow: auto;
-}
-
-div.ov_sidebar_content div.ov_sidebar_settings_row
-{
-	margin: 5px 0px;
-	overflow: auto;
-}
-
-div.ov_sidebar_content div.ov_sidebar_settings_padded
-{
-	margin: 10px 0px 0px 40px;
-	float: left;
-}
-
-div.ov_sidebar_content div.ov_sidebar_settings_warning
-{
-	margin-left: 30px;
-}
-
-div.ov_sidebar_content button.pcr-button
-{
-	width: 30px;
-	height: 15px;
-	margin: 3px 10px 3px 0px;
-	border: 1px solid var(--ov_border_color);
-	box-shadow: none;
-	outline: none;
-	float: left;
-}
-
 div.pcr-app
 {
 	color: var(--ov_dialog_foreground_color);
@@ -385,21 +249,6 @@ div.ov_toolbar div.ov_toolbar_button:hover
 	background: var(--ov_hover_color);
 }
 
-div.ov_navigator_info_panel div.ov_navigator_info_panel_title:hover
-{
-	background: var(--ov_hover_color);
-}
-
-div.ov_navigator_info_panel div.ov_navigator_info_button:hover
-{
-	background: var(--ov_hover_color);
-}
-
-div.ov_navigator_buttons div.ov_navigator_button:hover
-{
-	background: var(--ov_hover_color);
-}
-
 }
 
 @media only screen and (max-width: 800px)

website/o3dv/js/navigatorpanels.js

@@ -409,10 +409,10 @@ OV.NavigatorMeshesPanel = class extends OV.NavigatorPanel
 
     FillButtons (importResult)
     {
-        function CreateButton (parentDiv, tooltip, icon, extraClasses, onClick)
+        function CreateButton (parentDiv, name, icon, extraClasses, onClick)
         {
-            let button = $('<div>').addClass ('ov_navigator_button').attr ('title', tooltip).appendTo (parentDiv);
+            let button = $('<div>').addClass ('ov_navigator_button').attr ('alt', name).attr ('title', name).appendTo (parentDiv);
-            if (extraClasses !== null) {
+            if (OV.IsDefined (extraClasses)) {
                 button.addClass (extraClasses);
             }
             let buttonIcon = OV.AddSvgIcon (button, icon);
@@ -422,25 +422,58 @@ OV.NavigatorMeshesPanel = class extends OV.NavigatorPanel
             return buttonIcon;
         }
 
-        CreateButton (this.buttonsDiv, 'Flat list', 'flat_list', null, () => {
+        function CreateRadioButton (parentDiv, buttons, onClick)
-            if (!this.isHierarchical) {
+        {
-                return;
+            function UpdateSelection (buttonDivs, selectedButtonDiv)
+            {
+                for (let buttonDiv of buttonDivs) {
+                    buttonDiv.removeClass ('selected');
+                }
+                selectedButtonDiv.addClass ('selected');
+            }
+
+            let buttonDivs = [];
+            for (let buttonIndex = 0; buttonIndex < buttons.length; buttonIndex++) {
+                const button = buttons[buttonIndex];
+                let buttonDiv = CreateButton (parentDiv, button.name, button.icon, button.extraClasses, () => {
+                    UpdateSelection (buttonDivs, buttonDiv);
+                    onClick (buttonIndex);
+                });
+                buttonDivs.push (buttonDiv);
+            }
+
+            UpdateSelection (buttonDivs, buttonDivs[0]);
+        }
+
+        let viewButtons = [
+            {
+                name : 'Flat list',
+                icon : 'flat_list'
+            },
+            {
+                name : 'Tree view',
+                icon : 'tree_view'
+            }
+        ];
+
+        CreateRadioButton (this.buttonsDiv, viewButtons, (buttonIndex) => {
+            if (buttonIndex === 0) {
+                if (!this.isHierarchical) {
+                    return;
+                }
+                this.isHierarchical = false;
+            } else if (buttonIndex === 1) {
+                if (this.isHierarchical) {
+                    return;
+                }
+                this.isHierarchical = true;
             }
-            this.isHierarchical = false;
             this.ClearMeshTree ();
             this.FillMeshTree (importResult.model);
             this.callbacks.onSelectionRemoved ();
         });
 
-        CreateButton (this.buttonsDiv, 'Tree view', 'tree_view', null, () => {
+        $('<div>').addClass ('ov_navigator_buttons_separator').appendTo (this.buttonsDiv);
-            if (this.isHierarchical) {
-                return;
-            }
-            this.isHierarchical = true;
-            this.ClearMeshTree ();
-            this.FillMeshTree (importResult.model);
-            this.callbacks.onSelectionRemoved ();
-        });
 
         CreateButton (this.buttonsDiv, 'Expand all', 'expand', null, () => {
             this.rootItem.ExpandAll (true);