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
commit 5222da7748
10 changed files with 225 additions and 157 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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