Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Editor: Hides irrelevant tabs for better ux #28287

Merged
merged 4 commits into from
May 9, 2024

Conversation

ycw
Copy link
Contributor

@ycw ycw commented May 5, 2024

The PR hides irrelevant properties tabs for the actively selected object ... which is less confusing ... for example, Scene doesn't have geometry and material, so GEOMETRY and MATERIAL (tabs) should be hidden when it's being selected:

hide_irrelevant.mp4

Preview: https://raw.githack.com/ycw/three.js/editor-hide-properties-tabbedpanel/editor/index.html

@mrdoob
Copy link
Owner

mrdoob commented May 8, 2024

I think this could be done in a more clean way in this file:

https://github.com/mrdoob/three.js/blob/dev/editor/js/Sidebar.Properties.js

@mrdoob mrdoob added this to the r165 milestone May 8, 2024
@mrdoob
Copy link
Owner

mrdoob commented May 8, 2024

Almost there...

const objectTab = new SidebarObject( editor );
const geometryTab = new SidebarGeometry( editor );
const materialTab = new SidebarMaterial( editor );
const scriptTab = new SidebarScript( editor );

container.addTab( 'objectTab', strings.getKey( 'sidebar/properties/object' ), objectTab );
container.addTab( 'geometryTab', strings.getKey( 'sidebar/properties/geometry' ), geometryTab );
container.addTab( 'materialTab', strings.getKey( 'sidebar/properties/material' ), materialTab );
container.addTab( 'scriptTab', strings.getKey( 'sidebar/properties/script' ), scriptTab );

No need for getTabByTabId.

@ycw
Copy link
Contributor Author

ycw commented May 8, 2024

new SidebarObject( editor ); is the panel under the tab, not the tab,

so getTabByTabId is needed to get the tab, then hide/show based on selected object.

@ycw ycw force-pushed the editor-hide-properties-tabbedpanel branch from d23df55 to b6f2ba3 Compare May 8, 2024 02:52
@mrdoob mrdoob merged commit 94da2af into mrdoob:dev May 9, 2024
8 of 12 checks passed
@@ -18,6 +18,54 @@ function SidebarProperties( editor ) {
container.addTab( 'scriptTab', strings.getKey( 'sidebar/properties/script' ), new SidebarScript( editor ) );
container.select( 'objectTab' );
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh! We probably do not need this line anymore?

Copy link
Contributor Author

@ycw ycw May 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is needed for initializing, otherwise last option is selected, in our case the SCRIPT tab is picked by default.

If without this line, then:

  1. Examples>Arkanoid
  2. Select 'Ground' in outliner
  3. You should see active tab in properties is SCRIPT, not OBJECT <<

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants