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

добавлена кнопка "Клонировать поиск"
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="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 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"> <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" /> <img src="./assets/logo.png" />
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px"> <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
Новый поиск Новый поиск
</q-tooltip> </q-tooltip>
</a> </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="row items-center q-ml-sm" style="font-size: 150%;">
<div class="q-mr-xs"> <div class="q-mr-xs">
Коллекция Коллекция
@@ -17,26 +28,10 @@
{{ collection }} {{ collection }}
</div> </div>
</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"> <div class="col"></div>
<template #tooltip>
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
Настройки
</q-tooltip>
</template>
</DivBtn>
<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> <template #tooltip>
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px"> <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
Памятка Памятка
@@ -44,12 +39,27 @@
</template> </template>
</DivBtn> </DivBtn>
<div class="col"></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">
<div class="q-px-sm q-py-xs bg-green-12 clickable2" style="border: 1px solid #aaaaaa; border-radius: 6px" @click="openReleasePage"> <template #tooltip>
{{ projectName }} <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
</div> Настройки
</q-tooltip>
</template>
</DivBtn>
</div> </div>
<div class="row q-mx-md q-mb-xs items-center"> <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 <q-input
ref="authorInput" v-model="search.author" :maxlength="5000" :debounce="inputDebounce" 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 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" /> <div class="q-mx-xs" />
<q-input <q-input
v-model="search.lang" :maxlength="inputMaxLength" :debounce="inputDebounce" 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" @click="selectLang"
> >
<template v-if="search.lang" #append> <template v-if="search.lang" #append>
@@ -90,21 +100,22 @@
{{ search.lang }} {{ search.lang }}
</q-tooltip> </q-tooltip>
</q-input> </q-input>
<div class="q-mx-xs" /> <div class="q-mx-xs" />
<DivBtn <DivBtn
class="text-grey-5 bg-yellow-1 q-mt-xs" :size="34" :icon-size="24" round class="text-grey-8 bg-yellow-1 q-mt-xs" :size="34" :icon-size="24" round
:icon="(extendedParams ? 'la la-angle-double-up' : 'la la-angle-double-down')" icon="la la-level-up-alt"
@click="extendedParams = !extendedParams" @click="cloneSearch"
> >
<template #tooltip> <template #tooltip>
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px"> <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%" max-width="400px">
{{ `${(extendedParams ? 'Скрыть' : 'Показать')} дополнительные критерии поиска` }} Клонировать поиск
</q-tooltip> </q-tooltip>
</template> </template>
</DivBtn> </DivBtn>
</div> </div>
<div v-show="extendedParams" class="row q-mx-md q-mb-xs items-center"> <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 <q-input
v-model="genreNames" :maxlength="inputMaxLength" :debounce="inputDebounce" 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 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" /> <div class="q-mx-xs" />
<q-input <q-input
v-model="librateNames" :maxlength="inputMaxLength" :debounce="inputDebounce" 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" @click="selectLibRate"
> >
<template v-if="librateNames" #append> <template v-if="librateNames" #append>
@@ -191,6 +202,12 @@
<div class="row q-ml-lg q-mb-sm"> <div class="row q-ml-lg q-mb-sm">
<PageScroller v-show="pageCount > 1" v-model="search.page" :page-count="pageCount" /> <PageScroller v-show="pageCount > 1" v-model="search.page" :page-count="pageCount" />
</div> </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> </div>
<Dialog v-model="settingsDialogVisible"> <Dialog v-model="settingsDialogVisible">
@@ -1018,6 +1035,10 @@ class Search {
this.selectDateDialogVisible = true this.selectDateDialogVisible = true
} }
} }
cloneSearch() {
window.open(window.location.href, '_blank');
}
} }
export default vueComponent(Search); export default vueComponent(Search);