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

Merge branch 'ASTRA-137' into 'master'

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

See merge request andrusyakka/urban-couscous!483
This commit is contained in:
Daria Golova
2023-07-24 15:49:02 +00:00
parent f04574b4f8 9e8fb856eb
commit dcaa7b7995
2 changed files with 22 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/HeaderInputs.vue
View File

@@ -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)'}")
q-menu(:offset="[0, 6]" v-model="isOpen")
.h-full.px-4.py-2.select.flex.items-center
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")
.flex.items-center {{ filter }}
q-icon.mr-2(
q-icon.text-dark(name="app:ok", size="12px", v-if="filter === selectedFilter")
.flex.items-center.text-dark {{ filter }}
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
color: var(--font-dark-blue-color)
.item:hover
opacity: 0.6
</style>

2
src/components/TheHeader.vue
View File

@@ -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]"