DebaucheryLibrarian/traxxx-web
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Added secondary stash menu to stash heart.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2024-07-07 21:01:44 +02:00
parent 8cada40311
commit dbc6ee0c6c
9 changed files with 171 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
components/stashes/heart.vue
View File

@@ -3,73 +3,91 @@
v-if="user"
class="bookmarks"
>
<VDropdown v-if="showSecondary">
<VDropdown
v-if="showSecondary || (hasSecondaryStash && pageStash?.user.id !== user.id)"
:shown="showStashes"
@hide="showStashes = false"
>
<Icon
icon="folder-heart"
class="heart noselect"
:class="{ favorited: itemStashes.some((itemStash) => !itemStash.isPrimary) }"
@contextmenu.prevent="showStashes = true"
/>
<template #popper>
<ul class="stash-menu nolist">
<li
v-for="userStash in user.stashes"
:key="`stash-${userStash.id}`"
class="menu-item"
>
<label class="menu-stash">
<Checkbox
:checked="itemStashes.some((itemStash) => itemStash.id === userStash.id)"
@change="(checked) => checked ? stashItem(userStash) : unstashItem(userStash)"
/>{{ userStash.name }}
</label>
</li>
</ul>
<StashMenu
:user="user"
:item-stashes="itemStashes"
@stash="(stash) => stashItem(stash)"
@unstash="(stash) => unstashItem(stash)"
/>
</template>
</VDropdown>
<template v-if="pageStash?.user.id === user.id">
<Icon
v-if="itemStashes.some((itemStash) => itemStash.id === pageStash.id)"
:icon="pageStash.isPrimary ? 'heart7' : 'folder-heart'"
class="heart favorited noselect"
@click.native.stop="unstashItem(pageStash)"
/>
<VDropdown
v-if="showSecondary || !hasSecondaryStash || pageStash?.user.id === user.id"
:triggers="[]"
:shown="showStashes"
:disabled="showSecondary"
@hide="showStashes = false"
>
<template v-if="pageStash?.user.id === user.id">
<Icon
v-if="itemStashes.some((itemStash) => itemStash.id === pageStash.id)"
:icon="pageStash.isPrimary ? 'heart7' : 'folder-heart'"
class="heart favorited noselect"
@click.native.stop="unstashItem(pageStash)"
@contextmenu.prevent="toggleShowStashes(true)"
/>
<Icon
v-else
:icon="pageStash.isPrimary ? 'heart8' : 'folder-heart'"
class="heart noselect"
@click.native.stop="stashItem(pageStash)"
/>
</template>
<Icon
v-else
:icon="pageStash.isPrimary ? 'heart8' : 'folder-heart'"
class="heart noselect"
@click.native.stop="stashItem(pageStash)"
@contextmenu.prevent="toggleShowStashes(true)"
/>
</template>
<template v-else>
<Icon
v-if="itemStashes.some((itemStash) => itemStash.id === user.primaryStash.id)"
icon="heart7"
class="heart favorited noselect"
@click.native.stop="unstashItem(user.primaryStash)"
/>
<template v-else>
<Icon
v-if="itemStashes.some((itemStash) => itemStash.id === user.primaryStash.id)"
icon="heart7"
class="heart favorited noselect"
@click.native.stop="unstashItem(user.primaryStash)"
@contextmenu.prevent="toggleShowStashes(true)"
/>
<Icon
v-else
icon="heart8"
class="heart noselect"
@click.native.stop="stashItem(user.primaryStash)"
/>
</template>
<Icon
v-else
icon="heart8"
class="heart noselect"
@click.native.stop="stashItem(user.primaryStash)"
@contextmenu.prevent="toggleShowStashes(true)"
/>
</template>
<template #popper>
<StashMenu
:user="user"
:item-stashes="itemStashes"
@stash="(stash) => stashItem(stash)"
@unstash="(stash) => unstashItem(stash)"
/>
</template>
</VDropdown>
</div>
</template>
<script setup>
import { ref, inject } from 'vue';
import { ref, computed, inject } from 'vue';
import { post, del } from '#/src/api.js';
import ellipsis from '#/utils/ellipsis.js';
import Icon from '#/components/icon/icon.vue';
import Checkbox from '#/components/form/checkbox.vue';
import StashMenu from '#/components/stashes/menu.vue';
const props = defineProps({
domain: {
@@ -92,8 +110,10 @@ const { user, pageProps } = inject('pageContext');
const pageStash = pageProps.stash;
const itemStashes = ref(props.item.stashes);
const hasSecondaryStash = computed(() => itemStashes.value.some((itemStash) => !itemStash.isPrimary));
const done = ref(true);
const showStashes = ref(false);
const feedbackCutoff = 20;
const itemKeys = {
@@ -149,6 +169,19 @@ async function unstashItem(stash) {
done.value = true;
}
function toggleShowStashes(state) {
if (props.showSecondary) {
return;
}
if (state) {
showStashes.value = state;
return;
}
showStashes.value = !showStashes.value;
}
</script>
<style scoped>
@@ -183,23 +216,4 @@ async function unstashItem(stash) {
fill: var(--primary);
}
}
.menu-item {
display: block;
}
.menu-stash {
display: flex;
align-items: center;
padding: .5rem;
&:hover {
cursor: pointer;
color: var(--primary);
}
.check-container {
margin-right: .5rem;
}
}
</style>

54
components/stashes/menu.vue Normal file
View File

@@ -0,0 +1,54 @@
<template>
<ul class="stash-menu nolist noselect">
<li
v-for="userStash in user.stashes"
:key="`stash-${userStash.id}`"
class="menu-item"
>
<label class="menu-stash">
<Checkbox
:checked="itemStashes.some((itemStash) => itemStash.id === userStash.id)"
@change="(checked) => checked ? emit('stash', userStash) : emit('unstash', userStash)"
/>{{ userStash.name }}
</label>
</li>
</ul>
</template>
<script setup>
import Checkbox from '#/components/form/checkbox.vue';
defineProps({
user: {
type: Object,
default: null,
},
itemStashes: {
type: Array,
default: () => [],
},
});
const emit = defineEmits(['stash', 'unstash']);
</script>
<style scoped>
.menu-item {
display: block;
}
.menu-stash {
display: flex;
align-items: center;
padding: .5rem;
&:hover {
cursor: pointer;
color: var(--primary);
}
.check-container {
margin-right: .5rem;
}
}
</style>