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

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

@ -288,7 +288,7 @@ watch(() => sidebar, () => {
el.getWorldPosition(target_vector); el.getWorldPosition(target_vector);
controls_targetto.value = 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 }) }, { deep: true })

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

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

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

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

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

@ -10,7 +10,8 @@ export const usePromoSidebar = defineStore('promo_sidebar', {
target: undefined, target: undefined,
target_name: undefined, target_name: undefined,
loading: true, loading: true,
is_open: false is_open: false,
accordions: [],
} as PromoSidebar } as PromoSidebar
}, },
actions: { actions: {
@ -29,12 +30,12 @@ export const usePromoSidebar = defineStore('promo_sidebar', {
sidebar_data.target = target.target.toString() sidebar_data.target = target.target.toString()
sidebar_data.target_name = target.target_name sidebar_data.target_name = target.target_name
} }
this.accordions.push('desc')
this.setData(sidebar_data) this.setData(sidebar_data)
} }
this.is_open = true this.is_open = true
this.loading = true this.loading = true
}, },
setData(data: PromoSidebarData) { setData(data: PromoSidebarData) {
this.$state = Object.assign(this.$state, data) this.$state = Object.assign(this.$state, data)
@ -44,6 +45,16 @@ export const usePromoSidebar = defineStore('promo_sidebar', {
this.$reset() this.$reset()
this.is_open = false 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)
} }
} }
}) })