From 82fa3ec8bfda101c965d66dff45524f987f63f28 Mon Sep 17 00:00:00 2001 From: kovacsv Date: Wed, 10 Nov 2021 07:45:22 +0100 Subject: [PATCH] Add separator to meshes panel buttons. --- tools/config.json | 2 + website/embed.html | 2 + website/index.html | 2 + website/o3dv/css/navigator.css | 95 ++++++++++++++++++ website/o3dv/css/sidebar.css | 71 ++++++++++++++ website/o3dv/css/website.css | 151 ----------------------------- website/o3dv/js/navigatorpanels.js | 65 ++++++++++--- 7 files changed, 221 insertions(+), 167 deletions(-) create mode 100644 website/o3dv/css/navigator.css create mode 100644 website/o3dv/css/sidebar.css diff --git a/tools/config.json b/tools/config.json index c9b0759..25e04e5 100644 --- a/tools/config.json +++ b/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" ] diff --git a/website/embed.html b/website/embed.html index 5b64d6a..c33c16e 100644 --- a/website/embed.html +++ b/website/embed.html @@ -90,6 +90,8 @@ + + diff --git a/website/index.html b/website/index.html index fea9e40..4d6bb6e 100644 --- a/website/index.html +++ b/website/index.html @@ -90,6 +90,8 @@ + + diff --git a/website/o3dv/css/navigator.css b/website/o3dv/css/navigator.css new file mode 100644 index 0000000..f3a19de --- /dev/null +++ b/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); +} + +} diff --git a/website/o3dv/css/sidebar.css b/website/o3dv/css/sidebar.css new file mode 100644 index 0000000..bae0889 --- /dev/null +++ b/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; +} diff --git a/website/o3dv/css/website.css b/website/o3dv/css/website.css index 205a3e9..e2bb4f4 100644 --- a/website/o3dv/css/website.css +++ b/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) diff --git a/website/o3dv/js/navigatorpanels.js b/website/o3dv/js/navigatorpanels.js index 176e37f..8ee4e66 100644 --- a/website/o3dv/js/navigatorpanels.js +++ b/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 = $('
').addClass ('ov_navigator_button').attr ('title', tooltip).appendTo (parentDiv); - if (extraClasses !== null) { + let button = $('
').addClass ('ov_navigator_button').attr ('alt', name).attr ('title', name).appendTo (parentDiv); + 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, () => { - if (!this.isHierarchical) { - return; + function CreateRadioButton (parentDiv, buttons, onClick) + { + 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, () => { - if (this.isHierarchical) { - return; - } - this.isHierarchical = true; - this.ClearMeshTree (); - this.FillMeshTree (importResult.model); - this.callbacks.onSelectionRemoved (); - }); + $('
').addClass ('ov_navigator_buttons_separator').appendTo (this.buttonsDiv); CreateButton (this.buttonsDiv, 'Expand all', 'expand', null, () => { this.rootItem.ExpandAll (true);