bx-1379-redesign #15
|
|
@ -26,8 +26,10 @@ declare module 'vue' {
|
|||
IMdiHexagonOutline: typeof import('~icons/mdi/hexagon-outline')['default']
|
||||
IMdiHome: typeof import('~icons/mdi/home')['default']
|
||||
IMdiHomeOutline: typeof import('~icons/mdi/home-outline')['default']
|
||||
IMdiMinusCircle: typeof import('~icons/mdi/minus-circle')['default']
|
||||
IMdiMonitorScreenshot: typeof import('~icons/mdi/monitor-screenshot')['default']
|
||||
IMdiPagePreviousOutline: typeof import('~icons/mdi/page-previous-outline')['default']
|
||||
IMdiPlusCircle: typeof import('~icons/mdi/plus-circle')['default']
|
||||
IMdiShop: typeof import('~icons/mdi/shop')['default']
|
||||
IMdiVideo3d: typeof import('~icons/mdi/video3d')['default']
|
||||
Item: typeof import('./src/components/Floorplan/item.vue')['default']
|
||||
|
|
|
|||
|
|
@ -43,7 +43,6 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25);
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
box-shadow: $boxShadow;
|
||||
color: #484848;
|
||||
|
||||
&.open {
|
||||
|
|
@ -62,34 +61,48 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25);
|
|||
background-color: $bg;
|
||||
border-top-left-radius: 0.5rem;
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
|
||||
// padding: 1.5rem;
|
||||
box-shadow: $boxShadow;
|
||||
|
||||
color: $textColor;
|
||||
}
|
||||
|
||||
&-list {}
|
||||
&-accordion {
|
||||
padding: 1.125rem 1rem;
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
max-height: 4rem;
|
||||
transition: max-height 300ms linear;
|
||||
|
||||
&-list-item {
|
||||
font-size: 1.5rem;
|
||||
color: $textColor2;
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
h3 {
|
||||
font-weight: 700;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-right: 2rem;
|
||||
&-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 1rem;
|
||||
color: var(--primary-color);
|
||||
cursor: pointer;
|
||||
|
||||
&.checked+label {
|
||||
color: $primary;
|
||||
svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
max-height: 50vh;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem 0;
|
||||
padding: 0.5rem 1rem;
|
||||
min-height: 3rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -102,23 +115,4 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25);
|
|||
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: darken($textColor2, 30%);
|
||||
opacity: 0.97;
|
||||
border-radius: 1rem;
|
||||
height: 3.75rem;
|
||||
color: $primary;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -18,11 +18,21 @@ const openedChange = () => {
|
|||
|
||||
watch(() => sidebar, () => {
|
||||
if (sidebar.is_open == false) {
|
||||
opened_desc.value = null
|
||||
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">
|
||||
|
|
@ -30,7 +40,21 @@ watch(() => sidebar, () => {
|
|||
<template v-else>
|
||||
<div class="sidebar-content">
|
||||
<h2>{{ sidebar_scene.name }}</h2>
|
||||
<div class="sidebar-list">
|
||||
<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')" />
|
||||
<i-mdi-plus-circle v-else />
|
||||
<h3>Объекты</h3>
|
||||
</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')" />
|
||||
<i-mdi-plus-circle v-else />
|
||||
<h3>Описание</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-list" v-if="false">
|
||||
<div class="sidebar-list-item" v-for="item in sidebar_scene.list">
|
||||
<input type="radio" v-model=opened_desc :value="item.id" :id="item.id.toString()"
|
||||
:checked="opened_desc == item.id" @change="openedChange"
|
||||
|
|
@ -39,7 +63,7 @@ watch(() => sidebar, () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-content" v-if="sidebar.title">
|
||||
<div class="sidebar-content" v-if="false">
|
||||
<h2>{{ sidebar.title }}</h2>
|
||||
<div class="sidebar-inner" v-if="sidebar.description">
|
||||
<template v-for="p in sidebar.description.replace(/(\n|\r)+/g, '\n').split('\n')">
|
||||
|
|
|
|||
Loading…
Reference in New Issue