boiii/traxxx
1
0
Fork 0
forked from DebaucheryLibrarian/traxxx
Code Issues Pull Requests Projects Releases Wiki Activity

Using teleport for tooltips. Moved theme class to body tag with UI observer.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2020-12-27 02:15:06 +01:00
parent 12f247a927
commit 229d74d266
9 changed files with 172 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
assets/components/filters/actor-filter.vue
View File

@@ -1,5 +1,5 @@
<template>
<v-popover class="filter-container">
<Tooltip class="filter-container">
<div class="filter">
<Icon icon="users" />
@@ -14,46 +14,48 @@
>Actors</div>
</div>
<div slot="popover">
<router-link
class="filter-clear"
:to="{ query: { ...$route.query, actors: undefined } }"
:class="{ active: selectedActors.length > 0 }"
>clear all<Icon icon="cross2" /></router-link>
<template v-slot:tooltip>
<div>
<router-link
class="filter-clear"
:to="{ query: { ...$route.query, actors: undefined } }"
:class="{ active: selectedActors.length > 0 }"
>clear all<Icon icon="cross2" /></router-link>
<ul class="filter-items nolist">
<li
v-for="actor in availableActors"
:key="actor.id"
class="filter-item"
:class="{ selected: selectedActors.includes(actor.slug) }"
>
<router-link
:to="{ query: {
...$route.query,
actors: actor.slug,
}, params: { pageNumber: 1 } }"
class="filter-name"
>{{ actor.name }}</router-link>
<router-link
:to="{ query: { ...$route.query, ...getNewRange(actor) }, params: { pageNumber: 1 } }"
class="filter-include"
<ul class="filter-items nolist">
<li
v-for="actor in availableActors"
:key="actor.id"
class="filter-item"
:class="{ selected: selectedActors.includes(actor.slug) }"
>
<Icon
icon="checkmark"
class="filter-add"
/>
<router-link
:to="{ query: {
...$route.query,
actors: actor.slug,
}, params: { pageNumber: 1 } }"
class="filter-name"
>{{ actor.name }}</router-link>
<Icon
icon="cross2"
class="filter-remove"
/>
</router-link>
</li>
</ul>
</div>
</v-popover>
<router-link
:to="{ query: { ...$route.query, ...getNewRange(actor) }, params: { pageNumber: 1 } }"
class="filter-include"
>
<Icon
icon="checkmark"
class="filter-add"
/>
<Icon
icon="cross2"
class="filter-remove"
/>
</router-link>
</li>
</ul>
</div>
</template>
</Tooltip>
</template>
<script>