Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-03 05:18:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Wygląd filtrów

Browse Source
This commit is contained in:
Spythere
2022-09-22 15:08:22 +02:00
parent bcf750d451
commit 531108c25a
2 changed files with 60 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/TrainsView/TrainOptions.vue
+38 -28
View File
@@ -1,8 +1,8 @@
<template>
<div class="filters-options">
<div class="filters-options" @keydown.esc="showOptions = false">
<div class="bg" v-if="showOptions" @click="showOptions = false"></div>
<button class="btn--image" @click="showOptions = !showOptions">
<button class="btn--image" @click="toggleShowOptions">
<img :src="getIcon('filter2')" alt="Open filters" />
{{ $t('options.filters') }} [F]
</button>
@@ -10,37 +10,12 @@
<transition name="options-anim">
<div class="options_wrapper" v-if="showOptions">
<div class="options_content">
<h1 class="option-title">{{ $t('options.sort-title') }}</h1>
<div class="options_sorters">
<div v-for="opt in translatedSorterOptions">
<button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)">
{{ opt.value.toUpperCase() }}
</button>
</div>
</div>
<h1 class="option-title" v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
<div class="options_filters">
<div class="filter-option" v-for="filter in trainFilterList">
<button class="btn--option" :data-disabled="!filter.isActive" @click="onFilterChange(filter)">
{{ $t(`options.filter-${filter.id}`) }}
</button>
</div>
</div>
<div class="options_filters">
<div class="filter-option">
<button @click="clearAllFilters">{{ $t('options.filter-clear') }}</button>
</div>
<div class="filter-option">
<button @click="resetAllFilters">{{ $t('options.filter-reset') }}</button>
</div>
</div>
<h1 class="option-title">{{ $t('options.search-title') }}</h1>
<div class="search_content">
<div class="search-box">
<input
class="search-input"
ref="initFocusedElement"
@focus="preventKeyDown = true"
@blur="preventKeyDown = false"
:placeholder="$t(`options.search-train`)"
@@ -64,6 +39,33 @@
</button>
</div>
</div>
<h1 class="option-title">{{ $t('options.sort-title') }}</h1>
<div class="options_sorters">
<div v-for="opt in translatedSorterOptions">
<button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)">
{{ opt.value.toUpperCase() }}
</button>
</div>
</div>
<h1 class="option-title" v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
<div class="options_filters">
<div class="filter-option" v-for="filter in trainFilterList">
<button class="btn--option" :data-disabled="!filter.isActive" @click="onFilterChange(filter)">
{{ $t(`options.filter-${filter.id}`) }}
</button>
</div>
</div>
<div class="options_filters">
<div class="filter-option">
<button @click="clearAllFilters">{{ $t('options.filter-clear') }}</button>
</div>
<div class="filter-option">
<button @click="resetAllFilters">{{ $t('options.filter-reset') }}</button>
</div>
</div>
</div>
</div>
</transition>
@@ -117,7 +119,15 @@ export default defineComponent({
methods: {
// Override keyMixin function
onKeyDownFunction() {
this.toggleShowOptions();
},
toggleShowOptions() {
this.showOptions = !this.showOptions;
// this.$nextTick(() => {
// if (this.showOptions) (this.$refs['initFocusedElement'] as any)?.focus();
// });
},
onSorterChange(item: { id: string | number; value: string }) {