ksenia_mikhailova
/
demo-int-table
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sidebar content

This commit is contained in:
aarizona 2024-08-29 10:21:07 +03:00
parent 857f3f0c03
commit d0942f77e4
5 changed files with 43 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
front/src/assets/sidebar.scss
View File

@ -78,7 +78,13 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25);
font-weight: 700;
font-size: 1.25rem;
}
p {
&:not(:last-child) {
margin-bottom: 1rem;
}
}
&-title {
display: flex;
align-items: center;
@ -86,15 +92,22 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25);
gap: 1rem;
color: var(--primary-color);
cursor: pointer;
svg {
flex-shrink: 0;
}
}
&.open {
max-height: 50vh;
}
&-content {
max-height: 20vh;
overflow: auto;
margin-top: 1.125rem;
}
}
h2 {

2
front/src/components/Promo/load_models.vue
View File

@ -288,7 +288,7 @@ watch(() => sidebar, () => {
el.getWorldPosition(target_vector);
controls_targetto.value = target_vector;
camera_rotatetoto.value = new Quaternion(-0.5, -0.25, -0.125, 0.875,)
camera_rotatetoto.value = new Quaternion(Math.PI*0.5, Math.PI*0.5, Math.PI*0.5, Math.PI*0.5)
}
}
}, { deep: true })

34
front/src/components/Promo/sidebar.vue
View File

@ -18,20 +18,10 @@ const openedChange = () => {
watch(() => sidebar, () => {
if (sidebar.is_open == false) {
opened_desc.value = null;
open_accordions.value = []
} else {
opened_desc.value = sidebar.id_clickable
}
}, { deep: true })
const open_accordions = ref([] as string[])
const toggleAccordion = (name: string) => {
if (open_accordions.value.includes(name)) {
open_accordions.value.splice(open_accordions.value.indexOf(name), 1)
} else {
open_accordions.value.push(name)
}
}
</script>
<template>
<div class="sidebar" :class="[{ 'open': sidebar.is_open }]" ref="sidebar_obj">
@ -39,28 +29,28 @@ const toggleAccordion = (name: string) => {
<template v-else>
<div class="sidebar-content">
<h2>{{ sidebar_scene.name }}</h2>
<div class="sidebar-accordion" :class="[{ 'open': open_accordions.includes('obj') }]">
<div class="sidebar-accordion-title" @click="toggleAccordion('obj')">
<i-mdi-minus-circle v-if="open_accordions.includes('obj')" />
<div class="sidebar-accordion" :class="[{ 'open': sidebar.isAccOpen('obj') }]">
<div class="sidebar-accordion-title" @click="sidebar.toggleAccordion('obj')">
<i-mdi-minus-circle v-if="sidebar.isAccOpen('obj')" />
<i-mdi-plus-circle v-else />
<h3>Объекты</h3>
</div>
<div class="sidebar-accordion-content" v-if="open_accordions.includes('obj')">
<div class="sidebar-accordion-content" v-if="sidebar.isAccOpen('obj')">
<div class="sidebar-list-item" v-for="item in sidebar_scene.visible">
<input type="checkbox" v-model=item.is_enabled :value="item.id" :id="item.id.toString()" />
<label :for="item.id.toString()">{{ item.name }}</label>
</div>
</div>
</div>
<div class="sidebar-accordion" :class="[{ 'open': open_accordions.includes('clickable') }]">
<div class="sidebar-accordion-title" @click="toggleAccordion('clickable')">
<i-mdi-minus-circle v-if="open_accordions.includes('clickable')" />
<div class="sidebar-accordion" :class="[{ 'open': sidebar.isAccOpen('clickable') }]">
<div class="sidebar-accordion-title" @click="sidebar.toggleAccordion('clickable')">
<i-mdi-minus-circle v-if="sidebar.isAccOpen('clickable')" />
<i-mdi-plus-circle v-else />
<h3>Кликабельные области</h3>
</div>
<div class="sidebar-accordion-content" v-if="open_accordions.includes('clickable')">
<div class="sidebar-accordion-content" v-if="sidebar.isAccOpen('clickable')">
<div class="sidebar-list-item" v-for="item in sidebar_scene.clickable">
<input type="radio" v-model=opened_desc :value="item.id" :id="item.id.toString()"
:checked="opened_desc == item.id" @change="openedChange"
@ -69,13 +59,13 @@ const toggleAccordion = (name: string) => {
</div>
</div>
</div>
<div class="sidebar-accordion" :class="[{ 'open': open_accordions.includes('desc') }]">
<div class="sidebar-accordion-title" @click="toggleAccordion('desc')">
<i-mdi-minus-circle v-if="open_accordions.includes('desc')" />
<div class="sidebar-accordion" :class="[{ 'open': sidebar.isAccOpen('desc') }]">
<div class="sidebar-accordion-title" @click="sidebar.toggleAccordion('desc')">
<i-mdi-minus-circle v-if="sidebar.isAccOpen('desc')" />
<i-mdi-plus-circle v-else />
<h3>Описание</h3>
</div>
<div class="sidebar-accordion-content" v-if="open_accordions.includes('desc')">
<div class="sidebar-accordion-content" v-if="sidebar.isAccOpen('desc')">
<template
v-for="p in (sidebar.description || sidebar_scene.description || '').replace(/(\n|\r)+/g, '\n').split('\n')">
<p>{{ p }}</p>

1
front/src/index.d.ts vendored
View File

@ -63,6 +63,7 @@ interface PromoSidebar extends PromoSidebarData {
id_clickable?: number
loading: boolean
is_open: boolean
accordions: string[]
}
interface PromoScene {
id: number

15
front/src/stores/promo_sidebar.ts
View File

@ -10,7 +10,8 @@ export const usePromoSidebar = defineStore('promo_sidebar', {
target: undefined,
target_name: undefined,
loading: true,
is_open: false
is_open: false,
accordions: [],
} as PromoSidebar
},
actions: {
@ -29,12 +30,12 @@ export const usePromoSidebar = defineStore('promo_sidebar', {
sidebar_data.target = target.target.toString()
sidebar_data.target_name = target.target_name
}
this.accordions.push('desc')
this.setData(sidebar_data)
}
this.is_open = true
this.loading = true
},
setData(data: PromoSidebarData) {
this.$state = Object.assign(this.$state, data)
@ -44,6 +45,16 @@ export const usePromoSidebar = defineStore('promo_sidebar', {
this.$reset()
this.is_open = false
}
},
toggleAccordion(name: string) {
if (this.accordions.includes(name)) {
this.accordions.splice(this.accordions.indexOf(name), 1)
} else {
this.accordions.push(name)
}
},
isAccOpen(name: string) {
return this.accordions.includes(name)
}
}
})