diff --git a/src/components/settings-panel/ComponentDetail.vue b/src/components/settings-panel/ComponentDetail.vue index 2a36630fd..16c96f30b 100644 --- a/src/components/settings-panel/ComponentDetail.vue +++ b/src/components/settings-panel/ComponentDetail.vue @@ -16,7 +16,7 @@ {{ t.displayName }} -
+ +
内部名称: {{ componentData.name }} @@ -139,6 +143,11 @@ export default Vue.extend({ .component-detail { min-width: 264px; width: 264px; + flex: 1; + background-color: inherit; + border-radius: 7px; + @include no-scrollbar(); + @include v-stretch(); &-separator { height: 1px; background-color: #8882; @@ -149,7 +158,12 @@ export default Vue.extend({ &-header { @include h-center(); justify-content: space-between; - margin-bottom: 12px; + padding: 12px; + background-color: inherit; + position: sticky; + top: 0; + z-index: 2; + .display-name { font-weight: bold; font-size: 16px; @@ -161,13 +175,16 @@ export default Vue.extend({ } } } - .component-description:not(:last-child) { - margin-bottom: 12px; + &-description:not(:last-child) { + padding: 12px 12px 0; + // max-height: 9em; + // line-height: 1.5; + // @include no-scrollbar(); } &-tags { @include h-center(); flex-wrap: wrap; - margin-bottom: 8px; + padding: 0 8px 8px; .tag { @include h-center(); @include card(); @@ -187,7 +204,12 @@ export default Vue.extend({ } &-internal-data { @include h-center(); + position: sticky; + bottom: 0; justify-content: space-between; + min-height: 24px; + background-color: inherit; + padding: 8px 12px; .internal-name { opacity: 0.5; @@ -240,7 +262,11 @@ export default Vue.extend({ } } &-options { - margin-bottom: 12px; + padding: 8px 12px; + // flex: 1 0 0; + // height: 0; + // @include no-scrollbar(); + .component-detail-options-title { font-weight: bold; font-size: 14px; @@ -250,5 +276,8 @@ export default Vue.extend({ margin-bottom: 4px; } } + &-grow { + flex: 1; + } } diff --git a/src/components/settings-panel/SettingsPanel.vue b/src/components/settings-panel/SettingsPanel.vue index 87dbd38b2..c56c988c1 100644 --- a/src/components/settings-panel/SettingsPanel.vue +++ b/src/components/settings-panel/SettingsPanel.vue @@ -30,7 +30,7 @@
@@ -65,9 +64,6 @@ import { VPopup, VEmpty, } from '@/ui' -import { createPopper } from '@popperjs/core' -import { dq } from '@/core/utils' -import { addComponentListener } from '@/core/settings' import { getHook } from '@/plugins/hook' import ComponentSettings from './ComponentSettings.vue' import { @@ -77,7 +73,6 @@ import ComponentDetail from './ComponentDetail.vue' import ComponentTags from './ComponentTags.vue' import { getDescriptionText } from '../description' -let activePopper: ReturnType const defaultSearchFilter = (items: ComponentMetadata[]) => items export default { name: 'SettingsPanel', @@ -95,6 +90,7 @@ export default { components, renderedComponents: components.filter(c => !c.hidden), selectedComponent: null, + componentDetailOpen: false, collasped: false, peek: false, searchKeyword: '', @@ -137,24 +133,15 @@ export default { } }, }, - mounted() { - addComponentListener('settingsPanel.dockSide', () => { - this.updatePopper() - }) - }, methods: { - updatePopper() { - activePopper?.update() - }, closePopper() { - activePopper?.destroy() - this.selectedComponent = null + this.componentDetailOpen = false }, selectComponent(component: ComponentMetadata) { const closeHooks = getHook('settingsPanel.componentDetail.close') const openHooks = getHook('settingsPanel.componentDetail.open') const selectedName = this.selectedComponent?.name - const isAlreadySelected = selectedName === component.name + const isAlreadySelected = this.componentDetailOpen && selectedName === component.name closeHooks.before(selectedName) this.closePopper() closeHooks.after(selectedName) @@ -163,13 +150,7 @@ export default { } openHooks.before(component.name) this.selectedComponent = component - activePopper = createPopper( - dq(`.component-settings[data-name=${component.name}]`), - this.$refs.detailsPopup.$el, - { - placement: 'right', - }, - ) + this.componentDetailOpen = true openHooks.after(component.name) }, updateRenderedComponents() { @@ -306,7 +287,23 @@ export default { } .component-detail-panel { @include card(); - padding: 12px; + @include v-stretch(); + top: 50%; + left: calc(100% - 12px); + height: calc(100% - 22px); + z-index: -1; + transform: translateZ(0) translateY(-50%) translateX(calc(-48% * var(--direction))); + transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), + opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); + padding-left: 12px; + body.settings-panel-dock-right & { + left: unset; + right: calc(100% - 12px); + padding: 0 12px 0 0; + } + &.open { + transform: translateZ(0) translateY(-50%) translateX(0); + } } &.collasped { height: auto;