hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

inner dropdowns work

Browse source
This commit is contained in:
Henry Jameson 2025-01-12 18:49:44 +02:00
parent 17917932a0
commit 5222da7748
10 changed files with 225 additions and 157 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/components/extra_buttons/extra_buttons.vue
View file

@ -18,7 +18,7 @@
> >
<button <button
v-if="canMute && !status.thread_muted" v-if="canMute && !status.thread_muted"
class="menu-item dropdown-item dropdown-item-icon" class="menu-item dropdown-item -icon"
role="menuitem" role="menuitem"
@click.prevent="muteConversation" @click.prevent="muteConversation"
> >
@ -29,7 +29,7 @@
</button> </button>
<button <button
v-if="canMute && status.thread_muted" v-if="canMute && status.thread_muted"
class="menu-item dropdown-item dropdown-item-icon" class="menu-item dropdown-item -icon"
role="menuitem" role="menuitem"
@click.prevent="unmuteConversation" @click.prevent="unmuteConversation"
> >
@ -40,7 +40,7 @@
</button> </button>
<button <button
v-if="!status.pinned && canPin" v-if="!status.pinned && canPin"
class="menu-item dropdown-item dropdown-item-icon" class="menu-item dropdown-item -icon"
role="menuitem" role="menuitem"
@click.prevent="pinStatus" @click.prevent="pinStatus"
@click="close" @click="close"
@ -52,7 +52,7 @@
</button> </button>
<button <button
v-if="status.pinned && canPin" v-if="status.pinned && canPin"
class="menu-item dropdown-item dropdown-item-icon" class="menu-item dropdown-item -icon"
role="menuitem" role="menuitem"
@click.prevent="unpinStatus" @click.prevent="unpinStatus"
@click="close" @click="close"
@ -65,7 +65,7 @@
<template v-if="canBookmark"> <template v-if="canBookmark">
<button <button
v-if="!status.bookmarked" v-if="!status.bookmarked"
class="menu-item dropdown-item dropdown-item-icon" class="menu-item dropdown-item -icon"
role="menuitem" role="menuitem"
@click.prevent="bookmarkStatus" @click.prevent="bookmarkStatus"
@click="close" @click="close"
@ -77,7 +77,7 @@
</button> </button>
<button <button
v-if="status.bookmarked" v-if="status.bookmarked"
class="menu-item dropdown-item dropdown-item-icon" class="menu-item dropdown-item -icon"
role="menuitem" role="menuitem"
@click.prevent="unbookmarkStatus" @click.prevent="unbookmarkStatus"
@click="close" @click="close"
@ -94,7 +94,7 @@
</template> </template>
<button <button
v-if="ownStatus && editingAvailable" v-if="ownStatus && editingAvailable"
class="menu-item dropdown-item dropdown-item-icon" class="menu-item dropdown-item -icon"
role="menuitem" role="menuitem"
@click.prevent="editStatus" @click.prevent="editStatus"
@click="close" @click="close"
@ -106,7 +106,7 @@
</button> </button>
<button <button
v-if="isEdited && editingAvailable" v-if="isEdited && editingAvailable"
class="menu-item dropdown-item dropdown-item-icon" class="menu-item dropdown-item -icon"
role="menuitem" role="menuitem"
@click.prevent="showStatusHistory" @click.prevent="showStatusHistory"
@click="close" @click="close"
@ -118,7 +118,7 @@
</button> </button>
<button <button
v-if="canDelete" v-if="canDelete"
class="menu-item dropdown-item dropdown-item-icon" class="menu-item dropdown-item -icon"
role="menuitem" role="menuitem"
@click.prevent="deleteStatus" @click.prevent="deleteStatus"
@click="close" @click="close"
@ -129,7 +129,7 @@
/><span>{{ $t("status.delete") }}</span> /><span>{{ $t("status.delete") }}</span>
</button> </button>
<button <button
class="menu-item dropdown-item dropdown-item-icon" class="menu-item dropdown-item -icon"
role="menuitem" role="menuitem"
@click.prevent="copyLink" @click.prevent="copyLink"
@click="close" @click="close"
@ -141,7 +141,7 @@
</button> </button>
<a <a
v-if="!status.is_local" v-if="!status.is_local"
class="menu-item dropdown-item dropdown-item-icon" class="menu-item dropdown-item -icon"
role="menuitem" role="menuitem"
title="Source" title="Source"
:href="status.external_url" :href="status.external_url"
@ -153,7 +153,7 @@
/><span>{{ $t("status.external_source") }}</span> /><span>{{ $t("status.external_source") }}</span>
</a> </a>
<button <button
class="menu-item dropdown-item dropdown-item-icon" class="menu-item dropdown-item -icon"
role="menuitem" role="menuitem"
@click.prevent="reportStatus" @click.prevent="reportStatus"
@click="close" @click="close"

30
src/components/popover/popover.scss
View file

@ -54,8 +54,16 @@
a.dropdown-item, a.dropdown-item,
button.dropdown-item, button.dropdown-item,
.dropdown-item:not(button, a) > button:first-child, .dropdown-item:not(button, a) {
.dropdown-item:not(button, a) > a:first-child { &.disabled {
cursor: not-allowed;
}
&:not(.disabled) {
cursor: pointer;
}
.main-button {
box-sizing: border-box; box-sizing: border-box;
padding: var(--__horizontal-gap) var(--__horizontal-gap); padding: var(--__horizontal-gap) var(--__horizontal-gap);
grid-gap: var(--__horizontal-gap); grid-gap: var(--__horizontal-gap);
@ -95,24 +103,10 @@
} }
} }
a.dropdown-item-icon, &.-icon {
button.dropdown-item-icon, .main-button {
.dropdown-item-icon:not(button, a) > button:first-child,
.dropdown-item-icon:not(button, a) > a:first-child {
grid-template-columns: var(--__line-height) 1fr; grid-template-columns: var(--__line-height) 1fr;
} }
a.dropdown-item:not(.disabled),
button.dropdown:not(.disabled),
.dropdown-item:not(.disabled, button, a) > button:first-child,
.dropdown-item:not(.disabled, button, a) > a:first-child {
cursor: pointer;
} }
a.dropdown-item.disabled,
button.dropdown.disabled,
.dropdown-item.disabled:not(button, a) > button:first-child,
.dropdown-item.disabled:not(button, a) > a:first-child {
cursor: not-allowed;
} }
} }

2
src/components/quick_filter_settings/quick_filter_settings.vue
View file

@ -108,7 +108,7 @@
/>{{ $t('settings.hide_all_muted_posts') }} />{{ $t('settings.hide_all_muted_posts') }}
</button> </button>
<button <button
class="menu-item dropdown-item dropdown-item-icon" class="menu-item dropdown-item -icon"
role="menuitem" role="menuitem"
@click="openTab('filtering')" @click="openTab('filtering')"
> >

2
src/components/quick_view_settings/quick_view_settings.vue
View file

@ -85,7 +85,7 @@
/>{{ $t('settings.collapse_subject') }} />{{ $t('settings.collapse_subject') }}
</button> </button>
<button <button
class="menu-item dropdown-item dropdown-item-icon" class="menu-item dropdown-item -icon"
role="menuitem" role="menuitem"
@click="openTab('general')" @click="openTab('general')"
> >

6
src/components/settings_modal/settings_modal.vue
View file

@ -70,7 +70,7 @@
<template #content="{close}"> <template #content="{close}">
<div class="dropdown-menu"> <div class="dropdown-menu">
<button <button
class="menu-item dropdown-item dropdown-item-icon" class="menu-item dropdown-item -icon"
@click.prevent="backup" @click.prevent="backup"
@click="close" @click="close"
> >
@ -80,7 +80,7 @@
/><span>{{ $t("settings.file_export_import.backup_settings") }}</span> /><span>{{ $t("settings.file_export_import.backup_settings") }}</span>
</button> </button>
<button <button
class="menu-item dropdown-item dropdown-item-icon" class="menu-item dropdown-item -icon"
@click.prevent="backupWithTheme" @click.prevent="backupWithTheme"
@click="close" @click="close"
> >
@ -90,7 +90,7 @@
/><span>{{ $t("settings.file_export_import.backup_settings_theme") }}</span> /><span>{{ $t("settings.file_export_import.backup_settings_theme") }}</span>
</button> </button>
<button <button
class="menu-item dropdown-item dropdown-item-icon" class="menu-item dropdown-item -icon"
@click.prevent="restore" @click.prevent="restore"
@click="close" @click="close"
> >

112
src/components/status_action_buttons/action_button.vue Normal file
View file

@ -0,0 +1,112 @@
<template>
<div>
<component
:is="getComponent(button)"
class="main-button"
role="menuitem"
:tabindex="0"
:disabled="getClass(button).disabled"
:href="getComponent(button) == 'a' ? button.link?.(funcArg) || getRemoteInteractionLink : undefined"
@click.stop="getComponent(button) === 'button' && doAction(button)"
@click="close"
>
<FALayers>
<FAIcon
class="fa-scale-110"
:icon="button.icon(funcArg)"
:spin="!extra && button.animated?.() && animationState[button.name]"
:fixed-width="extra"
/>
<template v-if="!getClass(button).disabled && button.toggleable?.(funcArg) && button.active">
<FAIcon
v-if="button.active(funcArg)"
class="active-marker"
transform="shrink-6 up-9 right-12"
:icon="button.activeIndicator?.(funcArg) || 'check'"
/>
<FAIcon
v-if="!button.active(funcArg)"
class="focus-marker"
transform="shrink-6 up-9 right-12"
:icon="button.openIndicator?.(funcArg) || 'plus'"
/>
<FAIcon
v-else
class="focus-marker"
transform="shrink-6 up-9 right-12"
:icon="button.closeIndicator?.(funcArg) || 'minus'"
/>
</template>
</FALayers><span>{{ $t(button.label(funcArg)) }}</span>
<FAIcon
v-if="button.name === 'bookmark'"
class="chevron-icon"
size="lg"
icon="chevron-right"
/>
</component>
</div>
</template>
<script>
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faPlus,
faMinus,
faCheck,
faTimes,
faWrench,
faReply,
faRetweet,
faStar,
faSmileBeam,
faEllipsisH,
faBookmark,
faEyeSlash,
faThumbtack,
faShareAlt,
faExternalLinkAlt,
faHistory
} from '@fortawesome/free-solid-svg-icons'
import {
faStar as faStarRegular
} from '@fortawesome/free-regular-svg-icons'
library.add(
faPlus,
faMinus,
faCheck,
faTimes,
faWrench,
faReply,
faRetweet,
faStar,
faStarRegular,
faSmileBeam,
faEllipsisH,
faBookmark,
faEyeSlash,
faThumbtack,
faShareAlt,
faExternalLinkAlt,
faHistory
)
export default {
props: [
'button',
'extra',
'status',
'funcArg',
'animationState',
'getClass',
'getComponent',
'doAction',
'close'
]
}
</script>

12
src/components/status_action_buttons/status_action_buttons.js
View file

@ -1,6 +1,8 @@
import { mapState } from 'vuex' import { mapState } from 'vuex'
import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue' import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
import ActionButton from './action_button.vue'
import StatusBookmarkFolderMenu from 'src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue'
import Popover from 'src/components/popover/popover.vue' import Popover from 'src/components/popover/popover.vue'
import genRandomSeed from 'src/services/random_seed/random_seed.service.js' import genRandomSeed from 'src/services/random_seed/random_seed.service.js'
@ -187,8 +189,7 @@ const BUTTONS = [{
} else { } else {
return dispatch('bookmark', { id: status.id }) return dispatch('bookmark', { id: status.id })
} }
}, }
popover: 'bookmark-folders'
}, { }, {
// ========= // =========
// EDIT // EDIT
@ -299,7 +300,9 @@ const StatusActionButtons = {
}, },
components: { components: {
Popover, Popover,
ConfirmModal ConfirmModal,
ActionButton,
StatusBookmarkFolderMenu
}, },
computed: { computed: {
...mapState({ ...mapState({
@ -333,7 +336,6 @@ const StatusActionButtons = {
triggerAttrs () { triggerAttrs () {
return { return {
title: this.$t('status.more_actions'), title: this.$t('status.more_actions'),
id: `popup-trigger-${this.randomSeed}`,
'aria-controls': `popup-menu-${this.randomSeed}`, 'aria-controls': `popup-menu-${this.randomSeed}`,
'aria-expanded': this.expanded, 'aria-expanded': this.expanded,
'aria-haspopup': 'menu' 'aria-haspopup': 'menu'
@ -375,7 +377,7 @@ const StatusActionButtons = {
this.$store.commit('addCollectionPreference', { path: 'collections.pinnedStatusActions', value: button.name }) this.$store.commit('addCollectionPreference', { path: 'collections.pinnedStatusActions', value: button.name })
this.$store.dispatch('pushServerSideStorage') this.$store.dispatch('pushServerSideStorage')
}, },
component (button) { getComponent (button) {
if (!this.$store.state.users.currentUser && button.anonLink) { if (!this.$store.state.users.currentUser && button.anonLink) {
return 'a' return 'a'
} else if (button.action == null && button.link != null) { } else if (button.action == null && button.link != null) {

66
src/components/status_action_buttons/status_action_buttons.vue
View file

@ -8,15 +8,15 @@
:key="button.name" :key="button.name"
> >
<component <component
:is="component(button)" :is="getComponent(button)"
class="button-unstyled action-button" class="button-unstyled action-button"
:class="getClass(button)" :class="getClass(button)"
:disabled="getClass(button).disabled" :disabled="getClass(button).disabled"
role="button" role="button"
:tabindex="0" :tabindex="0"
:title="$t(button.label(funcArg))" :title="$t(button.label(funcArg))"
@click.stop="component(button) === 'button' && doAction(button)" @click.stop="getComponent(button) === 'button' && doAction(button)"
:href="component(button) == 'a' ? button.link?.(funcArg) || getRemoteInteractionLink : undefined" :href="getComponent(button) == 'a' ? button.link?.(funcArg) || getRemoteInteractionLink : undefined"
> >
<FALayers> <FALayers>
<FAIcon <FAIcon
@ -90,7 +90,7 @@
class="dropdown-menu extra-action-buttons" class="dropdown-menu extra-action-buttons"
role="menu" role="menu"
> >
<div class="menu-item dropdown-item extra-action dropdown-item-icon"> <div class="menu-item dropdown-item extra-action -icon">
<button <button
class="main-button" class="main-button"
role="menuitem" role="menuitem"
@ -107,50 +107,32 @@
<div <div
v-for="button in extraButtons" v-for="button in extraButtons"
:key="button.name" :key="button.name"
class="menu-item dropdown-item extra-action dropdown-item-icon" class="menu-item dropdown-item extra-action -icon"
:disabled="getClass(button).disabled" :disabled="getClass(button).disabled"
:class="{ disabled: getClass(button).disabled }" :class="{ disabled: getClass(button).disabled }"
> >
<component <Popover
:is="component(button)" v-if="getComponent(button) === 'button'"
class="main-button" trigger="hover"
role="menuitem" placement="right"
:class="getClass(button)"
:tabindex="0"
:disabled="getClass(button).disabled"
@click.stop="component(button) === 'button' && doAction(button)"
@click="close"
:href="component(button) == 'a' ? button.link?.(funcArg) || getRemoteInteractionLink : undefined"
> >
<FALayers> <template #trigger>
<FAIcon <ActionButton
class="fa-scale-110" :button="button"
:icon="button.icon(funcArg)" :status="status"
:spin="button.animated?.() && animationState[button.name]" :extra="true"
fixed-width :funcArg="funcArg"
/> :get-class="getClass"
<template v-if="!getClass(button).disabled && button.toggleable?.(funcArg) && button.active"> :get-component="getComponent"
<FAIcon :animation-state="animationState"
v-if="button.active(funcArg)" :close="close"
class="active-marker" :do-action="doAction"
transform="shrink-6 up-9 right-12"
:icon="button.activeIndicator?.(funcArg) || 'check'"
/>
<FAIcon
v-if="!button.active(funcArg)"
class="focus-marker"
transform="shrink-6 up-9 right-12"
:icon="button.openIndicator?.(funcArg) || 'plus'"
/>
<FAIcon
v-else
class="focus-marker"
transform="shrink-6 up-9 right-12"
:icon="button.closeIndicator?.(funcArg) || 'minus'"
/> />
</template> </template>
</FALayers><span>{{ $t(button.label(funcArg)) }}</span> <template #content>
</component> <StatusBookmarkFolderMenu v-if="button.name === 'bookmark'" :status="funcArg.status" />
</template>
</Popover>
<button <button
v-if="showPin && currentUser" v-if="showPin && currentUser"
type="button" type="button"

24
src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue
View file

@ -1,16 +1,9 @@
<template> <template>
<div class="StatusBookmarkFolderMenu">
<Popover
trigger="hover"
placement="left"
remove-padding
>
<template #content>
<div class="dropdown-menu"> <div class="dropdown-menu">
<button <button
v-for="folder in folders" v-for="folder in folders"
:key="folder.id" :key="folder.id"
class="menu-item dropdown-item" class="menu-item dropdown-item -icon"
@click="toggleFolder(folder.id)" @click="toggleFolder(folder.id)"
> >
<span <span
@ -20,21 +13,6 @@
{{ folder.name }} {{ folder.name }}
</button> </button>
</div> </div>
</template>
<template #trigger>
<button class="menu-item dropdown-item dropdown-item-icon -has-submenu">
<FAIcon
fixed-width
icon="folder"
/>{{ $t('bookmark_folders.select_folder') }}<FAIcon
class="chevron-icon"
size="lg"
icon="chevron-right"
/>
</button>
</template>
</Popover>
</div>
</template> </template>
<script src="./status_bookmark_folder_menu.js"></script> <script src="./status_bookmark_folder_menu.js"></script>

6
src/components/user_list_menu/user_list_menu.vue
View file

@ -11,7 +11,7 @@
<button <button
v-for="list in lists" v-for="list in lists"
:key="list.id" :key="list.id"
class="menu-item dropdown-item dropdown-item-icon" class="menu-item dropdown-item -icon"
@click="toggleList(list.id)" @click="toggleList(list.id)"
> >
<span <span
@ -23,14 +23,14 @@
</div> </div>
</template> </template>
<template #trigger> <template #trigger>
<span> <span class="main-button">
{{ $t('lists.manage_lists') }} {{ $t('lists.manage_lists') }}
</span>
<FAIcon <FAIcon
class="chevron-icon" class="chevron-icon"
size="lg" size="lg"
icon="chevron-right" icon="chevron-right"
/> />
</span>
</template> </template>
</Popover> </Popover>
</div> </div>