admin/astra-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[WIP] Изменил стили сайдбара календаря в закрытом его состоянии

Browse Source
This commit is contained in:
megavrilinvv
2023-07-21 18:26:52 +03:00
parent 529d949702
commit 1daa24bbf6
8 changed files with 143 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/pages/newCalendar/components/CalendarSidebar.vue
View File

@@ -1,11 +1,10 @@
<template lang="pug">
.sidebar.flex.flex-col.gap-y-1
.sidebar.flex.flex-col.gap-y-px
.button.flex.rounded-t
q-btn(
q-btn.button-open(
@click="openSidebar",
dense,
padding="8px",
style="color: var(--font-grey-color); background: var(--bg-light-grey)"
padding="8px"
)
img(:src="arrow")
.button.flex
@@ -34,10 +33,10 @@
self="top right",
:style="{'margin-left': '8px !important'}"
)
.status-wrapper.flex.flex-col.gap-y-4.p-4
.font-bold.text-xm {{svg.text}}
.flex.flex-col.gap-2px
.status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7(
.modal-wrapper.flex.flex-col.gap-y-2
.font-bold.text-xm.px-2 {{svg.text}}
.flex.flex-col
.status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7.px-2(
v-for="status in patientData.statuses"
)
img(:src="status.icon")
@@ -48,10 +47,10 @@
self="top right",
:style="{'margin-left': '8px !important'}"
)
.fill-wrapper.flex.flex-col.gap-y-4.p-4
.font-bold.text-xm {{svg.text}}
.flex.flex-col.gap-2px
.status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7(
.modal-wrapper.flex.flex-col.gap-y-2
.font-bold.text-xm.px-2 {{svg.text}}
.flex.flex-col
.status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7.px-2(
v-for="medical in medicalData"
)
img(:src="medical.icon")
@@ -88,19 +87,25 @@
style="color: var(--font-grey-color)"
)
q-btn.ml-2(
icon="app:sort-number",
@click="sortPerson(patientsData)",
:style="{width: '32px', height: '32px'}",
:style="{width: '32px', height: '32px', border: '1px solid var(--gray-scondary)'}",
padding="0",
:class="sortingClass"
)
.flex.items-center.justify-between.font-medium.text-smm.h-10.py-2.cursor-pointer(
@click="checkAll(patientsData)"
calendar-sidebar-svg(name-svg="sort", :active="sort")
.flex.items-center.justify-between.font-medium.text-smm.h-55.py-2.cursor-pointer(
@click="checkAll(patientsData)",
v-if="!foundPerson"
)
.flex.items-center Все
.flex.items-center.gap-x-2
.all-icon.flex.items-center.justify-center
calendar-sidebar-svg.p-6px(name-svg="group", active)
.flex.flex-col.font-medium
.text-smm Все
.grey-color.text.text-xsx {{ patientsData?.length + " пациентов" }}
img(v-if="selectAll(patientsData)", :src="icon_ok")
.person-wrapper.flex.flex-col(@scroll="scrollTo", id="persons")
.person.items-center.flex.justify-between.py-2.cursor-pointer(
.person.items-center.flex.justify-between.py-2.cursor-pointer.h-55(
v-for="(person, index) in choiceData(patientsData)",
@click="checkPerson(index, patientsData)"
)
@@ -108,7 +113,7 @@
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}}
.grey-color.text.text-xsx {{person.birthday}}
img.h-6.w-6(v-if="person.check", :src="icon_ok")
.gradient.flex.absolute(v-if="isGradient")
</template>
@@ -121,6 +126,7 @@ import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
import CalendarSidebarSvg from "@/pages/newCalendar/components/CalendarSidebarSvg.vue";
import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
import icon_patients from "@/assets/icons/person_group.svg";
import BaseButton from "@/components/base/BaseButton.vue";
import BaseInput from "@/components/base/BaseInput.vue";
@@ -130,6 +136,7 @@ export default {
components: { BaseInput, CalendarSidebarSvg, BaseButton },
data() {
return {
icon_patients,
arrow,
icon_ok,
sort_word,
@@ -176,7 +183,7 @@ export default {
},
showActive(name) {
this.patientData.arrSvg.forEach((e) => {
if (e.name === name) e.active = true;
if (e.name === name) e.active = !e.active;
});
},
copyValue(text) {
@@ -213,7 +220,13 @@ export default {
}
},
scrollTo(event) {
if (event.currentTarget.scrollTop === 305)
if (
Math.abs(
event.currentTarget.scrollHeight -
event.currentTarget.clientHeight -
event.currentTarget.scrollTop
) < 1
)
return (this.isGradient = false);
this.isGradient = true;
},
@@ -222,7 +235,7 @@ export default {
foundPerson: {
immediate: true,
handler(val) {
if (val && document.getElementById("persons").offsetHeight < 311) {
if (val && document.getElementById("persons").offsetHeight < 296) {
this.isGradient = false;
}
},
@@ -251,44 +264,50 @@ export default {
transition: 0.1s
opacity: 1
.status-wrapper
width: 232px
height: 188px
.fill-wrapper
height: 158px
.modal-wrapper
width: 232px
padding: 16px 8px 6px
.patient-wrapper
width: 232px
max-height: 445px
min-height: 102px
color: var(--font-dark-blue-color)
.h-55
height: 55px
.status
height: 28px
height: 40px
width: 100%
&:hover
height: 28px
height: 40px
background: var(--gray-thirdly)
cursor: pointer
.person-wrapper
overflow-y: auto
margin-right: -10px
max-height: 311px
max-height: 296px
&::-webkit-scrollbar
width: 4px
&::-webkit-scrollbar-track:vertical
margin-top: -28px
margin-top: -40px
margin-bottom: 18px
.person
height: 56px
width: calc(100% - 10px)
border-bottom: 1px solid var(--bg-light-grey)
&:first-child
border-top: 1px solid var(--bg-light-grey)
.all-icon
height: 40px
width: 40px
border-radius: 50%
background: var(--surface-blue-big)
#input :deep(.q-field__control)
height: 32px
.q-field__prepend
@@ -330,9 +349,15 @@ export default {
bottom: 0px
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--default-white) 100%)
.button-open
border: 1px solid var(--gray-scondary)
color: var(--font-grey-color)
background: var(--bg-light-grey)
.sort-icon-default
background-color: var(--bg-light-grey)
color: var(--font-grey-color)
border: 1px solid var(--gray-scondary)
.sort-icon-active
background-color: var(--btn-blue-color)
@@ -342,6 +367,9 @@ export default {
transition: background 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1)
background: var(--bg-light-blue-color)
.grey-color
color: var(--font-grey-color)
.q-btn :deep(.q-focus-helper)
display: none