forked from DebaucheryLibrarian/traxxx
Added tag filter dialog.
This commit is contained in:
DebaucheryLibrarian
106
assets/components/dialog/dialog.vue
Normal file
106
assets/components/dialog/dialog.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<teleport to="body">
|
||||
<div
|
||||
class="container"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
<div
|
||||
class="dialog"
|
||||
@click.stop
|
||||
>
|
||||
<div
|
||||
v-if="title || $slots.header"
|
||||
class="header"
|
||||
>
|
||||
<slot name="header">
|
||||
<h2 class="header-title">{{ title }}</h2>
|
||||
</slot>
|
||||
|
||||
<Icon
|
||||
icon="cross2"
|
||||
class="close"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="body">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
emits: ['close'],
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
background: var(--darken);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
background: var(--background);
|
||||
box-shadow: 0 0 3px var(--darken-weak);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: var(--primary);
|
||||
color: var(--text-light);
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
padding: .5rem .5rem .5rem 1rem;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.close {
|
||||
height: 100%;
|
||||
padding: 0 1rem;
|
||||
fill: var(--lighten);
|
||||
|
||||
&:hover {
|
||||
fill: var(--lighten-strong);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 1rem;
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
99
assets/components/form/checkbox.vue
Normal file
99
assets/components/form/checkbox.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<label class="check-container noselect">
|
||||
<span class="check-label">{{ label }}</span>
|
||||
|
||||
<input
|
||||
v-show="false"
|
||||
:id="`checkbox-${uid}`"
|
||||
:checked="checked"
|
||||
type="checkbox"
|
||||
class="check-checkbox"
|
||||
@change="$emit('change', $event.target.checked)"
|
||||
>
|
||||
|
||||
<label
|
||||
:for="`checkbox-${uid}`"
|
||||
class="check"
|
||||
/>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
checked: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
emits: ['change'],
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'breakpoints';
|
||||
|
||||
.check-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.check {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
background-color: var(--shadow-hint);
|
||||
cursor: pointer;
|
||||
transition: background .15s ease;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: .5rem;
|
||||
height: .3rem;
|
||||
border: solid 2px var(--text-light);
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
margin: -.2rem 0 0 0;
|
||||
transform: rotateZ(-45deg) scaleX(0);
|
||||
transition: transform .15s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.check-cross .check::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
background: url('/img/icons/cross3.svg') no-repeat center/80%;
|
||||
opacity: .15;
|
||||
transition: transform .1s ease;
|
||||
}
|
||||
|
||||
.check-checkbox:checked + .check {
|
||||
background: var(--primary);
|
||||
|
||||
&::after {
|
||||
transform: rotateZ(-45deg) scaleX(1);
|
||||
}
|
||||
|
||||
&::before {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.check-label {
|
||||
overflow: hidden;
|
||||
text-transform: capitalize;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0 .5rem 0 0;
|
||||
}
|
||||
</style>
|
||||
69
assets/components/header/filters.vue
Normal file
69
assets/components/header/filters.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<Dialog
|
||||
title="filters"
|
||||
@close="$emit('close')"
|
||||
>
|
||||
<h3 class="form-heading">Show me</h3>
|
||||
|
||||
<ul class="tags nolist">
|
||||
<li
|
||||
v-for="tag in tags"
|
||||
:key="tag"
|
||||
class="tags-item"
|
||||
>
|
||||
<Checkbox
|
||||
:checked="!tagFilter.includes(tag)"
|
||||
:label="tag"
|
||||
class="tag"
|
||||
@change="(state) => filterTag(tag, state)"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Checkbox from '../form/checkbox.vue';
|
||||
|
||||
function tagFilter() {
|
||||
return this.$store.state.ui.tagFilter;
|
||||
}
|
||||
|
||||
function filterTag(tag, isChecked) {
|
||||
if (isChecked) {
|
||||
this.$store.dispatch('setTagFilter', this.tagFilter.filter(filteredTag => filteredTag !== tag));
|
||||
} else {
|
||||
this.$store.dispatch('setTagFilter', this.tagFilter.concat(tag));
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Checkbox,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tags: ['anal', 'gay', 'transsexual', 'bisexual', 'pissing'],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
tagFilter,
|
||||
},
|
||||
emits: ['close'],
|
||||
methods: {
|
||||
filterTag,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tags-item {
|
||||
width: 20rem;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: .5rem 0;
|
||||
}
|
||||
</style>
|
||||
@@ -147,8 +147,8 @@
|
||||
</li>
|
||||
|
||||
<li
|
||||
class="menu-item disabled"
|
||||
@click.stop
|
||||
class="menu-item"
|
||||
@click="showFilters = true"
|
||||
>
|
||||
<Icon icon="filter" />Filters
|
||||
</li>
|
||||
@@ -157,6 +157,11 @@
|
||||
</template>
|
||||
</Tooltip>
|
||||
|
||||
<Filters
|
||||
v-if="showFilters"
|
||||
@close="showFilters = false"
|
||||
/>
|
||||
|
||||
<Search class="search-full" />
|
||||
|
||||
<Tooltip
|
||||
@@ -189,6 +194,7 @@
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
import Search from './search.vue';
|
||||
import Filters from './filters.vue';
|
||||
|
||||
import logo from '../../img/logo.svg';
|
||||
|
||||
@@ -211,6 +217,7 @@ function setSfw(enabled) {
|
||||
export default {
|
||||
components: {
|
||||
Search,
|
||||
Filters,
|
||||
},
|
||||
props: {
|
||||
toggleSidebar: {
|
||||
@@ -222,6 +229,7 @@ export default {
|
||||
return {
|
||||
logo,
|
||||
searching: false,
|
||||
showFilters: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
||||
Reference in New Issue
Block a user