deadcxap/inpx-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Улучшения скроллинга

Browse Source
This commit is contained in:
Book Pauk
2022-08-20 01:06:39 +07:00
parent 0fb86b2174
commit d9a03a7e0d
1 changed files with 86 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
client/components/Search/Search.vue
View File

@@ -1,72 +1,7 @@
<template> <template>
<div class="root column fit"> <div class="root column fit">
<div class="tool-panel column bg-green-11">
<div class="header q-mx-md q-mt-sm row justify-between items-center">
<div class="row items-center">
<div class="q-mr-xs">
Коллекция
</div>
<div class="clickable" @click="showCollectionInfo">
{{ collection }}
</div>
</div>
<div class="q-ml-md">
{{ projectName }}
</div>
</div>
<div class="row q-mx-md q-my-sm items-center">
<q-input
ref="authorInput" v-model="author" :maxlength="inputMaxLength" :debounce="inputDebounce"
class="bg-white q-mt-xs" style="width: 300px;" label="Автор" stack-label outlined dense clearable
/>
<div class="q-mx-xs" />
<q-input
v-model="series" :maxlength="inputMaxLength" :debounce="inputDebounce"
class="bg-white q-mt-xs" style="width: 200px;" label="Серия" stack-label outlined dense clearable
/>
<div class="q-mx-xs" />
<q-input
v-model="title" :maxlength="inputMaxLength" :debounce="inputDebounce"
class="bg-white q-mt-xs" style="width: 200px;" label="Название" stack-label outlined dense clearable
/>
<div class="q-mx-xs" />
<q-input
v-model="genre" :maxlength="inputMaxLength" :debounce="inputDebounce"
class="bg-white q-mt-xs" style="width: 200px;" label="Жанр" stack-label outlined dense clearable readonly
@click="selectGenre"
/>
<div class="q-mx-xs" />
<q-input
v-model="lang" :maxlength="inputMaxLength" :debounce="inputDebounce"
class="bg-white q-mt-xs" style="width: 80px;" label="Язык" stack-label outlined dense clearable readonly
@click="selectLang"
/>
<div class="q-mx-xs" />
<q-btn round dense style="height: 20px" color="info" icon="la la-question" @click="showSearchHelp" />
<div class="q-mx-xs" />
<div class="row items-center q-mt-xs">
<div v-show="queryFound > 0">
Показаны {{ queryFound }} из {{ totalFound }} найденных авторов
</div>
<div v-show="queryFound == 0">
Ничего не найдено
</div>
</div>
<div class="q-mx-xs" />
<div class="col row justify-end q-mt-xs">
<q-select
v-model="limit" :options="limitOptions" class="bg-white"
dropdown-icon="la la-angle-down la-sm"
outlined dense emit-value map-options
/>
</div>
</div>
</div>
<div class="col fit" style="position: relative"> <div class="col fit" style="position: relative">
<div v-show="loadingVisible" class="fit row justify-center items-center" style="position: absolute; background-color: rgba(0, 0, 0, 0.2)"> <div v-show="loadingVisible" class="fit row justify-center items-center" style="position: absolute; background-color: rgba(0, 0, 0, 0.2); z-index: 1">
<div class="bg-white row justify-center items-center" style="width: 180px; height: 50px; border-radius: 10px; box-shadow: 2px 2px 10px #333333"> <div class="bg-white row justify-center items-center" style="width: 180px; height: 50px; border-radius: 10px; box-shadow: 2px 2px 10px #333333">
<q-spinner color="primary" size="2em" /> <q-spinner color="primary" size="2em" />
<div class="q-ml-sm"> <div class="q-ml-sm">
@@ -75,7 +10,72 @@
</div> </div>
</div> </div>
<div class="col fit column no-wrap" style="overflow: auto"> <div ref="scroller" class="col fit column no-wrap" style="overflow: auto; position: relative" @scroll="onScroll">
<div ref="toolPanel" class="tool-panel column bg-green-11" style="position: sticky; top: 0;">
<div class="header q-mx-md q-mt-sm row justify-between items-center">
<div class="row items-center">
<div class="q-mr-xs">
Коллекция
</div>
<div class="clickable" @click="showCollectionInfo">
{{ collection }}
</div>
</div>
<div class="q-ml-md">
{{ projectName }}
</div>
</div>
<div class="row q-mx-md q-my-sm items-center">
<q-input
ref="authorInput" v-model="author" :maxlength="5000" :debounce="inputDebounce"
class="bg-white q-mt-xs" style="width: 300px;" label="Автор" stack-label outlined dense clearable
/>
<div class="q-mx-xs" />
<q-input
v-model="series" :maxlength="inputMaxLength" :debounce="inputDebounce"
class="bg-white q-mt-xs" style="width: 200px;" label="Серия" stack-label outlined dense clearable
/>
<div class="q-mx-xs" />
<q-input
v-model="title" :maxlength="inputMaxLength" :debounce="inputDebounce"
class="bg-white q-mt-xs" style="width: 200px;" label="Название" stack-label outlined dense clearable
/>
<div class="q-mx-xs" />
<q-input
v-model="genre" :maxlength="inputMaxLength" :debounce="inputDebounce"
class="bg-white q-mt-xs" style="width: 200px;" label="Жанр" stack-label outlined dense clearable readonly
@click="selectGenre"
/>
<div class="q-mx-xs" />
<q-input
v-model="lang" :maxlength="inputMaxLength" :debounce="inputDebounce"
class="bg-white q-mt-xs" style="width: 80px;" label="Язык" stack-label outlined dense clearable readonly
@click="selectLang"
/>
<div class="q-mx-xs" />
<q-btn round dense style="height: 20px" color="info" icon="la la-question" @click="showSearchHelp" />
<div class="q-mx-xs" />
<div class="row items-center q-mt-xs">
<div v-show="queryFound > 0">
Найдено {{ totalFound }} авторов
</div>
<div v-show="queryFound == 0">
Ничего не найдено
</div>
</div>
<div class="q-mx-xs" />
<div class="col row justify-end q-mt-xs">
<q-select
v-model="limit" :options="limitOptions" class="bg-white"
dropdown-icon="la la-angle-down la-sm"
outlined dense emit-value map-options
/>
</div>
</div>
</div>
<div v-for="item in tableData" :key="item.key" style="border-bottom: 1px solid #aaaaaa"> <div v-for="item in tableData" :key="item.key" style="border-bottom: 1px solid #aaaaaa">
<div class="q-my-sm q-ml-md" style="font-size: 120%"> <div class="q-my-sm q-ml-md" style="font-size: 120%">
{{ item.value }} {{ item.value }}
@@ -201,6 +201,25 @@ class Search {
this.$root.stdDialog.alert('Выбор языка'); this.$root.stdDialog.alert('Выбор языка');
} }
onScroll() {
const curScrollTop = this.$refs.scroller.scrollTop;
if (!this.lastScrollTop)
this.lastScrollTop = 0;
if (!this.lastScrollTop2)
this.lastScrollTop2 = 0;
if (curScrollTop - this.lastScrollTop > 0) {
this.$refs.toolPanel.style.position = 'relative';
this.$refs.toolPanel.style.top = `${this.lastScrollTop2}px`;
} else if (curScrollTop - this.lastScrollTop < 0) {
this.$refs.toolPanel.style.position = 'sticky';
this.$refs.toolPanel.style.top = 0;
this.lastScrollTop2 = curScrollTop;
}
this.lastScrollTop = curScrollTop;
}
async updateTableData() { async updateTableData() {
let result = []; let result = [];