traxxx/assets/components/stashes/button.vue

113 lines
1.7 KiB
Vue

<template>
<span class="stash-container">
<Tooltip class="stash-trigger">
<Icon
v-show="me"
icon="menu"
class="stash noselect"
:class="{ stashed }"
/>
<template v-slot:tooltip>
<StashMenu
:stashed-by="stashedBy"
@stash="(stashId) => $emit('stash', stashId)"
@unstash="(stashId) => $emit('unstash', stashId)"
/>
</template>
</Tooltip>
<Icon
v-show="me && favorited"
icon="heart7"
class="stash stashed noselect"
@click.native="() => $emit('unstash', favorites.id)"
/>
<Icon
v-show="me && !favorited"
icon="heart8"
class="stash unstashed noselect"
@click.native="() => $emit('stash', favorites.id)"
/>
</span>
</template>
<script>
import StashMenu from './menu.vue';
function favorited() {
return this.stashedBy.some(stash => stash.primary);
}
function stashed() {
return this.stashedBy.some(stash => !stash.primary);
}
function favorites() {
return this.$store.getters.favorites;
}
function me() {
return this.$store.state.auth.user;
}
export default {
components: {
StashMenu,
},
props: {
stashedBy: {
type: Array,
default: () => [],
},
},
emits: ['stash', 'unstash'],
computed: {
me,
favorites,
favorited,
stashed,
},
};
</script>
<style lang="scss" scoped>
@import 'breakpoints';
.stash-container {
flex-shrink: 0;
&.light .icon {
fill: var(--lighten);
}
}
.stash.icon {
width: 1.5rem;
height: 1.5rem;
padding: 0 .5rem;
fill: var(--shadow);
&.stashed {
fill: var(--primary);
}
&:hover {
fill: var(--primary);
cursor: pointer;
}
}
.stash-trigger {
display: inline-block;
}
@media(max-width: $breakpoint) {
.stash.icon {
width: 1.25rem;
height: 1.25rem;
}
}
</style>