tabs with hscroll

mrdoob · May 23, 2024 · e687a6a · e687a6a
1 parent 10d442f
commit e687a6a
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 2 deletions.
diff --git a/editor/css/main.css b/editor/css/main.css
@@ -76,17 +76,29 @@ textarea, input { outline: none; } /* osx */
 
 .TabbedPanel .Tabs {
 	position: relative;
+	z-index: 1; /** Above .Panels **/
 	display: block;
 	width: 100%;
+	white-space: pre;
+	overflow: hidden;
 }
 
+	.TabbedPanel .Tabs.entered {
+		overflow-x: auto;
+	}
+
 	.TabbedPanel .Tabs .Tab {
 		padding: 10px 9px;
 		text-transform: uppercase;
 	}
 
+	.TabbedPanel .Tabs .Tab:last-child {
+		margin-right: 22px;
+	}
+
 	.TabbedPanel .Panels {
-		position: relative;
+		position: absolute;
+		top: 40px;
 		display: block;
 		width: 100%;
 	}
@@ -296,6 +308,7 @@ select {
 
 #resizer {
 	position: absolute;
+	z-index: 2; /* Above #sidebar */
 	top: 32px;
 	right: 350px;
 	width: 5px;
@@ -463,6 +476,7 @@ select {
 	width: 350px;
 	background: #eee;
 	overflow: auto;
+	overflow-x: hidden;
 }
 
 	#sidebar .Panel {

diff --git a/editor/js/Sidebar.Properties.js b/editor/js/Sidebar.Properties.js
@@ -49,14 +49,17 @@ function SidebarProperties( editor ) {
 		if ( container.selected === 'geometryTab' ) {
 
 			container.select( geometryTab.isHidden() ? 'objectTab' : 'geometryTab' );
+			geometryTab.dom.scrollIntoView( { inline: 'center', behavior: 'smooth' } );
 
 		} else if ( container.selected === 'materialTab' ) {
 
 			container.select( materialTab.isHidden() ? 'objectTab' : 'materialTab' );
+			materialTab.dom.scrollIntoView( { inline: 'center', behavior: 'smooth' } );
 
 		} else if ( container.selected === 'scriptTab' ) {
 
 			container.select( scriptTab.isHidden() ? 'objectTab' : 'scriptTab' );
+			scriptTab.dom.scrollIntoView( { inline: 'center', behavior: 'smooth' } );
 
 		}
 

diff --git a/editor/js/libs/ui.js b/editor/js/libs/ui.js
@@ -187,7 +187,7 @@ properties.forEach( function ( property ) {
 
 // events
 
-const events = [ 'KeyUp', 'KeyDown', 'MouseOver', 'MouseOut', 'Click', 'DblClick', 'Change', 'Input' ];
+const events = [ 'KeyUp', 'KeyDown', 'MouseOver', 'MouseOut', 'MouseLeave', 'MouseEnter', 'Click', 'DblClick', 'Change', 'Input' ];
 
 events.forEach( function ( event ) {
 
@@ -1080,6 +1080,34 @@ class UITabbedPanel extends UIDiv {
 
 		this.selected = '';
 
+		//
+
+		let delayHoveringTimer = null;
+
+		this.tabsDiv.onMouseEnter( () => {
+
+			if ( delayHoveringTimer !== null ) {
+
+				clearTimeout( delayHoveringTimer );
+
+			}
+
+			delayHoveringTimer = setTimeout( () => this.tabsDiv.addClass( 'entered' ), 200 );
+
+		} );
+
+		this.tabsDiv.onMouseLeave( () => {
+
+			if ( delayHoveringTimer !== null ) {
+
+				clearTimeout( delayHoveringTimer );
+
+			}
+
+			this.tabsDiv.removeClass( 'entered' );
+
+		} );
+
 	}
 
 	select( id ) {