[WIP] Добавил анимацию сайдбара
This commit is contained in:
megavrilinvv
@@ -1,76 +1,77 @@
|
||||
<template lang="pug">
|
||||
.sidebar.flex.flex-col.gap-y-1
|
||||
.form.flex.items-center.justify-end.py-4.pr-4.rounded-t
|
||||
q-btn.rotate-180(
|
||||
@click="openSidebar",
|
||||
dense,
|
||||
padding="8px",
|
||||
style="color: var(--font-grey-color); background: var(--bg-light-grey)"
|
||||
)
|
||||
img(:src="arrow")
|
||||
.form.flex.p-4
|
||||
q-btn(
|
||||
color="primary",
|
||||
size="16px",
|
||||
label="Создать запись",
|
||||
no-caps,
|
||||
icon="add",
|
||||
:style="{width: '100%', height: '40px'}",
|
||||
padding="0"
|
||||
)
|
||||
.flex.flex-col.gap-y-1(v-for="elem in patientList")
|
||||
q-expansion-item.expansion.font-bold.text-xm(
|
||||
expand-separator
|
||||
:label="elem.label",
|
||||
:class="{'patient': elem.label === 'Пациенты'}"
|
||||
)
|
||||
.select.flex.flex-col.font-medium.text-smm.px-4(
|
||||
v-if="elem.label !== 'Пациенты'",
|
||||
v-for="item in elem.data"
|
||||
.flex.flex-col.gap-y-1
|
||||
.item.flex.flex-col
|
||||
.form.flex.items-center.justify-end.py-4.pr-4.rounded-t
|
||||
q-btn.rotate-180(
|
||||
@click="openSidebar",
|
||||
dense,
|
||||
padding="8px",
|
||||
style="color: var(--font-grey-color); background: var(--bg-light-grey)"
|
||||
)
|
||||
.status.flex.items-center.gap-x-1.px-2
|
||||
img(:src="item.icon")
|
||||
span {{item.name}}
|
||||
.flex.flex-col.p-4.pb-0(v-else)
|
||||
.flex.h-8.w-full.items-center.justify-between
|
||||
base-input(
|
||||
v-model="foundPerson",
|
||||
debounce="10",
|
||||
@keyup.enter="searchPerson",
|
||||
@input="searchPerson",
|
||||
id="input",
|
||||
placeholder="Найти пациента...",
|
||||
outlined,
|
||||
:width="160",
|
||||
iconLeft,
|
||||
fontSize="12px",
|
||||
lineHeight="16px",
|
||||
textColor="var(--font-grey-color)"
|
||||
)
|
||||
q-icon(name="app:icon-search", size="16px", style="color: var(--font-grey-color)")
|
||||
q-btn.btn.ml-2(
|
||||
@click="sortPerson(elem.data)",
|
||||
icon="app:sort-number",
|
||||
:style="{width: '32px', height: '32px'}",
|
||||
padding="0"
|
||||
)
|
||||
.flex.flex-col
|
||||
.flex.items-center.justify-between.font-medium.text-smm.h-10.py-2.cursor-pointer(
|
||||
@click="checkAll(elem.data)"
|
||||
)
|
||||
span Все
|
||||
img(v-if="selectAll(elem.data)", :src="icon_ok")
|
||||
.person-wrapper.flex.flex-col
|
||||
.person.items-center.flex.justify-between.py-2.cursor-pointer(
|
||||
v-for="(person, index) in choiceData(elem.data)",
|
||||
@click="checkPerson(index, elem.data)"
|
||||
img(:src="arrow")
|
||||
.form.flex.p-4
|
||||
q-btn(
|
||||
color="primary",
|
||||
size="16px",
|
||||
label="Создать запись",
|
||||
no-caps,
|
||||
icon="add",
|
||||
:style="{width: '100%', height: '40px'}",
|
||||
padding="0"
|
||||
)
|
||||
.flex.flex-col.gap-y-1(v-for="elem in patientList")
|
||||
q-expansion-item.expansion.font-bold.text-xm(
|
||||
expand-separator
|
||||
:label="elem.label",
|
||||
:class="{'patient': elem.label === 'Пациенты'}"
|
||||
)
|
||||
.select.flex.flex-col.font-medium.text-smm.px-4(
|
||||
v-if="elem.label !== 'Пациенты'",
|
||||
v-for="item in elem.data"
|
||||
)
|
||||
.status.flex.items-center.gap-x-1.px-2
|
||||
img(:src="item.icon")
|
||||
span {{item.name}}
|
||||
.flex.flex-col.p-4.pb-0(v-else)
|
||||
.flex.h-8.w-full.items-center.justify-between
|
||||
base-input(
|
||||
v-model="foundPerson",
|
||||
debounce="10",
|
||||
@keyup.enter="searchPerson",
|
||||
@input="searchPerson",
|
||||
id="input",
|
||||
placeholder="Найти пациента...",
|
||||
outlined,
|
||||
:width="160",
|
||||
iconLeft,
|
||||
fontSize="12px",
|
||||
lineHeight="16px",
|
||||
textColor="var(--font-grey-color)"
|
||||
)
|
||||
.flex.items-center.gap-x-2
|
||||
img.h-10.w-10.object-cover.rounded-full(:src="person.avatar")
|
||||
.flex.flex-col.font-medium
|
||||
.text-smm {{trimOwnerName(person.last_name, person.first_name, person.patronymic)}}
|
||||
.text.text-xsx {{person.birthday}}
|
||||
img.h-6.w-6(v-if="person.check", :src="icon_ok")
|
||||
q-icon(name="app:icon-search", size="16px", style="color: var(--font-grey-color)")
|
||||
q-btn.btn.ml-2(
|
||||
@click="sortPerson(elem.data)",
|
||||
icon="app:sort-number",
|
||||
:style="{width: '32px', height: '32px'}",
|
||||
padding="0"
|
||||
)
|
||||
.flex.flex-col
|
||||
.flex.items-center.justify-between.font-medium.text-smm.h-10.py-2.cursor-pointer(
|
||||
@click="checkAll(elem.data)"
|
||||
)
|
||||
span Все
|
||||
img(v-if="selectAll(elem.data)", :src="icon_ok")
|
||||
.person-wrapper.flex.flex-col
|
||||
.person.items-center.flex.justify-between.py-2.cursor-pointer(
|
||||
v-for="(person, index) in choiceData(elem.data)",
|
||||
@click="checkPerson(index, elem.data)"
|
||||
)
|
||||
.flex.items-center.gap-x-2
|
||||
img.h-10.w-10.object-cover.rounded-full(:src="person.avatar")
|
||||
.flex.flex-col.font-medium
|
||||
.text-smm {{trimOwnerName(person.last_name, person.first_name, person.patronymic)}}
|
||||
.text.text-xsx {{person.birthday}}
|
||||
img.h-6.w-6(v-if="person.check", :src="icon_ok")
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -137,9 +138,6 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.sidebar
|
||||
width: 232px
|
||||
|
||||
.form
|
||||
background: var(--default-white)
|
||||
width: 100%
|
||||
|
||||
Reference in New Issue
Block a user