113 lines
1.7 KiB
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>
|