Separated full heart button into component.
This commit is contained in:
DebaucheryLibrarian
parent
348aa91832
commit
9ff70e5578
|
|
@ -3,6 +3,7 @@
|
|||
v-if="release"
|
||||
ref="content"
|
||||
class="content"
|
||||
@scroll="events.emit('scroll', $event)"
|
||||
>
|
||||
<Scroll
|
||||
v-slot="slotProps"
|
||||
|
|
@ -51,52 +52,11 @@
|
|||
/>
|
||||
</h2>
|
||||
|
||||
<span>
|
||||
<Tooltip class="stash-trigger">
|
||||
<Icon
|
||||
v-show="me"
|
||||
icon="menu"
|
||||
class="stash noselect"
|
||||
:class="{ stashed, stashing }"
|
||||
/>
|
||||
|
||||
<template v-slot:tooltip>
|
||||
<StashMenu
|
||||
v-if="$route.name === 'scene'"
|
||||
:item="release"
|
||||
:stashed-by="stashedBy"
|
||||
:class="{ stashing }"
|
||||
@stash="(stashId) => stashScene(stashId)"
|
||||
@unstash="(stashId) => unstashScene(stashId)"
|
||||
/>
|
||||
|
||||
<StashMenu
|
||||
v-if="$route.name === 'movie'"
|
||||
:item="release"
|
||||
:stashed-by="stashedBy"
|
||||
:class="{ stashing }"
|
||||
@stash="(stashId) => stashScene(stashId)"
|
||||
@unstash="(stashId) => unstashScene(stashId)"
|
||||
/>
|
||||
</template>
|
||||
</Tooltip>
|
||||
|
||||
<Icon
|
||||
v-show="me && favorited"
|
||||
:class="{ stashing }"
|
||||
icon="heart7"
|
||||
class="stash stashed noselect"
|
||||
@click="() => unstashScene()"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
v-show="me && !favorited"
|
||||
:class="{ stashing }"
|
||||
icon="heart8"
|
||||
class="stash unstashed noselect"
|
||||
@click="() => stashScene()"
|
||||
/>
|
||||
</span>
|
||||
<StashButton
|
||||
:stashed-by="stashedBy"
|
||||
@stash="(stash) => stashScene(stash)"
|
||||
@unstash="(stash) => unstashScene(stash)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="row associations">
|
||||
|
|
@ -263,7 +223,7 @@
|
|||
<script>
|
||||
import Details from './details.vue';
|
||||
import Banner from './banner.vue';
|
||||
import StashMenu from '../stashes/menu.vue';
|
||||
import StashButton from '../stashes/button.vue';
|
||||
import Album from '../album/album.vue';
|
||||
import Tags from './tags.vue';
|
||||
import Chapters from './chapters.vue';
|
||||
|
|
@ -285,43 +245,28 @@ async function fetchRelease(scroll = true) {
|
|||
}
|
||||
|
||||
this.stashedBy = this.release.stashes;
|
||||
this.stashing = false;
|
||||
}
|
||||
|
||||
async function stashScene(stash) {
|
||||
this.stashing = true;
|
||||
async function stashScene(stashId) {
|
||||
this.stashedBy = await this.$store.dispatch(this.$route.name === 'movie' ? 'stashMovie' : 'stashScene', {
|
||||
sceneId: this.release.id,
|
||||
movieId: this.release.id,
|
||||
stashId: stash?.id || this.$store.getters.favorites.id,
|
||||
stashId,
|
||||
});
|
||||
|
||||
this.stashing = false;
|
||||
}
|
||||
|
||||
async function unstashScene(stash) {
|
||||
this.stashing = true;
|
||||
async function unstashScene(stashId) {
|
||||
this.stashedBy = await this.$store.dispatch(this.$route.name === 'movie' ? 'unstashMovie' : 'unstashScene', {
|
||||
sceneId: this.release.id,
|
||||
movieId: this.release.id,
|
||||
stashId: stash?.id || this.$store.getters.favorites.id,
|
||||
stashId,
|
||||
});
|
||||
|
||||
this.stashing = false;
|
||||
}
|
||||
|
||||
function me() {
|
||||
return this.$store.state.auth.user;
|
||||
}
|
||||
|
||||
function favorited() {
|
||||
return this.stashedBy.some(stash => stash.primary);
|
||||
}
|
||||
|
||||
function stashed() {
|
||||
return this.stashedBy.some(stash => !stash.primary);
|
||||
}
|
||||
|
||||
function bannerBackground() {
|
||||
return (this.release.poster && this.getBgPath(this.release.poster, 'thumbnail'))
|
||||
|| (this.release.covers.length > 0 && this.getBgPath(this.release.covers[0], 'thumbnail'));
|
||||
|
|
@ -346,14 +291,13 @@ export default {
|
|||
Details,
|
||||
Releases,
|
||||
Scroll,
|
||||
StashMenu,
|
||||
StashButton,
|
||||
Tags,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
release: null,
|
||||
stashedBy: [],
|
||||
stashing: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -361,8 +305,6 @@ export default {
|
|||
bannerBackground,
|
||||
me,
|
||||
showAlbum,
|
||||
favorited,
|
||||
stashed,
|
||||
},
|
||||
watch: {
|
||||
$route: fetchRelease,
|
||||
|
|
@ -446,26 +388,6 @@ export default {
|
|||
color: var(--shadow);
|
||||
}
|
||||
|
||||
.stash.icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
padding: 0 .75rem;
|
||||
fill: var(--shadow);
|
||||
|
||||
&.stashed {
|
||||
fill: var(--primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
fill: var(--primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.stash-trigger {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.album-toggle {
|
||||
height: fit-content;
|
||||
display: inline-flex;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,95 @@
|
|||
<template>
|
||||
<span>
|
||||
<Tooltip class="stash-trigger">
|
||||
<Icon
|
||||
v-show="me"
|
||||
icon="menu"
|
||||
class="stash noselect"
|
||||
:class="{ stashed }"
|
||||
/>
|
||||
|
||||
<template v-slot:tooltip>
|
||||
<StashMenu
|
||||
:stashed-by="stashedBy"
|
||||
@stash="(stashId) => $emit('stash', stashId)"
|
||||
@unstash="(stashId) => $emit('unstash', stashId)"
|
||||
/>
|
||||
</template>
|
||||
</Tooltip>
|
||||
|
||||
<Icon
|
||||
v-show="me && favorited"
|
||||
icon="heart7"
|
||||
class="stash stashed noselect"
|
||||
@click.native="() => $emit('unstash', favorites.id)"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
v-show="me && !favorited"
|
||||
icon="heart8"
|
||||
class="stash unstashed noselect"
|
||||
@click.native="() => $emit('stash', favorites.id)"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import StashMenu from './menu.vue';
|
||||
|
||||
function favorited() {
|
||||
return this.stashedBy.some(stash => stash.primary);
|
||||
}
|
||||
|
||||
function stashed() {
|
||||
return this.stashedBy.some(stash => !stash.primary);
|
||||
}
|
||||
|
||||
function favorites() {
|
||||
return this.$store.getters.favorites;
|
||||
}
|
||||
|
||||
function me() {
|
||||
return this.$store.state.auth.user;
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
StashMenu,
|
||||
},
|
||||
props: {
|
||||
stashedBy: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
emits: ['stash', 'unstash'],
|
||||
computed: {
|
||||
me,
|
||||
favorites,
|
||||
favorited,
|
||||
stashed,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.stash.icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
padding: 0 .75rem;
|
||||
fill: var(--shadow);
|
||||
|
||||
&.stashed {
|
||||
fill: var(--primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
fill: var(--primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.stash-trigger {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
<Checkbox
|
||||
:checked="stashedByIds.has(stash.id)"
|
||||
class="menu-check"
|
||||
@change="(checked) => checked ? $emit('stash', stash) : $emit('unstash', stash)"
|
||||
@change="(checked) => checked ? $emit('stash', stash.id) : $emit('unstash', stash.id)"
|
||||
/>{{ stash.name }}
|
||||
</label>
|
||||
</li>
|
||||
|
|
@ -28,10 +28,6 @@ export default {
|
|||
Checkbox,
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
stashedBy: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ function curateUser(user) {
|
|||
|
||||
async function fetchUser(userId, raw) {
|
||||
const user = await knex('users')
|
||||
.select(knex.raw('users.*, users_roles.abilities as role_abilities, COALESCE(json_agg(stashes) FILTER (WHERE stashes.id IS NOT NULL), \'[]\') as stashes'))
|
||||
.select(knex.raw('users.*, users_roles.abilities as role_abilities, COALESCE(json_agg(stashes ORDER BY stashes.created_at) FILTER (WHERE stashes.id IS NOT NULL), \'[]\') as stashes'))
|
||||
.modify((builder) => {
|
||||
if (typeof userId === 'number') {
|
||||
builder.where('users.id', userId);
|
||||
|
|
|
|||
Loading…
Reference in New Issue