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

src/assets/icons/not_accepted.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="ico/ status round">
+<path id="Rectangle 8093 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M3.75 10C3.75 13.4518 6.54822 16.25 10 16.25C13.4518 16.25 16.25 13.4518 16.25 10C16.25 6.54822 13.4518 3.75 10 3.75C6.54822 3.75 3.75 6.54822 3.75 10ZM10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5Z" fill="#9294A7"/>
+</g>
+</svg>

src/assets/icons/status_accepted.svg

@@ -1,4 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 10C3.75 13.4518 6.54822 16.25 10 16.25C13.4518 16.25 16.25 13.4518 16.25 10C16.25 6.54822 13.4518 3.75 10 3.75C6.54822 3.75 3.75 6.54822 3.75 10ZM10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5Z" fill="#55CD76"/>
+<g id="ico/ status round">
-<path d="M5 10C5 7.23858 7.23858 5 10 5C12.7614 5 15 7.23858 15 10C15 12.7614 12.7614 15 10 15C7.23858 15 5 12.7614 5 10Z" fill="#55CD76"/>
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5Z" fill="#21BA72"/>
+</g>
 </svg>

src/assets/icons/status_reception.svg

@@ -1,5 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.91667 10C2.91667 13.912 6.08798 17.0833 10 17.0833C13.912 17.0833 17.0833 13.912 17.0833 10C17.0833 6.08798 13.912 2.91667 10 2.91667C6.08798 2.91667 2.91667 6.08798 2.91667 10ZM10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5Z" fill="#4772F2"/>
+<g id="ico/ status round">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.79167 10C4.79167 12.8765 7.12352 15.2083 10 15.2083C12.8765 15.2083 15.2083 12.8765 15.2083 10C15.2083 7.12352 12.8765 4.79167 10 4.79167C7.12352 4.79167 4.79167 7.12352 4.79167 10ZM10 4.16667C6.77834 4.16667 4.16667 6.77834 4.16667 10C4.16667 13.2217 6.77834 15.8333 10 15.8333C13.2217 15.8333 15.8333 13.2217 15.8333 10C15.8333 6.77834 13.2217 4.16667 10 4.16667Z" fill="#4772F2"/>
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5Z" fill="#4772F2"/>
-<path d="M5.83333 10C5.83333 7.69881 7.69881 5.83333 10 5.83333C12.3012 5.83333 14.1667 7.69881 14.1667 10C14.1667 12.3012 12.3012 14.1667 10 14.1667C7.69881 14.1667 5.83333 12.3012 5.83333 10Z" fill="#4772F2"/>
+</g>
 </svg>

src/assets/icons/status_rejected.svg

@@ -1,4 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 10C3.75 13.4518 6.54822 16.25 10 16.25C13.4518 16.25 16.25 13.4518 16.25 10C16.25 6.54822 13.4518 3.75 10 3.75C6.54822 3.75 3.75 6.54822 3.75 10ZM10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5Z" fill="#FF6565"/>
+<g id="ico/ status round">
-<path d="M5 10C5 7.23858 7.23858 5 10 5C12.7614 5 15 7.23858 15 10C15 12.7614 12.7614 15 10 15C7.23858 15 5 12.7614 5 10Z" fill="#FF6565"/>
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5Z" fill="#F34549"/>
+</g>
 </svg>

src/assets/sass/variables.sass

@@ -91,4 +91,6 @@
   --bg-chip-yellow-color: #fff0ca
   --bg-chip-pink-color: #F7D9FF
   --gray-thirdly: #f4f4f6
+  --surface-blue-big: #ECF0FE
+  --gray-scondary:#DDDDE8
 

src/pages/newCalendar/components/CalendarOpenSidebar.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   .sidebar-wrapper.flex.flex-col.gap-y-1
     .form.flex.items-center.justify-end.py-4.pr-4.rounded-t
-      q-btn.rotate-180(
+      q-btn.rotate-180.button-open(
         @click="openSidebar(); hideSidebar()",
         dense,
         padding="8px",
@@ -55,17 +55,22 @@
                   )
               q-btn.ml-2(
                 @click="sortPerson(elem.data)",
-                icon="app:sort-number",
                 :class="sortingClass",
                 :style="{width: '32px', height: '32px'}",
                 padding="0"
               )
-            .flex.items-center.justify-between.font-medium.text-smm.h-10.py-2.cursor-pointer(
+                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(elem.data)"
             )
-              .flex.items-center.h-6 Все
+              .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 {{ elem.data?.length + " пациентов" }}
               img(v-if="selectAll(elem.data)", :src="icon_ok")
-          .person-wrapper.flex.flex-col
+          .person-wrapper.flex.flex-col(@scroll="scrollTo", id="persons")
             .person.items-center.flex.justify-between.py-2.cursor-pointer(
               v-for="(person, index) in choiceData(elem.data)",
               @click="checkPerson(index, elem.data)"
@@ -76,6 +81,7 @@
                   .text-smm {{trimOwnerName(person.last_name, person.first_name, person.patronymic)}}
                   .grey-color.text-xsx {{person.birthday}}
               img.h-6.w-6(v-if="person.check", :src="icon_ok")
+            .gradient.flex.absolute(v-if="isGradient")
 </template>
 
 <script>
@@ -86,11 +92,12 @@ import BaseInput from "@/components/base/BaseInput.vue";
 import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
 import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
 import BaseButton from "@/components/base/BaseButton.vue";
+import CalendarSidebarSvg from "@/pages/newCalendar/components/CalendarSidebarSvg.vue";
 
 export default {
   name: "CalendarOpenSidebar",
   props: { openSidebar: Function, createForm: Function },
-  components: { BaseInput, BaseButton },
+  components: { BaseInput, BaseButton, CalendarSidebarSvg },
   data() {
     return {
       val: [],
@@ -101,6 +108,7 @@ export default {
       sortData: [],
       patientList: patientList,
       sort: false,
+      isGradient: true,
       trimOwnerName: trimName,
     };
   },
@@ -176,6 +184,26 @@ export default {
     hideSidebar() {
       this.patientList.forEach((e) => (e.choice = false));
     },
+    scrollTo(event) {
+      if (
+        Math.abs(
+          event.currentTarget.scrollHeight -
+            event.currentTarget.clientHeight -
+            event.currentTarget.scrollTop
+        ) < 1
+      )
+        return (this.isGradient = false);
+      this.isGradient = true;
+    },
+  },
+  watch: {
+    foundPerson: {
+      immediate: true,
+      handler(val) {
+        if (val && document.getElementById("persons").offsetHeight < 480)
+          this.isGradient = false;
+      },
+    },
   },
 };
 </script>
@@ -201,11 +229,28 @@ export default {
 .expansion :deep(.q-item__section--side)
   color: var(--font-dark-blue-color)
 
+.expansion :deep(.q-icon)
+  font-size: 20px
+
+.button-open
+  border: 1px solid var(--gray-scondary)
+  color: var(--font-grey-color)
+  background: var(--bg-light-grey)
+
 .select
   padding-bottom: 2px
   &:last-child
     padding-bottom: 16px
 
+.h-55
+  height: 55px
+
+.all-icon
+  height: 40px
+  width: 40px
+  border-radius: 50%
+  background: var(--surface-blue-big)
+
 .status
   border-radius: 4px
   height: 28px
@@ -267,8 +312,8 @@ export default {
     margin-bottom: 26px
 
 .person
-  height: 56px
+  height: 55px
-  width: calc(100% - 10px)
+  width: calc(100% - 6px)
   border-bottom: 1px solid var(--bg-light-grey)
   &:first-child
     border-top: 1px solid var(--bg-light-grey)
@@ -298,4 +343,11 @@ export default {
 
 .input :deep(.q-field__append)
   padding-left: 6px
+
+.gradient
+  width: 232px
+  height: 44px
+  right: 0px
+  bottom: 0px
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--default-white) 100%)
 </style>

src/pages/newCalendar/components/CalendarSidebar.vue

@@ -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",
+        padding="8px"
-        style="color: var(--font-grey-color); background: var(--bg-light-grey)"
       )
         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
+        .modal-wrapper.flex.flex-col.gap-y-2
-          .font-bold.text-xm {{svg.text}}
+          .font-bold.text-xm.px-2 {{svg.text}}
-          .flex.flex-col.gap-2px
+          .flex.flex-col
-            .status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7(
+            .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
+        .modal-wrapper.flex.flex-col.gap-y-2
-          .font-bold.text-xm {{svg.text}}
+          .font-bold.text-xm.px-2 {{svg.text}}
-          .flex.flex-col.gap-2px
+          .flex.flex-col
-            .status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7(
+            .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(
+                  calendar-sidebar-svg(name-svg="sort", :active="sort")
-                @click="checkAll(patientsData)"
+              .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
+.modal-wrapper
-  width: 232px
-  height: 188px
-
-.fill-wrapper
-  height: 158px
   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
 

src/pages/newCalendar/components/CalendarSidebarSvg.vue

@@ -11,6 +11,11 @@
       g(opacity="0.6")
         path(d="M20.3457 12.077H27.66C30.0584 12.077 32.0028 14.04 32.0028 16.4616V17.3847C32.0028 18.2768 31.2865 19.0001 30.4028 19.0001H23.6888C22.357 16.8586 20.129 15.3317 17.5488 14.8961C18.2892 14.1192 18.8898 13.2091 19.3081 12.2029C19.6406 12.1206 19.9881 12.077 20.3457 12.077Z" :fill="active ? '#4772F2' : '#9294A7'")
         path(d="M24.0677 9.83683C26.5477 9.83683 28.5582 7.82634 28.5582 5.34627C28.5582 2.8662 26.5477 0.855713 24.0677 0.855713C21.5876 0.855713 19.5771 2.8662 19.5771 5.34627C19.5771 7.82634 21.5876 9.83683 24.0677 9.83683Z" :fill="active ? '#4772F2' : '#9294A7'")
+    g(v-if="nameSvg === 'sort'")
+      path(fill-rule="evenodd" clip-rule="evenodd" d="M5.76088 3.12494C6.10606 3.12494 6.38588 3.40476 6.38588 3.74994V14.5787L8.55012 12.0898C8.77662 11.8293 9.17139 11.8018 9.43186 12.0283C9.69233 12.2548 9.71988 12.6496 9.49338 12.91L6.23251 16.66C6.1138 16.7966 5.94178 16.8749 5.76088 16.8749C5.57998 16.8749 5.40795 16.7966 5.28925 16.66L2.02838 12.91C1.80188 12.6496 1.82942 12.2548 2.0899 12.0283C2.35037 11.8018 2.74514 11.8293 2.97164 12.0898L5.13588 14.5787V3.74994C5.13588 3.40476 5.4157 3.12494 5.76088 3.12494Z" :fill="active ? 'var(--default-white)' : '#9294A7'")
+      path(fill-rule="evenodd" clip-rule="evenodd" d="M14.729 2.81763C14.9618 2.81763 15.1752 2.94695 15.283 3.15324L18.0222 8.39692C18.1821 8.70287 18.0636 9.08045 17.7577 9.24028C17.4517 9.4001 17.0741 9.28165 16.9143 8.9757L16.0583 7.33701H13.3998L12.5437 8.9757C12.3839 9.28165 12.0063 9.4001 11.7004 9.24028C11.3944 9.08045 11.276 8.70287 11.4358 8.39692L14.175 3.15324C14.2828 2.94695 14.4963 2.81763 14.729 2.81763ZM14.0528 6.08701H15.4053L14.729 4.79246L14.0528 6.08701Z" :fill="active ? 'var(--default-white)' : '#9294A7'")
+      path(fill-rule="evenodd" clip-rule="evenodd" d="M14.0513 10.2358C14.8116 10.071 15.6957 10.1295 16.3039 10.2174C16.6114 10.2619 16.8395 10.5254 16.8395 10.836V16.25C16.8395 16.5951 16.5597 16.875 16.2145 16.875C15.8693 16.875 15.5895 16.5951 15.5895 16.25V14.6599L12.9292 16.7421C12.6573 16.9549 12.2645 16.907 12.0518 16.6352C11.839 16.3634 11.8869 15.9705 12.1587 15.7578L14.3578 14.0366C14.2053 14.004 14.054 13.964 13.9078 13.9147C13.5445 13.7921 13.1658 13.5977 12.8743 13.2766C12.5702 12.9416 12.3977 12.5081 12.3977 11.9898C12.3977 11.4732 12.603 11.0528 12.9447 10.7511C13.2645 10.4687 13.6704 10.3184 14.0513 10.2358ZM15.5895 12.9233C15.1533 12.9047 14.6894 12.8591 14.3075 12.7303C14.0626 12.6476 13.8989 12.5455 13.7999 12.4365C13.7136 12.3414 13.6477 12.2111 13.6477 11.9898C13.6477 11.8351 13.6965 11.7548 13.772 11.6881C13.8695 11.6021 14.0441 11.5164 14.3162 11.4574C14.6968 11.3749 15.1581 11.3673 15.5895 11.3973V12.9233Z" :fill="active ? 'var(--default-white)' : '#9294A7'")
+
 </template>
 
 <script>
@@ -26,6 +31,7 @@ export default {
         round: { width: 40, height: 40 },
         medcard: { width: 40, height: 40 },
         group: { width: 33, height: 27 },
+        sort: { width: 20, height: 20 },
       },
     };
   },