Merge branch 'ASTRA-137' into 'master'

WIP Доделала селект на хедере

See merge request andrusyakka/urban-couscous!483

src/components/HeaderInputs.vue

@@ -1,17 +1,22 @@
 <template lang="pug">
   div(:class="{active: focused}")
     .header-inputs-wrapper.flex.items-center.font-medium.text-base
-      .h-full.px-4.py-2.select.flex.items-center(:style="{color: 'var(--font-grey-color)'}")
+      .h-full.px-4.py-2.select.flex.items-center
-        q-menu(:offset="[0, 6]" v-model="isOpen")
+        q-menu(
+          :offset="[0, 6]",
+          v-model="isOpen",
+          :style="{'box-shadow': '-4px -4px 8px 0px rgba(9, 10, 21, 0.10), 4px 4px 8px 0px rgba(9, 10, 21, 0.10)'}"
+        )
           .menu.bg-shite.p-4.flex.flex-col.gap-y-3
             .item.text-base.font-medium.flex.gap-x-2.cursor-pointer(v-for="filter in filters", v-close-popup, @click="selectFilter(filter)")
               .h-6.w-6.items-center.justify-center.flex
-                q-icon(name="app:ok", size="12px", v-if="filter === selectedFilter")
+                q-icon.text-dark(name="app:ok", size="12px", v-if="filter === selectedFilter")
-              .flex.items-center {{ filter }}
+              .flex.items-center.text-dark {{ filter }}
-        q-icon.mr-2(
+        q-icon.mr-3(
           name="app:icon-search",
           size="18px"
         )
+        .flex-1.h-full.flex.items-center.justify-between
           .text-base.font-medium {{ selectedFilter }}
           .h-4.w-4.flex.items-center.pt-1.justify-center.ml-1
             q-icon(
@@ -19,30 +24,6 @@
               size="8px",
               :class="{'rotate-180': isOpen}"
             )
-      //- q-select.pl-4.pr-5.select(
-      //-   v-model="selectedFilter",
-      //-   :options="filters",
-      //-   borderless,
-      //-   dense,
-      //-   dropdown-icon="app:down-arrow",
-      //-   behavior="menu",
-      //-   :menu-offset="[18, 4]"
-      //-   multiple
-      //- )
-      //-   template(v-slot:selected)
-      //-     span(:style="{color: 'var(--font-grey-color)', 'font-weight': 500, 'line-height': 'normal' }") {{ selectedFilter }}
-      //-   template(v-slot:prepend)
-      //-     q-icon.pr-1(
-      //-       name="app:icon-search",
-      //-       size="18px",
-      //-       :style="{color: 'var(--font-grey-color)'}"
-      //-     )
-      //-   template(v-slot:option="scope")
-      //-     //.p-14.bg-white.w-54.flex.gap-y-3
-      //-     q-item.item(v-bind="scope.itemProps", :clickable="false")
-      //-       q-item-section.flex
-      //-         q-icon(name="app:ok", size="16px", v-if="scope.opt === selectedFilter")
-      //-         q-item-label {{ scope.opt }}
       q-input.input.px-4(
         type="text",
         placeholder="Искать ...",
@@ -91,26 +72,12 @@ export default {
   .select
     border-right-color: var(--font-dark-blue-color) !important
 
-// .select
-//   border-right-width: 1.5px
-//   border-right-style: solid
-//   border-right-color: var(--border-light-grey-color)
-//   width: 170px
-//   &:deep(q-field__native)
-//     color: var(--font-grey-color) !important
-//     font-weight: 500 !important
-//     line-height: normal !important
-//   &:deep(.q-select__dropdown-icon)
-//     font-size: 8px !important
-//   &:deep(.q-field__append)
-//     padding-left: 4px
-//     padding-top: 4px
-
 .select
   border-right-width: 1.5px
   border-right-style: solid
   border-right-color: var(--border-light-grey-color)
-  width: 170px
+  width: 167px
+  color: var(--font-grey-color)
 
 .input
   width: 230px
@@ -126,6 +93,6 @@ export default {
 .menu
   width: 216px
 
-.item
+.item:hover
-  color: var(--font-dark-blue-color)
+  opacity: 0.6
 </style>

src/components/TheHeader.vue

@@ -38,7 +38,7 @@
           base-avatar(:size="36", :color="userData?.color", v-if="!userData?.photo") {{changeName}}       
           base-avatar(:size="32", v-else)
             img.h-full.object-cover(:src="url + userData?.photo", alt="Avatar")
-          .h-6.w-6.flex.items-center.justify-center.ml-2
+          .h-6.w-6.flex.items-center.justify-center.ml-2.pt-1
             q-icon(name="app:icon-down-arrow", size="12px")
           q-menu(
             :offset="[60, 6]"