Added unstash buttons to non-favorites stash items

This commit is contained in:
DebaucheryLibrarian 2021-09-12 23:21:39 +02:00
parent d3633f31ac
commit 65c79567d2
5 changed files with 92 additions and 20 deletions

View File

@ -60,19 +60,26 @@
></span> ></span>
<Icon <Icon
v-show="favorited" v-show="(!stash || stash.primary) && favorited"
icon="heart7" icon="heart7"
class="stash stashed" class="stash stashed"
@click.prevent.native="unstashActor" @click.prevent.native="unstashActor"
/> />
<Icon <Icon
v-show="favorited === false" v-show="(!stash || stash.primary) && favorited === false"
icon="heart8" icon="heart8"
class="stash unstashed" class="stash unstashed"
@click.prevent.native="stashActor" @click.prevent.native="stashActor"
/> />
<Icon
v-show="stash && !stash.primary"
icon="cross2"
class="stash unstash"
@click.prevent.native="unstashActor"
/>
<span <span
class="details" class="details"
> >
@ -145,12 +152,14 @@ async function stashActor() {
} }
async function unstashActor() { async function unstashActor() {
if (!this.stash || this.stash.primary) {
this.favorited = false; this.favorited = false;
}
try { try {
await this.$store.dispatch('unstashActor', { await this.$store.dispatch('unstashActor', {
actorId: this.actor.id, actorId: this.actor.id,
stashId: this.$store.getters.favorites.id, stashId: this.stash?.id || this.$store.getters.favorites.id,
}); });
this.$emit('stash', false); this.$emit('stash', false);
@ -176,6 +185,10 @@ export default {
type: Object, type: Object,
default: null, default: null,
}, },
stash: {
type: Object,
default: null,
},
}, },
emits: ['stash'], emits: ['stash'],
data() { data() {
@ -209,6 +222,11 @@ export default {
display: inline-block; display: inline-block;
padding-bottom: 150%; padding-bottom: 150%;
} }
&:hover .unstashed,
&:hover .unstash {
fill: var(--lighten);
}
} }
.link { .link {
@ -307,10 +325,15 @@ export default {
fill: var(--lighten-weak); fill: var(--lighten-weak);
filter: drop-shadow(0 0 2px var(--darken)); filter: drop-shadow(0 0 2px var(--darken));
&:hover, &:hover.unstashed,
&.stashed { &.stashed {
fill: var(--primary); fill: var(--primary);
} }
&:hover.unstash {
fill: var(--text-light);
filter: drop-shadow(0 0 2px var(--darken-weak));
}
} }
.details { .details {

View File

@ -15,18 +15,25 @@
> >
<Icon <Icon
v-show="favorited" v-show="(!stash || stash.primary) && favorited"
icon="heart7" icon="heart7"
class="stash stashed" class="stash stashed"
@click.prevent.native="unstashMovie" @click.prevent.native="unstashMovie"
/> />
<Icon <Icon
v-show="favorited === false" v-show="(!stash || stash.primary) && favorited === false"
icon="heart8" icon="heart8"
class="stash unstashed" class="stash unstashed"
@click.prevent.native="stashMovie" @click.prevent.native="stashMovie"
/> />
<Icon
v-show="stash && !stash.primary"
icon="cross2"
class="stash unstash"
@click.prevent.native="unstashMovie"
/>
</RouterLink> </RouterLink>
<div class="info"> <div class="info">
@ -88,12 +95,14 @@ async function stashMovie() {
} }
async function unstashMovie() { async function unstashMovie() {
if (!this.stash || this.stash.primary) {
this.favorited = false; this.favorited = false;
}
try { try {
await this.$store.dispatch('unstashMovie', { await this.$store.dispatch('unstashMovie', {
movieId: this.movie.id, movieId: this.movie.id,
stashId: this.$store.getters.favorites.id, stashId: this.stash?.id || this.$store.getters.favorites.id,
}); });
this.$emit('stash', false); this.$emit('stash', false);
@ -115,6 +124,10 @@ export default {
type: Object, type: Object,
default: null, default: null,
}, },
stash: {
type: Object,
default: null,
},
}, },
data() { data() {
return { return {
@ -141,7 +154,8 @@ export default {
box-shadow: 0 0 3px var(--darken-weak); box-shadow: 0 0 3px var(--darken-weak);
font-size: 0; font-size: 0;
&:hover .unstashed { &:hover .unstashed,
&:hover .unstash {
fill: var(--lighten); fill: var(--lighten);
} }
} }
@ -251,6 +265,11 @@ export default {
&.stashed { &.stashed {
fill: var(--primary); fill: var(--primary);
} }
&:hover.unstash {
fill: var(--text-light);
filter: drop-shadow(0 0 2px var(--darken-weak));
}
} }
@media(max-width: $breakpoint-kilo) { @media(max-width: $breakpoint-kilo) {

View File

@ -18,6 +18,7 @@
:release="release" :release="release"
:referer="referer" :referer="referer"
:index="index" :index="index"
:stash="stash"
@stash="isStashed => $emit('stash', isStashed)" @stash="isStashed => $emit('stash', isStashed)"
/> />
</li> </li>
@ -63,6 +64,10 @@ export default {
type: String, type: String,
default: null, default: null,
}, },
stash: {
type: Object,
default: null,
},
}, },
emits: ['stash'], emits: ['stash'],
computed: { computed: {

View File

@ -46,18 +46,25 @@
><Icon icon="blocked" />No thumbnail available</div> ><Icon icon="blocked" />No thumbnail available</div>
<Icon <Icon
v-show="favorited" v-show="(!stash || stash.primary) && favorited"
icon="heart7" icon="heart7"
class="stash stashed" class="stash stashed"
@click.prevent.native="unstashScene" @click.prevent.native="unstashScene"
/> />
<Icon <Icon
v-show="favorited === false" v-show="(!stash || stash.primary) && favorited === false"
icon="heart8" icon="heart8"
class="stash unstashed" class="stash unstashed"
@click.prevent.native="stashScene" @click.prevent.native="stashScene"
/> />
<Icon
v-show="stash && !stash.primary"
icon="cross2"
class="stash unstash"
@click.prevent.native="unstashScene"
/>
</a> </a>
</span> </span>
@ -169,12 +176,14 @@ async function stashScene() {
} }
async function unstashScene() { async function unstashScene() {
if (!this.stash || this.stash.primary) {
this.favorited = false; this.favorited = false;
}
try { try {
await this.$store.dispatch('unstashScene', { await this.$store.dispatch('unstashScene', {
sceneId: this.release.id, sceneId: this.release.id,
stashId: this.$store.getters.favorites.id, stashId: this.stash?.id || this.$store.getters.favorites.id,
}); });
this.$emit('stash', false); this.$emit('stash', false);
@ -192,6 +201,10 @@ export default {
type: Object, type: Object,
default: null, default: null,
}, },
stash: {
type: Object,
default: null,
},
}, },
emits: ['stash'], emits: ['stash'],
data() { data() {
@ -236,7 +249,8 @@ export default {
text-shadow: 0 0 2px var(--darken-weak); text-shadow: 0 0 2px var(--darken-weak);
} }
&:hover .unstashed { &:hover .unstashed,
&:hover .unstash {
fill: var(--lighten); fill: var(--lighten);
} }
} }
@ -295,6 +309,11 @@ export default {
fill: var(--primary); fill: var(--primary);
filter: drop-shadow(0 0 2px var(--darken-weak)); filter: drop-shadow(0 0 2px var(--darken-weak));
} }
&:hover.unstash {
fill: var(--text-light);
filter: drop-shadow(0 0 2px var(--darken-weak));
}
} }
.row { .row {

View File

@ -60,6 +60,7 @@
<Releases <Releases
v-if="$route.params.range === 'scenes' && stash.scenes?.length > 0" v-if="$route.params.range === 'scenes' && stash.scenes?.length > 0"
:releases="stash.scenes.map(item => item.scene)" :releases="stash.scenes.map(item => item.scene)"
:stash="stash"
class="stash-section stash-scenes" class="stash-section stash-scenes"
@stash="fetchStash" @stash="fetchStash"
/> />
@ -71,7 +72,11 @@
<li <li
v-for="item in stash.actors" v-for="item in stash.actors"
:key="item.id" :key="item.id"
><Actor :actor="item.actor" /></li> ><Actor
:actor="item.actor"
:stash="stash"
@stash="fetchStash"
/></li>
</ul> </ul>
<div <div
@ -82,6 +87,7 @@
v-for="item in stash.movies" v-for="item in stash.movies"
:key="`movie-${item.id}`" :key="`movie-${item.id}`"
:movie="item.movie" :movie="item.movie"
:stash="stash"
@stash="fetchStash" @stash="fetchStash"
/> />
</div> </div>
@ -257,6 +263,7 @@ export default {
display: grid; display: grid;
grid-gap: .5rem; grid-gap: .5rem;
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
grid-template-rows: min-content;
flex-grow: 1; flex-grow: 1;
padding: 1rem; padding: 1rem;
border-top: solid 1px var(--shadow-hint); border-top: solid 1px var(--shadow-hint);
@ -272,10 +279,9 @@ export default {
border-top: solid 1px var(--shadow-hint); border-top: solid 1px var(--shadow-hint);
} }
.stash-scenes { .stash-scenes .tiles {
.tiles {
grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
} grid-template-rows: min-content;
} }
@media(max-width: $breakpoint-small) { @media(max-width: $breakpoint-small) {