forked from AkkomaGang/akkoma-fe
add support for repeat with visibility
This requires backend changes to work properly. Currently Akkoma maps: * public and unlisted (and local?) to public * private to private
This commit is contained in:
parent
e28fa21cd3
commit
52eeb1f67f
4 changed files with 151 additions and 63 deletions
|
|
@ -1,12 +1,14 @@
|
|||
import Popover from '../popover/popover.vue'
|
||||
import ConfirmModal from '../confirm_modal/confirm_modal.vue'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { faRetweet } from '@fortawesome/free-solid-svg-icons'
|
||||
import { faRetweet, faTrash } from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(faRetweet)
|
||||
library.add(faRetweet, faTrash)
|
||||
|
||||
const RetweetButton = {
|
||||
props: ['status', 'loggedIn', 'visibility'],
|
||||
components: {
|
||||
Popover,
|
||||
ConfirmModal
|
||||
},
|
||||
data () {
|
||||
|
|
@ -16,16 +18,16 @@ const RetweetButton = {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
retweet () {
|
||||
retweet (visibility) {
|
||||
if (!this.status.repeated && this.shouldConfirmRepeat) {
|
||||
this.showConfirmDialog()
|
||||
} else {
|
||||
this.doRetweet()
|
||||
this.doRetweet(visibility)
|
||||
}
|
||||
},
|
||||
doRetweet () {
|
||||
doRetweet (visibility) {
|
||||
if (!this.status.repeated) {
|
||||
this.$store.dispatch('retweet', { id: this.status.id })
|
||||
this.$store.dispatch('retweet', { id: this.status.id, visibility: visibility })
|
||||
} else {
|
||||
this.$store.dispatch('unretweet', { id: this.status.id })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,76 @@
|
|||
<template>
|
||||
<div class="RetweetButton">
|
||||
<!-- TODO settings the offset like this feels like a hack -->
|
||||
<Popover
|
||||
class="RetweetButton"
|
||||
trigger="click"
|
||||
placement="bottom"
|
||||
:offset="{ y: 22 }"
|
||||
:bound-to="{ x: 'container' }"
|
||||
remove-padding
|
||||
>
|
||||
<template v-slot:content="{close}">
|
||||
<div class="dropdown-menu">
|
||||
<template v-if="status.repeated">
|
||||
<button
|
||||
v-if="status.repeated"
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
@click.prevent="retweet()"
|
||||
>
|
||||
<!-- TODO: i18n -->
|
||||
<FAIcon
|
||||
fixed-width
|
||||
icon="trash"
|
||||
/><span>Undo repeat</span>
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<!-- TODO: don't show button that would increase post visibility -->
|
||||
<button
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
@click.prevent="retweet('public')"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
icon="globe"
|
||||
/><span>{{ $t("general.scope_in_timeline.public") }}</span>
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
@click.prevent="retweet('unlisted')"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
icon="lock-open"
|
||||
/><span>{{ $t("general.scope_in_timeline.unlisted") }}</span>
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
@click.prevent="retweet('private')"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
icon="lock"
|
||||
/><span>{{ $t("general.scope_in_timeline.private") }}</span>
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
@click.prevent="retweet('local')"
|
||||
>
|
||||
<!-- TODO: "general.scope_in_timeline.local" feels too long for the popover -->
|
||||
<FAIcon
|
||||
fixed-width
|
||||
icon="users"
|
||||
/><span>Local</span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:trigger>
|
||||
<button
|
||||
v-if="(visibility !== 'private' || isOwn) && visibility !== 'direct' && loggedIn"
|
||||
class="button-unstyled interactive"
|
||||
class="button-unstyled popover-trigger"
|
||||
:class="status.repeated && '-repeated'"
|
||||
:title="$t('tool_tip.repeat')"
|
||||
@click.prevent="retweet()"
|
||||
>
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
|
|
@ -40,6 +105,7 @@
|
|||
{{ status.repeat_num }}
|
||||
</span>
|
||||
<teleport to="#modal">
|
||||
<!-- TODO does this work for all? -->
|
||||
<confirm-modal
|
||||
v-if="showingConfirmDialog"
|
||||
:title="$t('status.repeat_confirm_title')"
|
||||
|
|
@ -51,7 +117,8 @@
|
|||
{{ $t('status.repeat_confirm') }}
|
||||
</confirm-modal>
|
||||
</teleport>
|
||||
</div>
|
||||
</template>
|
||||
</Popover>
|
||||
</template>
|
||||
|
||||
<script src="./retweet_button.js" ></script>
|
||||
|
|
@ -72,7 +139,7 @@
|
|||
user-select: none;
|
||||
}
|
||||
|
||||
.interactive {
|
||||
.popover-trigger {
|
||||
.svg-inline--fa {
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
animation: unset;
|
||||
|
|
@ -80,6 +147,7 @@
|
|||
animation-duration: 0.6s;
|
||||
}
|
||||
|
||||
/* TODO: don't turn green on hover because it keeps being focused on mobile when the popover is open. Instead make it while(?) like in extra_buttons and only green once it's been repeated. */
|
||||
&:hover .svg-inline--fa,
|
||||
&.-repeated .svg-inline--fa {
|
||||
color: $fallback--cGreen;
|
||||
|
|
|
|||
|
|
@ -666,7 +666,7 @@ const statuses = {
|
|||
retweet ({ rootState, commit }, status) {
|
||||
// Optimistic retweeting...
|
||||
commit('setRetweeted', { status, value: true })
|
||||
rootState.api.backendInteractor.retweet({ id: status.id })
|
||||
rootState.api.backendInteractor.retweet({ id: status.id, visibility: status.visibility })
|
||||
.then(status => commit('setRetweetedConfirm', { status: status.retweeted_status, user: rootState.users.currentUser }))
|
||||
},
|
||||
unretweet ({ rootState, commit }, status) {
|
||||
|
|
|
|||
|
|
@ -125,22 +125,32 @@ let fetch = (url, options) => {
|
|||
}
|
||||
|
||||
const promisedRequest = ({ method, url, params, payload, credentials, headers = {} }) => {
|
||||
const payloadIsFormData = payload instanceof FormData
|
||||
|
||||
const options = {
|
||||
method,
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
...headers
|
||||
}
|
||||
}
|
||||
if (!payloadIsFormData) {
|
||||
// only set content type if payload is not form data
|
||||
// if it is unset the content type will be automatically set to multipart/form-data
|
||||
options.headers['Content-Type'] = 'application/json'
|
||||
}
|
||||
if (params) {
|
||||
url += '?' + Object.entries(params)
|
||||
.map(([key, value]) => encodeURIComponent(key) + '=' + encodeURIComponent(value))
|
||||
.join('&')
|
||||
}
|
||||
if (payload) {
|
||||
if (payloadIsFormData) {
|
||||
options.body = payload
|
||||
} else {
|
||||
options.body = JSON.stringify(payload)
|
||||
}
|
||||
}
|
||||
if (credentials) {
|
||||
options.headers = {
|
||||
...options.headers,
|
||||
|
|
@ -822,8 +832,16 @@ const unfavorite = ({ id, credentials }) => {
|
|||
.then((data) => parseStatus(data))
|
||||
}
|
||||
|
||||
const retweet = ({ id, credentials }) => {
|
||||
return promisedRequest({ url: MASTODON_RETWEET_URL(id), method: 'POST', credentials })
|
||||
const retweet = ({ id, credentials, visibility }) => {
|
||||
const form = new FormData()
|
||||
if (visibility) form.append('visibility', visibility)
|
||||
|
||||
return promisedRequest({
|
||||
url: MASTODON_RETWEET_URL(id),
|
||||
payload: form,
|
||||
method: 'POST',
|
||||
credentials
|
||||
})
|
||||
.then((data) => parseStatus(data))
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue