diff --git a/src/components/TrainsView/TrainOptions.vue b/src/components/TrainsView/TrainOptions.vue index 224827f..94e305c 100644 --- a/src/components/TrainsView/TrainOptions.vue +++ b/src/components/TrainsView/TrainOptions.vue @@ -22,15 +22,21 @@

{{ $t('options.filter-title') }}

- +
+ +
+
+ +
+
+ +
+ +
+ +

{{ $t('options.search-title') }}

@@ -66,7 +72,6 @@ import SelectBox from '../Global/SelectBox.vue'; export default defineComponent({ components: { SelectBox, ActionButton }, - emits: ['onSearchConfirm'], mixins: [imageMixin], props: { @@ -105,13 +110,24 @@ export default defineComponent({ onSorterChange(item: { id: string | number; value: string }) { this.sorterActive.id = item.id; this.sorterActive.dir = -1; - this.$emit('onSearchConfirm'); }, onFilterChange(filter: TrainFilter) { filter.isActive = !filter.isActive; }, + clearAllFilters() { + this.trainFilterList.forEach((filter) => { + filter.isActive = false; + }); + }, + + resetAllFilters() { + this.trainFilterList.forEach((filter) => { + filter.isActive = true; + }); + }, + onInputClear(id: 'driver' | 'train') { if (id == 'driver') this.searchedDriver = ''; if (id == 'train') this.searchedTrain = ''; @@ -226,16 +242,13 @@ h1 { } .filter-option { - &#abandoned { - color: salmon; - } + button { + color: white; + font-weight: bold; - &#fulfilled { - color: lightgreen; - } - - &#active { - color: lightblue; + &[data-disabled='true'] { + color: #888; + } } } diff --git a/src/styles/global.scss b/src/styles/global.scss index c976f00..8fe1371 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -230,10 +230,6 @@ button { border-radius: 0.25em; padding: 0.25em 0.5em; - &:hover:not(:disabled) { - background-color: #3c3c3c; - } - &.checked { color: var(--clr-primary); font-weight: bold;