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

some basic expiration modal. "don't as again" doesn't work yet

Browse source
This commit is contained in:
Henry Jameson 2025-06-12 20:04:39 +03:00
commit b9161ef697
17 changed files with 117 additions and 124 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/components/account_actions/account_actions.js
View file

@ -3,6 +3,7 @@ import ProgressButton from '../progress_button/progress_button.vue'
import Popover from '../popover/popover.vue'
import UserListMenu from 'src/components/user_list_menu/user_list_menu.vue'
import ConfirmModal from '../confirm_modal/confirm_modal.vue'
import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faEllipsisV
@ -27,15 +28,10 @@ const AccountActions = {
ProgressButton,
Popover,
UserListMenu,
ConfirmModal
ConfirmModal,
UserTimedFilterModal
},
methods: {
showConfirmBlock () {
this.showingConfirmBlock = true
},
hideConfirmBlock () {
this.showingConfirmBlock = false
},
showConfirmRemoveUserFromFollowers () {
this.showingConfirmRemoveFollower = true
},
@ -49,10 +45,14 @@ const AccountActions = {
this.$store.dispatch('hideReblogs', this.user.id)
},
blockUser () {
if (!this.shouldConfirmBlock) {
this.doBlockUser()
if (this.$refs.timedBlockDialog) {
this.$refs.timedBlockDialog.optionallyPrompt()
} else {
this.showConfirmBlock()
if (!this.shouldConfirmBlock) {
this.doBlockUser()
} else {
this.showingConfirmBlock = true
}
}
},
doBlockUser () {
@ -91,6 +91,7 @@ const AccountActions = {
return this.$store.getters.mergedConfig.modalOnRemoveUserFromFollowers
},
...mapState({
blockExpirationSupported: state => state.instance.blockExpiration,
pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
})
}

9
src/components/account_actions/account_actions.vue
View file

@ -96,7 +96,8 @@
</Popover>
<teleport to="#modal">
<confirm-modal
v-if="showingConfirmBlock"
v-if="showingConfirmBlock && !blockExpirationSupported"
ref="blockDialog"
:title="$t('user_card.block_confirm_title')"
:confirm-text="$t('user_card.block_confirm_accept_button')"
:cancel-text="$t('user_card.block_confirm_cancel_button')"
@ -137,6 +138,12 @@
</template>
</i18n-t>
</confirm-modal>
<UserTimedFilterModal
v-if="blockExpirationSupported"
:is-mute="false"
:user="user"
ref="timedBlockDialog"
/>
</teleport>
</div>
</template>

33
src/components/confirm_modal/mute_confirm.js
View file

@ -1,4 +1,3 @@
import { unitToSeconds } from 'src/services/date_utils/date_utils.js'
import { mapGetters } from 'vuex'
import ConfirmModal from './confirm_modal.vue'
@ -8,21 +7,13 @@ export default {
props: ['type', 'user', 'status'],
emits: ['hide', 'show', 'muted'],
data: () => ({
showing: false,
muteExpiryAmount: 2,
muteExpiryUnit: 'hours'
showing: false
}),
components: {
ConfirmModal,
Select
},
computed: {
muteExpiryValue () {
unitToSeconds(this.muteExpiryUnit, this.muteExpiryAmount)
},
muteExpiryUnits () {
return ['minutes', 'hours', 'days']
},
domain () {
return this.user.fqn.split('@')[1]
},
@ -31,13 +22,8 @@ export default {
return 'status.mute_domain_confirm'
} else if (this.type === 'conversation') {
return 'status.mute_conversation_confirm'
} else {
return 'user_card.mute_confirm'
}
},
userIsMuted () {
return this.$store.getters.relationship(this.user.id).muting
},
conversationIsMuted () {
return this.status.conversation_muted
},
@ -49,12 +35,9 @@ export default {
case 'domain': {
return this.mergedConfig.modalOnMuteDomain
}
case 'conversation': {
default: { // conversation
return this.mergedConfig.modalOnMuteConversation
}
default: {
return this.mergedConfig.modalOnMute
}
}
},
...mapGetters(['mergedConfig'])
@ -79,7 +62,7 @@ export default {
switch (this.type) {
case 'domain': {
if (!this.domainIsMuted) {
this.$store.dispatch('muteDomain', { id: this.domain, expiresIn: this.muteExpiryValue })
this.$store.dispatch('muteDomain', { id: this.domain })
} else {
this.$store.dispatch('unmuteDomain', { id: this.domain })
}
@ -87,20 +70,12 @@ export default {
}
case 'conversation': {
if (!this.conversationIsMuted) {
this.$store.dispatch('muteConversation', { id: this.status.id, expiresIn: this.muteExpiryValue })
this.$store.dispatch('muteConversation', { id: this.status.id })
} else {
this.$store.dispatch('unmuteConversation', { id: this.status.id })
}
break
}
default: {
if (!this.userIsMuted) {
this.$store.dispatch('muteUser', { id: this.user.id, expiresIn: this.muteExpiryValue })
} else {
this.$store.dispatch('unmuteUser', { id: this.user.id })
}
break
}
}
this.$emit('muted')
this.hide()

30
src/components/confirm_modal/mute_confirm.vue
View file

@ -18,36 +18,6 @@
<span v-text="user.screen_name_ui" />
</template>
</i18n-t>
<div
v-if="type !== 'domain'"
class="mute-expiry"
>
<p>
<label>
{{ $t('user_card.mute_duration_prompt') }}
</label>
<input
v-model="muteExpiryAmount"
type="number"
class="input expiry-amount hide-number-spinner"
:min="0"
>
{{ ' ' }}
<Select
v-model="muteExpiryUnit"
unstyled="true"
class="expiry-unit"
>
<option
v-for="unit in muteExpiryUnits"
:key="unit"
:value="unit"
>
{{ $t(`time.unit.${unit}_short`, ['']) }}
</option>
</Select>
</p>
</div>
</confirm-modal>
</template>

2
src/components/settings_modal/tabs/filtering_tab.js
View file

@ -107,7 +107,7 @@ const FilteringTab = {
...mapActions(useServerSideStorageStore, ['setPreference', 'unsetPreference', 'pushServerSideStorage']),
getDatetimeLocal (timestamp) {
const date = new Date(timestamp)
let fmt = new Intl.NumberFormat("en-US", {minimumIntegerDigits: 2})
const fmt = new Intl.NumberFormat("en-US", {minimumIntegerDigits: 2})
const datetime = [
date.getFullYear(),
'-',

4
src/components/status_action_buttons/action_button_container.js
View file

@ -1,6 +1,7 @@
import ActionButton from './action_button.vue'
import Popover from 'src/components/popover/popover.vue'
import MuteConfirm from 'src/components/confirm_modal/mute_confirm.vue'
import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
@ -19,7 +20,8 @@ export default {
components: {
ActionButton,
Popover,
MuteConfirm
MuteConfirm,
UserTimedFilterModal
},
props: ['button', 'status'],
emits: ['interacted'],

7
src/components/status_action_buttons/action_button_container.vue
View file

@ -94,11 +94,10 @@
:status="status"
:user="user"
/>
<MuteConfirm
ref="confirmUser"
type="user"
:status="status"
<UserTimedFilterModal
:is-mute="true"
:user="user"
ref="confirmUser"
/>
</teleport>
</div>

32
src/components/user_card/user_card.js
View file

@ -8,7 +8,8 @@ import UserNote from '../user_note/user_note.vue'
import Select from '../select/select.vue'
import UserLink from '../user_link/user_link.vue'
import RichContent from 'src/components/rich_content/rich_content.jsx'
import MuteConfirm from '../confirm_modal/mute_confirm.vue'
import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
import { mapGetters } from 'vuex'
import { usePostStatusStore } from 'src/stores/post_status'
@ -48,6 +49,19 @@ export default {
'onClose',
'hasNoteEditor'
],
components: {
UserAvatar,
RemoteFollow,
ModerationTools,
AccountActions,
ProgressButton,
FollowButton,
Select,
RichContent,
UserLink,
UserNote,
UserTimedFilterModal
},
data () {
return {
followRequestInProgress: false,
@ -63,6 +77,7 @@ export default {
return this.$store.getters.findUser(this.userId)
},
relationship () {
console.log(this.$store.getters.relationship(this.userId))
return this.$store.getters.relationship(this.userId)
},
classes () {
@ -144,22 +159,9 @@ export default {
},
...mapGetters(['mergedConfig'])
},
components: {
UserAvatar,
RemoteFollow,
ModerationTools,
AccountActions,
ProgressButton,
FollowButton,
Select,
RichContent,
UserLink,
UserNote,
MuteConfirm
},
methods: {
muteUser () {
this.$refs.confirmation.optionallyPrompt()
this.$refs.timedMuteDialog.optionallyPrompt()
},
unmuteUser () {
this.$store.dispatch('unmuteUser', this.user.id)

5
src/components/user_card/user_card.scss
View file

@ -8,6 +8,11 @@
--_still-image-label-visibility: hidden;
}
.btn-mute, .btn-mention {
display: block;
width: 100%;
}
.panel-heading {
padding: 0.5em 0;
text-align: center;

12
src/components/user_card/user_card.vue
View file

@ -232,7 +232,7 @@
<div>
<button
v-if="relationship.muting"
class="btn button-default btn-block toggled"
class="btn button-default btn-mute toggled"
:disabled="user.deactivated"
@click="unmuteUser"
>
@ -240,7 +240,7 @@
</button>
<button
v-else
class="btn button-default btn-block"
class="btn button-default btn-mute"
:disabled="user.deactivated"
@click="muteUser"
>
@ -249,7 +249,7 @@
</div>
<div>
<button
class="btn button-default btn-block"
class="btn button-default btn-mention"
:disabled="user.deactivated"
@click="mentionUser"
>
@ -314,10 +314,10 @@
/>
</div>
<teleport to="#modal">
<MuteConfirm
ref="confirmation"
type="user"
<UserTimedFilterModal
:user="user"
:is-mute="true"
ref="timedMuteDialog"
/>
</teleport>
</div>