forked from DebaucheryLibrarian/traxxx
Added heart button to actor tiles.
This commit is contained in:
parent
e12de5ec00
commit
093d447328
|
@ -59,6 +59,20 @@
|
||||||
class="avatar-fallback"
|
class="avatar-fallback"
|
||||||
></span>
|
></span>
|
||||||
|
|
||||||
|
<Icon
|
||||||
|
v-show="favorited"
|
||||||
|
icon="heart7"
|
||||||
|
class="stash stashed"
|
||||||
|
@click.prevent.native="unstashActor"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Icon
|
||||||
|
v-show="favorited === false"
|
||||||
|
icon="heart8"
|
||||||
|
class="stash unstashed"
|
||||||
|
@click.prevent.native="stashActor"
|
||||||
|
/>
|
||||||
|
|
||||||
<span
|
<span
|
||||||
class="details"
|
class="details"
|
||||||
>
|
>
|
||||||
|
@ -115,6 +129,36 @@
|
||||||
<script>
|
<script>
|
||||||
import Gender from './gender.vue';
|
import Gender from './gender.vue';
|
||||||
|
|
||||||
|
async function stashActor() {
|
||||||
|
this.favorited = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await this.$store.dispatch('stashActor', {
|
||||||
|
actorId: this.actor.id,
|
||||||
|
stashId: this.$store.getters.favorites.id,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.$emit('stash', true);
|
||||||
|
} catch (error) {
|
||||||
|
this.favorited = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function unstashActor() {
|
||||||
|
this.favorited = false;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await this.$store.dispatch('unstashActor', {
|
||||||
|
actorId: this.actor.id,
|
||||||
|
stashId: this.$store.getters.favorites.id,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.$emit('stash', false);
|
||||||
|
} catch (error) {
|
||||||
|
this.favorited = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function sfw() {
|
function sfw() {
|
||||||
return this.$store.state.ui.sfw;
|
return this.$store.state.ui.sfw;
|
||||||
}
|
}
|
||||||
|
@ -133,9 +177,19 @@ export default {
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
emits: ['stash'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
favorited: this.actor.isFavorited,
|
||||||
|
};
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
sfw,
|
sfw,
|
||||||
},
|
},
|
||||||
|
methods: {
|
||||||
|
stashActor,
|
||||||
|
unstashActor,
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -243,6 +297,22 @@ export default {
|
||||||
opacity: .1;
|
opacity: .1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.stash {
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
padding: .25rem .25rem .5rem .5rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
fill: var(--lighten-weak);
|
||||||
|
filter: drop-shadow(0 0 2px var(--darken));
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&.stashed {
|
||||||
|
fill: var(--primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.details {
|
.details {
|
||||||
background: var(--darken);
|
background: var(--darken);
|
||||||
color: var(--text-light);
|
color: var(--text-light);
|
||||||
|
|
|
@ -2,10 +2,16 @@ import config from 'config';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
|
|
||||||
import { graphql, get } from '../api';
|
import { graphql, get } from '../api';
|
||||||
import { releaseFields, getIncludedEntities, getIncludedActors } from '../fragments';
|
|
||||||
import { curateActor, curateRelease } from '../curate';
|
import { curateActor, curateRelease } from '../curate';
|
||||||
import getDateRange from '../get-date-range';
|
import getDateRange from '../get-date-range';
|
||||||
|
|
||||||
|
import {
|
||||||
|
releaseFields,
|
||||||
|
actorStashesFields,
|
||||||
|
getIncludedEntities,
|
||||||
|
getIncludedActors,
|
||||||
|
} from '../fragments';
|
||||||
|
|
||||||
function initActorActions(store, router) {
|
function initActorActions(store, router) {
|
||||||
async function fetchActorById({ _commit }, {
|
async function fetchActorById({ _commit }, {
|
||||||
actorId,
|
actorId,
|
||||||
|
@ -246,23 +252,7 @@ function initActorActions(store, router) {
|
||||||
}
|
}
|
||||||
totalCount
|
totalCount
|
||||||
}
|
}
|
||||||
isStashed
|
${actorStashesFields}
|
||||||
stashes: stashesActors(
|
|
||||||
filter: {
|
|
||||||
stash: {
|
|
||||||
userId: {
|
|
||||||
equalTo: $userId
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
) @include(if: $hasAuth) {
|
|
||||||
stash {
|
|
||||||
id
|
|
||||||
name
|
|
||||||
slug
|
|
||||||
primary
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`, {
|
`, {
|
||||||
|
@ -346,6 +336,8 @@ function initActorActions(store, router) {
|
||||||
$offset: Int = 0,
|
$offset: Int = 0,
|
||||||
$letter: String! = "",
|
$letter: String! = "",
|
||||||
$naturalBoobs: Boolean,
|
$naturalBoobs: Boolean,
|
||||||
|
$userId: Int,
|
||||||
|
$hasAuth: Boolean!,
|
||||||
) {
|
) {
|
||||||
connection: actorsConnection(
|
connection: actorsConnection(
|
||||||
first: $limit,
|
first: $limit,
|
||||||
|
@ -413,6 +405,7 @@ function initActorActions(store, router) {
|
||||||
name
|
name
|
||||||
alias
|
alias
|
||||||
}
|
}
|
||||||
|
${actorStashesFields}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -421,6 +414,8 @@ function initActorActions(store, router) {
|
||||||
limit,
|
limit,
|
||||||
letter,
|
letter,
|
||||||
naturalBoobs,
|
naturalBoobs,
|
||||||
|
hasAuth: !!store.state.auth.user,
|
||||||
|
userId: store.state.auth.user?.id,
|
||||||
});
|
});
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -40,6 +40,27 @@ const sitesFragment = `
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const actorStashesFields = `
|
||||||
|
isStashed
|
||||||
|
isFavorited
|
||||||
|
stashes: stashesActors(
|
||||||
|
filter: {
|
||||||
|
stash: {
|
||||||
|
userId: {
|
||||||
|
equalTo: $userId
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
) @include(if: $hasAuth) {
|
||||||
|
stash {
|
||||||
|
id
|
||||||
|
name
|
||||||
|
slug
|
||||||
|
primary
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
const actorFields = `
|
const actorFields = `
|
||||||
id
|
id
|
||||||
name
|
name
|
||||||
|
@ -72,6 +93,7 @@ const actorFields = `
|
||||||
name
|
name
|
||||||
alias
|
alias
|
||||||
}
|
}
|
||||||
|
${actorStashesFields}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const releaseActorsFragment = `
|
const releaseActorsFragment = `
|
||||||
|
@ -455,6 +477,7 @@ function getIncludedActors(router) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export {
|
export {
|
||||||
|
actorStashesFields,
|
||||||
releaseActorsFragment,
|
releaseActorsFragment,
|
||||||
releaseFields,
|
releaseFields,
|
||||||
releaseTagsFragment,
|
releaseTagsFragment,
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { graphql } from '../api';
|
import { graphql } from '../api';
|
||||||
import { releaseFields } from '../fragments';
|
import { releaseFields, actorStashesFields } from '../fragments';
|
||||||
import { curateRelease, curateActor } from '../curate';
|
import { curateRelease, curateActor } from '../curate';
|
||||||
|
|
||||||
function initUiActions(store, _router) {
|
function initUiActions(store, _router) {
|
||||||
|
@ -116,6 +116,7 @@ function initUiActions(store, _router) {
|
||||||
name
|
name
|
||||||
alias
|
alias
|
||||||
}
|
}
|
||||||
|
${actorStashesFields}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`, {
|
`, {
|
||||||
|
|
Loading…
Reference in New Issue