Editor: Fixed sidebar glitch via h scrollable (#28467)

* tabs with hscroll * simplify * cleanup * polish * hover on tabs not scrollbar * thin
mrdoob · May 24, 2024 · 610cf0b · 610cf0b
1 parent b846f12
commit 610cf0b
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 1 deletion.
diff --git a/editor/css/main.css b/editor/css/main.css
@@ -76,17 +76,38 @@ textarea, input { outline: none; } /* osx */
 
 .TabbedPanel .Tabs {
 	position: relative;
+	z-index: 1; /** Above .Panels **/
 	display: block;
 	width: 100%;
+	white-space: pre;
+	overflow: hidden;
+	overflow-x: auto;
 }
 
+	.TabbedPanel .Tabs::-webkit-scrollbar {
+		height: 5px;
+		background: #eee;
+	}
+	.TabbedPanel .Tabs::-webkit-scrollbar-thumb {
+		background: #08f3;
+	}
+	.TabbedPanel .Tabs:hover::-webkit-scrollbar-thumb {
+		background: #08f;
+		cursor: ew-resize;
+	}
+
 	.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 +317,7 @@ select {
 
 #resizer {
 	position: absolute;
+	z-index: 2; /* Above #sidebar */
 	top: 32px;
 	right: 350px;
 	width: 5px;
@@ -464,6 +486,7 @@ select {
 	width: 350px;
 	background: #eee;
 	overflow: auto;
+	overflow-x: hidden;
 }
 
 	#sidebar .Panel {
@@ -738,6 +761,10 @@ select {
 		border-top: 1px solid #222;
 	}
 
+		.TabbedPanel .Tabs::-webkit-scrollbar {
+			background: #222;
+		}
+
 		.TabbedPanel .Tab {
 			color: #555;
 			border-right: 1px solid #222;

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
@@ -1130,6 +1130,7 @@ class UITabbedPanel extends UIDiv {
 		if ( tab ) {
 
 			tab.addClass( 'selected' );
+			tab.dom.scrollIntoView( { inline: 'center', behavior: 'smooth' } );
 
 		}