Doni/ModelHandle
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add separator to meshes panel buttons.

Browse Source
This commit is contained in:
kovacsv 2021-11-10 07:45:22 +01:00
parent 23fb36b2d0
commit 82fa3ec8bf
7 changed files with 221 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tools/config.json
View File

@ -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"
]

2
website/embed.html
View File

@ -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>

2
website/index.html
View File

@ -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>

95
website/o3dv/css/navigator.css Normal file
View File

@ -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);
}
}

71
website/o3dv/css/sidebar.css Normal file
View File

@ -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;
}

151
website/o3dv/css/website.css
View File

@ -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)

65
website/o3dv/js/navigatorpanels.js
View File

@ -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);
if (extraClasses !== null) {
let button = $('<div>').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 ();
});
$('<div>').addClass ('ov_navigator_buttons_separator').appendTo (this.buttonsDiv);
CreateButton (this.buttonsDiv, 'Expand all', 'expand', null, () => {
this.rootItem.ExpandAll (true);