Поправлено положение элементов интерфейса,

добавлена кнопка "Клонировать поиск"
This commit is contained in:
Book Pauk
2022-11-06 15:47:42 +07:00
parent 0360098b53
commit ba5d7b10b8

View File

@@ -3,12 +3,23 @@
<div ref="scroller" class="col fit column no-wrap" style="overflow: auto; position: relative" @scroll="onScroll">
<div ref="toolPanel" class="tool-panel q-pb-xs column bg-cyan-2" style="position: sticky; top: 0; z-index: 10;">
<div class="header q-mx-md q-mb-xs q-mt-sm row items-center">
<a :href="newSearchLink" style="height: 33px">
<a :href="newSearchLink" style="height: 33px; width: 34px">
<img src="./assets/logo.png" />
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
Новый поиск
</q-tooltip>
</a>
<q-btn-toggle
v-model="selectedList"
class="q-ml-sm"
toggle-color="primary"
:options="listOptions"
push
no-caps
rounded
/>
<div class="row items-center q-ml-sm" style="font-size: 150%;">
<div class="q-mr-xs">
Коллекция
@@ -17,26 +28,10 @@
{{ collection }}
</div>
</div>
<q-btn-toggle
v-model="selectedList"
class="q-ml-md"
toggle-color="primary"
:options="listOptions"
push
no-caps
rounded
/>
<DivBtn class="q-ml-md text-white bg-secondary" :size="30" :icon-size="24" :imt="1" icon="la la-cog" round @click="settingsDialogVisible = true">
<template #tooltip>
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
Настройки
</q-tooltip>
</template>
</DivBtn>
<div class="col"></div>
<DivBtn class="q-ml-sm text-white bg-secondary" :size="30" :icon-size="24" icon="la la-question" round @click="showSearchHelp">
<DivBtn class="q-ml-md text-white bg-secondary" :size="30" :icon-size="24" icon="la la-question" round @click="showSearchHelp">
<template #tooltip>
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
Памятка
@@ -44,12 +39,27 @@
</template>
</DivBtn>
<div class="col"></div>
<div class="q-px-sm q-py-xs bg-green-12 clickable2" style="border: 1px solid #aaaaaa; border-radius: 6px" @click="openReleasePage">
{{ projectName }}
</div>
<DivBtn class="q-ml-sm text-white bg-secondary" :size="30" :icon-size="24" :imt="1" icon="la la-cog" round @click="settingsDialogVisible = true">
<template #tooltip>
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
Настройки
</q-tooltip>
</template>
</DivBtn>
</div>
<div class="row q-mx-md q-mb-xs items-center">
<DivBtn
class="text-grey-5 bg-yellow-1 q-mt-xs" :size="34" :icon-size="24" round
:icon="(extendedParams ? 'la la-angle-double-up' : 'la la-angle-double-down')"
@click="extendedParams = !extendedParams"
>
<template #tooltip>
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
{{ `${(extendedParams ? 'Скрыть' : 'Показать')} дополнительные критерии поиска` }}
</q-tooltip>
</template>
</DivBtn>
<div class="q-mx-xs" />
<q-input
ref="authorInput" v-model="search.author" :maxlength="5000" :debounce="inputDebounce"
class="q-mt-xs" :bg-color="inputBgColor('author')" style="width: 200px;" label="Автор" stack-label outlined dense clearable
@@ -79,7 +89,7 @@
<div class="q-mx-xs" />
<q-input
v-model="search.lang" :maxlength="inputMaxLength" :debounce="inputDebounce"
class="q-mt-xs" :bg-color="inputBgColor()" input-style="cursor: pointer" style="width: 100px;" label="Язык" stack-label outlined dense clearable readonly
class="q-mt-xs" :bg-color="inputBgColor()" input-style="cursor: pointer" style="width: 90px;" label="Язык" stack-label outlined dense clearable readonly
@click="selectLang"
>
<template v-if="search.lang" #append>
@@ -90,21 +100,22 @@
{{ search.lang }}
</q-tooltip>
</q-input>
<div class="q-mx-xs" />
<DivBtn
class="text-grey-5 bg-yellow-1 q-mt-xs" :size="34" :icon-size="24" round
:icon="(extendedParams ? 'la la-angle-double-up' : 'la la-angle-double-down')"
@click="extendedParams = !extendedParams"
class="text-grey-8 bg-yellow-1 q-mt-xs" :size="34" :icon-size="24" round
icon="la la-level-up-alt"
@click="cloneSearch"
>
<template #tooltip>
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
{{ `${(extendedParams ? 'Скрыть' : 'Показать')} дополнительные критерии поиска` }}
Клонировать поиск
</q-tooltip>
</template>
</DivBtn>
</div>
<div v-show="extendedParams" class="row q-mx-md q-mb-xs items-center">
<div style="width: 34px" />
<div class="q-mx-xs" />
<q-input
v-model="genreNames" :maxlength="inputMaxLength" :debounce="inputDebounce"
class="q-mt-xs" :bg-color="inputBgColor()" input-style="cursor: pointer" style="width: 200px;" label="Жанр" stack-label outlined dense clearable readonly
@@ -153,7 +164,7 @@
<div class="q-mx-xs" />
<q-input
v-model="librateNames" :maxlength="inputMaxLength" :debounce="inputDebounce"
class="q-mt-xs" :bg-color="inputBgColor()" input-style="cursor: pointer" style="width: 100px;" label="Оценка" stack-label outlined dense clearable readonly
class="q-mt-xs" :bg-color="inputBgColor()" input-style="cursor: pointer" style="width: 90px;" label="Оценка" stack-label outlined dense clearable readonly
@click="selectLibRate"
>
<template v-if="librateNames" #append>
@@ -191,6 +202,12 @@
<div class="row q-ml-lg q-mb-sm">
<PageScroller v-show="pageCount > 1" v-model="search.page" :page-count="pageCount" />
</div>
<div class="row justify-center">
<div class="q-mb-sm q-px-sm q-py-xs bg-cyan-2 clickable2" style="border: 1px solid #aaaaaa; border-radius: 6px; white-space: nowrap;" @click="openReleasePage">
{{ projectName }}
</div>
</div>
</div>
<Dialog v-model="settingsDialogVisible">
@@ -1018,6 +1035,10 @@ class Search {
this.selectDateDialogVisible = true
}
}
cloneSearch() {
window.open(window.location.href, '_blank');
}
}
export default vueComponent(Search);