diff --git a/editor/inspector/assets/fbx/index.js b/editor/inspector/assets/fbx/index.js index c1e2860ab3b..d06d56f2fe7 100644 --- a/editor/inspector/assets/fbx/index.js +++ b/editor/inspector/assets/fbx/index.js @@ -2,7 +2,8 @@ const path = require('path'); const { injectionStyle } = require('../../utils/prop'); -let cacheActiveTab = 'animation'; +const defaultActiveTab = 'animation'; +let cacheActiveTab = defaultActiveTab; exports.template = /* html */`
@@ -97,9 +98,13 @@ const Elements = { }, update() { const panel = this; - Editor.Message.broadcast('fbx-inspector:change-tab', panel.activeTab); panel.$.tabPanel.setAttribute('src', Components[panel.activeTab]); panel.$.tabPanel.update(panel.assetList, panel.metaList); + + // Delay, waiting for the fbx preview area initialization to complete + setTimeout(() => { + Editor.Message.broadcast('fbx-inspector:change-tab', panel.activeTab); + }); }, }, }; diff --git a/editor/inspector/assets/fbx/preview.js b/editor/inspector/assets/fbx/preview.js index a19ecff5a3e..27601e33a94 100644 --- a/editor/inspector/assets/fbx/preview.js +++ b/editor/inspector/assets/fbx/preview.js @@ -74,7 +74,6 @@ exports.style = /* css*/` } .preview-container { min-height: 200px; - border-top: 1px solid var(--color-normal-border); } .preview-container > .animation-info { padding-right: 4px; @@ -96,7 +95,7 @@ exports.style = /* css*/` margin-right: 6px; } .preview-container > .image { - height: 200px; + height: var(--inspector-footer-preview-height, 200px); overflow: hidden; display: flex; flex: 1; diff --git a/editor/inspector/assets/image-preview.js b/editor/inspector/assets/image-preview.js index 227e8dd892d..cb8096b7a81 100644 --- a/editor/inspector/assets/image-preview.js +++ b/editor/inspector/assets/image-preview.js @@ -11,7 +11,7 @@ exports.template = /* html */` exports.style = /* css */` .image-preview { - height: 200px; + height: var(--inspector-footer-preview-height, 200px); background: var(--color-normal-fill-emphasis); display: flex; padding: 4px; diff --git a/editor/inspector/assets/material-header.js b/editor/inspector/assets/material-header.js index f0ab30cb00b..0e34b70430b 100644 --- a/editor/inspector/assets/material-header.js +++ b/editor/inspector/assets/material-header.js @@ -2,7 +2,6 @@ exports.template = /* html */`
-
@@ -15,20 +14,23 @@ exports.template = /* html */` Light
+
`; exports.style = /* css */` :host > .section { - height: 200px; - padding: 4px 0 4px 4px; - box-sizing: border-box; display: flex; + flex-direction: column; + height: var(--inspector-header-preview-height, 200px); + padding: 4px; + box-sizing: border-box; background: var(--color-normal-fill); - border-bottom: 1px solid var(--color-normal-border); } -:host > .section > canvas { flex: 1; min-width: 0; } -:host > .section > .tools { display: flex; flex-direction: column; padding: 0 4px; } +:host > .section > canvas { flex: 1; max-height: 100%; aspect-ratio: auto; } +:host > .section > .tools { display: flex; margin-bottom: 4px; } +:host > .section > .tools > ui-select { flex: 1; } +:host > .section > .tools > ui-checkbox { margin-left: 4px; } `; exports.$ = { @@ -140,7 +142,7 @@ exports.ready = async function() { panel.$.canvas.addEventListener('wheel', async (event) => { await callMaterialPreviewFunction('onMouseWheel', { wheelDeltaY: event.wheelDeltaY, - wheelDeltaX: event.wheelDeltaX + wheelDeltaX: event.wheelDeltaX, }); panel.isPreviewDataDirty = true; }); diff --git a/editor/inspector/assets/material.js b/editor/inspector/assets/material.js index 5ca424d74e8..4d5d9add58a 100644 --- a/editor/inspector/assets/material.js +++ b/editor/inspector/assets/material.js @@ -97,7 +97,7 @@ exports.template = /* html */ ` Effect - + diff --git a/editor/inspector/assets/mesh-preview.js b/editor/inspector/assets/mesh-preview.js index a69fd881961..d8f92e2c8e4 100644 --- a/editor/inspector/assets/mesh-preview.js +++ b/editor/inspector/assets/mesh-preview.js @@ -37,7 +37,7 @@ exports.style = /* css */` margin-right: 6px; } .preview > .image { - height: 200px; + height: var(--inspector-footer-preview-height, 200px); overflow: hidden; display: flex; flex: 1; diff --git a/editor/inspector/assets/skeleton-preview.js b/editor/inspector/assets/skeleton-preview.js index f588382f703..d29fbc990e5 100644 --- a/editor/inspector/assets/skeleton-preview.js +++ b/editor/inspector/assets/skeleton-preview.js @@ -22,7 +22,7 @@ exports.style = /* css */` margin-right: 6px; } .preview > .image { - height: 200px; + height: var(--inspector-footer-preview-height, 200px); overflow: hidden; display: flex; flex: 1; diff --git a/editor/inspector/contributions/asset.css b/editor/inspector/contributions/asset.css index b2f571b24f1..0b59b6835cb 100644 --- a/editor/inspector/contributions/asset.css +++ b/editor/inspector/contributions/asset.css @@ -101,11 +101,33 @@ display: flex; flex-direction: column; overflow: hidden; + position: relative; +} + +:host > .container > .content > section > inspector-resize-preview { + position: absolute; + left: 0; + right: 0; + z-index: 10; +} + +:host > .container > .content > section > inspector-resize-preview[area="header"] { + bottom: 0; +} + +:host > .container > .content > section > inspector-resize-preview[area="footer"] { + top: 0; +} + +:host > .container > .content > .content-header, +:host > .container > .content > .content-footer { + max-height: 80vh; } :host > .container > .content > .content-section { flex: 1; overflow: auto; + min-height: 200px; } :host > .container > .content > section > ui-panel { diff --git a/editor/inspector/contributions/asset.js b/editor/inspector/contributions/asset.js index 255b025959c..90551bb0798 100644 --- a/editor/inspector/contributions/asset.js +++ b/editor/inspector/contributions/asset.js @@ -29,9 +29,13 @@ exports.template = `
-
+
+ +
-
+
+ +
`; @@ -129,7 +133,7 @@ const Elements = { if (panel.type === 'unknown') { panel.metaList = []; panel.metaListOrigin = []; - return false; + return; } try { @@ -314,7 +318,7 @@ const Elements = { for (const renderName in panel.contentRenders) { const { list, contentRender } = panel.contentRenders[renderName]; - contentRender.__panels__ = Array.from(contentRender.children); + contentRender.__panels__ = Array.from(contentRender.children).filter((el) => el.tagName === 'UI-PANEL'); let i = 0; for (i; i < list.length; i++) { const file = list[i]; @@ -337,7 +341,6 @@ const Elements = { contentRender.removeChild(contentRender.__panels__[i]); } - contentRender.__panels__ = Array.from(contentRender.children); try { await Promise.all( contentRender.__panels__.map(($panel) => { @@ -390,9 +393,9 @@ exports.methods = { } return { - uuidListStr:JSON.stringify(panel.uuidList), - metaListStr:JSON.stringify(panel.metaList), - renderDataStr:JSON.stringify(renderData), + uuidListStr: JSON.stringify(panel.uuidList), + metaListStr: JSON.stringify(panel.metaList), + renderDataStr: JSON.stringify(renderData), }; }, restore(record) {