From e687a6a58dda67873a64c1de7f98a0134376dc9f Mon Sep 17 00:00:00 2001 From: ycw Date: Thu, 23 May 2024 02:14:49 -0500 Subject: [PATCH 1/6] tabs with hscroll --- editor/css/main.css | 16 +++++++++++++++- editor/js/Sidebar.Properties.js | 3 +++ editor/js/libs/ui.js | 30 +++++++++++++++++++++++++++++- 3 files changed, 47 insertions(+), 2 deletions(-) diff --git a/editor/css/main.css b/editor/css/main.css index 4edbb7f46c12e8..26779d686c2878 100644 --- 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 index a91525b23cf0e6..3e55d3bc830eae 100644 --- 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 index 82d40397c10b82..fd2bc4ddb85a3d 100644 --- 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 ) { From 969a7f49cfdcd15eb41cb2877e99c25e2ea2b85f Mon Sep 17 00:00:00 2001 From: ycw Date: Fri, 24 May 2024 00:51:06 -0500 Subject: [PATCH 2/6] simplify --- editor/css/main.css | 13 +++++++++++-- editor/js/libs/ui.js | 28 ++++++++++++---------------- 2 files changed, 23 insertions(+), 18 deletions(-) diff --git a/editor/css/main.css b/editor/css/main.css index 26779d686c2878..05fef5f8e6d960 100644 --- a/editor/css/main.css +++ b/editor/css/main.css @@ -81,10 +81,19 @@ textarea, input { outline: none; } /* osx */ width: 100%; white-space: pre; overflow: hidden; + overflow-x: auto; } - .TabbedPanel .Tabs.entered { - overflow-x: auto; + .TabbedPanel .Tabs::-webkit-scrollbar { + height: 8px; + background: #eee; + } + .TabbedPanel .Tabs::-webkit-scrollbar-thumb { + background: #08f3; + } + .TabbedPanel .Tabs::-webkit-scrollbar-thumb:hover { + background: #08f; + cursor: ew-resize; } .TabbedPanel .Tabs .Tab { diff --git a/editor/js/libs/ui.js b/editor/js/libs/ui.js index fd2bc4ddb85a3d..653f62c2925788 100644 --- 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', 'MouseLeave', 'MouseEnter', 'Click', 'DblClick', 'Change', 'Input' ]; +const events = [ 'KeyUp', 'KeyDown', 'MouseOver', 'MouseOut', 'MouseMove', 'MouseDown', 'Click', 'DblClick', 'Change', 'Input' ]; events.forEach( function ( event ) { @@ -1082,31 +1082,27 @@ class UITabbedPanel extends UIDiv { // - let delayHoveringTimer = null; + // let grabbing = false; - this.tabsDiv.onMouseEnter( () => { + // this.tabsDiv.onMouseMove( ( event ) => { - if ( delayHoveringTimer !== null ) { + // if ( ! grabbing ) return; - clearTimeout( delayHoveringTimer ); + // this.tabsDiv.dom.scrollLeft -= event.movementX; - } - - delayHoveringTimer = setTimeout( () => this.tabsDiv.addClass( 'entered' ), 200 ); - - } ); + // } ); - this.tabsDiv.onMouseLeave( () => { + // this.tabsDiv.onMouseDown( () => { - if ( delayHoveringTimer !== null ) { + // grabbing = true; - clearTimeout( delayHoveringTimer ); + // } ); - } + // this.dom.ownerDocument.addEventListener( 'mouseup', () => { - this.tabsDiv.removeClass( 'entered' ); + // grabbing = false; - } ); + // } ); } From ac15d47b4610054ed13a92c7ec826d82da27d12f Mon Sep 17 00:00:00 2001 From: ycw Date: Fri, 24 May 2024 00:53:59 -0500 Subject: [PATCH 3/6] cleanup --- editor/js/libs/ui.js | 26 +------------------------- 1 file changed, 1 insertion(+), 25 deletions(-) diff --git a/editor/js/libs/ui.js b/editor/js/libs/ui.js index 653f62c2925788..82d40397c10b82 100644 --- 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', 'MouseMove', 'MouseDown', 'Click', 'DblClick', 'Change', 'Input' ]; +const events = [ 'KeyUp', 'KeyDown', 'MouseOver', 'MouseOut', 'Click', 'DblClick', 'Change', 'Input' ]; events.forEach( function ( event ) { @@ -1080,30 +1080,6 @@ class UITabbedPanel extends UIDiv { this.selected = ''; - // - - // let grabbing = false; - - // this.tabsDiv.onMouseMove( ( event ) => { - - // if ( ! grabbing ) return; - - // this.tabsDiv.dom.scrollLeft -= event.movementX; - - // } ); - - // this.tabsDiv.onMouseDown( () => { - - // grabbing = true; - - // } ); - - // this.dom.ownerDocument.addEventListener( 'mouseup', () => { - - // grabbing = false; - - // } ); - } select( id ) { From fdc643048138e22fba479e68212188968b10f9ff Mon Sep 17 00:00:00 2001 From: ycw Date: Fri, 24 May 2024 00:59:18 -0500 Subject: [PATCH 4/6] polish --- editor/js/libs/ui.js | 1 + 1 file changed, 1 insertion(+) diff --git a/editor/js/libs/ui.js b/editor/js/libs/ui.js index 82d40397c10b82..cb6aa2f9b11811 100644 --- 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' } ); } From efe37d1e48dddf8daad784f91718b605e3689187 Mon Sep 17 00:00:00 2001 From: ycw Date: Fri, 24 May 2024 01:08:16 -0500 Subject: [PATCH 5/6] hover on tabs not scrollbar --- editor/css/main.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/editor/css/main.css b/editor/css/main.css index 05fef5f8e6d960..0c1f5a8c125754 100644 --- a/editor/css/main.css +++ b/editor/css/main.css @@ -91,7 +91,7 @@ textarea, input { outline: none; } /* osx */ .TabbedPanel .Tabs::-webkit-scrollbar-thumb { background: #08f3; } - .TabbedPanel .Tabs::-webkit-scrollbar-thumb:hover { + .TabbedPanel .Tabs:hover::-webkit-scrollbar-thumb { background: #08f; cursor: ew-resize; } @@ -755,6 +755,10 @@ select { border-top: 1px solid #222; } + .TabbedPanel .Tabs::-webkit-scrollbar { + background: #222; + } + .TabbedPanel .Tab { color: #555; border-right: 1px solid #222; From fc0423f77984726c4098b450c70a2929552ed1cd Mon Sep 17 00:00:00 2001 From: ycw Date: Fri, 24 May 2024 01:09:45 -0500 Subject: [PATCH 6/6] thin --- editor/css/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/editor/css/main.css b/editor/css/main.css index 0c1f5a8c125754..03fc893289567e 100644 --- a/editor/css/main.css +++ b/editor/css/main.css @@ -85,7 +85,7 @@ textarea, input { outline: none; } /* osx */ } .TabbedPanel .Tabs::-webkit-scrollbar { - height: 8px; + height: 5px; background: #eee; } .TabbedPanel .Tabs::-webkit-scrollbar-thumb {