mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Use fixed ComponentDetail popup
This commit is contained in:
parent
4cb86a92bb
commit
cdb64c3afa
@ -16,7 +16,7 @@
|
||||
{{ t.displayName }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="component-detail-separator"></div>
|
||||
<!-- <div class="component-detail-separator"></div> -->
|
||||
<template
|
||||
v-if="(componentData.options && generatedOptions.length > 0) || componentData.extraOptions"
|
||||
>
|
||||
@ -37,12 +37,16 @@
|
||||
</div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="component-detail-separator"></div>
|
||||
<!-- <div class="component-detail-separator"></div> -->
|
||||
</template>
|
||||
<template v-if="!(componentData.options && !componentData.description)">
|
||||
<ComponentDescription :component-data="componentData" />
|
||||
<div class="component-detail-separator"></div>
|
||||
<ComponentDescription
|
||||
class="component-detail-description"
|
||||
:component-data="componentData"
|
||||
/>
|
||||
<!-- <div class="component-detail-separator"></div> -->
|
||||
</template>
|
||||
<div class="component-detail-grow"></div>
|
||||
<div class="component-detail-internal-data">
|
||||
<div class="internal-name">
|
||||
内部名称: {{ 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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
<ComponentSettings
|
||||
v-for="c of renderedComponents"
|
||||
:key="c.name"
|
||||
:class="{ selected: selectedComponent === c }"
|
||||
:class="{ selected: selectedComponent === c && componentDetailOpen }"
|
||||
:component-data="c"
|
||||
:data-name="c.name"
|
||||
@click.native="selectComponent(c)"
|
||||
@ -43,7 +43,7 @@
|
||||
ref="detailsPopup"
|
||||
class="component-detail-panel"
|
||||
:trigger-element="$refs.componentList"
|
||||
:open="Boolean(selectedComponent)"
|
||||
:open="componentDetailOpen"
|
||||
@popup-change="!$event && closePopper()"
|
||||
>
|
||||
<ComponentDetail
|
||||
@ -51,7 +51,6 @@
|
||||
:key="selectedComponent.name"
|
||||
:component-data="selectedComponent"
|
||||
@close="closePopper()"
|
||||
@mounted="updatePopper()"
|
||||
/>
|
||||
</VPopup>
|
||||
</div>
|
||||
@ -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<typeof createPopper>
|
||||
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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user