244 lines
3.8 KiB
Vue
244 lines
3.8 KiB
Vue
<template>
|
|
<div class="stash">
|
|
<div class="stash-section stash-header">
|
|
<router-link
|
|
:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug } }"
|
|
class="stash-link nolink"
|
|
>
|
|
<h4 class="stash-name">{{ stash.name }}</h4>
|
|
<span class="stash-more">Browse</span>
|
|
</router-link>
|
|
|
|
<span class="header-actions noselect">
|
|
<label
|
|
v-if="isMe"
|
|
v-tooltip="'Public'"
|
|
:class="{ public: stash.public }"
|
|
class="stash-public"
|
|
>
|
|
<Icon
|
|
v-show="stash.public"
|
|
icon="eye"
|
|
/>
|
|
|
|
<Icon
|
|
v-show="!stash.public"
|
|
icon="eye-blocked"
|
|
/>
|
|
|
|
<Toggle
|
|
:checked="stash.public"
|
|
@change="checked => publishStash(checked)"
|
|
/>
|
|
</label>
|
|
|
|
<Icon
|
|
v-if="isMe && stash.deletable"
|
|
icon="bin"
|
|
class="stash-remove"
|
|
@click.native="showRemoveStash = true"
|
|
/>
|
|
|
|
<RemoveStash
|
|
v-if="showRemoveStash"
|
|
:stash="stash"
|
|
@close="removeStash"
|
|
/>
|
|
</span>
|
|
</div>
|
|
|
|
<ul
|
|
v-if="stash.scenes?.length > 0"
|
|
class="stash-section stash-scenes nolist"
|
|
>
|
|
<li
|
|
v-for="{ scene } in stash.scenes"
|
|
:key="scene.id"
|
|
class="stash-scene"
|
|
>
|
|
<ScenePreview
|
|
:scene="scene"
|
|
:stash="stash"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
|
|
<ul
|
|
v-if="stash.actors?.length > 0"
|
|
class="stash-section stash-actors nolist"
|
|
>
|
|
<li
|
|
v-for="{ actor } in stash.actors"
|
|
:key="actor.id"
|
|
class="stash-actor"
|
|
>
|
|
<ActorPreview
|
|
:actor="actor"
|
|
:stash="stash"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ActorPreview from './actor-preview.vue';
|
|
import ScenePreview from './scene-preview.vue';
|
|
import RemoveStash from '../stashes/remove-stash.vue';
|
|
import Toggle from '../form/toggle.vue';
|
|
|
|
async function publishStash(isPublic) {
|
|
await this.$store.dispatch('updateStash', {
|
|
stashId: this.stash.id,
|
|
stash: { public: isPublic },
|
|
});
|
|
|
|
this.$emit('publish', isPublic);
|
|
}
|
|
|
|
async function removeStash(removed) {
|
|
this.showRemoveStash = false;
|
|
|
|
if (removed) {
|
|
this.$emit('remove');
|
|
}
|
|
}
|
|
|
|
export default {
|
|
components: {
|
|
ActorPreview,
|
|
ScenePreview,
|
|
RemoveStash,
|
|
Toggle,
|
|
},
|
|
props: {
|
|
stash: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
isMe: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
emits: ['publish', 'remove'],
|
|
data() {
|
|
return {
|
|
showRemoveStash: false,
|
|
};
|
|
},
|
|
methods: {
|
|
publishStash,
|
|
removeStash,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.stash {
|
|
min-width: 0;
|
|
height: 100%;
|
|
background: var(--background);
|
|
box-shadow: 0 0 3px var(--shadow-weak);
|
|
}
|
|
|
|
.stash-section {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: .5rem;
|
|
|
|
&:not(:last-child),
|
|
&.stash-header {
|
|
border-bottom: solid 1px var(--shadow-hint);
|
|
}
|
|
}
|
|
|
|
.stash-header {
|
|
justify-content: space-between;
|
|
align-items: stretch;
|
|
padding: 0;
|
|
}
|
|
|
|
.stash-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex-grow: 1;
|
|
text-decoration: none;
|
|
overflow: hidden;
|
|
|
|
&:hover .stash-more {
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
|
|
.stash-name {
|
|
display: inline-block;
|
|
padding: 0 .5rem;
|
|
margin: 0;
|
|
color: var(--shadow-strong);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.stash-more {
|
|
flex-shrink: 0;
|
|
margin: 0 0 0 .5rem;
|
|
color: var(--shadow);
|
|
font-size: .9rem;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.stash-public {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: .5rem;
|
|
cursor: pointer;
|
|
|
|
.icon {
|
|
fill: var(--shadow-strong);
|
|
margin: 0 .5rem 0 0;
|
|
}
|
|
}
|
|
|
|
.stash-remove {
|
|
height: auto;
|
|
padding: 0 .5rem 0 .75rem;
|
|
fill: var(--shadow);
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
fill: var(--shadow-strong);
|
|
}
|
|
}
|
|
|
|
.stash-actors,
|
|
.stash-scenes {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
grid-gap: .5rem;
|
|
scroll-behavior: smooth;
|
|
scrollbar-width: none;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.stash-scenes {
|
|
height: 8rem;
|
|
}
|
|
|
|
.stash-actor,
|
|
.stash-scene {
|
|
height: 100%;
|
|
flex-shrink: 0;
|
|
font-size: 0;
|
|
}
|
|
|
|
</style>
|