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;