remove old status actions stuff
This commit is contained in:
Henry Jameson
parent
cfa1a48bfb
commit
9deb8aaff6
12 changed files with 0 additions and 1108 deletions
|
|
@ -1,175 +0,0 @@
|
||||||
import Popover from '../popover/popover.vue'
|
|
||||||
import genRandomSeed from '../../services/random_seed/random_seed.service.js'
|
|
||||||
import ConfirmModal from '../confirm_modal/confirm_modal.vue'
|
|
||||||
import StatusBookmarkFolderMenu from '../status_bookmark_folder_menu/status_bookmark_folder_menu.vue'
|
|
||||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
|
||||||
import {
|
|
||||||
faEllipsisH,
|
|
||||||
faBookmark,
|
|
||||||
faEyeSlash,
|
|
||||||
faThumbtack,
|
|
||||||
faShareAlt,
|
|
||||||
faExternalLinkAlt,
|
|
||||||
faHistory,
|
|
||||||
faPlus,
|
|
||||||
faTimes
|
|
||||||
} from '@fortawesome/free-solid-svg-icons'
|
|
||||||
import {
|
|
||||||
faBookmark as faBookmarkReg,
|
|
||||||
faFlag
|
|
||||||
} from '@fortawesome/free-regular-svg-icons'
|
|
||||||
|
|
||||||
library.add(
|
|
||||||
faEllipsisH,
|
|
||||||
faBookmark,
|
|
||||||
faBookmarkReg,
|
|
||||||
faEyeSlash,
|
|
||||||
faThumbtack,
|
|
||||||
faShareAlt,
|
|
||||||
faExternalLinkAlt,
|
|
||||||
faFlag,
|
|
||||||
faHistory,
|
|
||||||
faPlus,
|
|
||||||
faTimes
|
|
||||||
)
|
|
||||||
|
|
||||||
const ExtraButtons = {
|
|
||||||
props: ['status'],
|
|
||||||
components: {
|
|
||||||
Popover,
|
|
||||||
ConfirmModal,
|
|
||||||
StatusBookmarkFolderMenu
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
expanded: false,
|
|
||||||
showingDeleteDialog: false,
|
|
||||||
randomSeed: genRandomSeed()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
onShow () {
|
|
||||||
this.expanded = true
|
|
||||||
},
|
|
||||||
onClose () {
|
|
||||||
this.expanded = false
|
|
||||||
},
|
|
||||||
deleteStatus () {
|
|
||||||
if (this.shouldConfirmDelete) {
|
|
||||||
this.showDeleteStatusConfirmDialog()
|
|
||||||
} else {
|
|
||||||
this.doDeleteStatus()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
doDeleteStatus () {
|
|
||||||
this.$store.dispatch('deleteStatus', { id: this.status.id })
|
|
||||||
this.hideDeleteStatusConfirmDialog()
|
|
||||||
},
|
|
||||||
showDeleteStatusConfirmDialog () {
|
|
||||||
this.showingDeleteDialog = true
|
|
||||||
},
|
|
||||||
hideDeleteStatusConfirmDialog () {
|
|
||||||
this.showingDeleteDialog = false
|
|
||||||
},
|
|
||||||
pinStatus () {
|
|
||||||
this.$store.dispatch('pinStatus', this.status.id)
|
|
||||||
.then(() => this.$emit('onSuccess'))
|
|
||||||
.catch(err => this.$emit('onError', err.error.error))
|
|
||||||
},
|
|
||||||
unpinStatus () {
|
|
||||||
this.$store.dispatch('unpinStatus', this.status.id)
|
|
||||||
.then(() => this.$emit('onSuccess'))
|
|
||||||
.catch(err => this.$emit('onError', err.error.error))
|
|
||||||
},
|
|
||||||
muteConversation () {
|
|
||||||
this.$store.dispatch('muteConversation', this.status.id)
|
|
||||||
.then(() => this.$emit('onSuccess'))
|
|
||||||
.catch(err => this.$emit('onError', err.error.error))
|
|
||||||
},
|
|
||||||
unmuteConversation () {
|
|
||||||
this.$store.dispatch('unmuteConversation', this.status.id)
|
|
||||||
.then(() => this.$emit('onSuccess'))
|
|
||||||
.catch(err => this.$emit('onError', err.error.error))
|
|
||||||
},
|
|
||||||
copyLink () {
|
|
||||||
navigator.clipboard.writeText(this.statusLink)
|
|
||||||
.then(() => this.$emit('onSuccess'))
|
|
||||||
.catch(err => this.$emit('onError', err.error.error))
|
|
||||||
},
|
|
||||||
bookmarkStatus () {
|
|
||||||
this.$store.dispatch('bookmark', { id: this.status.id })
|
|
||||||
.then(() => this.$emit('onSuccess'))
|
|
||||||
.catch(err => this.$emit('onError', err.error.error))
|
|
||||||
},
|
|
||||||
unbookmarkStatus () {
|
|
||||||
this.$store.dispatch('unbookmark', { id: this.status.id })
|
|
||||||
.then(() => this.$emit('onSuccess'))
|
|
||||||
.catch(err => this.$emit('onError', err.error.error))
|
|
||||||
},
|
|
||||||
reportStatus () {
|
|
||||||
this.$store.dispatch('openUserReportingModal', { userId: this.status.user.id, statusIds: [this.status.id] })
|
|
||||||
},
|
|
||||||
editStatus () {
|
|
||||||
this.$store.dispatch('fetchStatusSource', { id: this.status.id })
|
|
||||||
.then(data => this.$store.dispatch('openEditStatusModal', {
|
|
||||||
statusId: this.status.id,
|
|
||||||
subject: data.spoiler_text,
|
|
||||||
statusText: data.text,
|
|
||||||
statusIsSensitive: this.status.nsfw,
|
|
||||||
statusPoll: this.status.poll,
|
|
||||||
statusFiles: [...this.status.attachments],
|
|
||||||
visibility: this.status.visibility,
|
|
||||||
statusContentType: data.content_type
|
|
||||||
}))
|
|
||||||
},
|
|
||||||
showStatusHistory () {
|
|
||||||
const originalStatus = { ...this.status }
|
|
||||||
const stripFieldsList = ['attachments', 'created_at', 'emojis', 'text', 'raw_html', 'nsfw', 'poll', 'summary', 'summary_raw_html']
|
|
||||||
stripFieldsList.forEach(p => delete originalStatus[p])
|
|
||||||
this.$store.dispatch('openStatusHistoryModal', originalStatus)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
currentUser () { return this.$store.state.users.currentUser },
|
|
||||||
canDelete () {
|
|
||||||
if (!this.currentUser) { return }
|
|
||||||
return this.currentUser.privileges.includes('messages_delete') || this.status.user.id === this.currentUser.id
|
|
||||||
},
|
|
||||||
ownStatus () {
|
|
||||||
return this.status.user.id === this.currentUser.id
|
|
||||||
},
|
|
||||||
canPin () {
|
|
||||||
return this.ownStatus && (this.status.visibility === 'public' || this.status.visibility === 'unlisted')
|
|
||||||
},
|
|
||||||
canMute () {
|
|
||||||
return !!this.currentUser
|
|
||||||
},
|
|
||||||
canBookmark () {
|
|
||||||
return !!this.currentUser
|
|
||||||
},
|
|
||||||
bookmarkFolders () {
|
|
||||||
return this.$store.state.instance.pleromaBookmarkFoldersAvailable
|
|
||||||
},
|
|
||||||
statusLink () {
|
|
||||||
return `${this.$store.state.instance.server}${this.$router.resolve({ name: 'conversation', params: { id: this.status.id } }).href}`
|
|
||||||
},
|
|
||||||
isEdited () {
|
|
||||||
return this.status.edited_at !== null
|
|
||||||
},
|
|
||||||
editingAvailable () { return this.$store.state.instance.editingAvailable },
|
|
||||||
shouldConfirmDelete () {
|
|
||||||
return this.$store.getters.mergedConfig.modalOnDelete
|
|
||||||
},
|
|
||||||
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'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ExtraButtons
|
|
||||||
|
|
@ -1,236 +0,0 @@
|
||||||
<template>
|
|
||||||
<Popover
|
|
||||||
class="ExtraButtons"
|
|
||||||
trigger="click"
|
|
||||||
:trigger-attrs="triggerAttrs"
|
|
||||||
placement="top"
|
|
||||||
:offset="{ y: 5 }"
|
|
||||||
:bound-to="{ x: 'container' }"
|
|
||||||
remove-padding
|
|
||||||
@show="onShow"
|
|
||||||
@close="onClose"
|
|
||||||
>
|
|
||||||
<template #content="{close}">
|
|
||||||
<div
|
|
||||||
:id="`popup-menu-${randomSeed}`"
|
|
||||||
class="dropdown-menu"
|
|
||||||
role="menu"
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
v-if="canMute && !status.thread_muted"
|
|
||||||
class="menu-item dropdown-item -icon"
|
|
||||||
role="menuitem"
|
|
||||||
@click.prevent="muteConversation"
|
|
||||||
>
|
|
||||||
<FAIcon
|
|
||||||
fixed-width
|
|
||||||
icon="eye-slash"
|
|
||||||
/><span>{{ $t("status.mute_conversation") }}</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-if="canMute && status.thread_muted"
|
|
||||||
class="menu-item dropdown-item -icon"
|
|
||||||
role="menuitem"
|
|
||||||
@click.prevent="unmuteConversation"
|
|
||||||
>
|
|
||||||
<FAIcon
|
|
||||||
fixed-width
|
|
||||||
icon="eye-slash"
|
|
||||||
/><span>{{ $t("status.unmute_conversation") }}</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-if="!status.pinned && canPin"
|
|
||||||
class="menu-item dropdown-item -icon"
|
|
||||||
role="menuitem"
|
|
||||||
@click.prevent="pinStatus"
|
|
||||||
@click="close"
|
|
||||||
>
|
|
||||||
<FAIcon
|
|
||||||
fixed-width
|
|
||||||
icon="thumbtack"
|
|
||||||
/><span>{{ $t("status.pin") }}</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-if="status.pinned && canPin"
|
|
||||||
class="menu-item dropdown-item -icon"
|
|
||||||
role="menuitem"
|
|
||||||
@click.prevent="unpinStatus"
|
|
||||||
@click="close"
|
|
||||||
>
|
|
||||||
<FAIcon
|
|
||||||
fixed-width
|
|
||||||
icon="thumbtack"
|
|
||||||
/><span>{{ $t("status.unpin") }}</span>
|
|
||||||
</button>
|
|
||||||
<template v-if="canBookmark">
|
|
||||||
<button
|
|
||||||
v-if="!status.bookmarked"
|
|
||||||
class="menu-item dropdown-item -icon"
|
|
||||||
role="menuitem"
|
|
||||||
@click.prevent="bookmarkStatus"
|
|
||||||
@click="close"
|
|
||||||
>
|
|
||||||
<FAIcon
|
|
||||||
fixed-width
|
|
||||||
:icon="['far', 'bookmark']"
|
|
||||||
/><span>{{ $t("status.bookmark") }}</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-if="status.bookmarked"
|
|
||||||
class="menu-item dropdown-item -icon"
|
|
||||||
role="menuitem"
|
|
||||||
@click.prevent="unbookmarkStatus"
|
|
||||||
@click="close"
|
|
||||||
>
|
|
||||||
<FAIcon
|
|
||||||
fixed-width
|
|
||||||
icon="bookmark"
|
|
||||||
/><span>{{ $t("status.unbookmark") }}</span>
|
|
||||||
</button>
|
|
||||||
<StatusBookmarkFolderMenu
|
|
||||||
v-if="status.bookmarked && bookmarkFolders"
|
|
||||||
:status="status"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
<button
|
|
||||||
v-if="ownStatus && editingAvailable"
|
|
||||||
class="menu-item dropdown-item -icon"
|
|
||||||
role="menuitem"
|
|
||||||
@click.prevent="editStatus"
|
|
||||||
@click="close"
|
|
||||||
>
|
|
||||||
<FAIcon
|
|
||||||
fixed-width
|
|
||||||
icon="pen"
|
|
||||||
/><span>{{ $t("status.edit") }}</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-if="isEdited && editingAvailable"
|
|
||||||
class="menu-item dropdown-item -icon"
|
|
||||||
role="menuitem"
|
|
||||||
@click.prevent="showStatusHistory"
|
|
||||||
@click="close"
|
|
||||||
>
|
|
||||||
<FAIcon
|
|
||||||
fixed-width
|
|
||||||
icon="history"
|
|
||||||
/><span>{{ $t("status.status_history") }}</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
v-if="canDelete"
|
|
||||||
class="menu-item dropdown-item -icon"
|
|
||||||
role="menuitem"
|
|
||||||
@click.prevent="deleteStatus"
|
|
||||||
@click="close"
|
|
||||||
>
|
|
||||||
<FAIcon
|
|
||||||
fixed-width
|
|
||||||
icon="times"
|
|
||||||
/><span>{{ $t("status.delete") }}</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="menu-item dropdown-item -icon"
|
|
||||||
role="menuitem"
|
|
||||||
@click.prevent="copyLink"
|
|
||||||
@click="close"
|
|
||||||
>
|
|
||||||
<FAIcon
|
|
||||||
fixed-width
|
|
||||||
icon="share-alt"
|
|
||||||
/><span>{{ $t("status.copy_link") }}</span>
|
|
||||||
</button>
|
|
||||||
<a
|
|
||||||
v-if="!status.is_local"
|
|
||||||
class="menu-item dropdown-item -icon"
|
|
||||||
role="menuitem"
|
|
||||||
title="Source"
|
|
||||||
:href="status.external_url"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
<FAIcon
|
|
||||||
fixed-width
|
|
||||||
icon="external-link-alt"
|
|
||||||
/><span>{{ $t("status.external_source") }}</span>
|
|
||||||
</a>
|
|
||||||
<button
|
|
||||||
class="menu-item dropdown-item -icon"
|
|
||||||
role="menuitem"
|
|
||||||
@click.prevent="reportStatus"
|
|
||||||
@click="close"
|
|
||||||
>
|
|
||||||
<FAIcon
|
|
||||||
fixed-width
|
|
||||||
:icon="['far', 'flag']"
|
|
||||||
/><span>{{ $t("user_card.report") }}</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<template #trigger>
|
|
||||||
<FALayers class="fa-old-padding-layer">
|
|
||||||
<FAIcon
|
|
||||||
class="fa-scale-110 "
|
|
||||||
icon="ellipsis-h"
|
|
||||||
/>
|
|
||||||
<FAIcon
|
|
||||||
v-show="!expanded"
|
|
||||||
class="focus-marker"
|
|
||||||
transform="shrink-6 up-8 right-16"
|
|
||||||
icon="plus"
|
|
||||||
/>
|
|
||||||
<FAIcon
|
|
||||||
v-show="expanded"
|
|
||||||
class="focus-marker"
|
|
||||||
transform="shrink-6 up-8 right-16"
|
|
||||||
icon="times"
|
|
||||||
/>
|
|
||||||
</FALayers>
|
|
||||||
<teleport to="#modal">
|
|
||||||
<ConfirmModal
|
|
||||||
v-if="showingDeleteDialog"
|
|
||||||
:title="$t('status.delete_confirm_title')"
|
|
||||||
:cancel-text="$t('status.delete_confirm_cancel_button')"
|
|
||||||
:confirm-text="$t('status.delete_confirm_accept_button')"
|
|
||||||
@cancelled="hideDeleteStatusConfirmDialog"
|
|
||||||
@accepted="doDeleteStatus"
|
|
||||||
>
|
|
||||||
{{ $t('status.delete_confirm') }}
|
|
||||||
</ConfirmModal>
|
|
||||||
</teleport>
|
|
||||||
</template>
|
|
||||||
</Popover>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script src="./extra_buttons.js"></script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@import "../../mixins";
|
|
||||||
|
|
||||||
.ExtraButtons {
|
|
||||||
.popover-trigger {
|
|
||||||
position: static;
|
|
||||||
padding: 10px;
|
|
||||||
margin: -10px;
|
|
||||||
|
|
||||||
&:hover .svg-inline--fa {
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.popover-trigger-button {
|
|
||||||
/* override of popover internal stuff */
|
|
||||||
width: auto;
|
|
||||||
|
|
||||||
@include unfocused-style {
|
|
||||||
.focus-marker {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include focused-style {
|
|
||||||
.focus-marker {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,49 +0,0 @@
|
||||||
import { mapGetters } from 'vuex'
|
|
||||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
|
||||||
import {
|
|
||||||
faStar,
|
|
||||||
faPlus,
|
|
||||||
faMinus,
|
|
||||||
faCheck
|
|
||||||
} from '@fortawesome/free-solid-svg-icons'
|
|
||||||
import {
|
|
||||||
faStar as faStarRegular
|
|
||||||
} from '@fortawesome/free-regular-svg-icons'
|
|
||||||
|
|
||||||
library.add(
|
|
||||||
faStar,
|
|
||||||
faStarRegular,
|
|
||||||
faPlus,
|
|
||||||
faMinus,
|
|
||||||
faCheck
|
|
||||||
)
|
|
||||||
|
|
||||||
const FavoriteButton = {
|
|
||||||
props: ['status', 'loggedIn'],
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
animated: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
favorite () {
|
|
||||||
if (!this.status.favorited) {
|
|
||||||
this.$store.dispatch('favorite', { id: this.status.id })
|
|
||||||
} else {
|
|
||||||
this.$store.dispatch('unfavorite', { id: this.status.id })
|
|
||||||
}
|
|
||||||
this.animated = true
|
|
||||||
setTimeout(() => {
|
|
||||||
this.animated = false
|
|
||||||
}, 500)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapGetters(['mergedConfig']),
|
|
||||||
remoteInteractionLink () {
|
|
||||||
return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default FavoriteButton
|
|
||||||
|
|
@ -1,114 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="FavoriteButton">
|
|
||||||
<button
|
|
||||||
v-if="loggedIn"
|
|
||||||
class="button-unstyled interactive"
|
|
||||||
:class="status.favorited && '-favorited'"
|
|
||||||
:title="$t('tool_tip.favorite')"
|
|
||||||
@click.prevent="favorite()"
|
|
||||||
>
|
|
||||||
<FALayers class="fa-scale-110 fa-old-padding-layer">
|
|
||||||
<FAIcon
|
|
||||||
class="fa-scale-110"
|
|
||||||
:icon="[status.favorited ? 'fas' : 'far', 'star']"
|
|
||||||
:spin="animated"
|
|
||||||
/>
|
|
||||||
<FAIcon
|
|
||||||
v-if="status.favorited"
|
|
||||||
class="active-marker"
|
|
||||||
transform="shrink-6 up-9 right-12"
|
|
||||||
icon="check"
|
|
||||||
/>
|
|
||||||
<FAIcon
|
|
||||||
v-if="!status.favorited"
|
|
||||||
class="focus-marker"
|
|
||||||
transform="shrink-6 up-9 right-12"
|
|
||||||
icon="plus"
|
|
||||||
/>
|
|
||||||
<FAIcon
|
|
||||||
v-else
|
|
||||||
class="focus-marker"
|
|
||||||
transform="shrink-6 up-9 right-12"
|
|
||||||
icon="minus"
|
|
||||||
/>
|
|
||||||
</FALayers>
|
|
||||||
</button>
|
|
||||||
<a
|
|
||||||
v-else
|
|
||||||
class="button-unstyled interactive"
|
|
||||||
target="_blank"
|
|
||||||
role="button"
|
|
||||||
:title="$t('tool_tip.favorite')"
|
|
||||||
:href="remoteInteractionLink"
|
|
||||||
>
|
|
||||||
<FALayers class="fa-scale-110 fa-old-padding-layer">
|
|
||||||
<FAIcon
|
|
||||||
class="fa-scale-110"
|
|
||||||
:icon="['far', 'star']"
|
|
||||||
/>
|
|
||||||
<FAIcon
|
|
||||||
class="focus-marker"
|
|
||||||
transform="shrink-6 up-9 right-12"
|
|
||||||
icon="plus"
|
|
||||||
/>
|
|
||||||
</FALayers>
|
|
||||||
</a>
|
|
||||||
<span
|
|
||||||
v-if="!mergedConfig.hidePostStats && status.fave_num > 0"
|
|
||||||
class="action-counter"
|
|
||||||
>
|
|
||||||
{{ status.fave_num }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script src="./favorite_button.js"></script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@import "../../mixins";
|
|
||||||
|
|
||||||
.FavoriteButton {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
> :first-child {
|
|
||||||
padding: 10px;
|
|
||||||
margin: -10px -8px -10px -10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-counter {
|
|
||||||
pointer-events: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.interactive {
|
|
||||||
.svg-inline--fa {
|
|
||||||
animation-duration: 0.6s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover .svg-inline--fa,
|
|
||||||
&.-favorited .svg-inline--fa {
|
|
||||||
color: var(--cOrange);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include unfocused-style {
|
|
||||||
.focus-marker {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active-marker {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include focused-style {
|
|
||||||
.focus-marker {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active-marker {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,54 +0,0 @@
|
||||||
import Popover from '../popover/popover.vue'
|
|
||||||
import EmojiPicker from '../emoji_picker/emoji_picker.vue'
|
|
||||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
|
||||||
import { faPlus, faTimes } from '@fortawesome/free-solid-svg-icons'
|
|
||||||
import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
|
|
||||||
|
|
||||||
library.add(
|
|
||||||
faPlus,
|
|
||||||
faTimes,
|
|
||||||
faSmileBeam
|
|
||||||
)
|
|
||||||
|
|
||||||
const ReactButton = {
|
|
||||||
props: ['status'],
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
filterWord: '',
|
|
||||||
expanded: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
Popover,
|
|
||||||
EmojiPicker
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
addReaction (event) {
|
|
||||||
const emoji = event.insertion
|
|
||||||
const existingReaction = this.status.emoji_reactions.find(r => r.name === emoji)
|
|
||||||
if (existingReaction && existingReaction.me) {
|
|
||||||
this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
|
|
||||||
} else {
|
|
||||||
this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
|
|
||||||
}
|
|
||||||
},
|
|
||||||
show () {
|
|
||||||
if (!this.expanded) {
|
|
||||||
this.$refs.picker.showPicker()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onShow () {
|
|
||||||
this.expanded = true
|
|
||||||
},
|
|
||||||
onClose () {
|
|
||||||
this.expanded = false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
hideCustomEmoji () {
|
|
||||||
return !this.$store.state.instance.pleromaCustomEmojiReactionsAvailable
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ReactButton
|
|
||||||
|
|
@ -1,115 +0,0 @@
|
||||||
<template>
|
|
||||||
<span class="ReactButton">
|
|
||||||
<EmojiPicker
|
|
||||||
ref="picker"
|
|
||||||
:enable-sticker-picker="false"
|
|
||||||
:hide-custom-emoji="hideCustomEmoji"
|
|
||||||
class="emoji-picker-panel"
|
|
||||||
@emoji="addReaction"
|
|
||||||
@show="onShow"
|
|
||||||
@close="onClose"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="button-unstyled popover-trigger"
|
|
||||||
role="button"
|
|
||||||
:tabindex="0"
|
|
||||||
:title="$t('tool_tip.add_reaction')"
|
|
||||||
@click.stop.prevent="show"
|
|
||||||
>
|
|
||||||
<FALayers>
|
|
||||||
<FAIcon
|
|
||||||
class="fa-scale-110 fa-old-padding"
|
|
||||||
:icon="['far', 'smile-beam']"
|
|
||||||
/>
|
|
||||||
<FAIcon
|
|
||||||
v-show="!expanded"
|
|
||||||
class="focus-marker"
|
|
||||||
transform="shrink-6 up-9 right-17"
|
|
||||||
icon="plus"
|
|
||||||
/>
|
|
||||||
<FAIcon
|
|
||||||
v-show="expanded"
|
|
||||||
class="focus-marker"
|
|
||||||
transform="shrink-6 up-9 right-17"
|
|
||||||
icon="times"
|
|
||||||
/>
|
|
||||||
</FALayers>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script src="./react_button.js"></script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@import "../../mixins";
|
|
||||||
|
|
||||||
.ReactButton {
|
|
||||||
.reaction-picker-filter {
|
|
||||||
padding: 0.5em;
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
input {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.reaction-picker-divider {
|
|
||||||
height: 1px;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0.5em;
|
|
||||||
background-color: var(--border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.reaction-picker {
|
|
||||||
width: 10em;
|
|
||||||
height: 9em;
|
|
||||||
font-size: 1.5em;
|
|
||||||
overflow-y: scroll;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
padding: 0.5em;
|
|
||||||
text-align: center;
|
|
||||||
align-content: flex-start;
|
|
||||||
user-select: none;
|
|
||||||
mask:
|
|
||||||
linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
|
|
||||||
linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
|
|
||||||
linear-gradient(to top, white, white);
|
|
||||||
transition: mask-size 150ms;
|
|
||||||
mask-size: 100% 20px, 100% 20px, auto;
|
|
||||||
|
|
||||||
/* Autoprefixed seem to ignore this one, and also syntax is different */
|
|
||||||
mask-composite: xor;
|
|
||||||
mask-composite: exclude;
|
|
||||||
|
|
||||||
.emoji-button {
|
|
||||||
cursor: pointer;
|
|
||||||
flex-basis: 20%;
|
|
||||||
line-height: 1.5;
|
|
||||||
align-content: center;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: scale(1.25);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.popover-trigger {
|
|
||||||
padding: 10px;
|
|
||||||
margin: -10px;
|
|
||||||
|
|
||||||
@include unfocused-style {
|
|
||||||
.focus-marker {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include focused-style {
|
|
||||||
.focus-marker {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
|
||||||
import {
|
|
||||||
faReply,
|
|
||||||
faPlus,
|
|
||||||
faTimes
|
|
||||||
} from '@fortawesome/free-solid-svg-icons'
|
|
||||||
|
|
||||||
library.add(
|
|
||||||
faReply,
|
|
||||||
faPlus,
|
|
||||||
faTimes
|
|
||||||
)
|
|
||||||
|
|
||||||
const ReplyButton = {
|
|
||||||
name: 'ReplyButton',
|
|
||||||
props: ['status', 'replying'],
|
|
||||||
computed: {
|
|
||||||
loggedIn () {
|
|
||||||
return !!this.$store.state.users.currentUser
|
|
||||||
},
|
|
||||||
remoteInteractionLink () {
|
|
||||||
return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default ReplyButton
|
|
||||||
|
|
@ -1,96 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="ReplyButton">
|
|
||||||
<button
|
|
||||||
v-if="loggedIn"
|
|
||||||
class="button-unstyled interactive"
|
|
||||||
:class="{'-active': replying}"
|
|
||||||
:title="$t('tool_tip.reply')"
|
|
||||||
@click.prevent="$emit('toggle')"
|
|
||||||
>
|
|
||||||
<FALayers class="fa-old-padding-layer">
|
|
||||||
<FAIcon
|
|
||||||
class="fa-scale-110"
|
|
||||||
icon="reply"
|
|
||||||
/>
|
|
||||||
<FAIcon
|
|
||||||
v-if="!replying"
|
|
||||||
class="focus-marker"
|
|
||||||
transform="shrink-6 up-8 right-11"
|
|
||||||
icon="plus"
|
|
||||||
/>
|
|
||||||
<FAIcon
|
|
||||||
v-else
|
|
||||||
class="focus-marker"
|
|
||||||
transform="shrink-6 up-8 right-11"
|
|
||||||
icon="times"
|
|
||||||
/>
|
|
||||||
</FALayers>
|
|
||||||
</button>
|
|
||||||
<a
|
|
||||||
v-else
|
|
||||||
class="button-unstyled interactive"
|
|
||||||
target="_blank"
|
|
||||||
role="button"
|
|
||||||
:href="remoteInteractionLink"
|
|
||||||
:title="$t('tool_tip.reply')"
|
|
||||||
>
|
|
||||||
<FALayers class="fa-old-padding-layer">
|
|
||||||
<FAIcon
|
|
||||||
class="fa-scale-110"
|
|
||||||
icon="reply"
|
|
||||||
/>
|
|
||||||
<FAIcon
|
|
||||||
v-if="!replying"
|
|
||||||
class="focus-marker"
|
|
||||||
transform="shrink-6 up-8 right-16"
|
|
||||||
icon="plus"
|
|
||||||
/>
|
|
||||||
</FALayers>
|
|
||||||
</a>
|
|
||||||
<span
|
|
||||||
v-if="status.replies_count > 0"
|
|
||||||
class="action-counter"
|
|
||||||
>
|
|
||||||
{{ status.replies_count }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script src="./reply_button.js"></script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@import "../../mixins";
|
|
||||||
|
|
||||||
.ReplyButton {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
> :first-child {
|
|
||||||
padding: 10px;
|
|
||||||
margin: -10px -8px -10px -10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-counter {
|
|
||||||
pointer-events: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.interactive {
|
|
||||||
&:hover .svg-inline--fa,
|
|
||||||
&.-active .svg-inline--fa {
|
|
||||||
color: var(--cBlue);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include unfocused-style {
|
|
||||||
.focus-marker {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include focused-style {
|
|
||||||
.focus-marker {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
import ConfirmModal from '../confirm_modal/confirm_modal.vue'
|
|
||||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
|
||||||
import {
|
|
||||||
faRetweet,
|
|
||||||
faPlus,
|
|
||||||
faMinus,
|
|
||||||
faCheck
|
|
||||||
} from '@fortawesome/free-solid-svg-icons'
|
|
||||||
|
|
||||||
library.add(
|
|
||||||
faRetweet,
|
|
||||||
faPlus,
|
|
||||||
faMinus,
|
|
||||||
faCheck
|
|
||||||
)
|
|
||||||
|
|
||||||
const RetweetButton = {
|
|
||||||
props: ['status', 'loggedIn', 'visibility'],
|
|
||||||
components: {
|
|
||||||
ConfirmModal
|
|
||||||
},
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
animated: false,
|
|
||||||
showingConfirmDialog: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
retweet () {
|
|
||||||
if (!this.status.repeated && this.shouldConfirmRepeat) {
|
|
||||||
this.showConfirmDialog()
|
|
||||||
} else {
|
|
||||||
this.doRetweet()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
doRetweet () {
|
|
||||||
if (!this.status.repeated) {
|
|
||||||
this.$store.dispatch('retweet', { id: this.status.id })
|
|
||||||
} else {
|
|
||||||
this.$store.dispatch('unretweet', { id: this.status.id })
|
|
||||||
}
|
|
||||||
this.animated = true
|
|
||||||
setTimeout(() => {
|
|
||||||
this.animated = false
|
|
||||||
}, 500)
|
|
||||||
this.hideConfirmDialog()
|
|
||||||
},
|
|
||||||
showConfirmDialog () {
|
|
||||||
this.showingConfirmDialog = true
|
|
||||||
},
|
|
||||||
hideConfirmDialog () {
|
|
||||||
this.showingConfirmDialog = false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
mergedConfig () {
|
|
||||||
return this.$store.getters.mergedConfig
|
|
||||||
},
|
|
||||||
remoteInteractionLink () {
|
|
||||||
return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
|
|
||||||
},
|
|
||||||
shouldConfirmRepeat () {
|
|
||||||
return this.mergedConfig.modalOnRepeat
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default RetweetButton
|
|
||||||
|
|
@ -1,133 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="RetweetButton">
|
|
||||||
<button
|
|
||||||
v-if="visibility !== 'private' && visibility !== 'direct' && loggedIn"
|
|
||||||
class="button-unstyled interactive"
|
|
||||||
:class="status.repeated && '-repeated'"
|
|
||||||
:title="$t('tool_tip.repeat')"
|
|
||||||
@click.prevent="retweet()"
|
|
||||||
>
|
|
||||||
<FALayers class="fa-old-padding-layer">
|
|
||||||
<FAIcon
|
|
||||||
class="fa-scale-110"
|
|
||||||
icon="retweet"
|
|
||||||
:spin="animated"
|
|
||||||
/>
|
|
||||||
<FAIcon
|
|
||||||
v-if="status.repeated"
|
|
||||||
class="active-marker"
|
|
||||||
transform="shrink-6 up-9 right-12"
|
|
||||||
icon="check"
|
|
||||||
/>
|
|
||||||
<FAIcon
|
|
||||||
v-if="!status.repeated"
|
|
||||||
class="focus-marker"
|
|
||||||
transform="shrink-6 up-9 right-12"
|
|
||||||
icon="plus"
|
|
||||||
/>
|
|
||||||
<FAIcon
|
|
||||||
v-else
|
|
||||||
class="focus-marker"
|
|
||||||
transform="shrink-6 up-9 right-12"
|
|
||||||
icon="minus"
|
|
||||||
/>
|
|
||||||
</FALayers>
|
|
||||||
</button>
|
|
||||||
<span v-else-if="loggedIn">
|
|
||||||
<FAIcon
|
|
||||||
class="fa-scale-110 fa-old-padding"
|
|
||||||
icon="lock"
|
|
||||||
:title="$t('timeline.no_retweet_hint')"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
<a
|
|
||||||
v-else
|
|
||||||
class="button-unstyled interactive"
|
|
||||||
target="_blank"
|
|
||||||
role="button"
|
|
||||||
:title="$t('tool_tip.repeat')"
|
|
||||||
:href="remoteInteractionLink"
|
|
||||||
>
|
|
||||||
<FALayers class="fa-old-padding-layer">
|
|
||||||
<FAIcon
|
|
||||||
class="fa-scale-110"
|
|
||||||
icon="retweet"
|
|
||||||
/>
|
|
||||||
<FAIcon
|
|
||||||
class="focus-marker"
|
|
||||||
transform="shrink-6 up-9 right-12"
|
|
||||||
icon="plus"
|
|
||||||
/>
|
|
||||||
</FALayers>
|
|
||||||
</a>
|
|
||||||
<span
|
|
||||||
v-if="!mergedConfig.hidePostStats && status.repeat_num > 0"
|
|
||||||
class="no-event"
|
|
||||||
>
|
|
||||||
{{ status.repeat_num }}
|
|
||||||
</span>
|
|
||||||
<teleport to="#modal">
|
|
||||||
<confirm-modal
|
|
||||||
v-if="showingConfirmDialog"
|
|
||||||
:title="$t('status.repeat_confirm_title')"
|
|
||||||
:confirm-text="$t('status.repeat_confirm_accept_button')"
|
|
||||||
:cancel-text="$t('status.repeat_confirm_cancel_button')"
|
|
||||||
@accepted="doRetweet"
|
|
||||||
@cancelled="hideConfirmDialog"
|
|
||||||
>
|
|
||||||
{{ $t('status.repeat_confirm') }}
|
|
||||||
</confirm-modal>
|
|
||||||
</teleport>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script src="./retweet_button.js"></script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@import "../../mixins";
|
|
||||||
|
|
||||||
.RetweetButton {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
> :first-child {
|
|
||||||
padding: 10px;
|
|
||||||
margin: -10px -8px -10px -10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-counter {
|
|
||||||
pointer-events: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.interactive {
|
|
||||||
.svg-inline--fa {
|
|
||||||
animation-duration: 0.6s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover .svg-inline--fa,
|
|
||||||
&.-repeated .svg-inline--fa {
|
|
||||||
color: var(--cGreen);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include unfocused-style {
|
|
||||||
.focus-marker {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active-marker {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include focused-style {
|
|
||||||
.focus-marker {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active-marker {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,8 +1,3 @@
|
||||||
import ReplyButton from '../reply_button/reply_button.vue'
|
|
||||||
import FavoriteButton from '../favorite_button/favorite_button.vue'
|
|
||||||
import ReactButton from '../react_button/react_button.vue'
|
|
||||||
import RetweetButton from '../retweet_button/retweet_button.vue'
|
|
||||||
import ExtraButtons from '../extra_buttons/extra_buttons.vue'
|
|
||||||
import PostStatusForm from '../post_status_form/post_status_form.vue'
|
import PostStatusForm from '../post_status_form/post_status_form.vue'
|
||||||
import UserAvatar from '../user_avatar/user_avatar.vue'
|
import UserAvatar from '../user_avatar/user_avatar.vue'
|
||||||
import AvatarList from '../avatar_list/avatar_list.vue'
|
import AvatarList from '../avatar_list/avatar_list.vue'
|
||||||
|
|
@ -103,11 +98,6 @@ const controlledOrUncontrolledSet = (obj, name, val) => {
|
||||||
const Status = {
|
const Status = {
|
||||||
name: 'Status',
|
name: 'Status',
|
||||||
components: {
|
components: {
|
||||||
ReplyButton,
|
|
||||||
FavoriteButton,
|
|
||||||
ReactButton,
|
|
||||||
RetweetButton,
|
|
||||||
ExtraButtons,
|
|
||||||
PostStatusForm,
|
PostStatusForm,
|
||||||
UserAvatar,
|
UserAvatar,
|
||||||
AvatarList,
|
AvatarList,
|
||||||
|
|
|
||||||
|
|
@ -541,37 +541,6 @@
|
||||||
:replying="replying"
|
:replying="replying"
|
||||||
@toggleReplying="toggleReplying"
|
@toggleReplying="toggleReplying"
|
||||||
/>
|
/>
|
||||||
<div
|
|
||||||
v-if="!noHeading && !isPreview"
|
|
||||||
class="status-actions"
|
|
||||||
>
|
|
||||||
<reply-button
|
|
||||||
:replying="replying"
|
|
||||||
:status="status"
|
|
||||||
@toggle="toggleReplying"
|
|
||||||
/>
|
|
||||||
<retweet-button
|
|
||||||
:visibility="status.visibility"
|
|
||||||
:logged-in="loggedIn"
|
|
||||||
:status="status"
|
|
||||||
@click="$emit('interacted')"
|
|
||||||
/>
|
|
||||||
<favorite-button
|
|
||||||
:logged-in="loggedIn"
|
|
||||||
:status="status"
|
|
||||||
@click="$emit('interacted')"
|
|
||||||
/>
|
|
||||||
<ReactButton
|
|
||||||
v-if="loggedIn"
|
|
||||||
:status="status"
|
|
||||||
@click="$emit('interacted')"
|
|
||||||
/>
|
|
||||||
<extra-buttons
|
|
||||||
:status="status"
|
|
||||||
@onError="showError"
|
|
||||||
@onSuccess="clearError"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue