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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
assets/components/actors/tile.vue
View File

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

27
assets/components/releases/movie-tile.vue
View File

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

5
assets/components/releases/releases.vue
View File

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

27
assets/components/releases/scene-tile.vue
View File

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

14
assets/components/stashes/stash.vue
View File

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