diff --git a/editor/css/main.css b/editor/css/main.css index 4edbb7f46c12e8..03fc893289567e 100644 --- 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; @@ -463,6 +485,7 @@ select { width: 350px; background: #eee; overflow: auto; + overflow-x: hidden; } #sidebar .Panel { @@ -732,6 +755,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 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..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' } ); }