Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-03 21:38:13 +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/JournalView/JournalOptions.vue
+22 -23
View File
@@ -10,29 +10,6 @@
<transition name="options-anim"> <transition name="options-anim">
<div class="options_wrapper" v-if="showOptions"> <div class="options_wrapper" v-if="showOptions">
<div class="options_content"> <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="filters.length != 0">{{ $t('options.filter-title') }}</h1>
<div class="options_filters">
<button
v-for="filter in filters"
class="filter-option btn--option"
:class="{ checked: journalFilterActive.id === filter.id }"
:id="filter.id"
@click="onFilterChange(filter)"
>
{{ $t(`options.filter-${filter.id}`) }}
</button>
</div>
<h1 class="option-title">{{ $t('options.search-title') }}</h1> <h1 class="option-title">{{ $t('options.search-title') }}</h1>
<div class="search_content"> <div class="search_content">
<div class="search" v-for="(_, propName) in searchersValues" :key="propName"> <div class="search" v-for="(_, propName) in searchersValues" :key="propName">
@@ -75,6 +52,28 @@
</action-button> </action-button>
</div> </div>
</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="filters.length != 0">{{ $t('options.filter-title') }}</h1>
<div class="options_filters">
<button
v-for="filter in filters"
class="filter-option btn--option"
:class="{ checked: journalFilterActive.id === filter.id }"
:id="filter.id"
@click="onFilterChange(filter)"
>
{{ $t(`options.filter-${filter.id}`) }}
</button>
</div>
</div> </div>
<!-- <div class="data-status"> <!-- <div class="data-status">
src/components/TrainsView/TrainOptions.vue
+38 -28
View File
@@ -1,8 +1,8 @@
<template> <template>
<div class="filters-options"> <div class="filters-options" @keydown.esc="showOptions = false">
<div class="bg" v-if="showOptions" @click="showOptions = false"></div> <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" /> <img :src="getIcon('filter2')" alt="Open filters" />
{{ $t('options.filters') }} [F] {{ $t('options.filters') }} [F]
</button> </button>
@@ -10,37 +10,12 @@
<transition name="options-anim"> <transition name="options-anim">
<div class="options_wrapper" v-if="showOptions"> <div class="options_wrapper" v-if="showOptions">
<div class="options_content"> <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> <h1 class="option-title">{{ $t('options.search-title') }}</h1>
<div class="search_content"> <div class="search_content">
<div class="search-box"> <div class="search-box">
<input <input
class="search-input" class="search-input"
ref="initFocusedElement"
@focus="preventKeyDown = true" @focus="preventKeyDown = true"
@blur="preventKeyDown = false" @blur="preventKeyDown = false"
:placeholder="$t(`options.search-train`)" :placeholder="$t(`options.search-train`)"
@@ -64,6 +39,33 @@
</button> </button>
</div> </div>
</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>
</div> </div>
</transition> </transition>
@@ -117,7 +119,15 @@ export default defineComponent({
methods: { methods: {
// Override keyMixin function // Override keyMixin function
onKeyDownFunction() { onKeyDownFunction() {
this.toggleShowOptions();
},
toggleShowOptions() {
this.showOptions = !this.showOptions; this.showOptions = !this.showOptions;
// this.$nextTick(() => {
// if (this.showOptions) (this.$refs['initFocusedElement'] as any)?.focus();
// });
}, },
onSorterChange(item: { id: string | number; value: string }) { onSorterChange(item: { id: string | number; value: string }) {