traxxx/assets/components/users/stash.vue

229 lines
3.6 KiB
Vue
Raw Normal View History

2021-03-20 01:49:17 +00:00
<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>
</router-link>
2021-03-20 22:03:13 +00:00
<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>
2021-03-20 01:49:17 +00:00
<Icon
v-if="isMe && stash.deletable"
2021-03-20 22:03:13 +00:00
icon="bin"
class="stash-remove"
@click.native="showRemoveStash = true"
2021-03-20 01:49:17 +00:00
/>
2021-03-20 22:03:13 +00:00
<RemoveStash
v-if="showRemoveStash"
:stash="stash"
@close="removeStash"
2021-03-20 01:49:17 +00:00
/>
2021-03-20 22:03:13 +00:00
</span>
2021-03-20 01:49:17 +00:00
</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';
2021-03-20 22:03:13 +00:00
import RemoveStash from '../stashes/remove-stash.vue';
2021-03-20 01:49:17 +00:00
import Toggle from '../form/toggle.vue';
2021-03-20 22:03:13 +00:00
async function publishStash(isPublic) {
2021-03-20 01:49:17 +00:00
await this.$store.dispatch('updateStash', {
2021-03-20 22:03:13 +00:00
stashId: this.stash.id,
2021-03-20 01:49:17 +00:00
stash: { public: isPublic },
});
this.$emit('publish', isPublic);
}
2021-03-20 22:03:13 +00:00
async function removeStash(removed) {
this.showRemoveStash = false;
if (removed) {
this.$emit('remove');
}
}
2021-03-20 01:49:17 +00:00
export default {
components: {
ActorPreview,
ScenePreview,
2021-03-20 22:03:13 +00:00
RemoveStash,
2021-03-20 01:49:17 +00:00
Toggle,
},
props: {
stash: {
type: Object,
default: null,
},
isMe: {
type: Boolean,
default: false,
},
},
2021-03-20 22:03:13 +00:00
emits: ['publish', 'remove'],
data() {
return {
showRemoveStash: false,
};
},
2021-03-20 01:49:17 +00:00
methods: {
publishStash,
2021-03-20 22:03:13 +00:00
removeStash,
2021-03-20 01:49:17 +00:00
},
};
</script>
<style lang="scss" scoped>
2021-03-20 02:22:08 +00:00
.stash {
min-width: 0;
height: 100%;
background: var(--background);
box-shadow: 0 0 3px var(--shadow-weak);
}
2021-03-20 01:49:17 +00:00
.stash-section {
display: flex;
align-items: center;
padding: .5rem;
2021-03-20 02:22:08 +00:00
&:not(:last-child),
&.stash-header {
2021-03-20 01:49:17 +00:00
border-bottom: solid 1px var(--shadow-hint);
}
}
.stash-header {
justify-content: space-between;
padding: 0;
}
.stash-link {
flex-grow: 1;
display: inline-block;
text-decoration: none;
overflow: hidden;
}
.stash-name {
padding: .5rem;
margin: 0;
color: var(--shadow-strong);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
2021-03-20 01:49:17 +00:00
}
2021-03-20 22:03:13 +00:00
.header-actions {
2021-03-20 01:49:17 +00:00
display: flex;
2021-03-20 22:03:13 +00:00
align-items: stretch;
}
.stash-public {
display: inline-flex;
2021-03-20 01:49:17 +00:00
align-items: center;
padding: .5rem;
cursor: pointer;
.icon {
fill: var(--shadow-strong);
margin: 0 .5rem 0 0;
}
}
2021-03-20 22:03:13 +00:00
.stash-remove {
height: auto;
padding: 0 1rem 0 .75rem;
fill: var(--shadow);
&:hover {
cursor: pointer;
fill: var(--shadow-strong);
}
}
2021-03-20 01:49:17 +00:00
.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>