add icon to allow expand collapsed (status-related) notifications

This commit is contained in:
Henry Jameson 2022-12-19 22:20:15 +02:00
parent bcb24938aa
commit efdcfedfbe
3 changed files with 33 additions and 8 deletions

View file

@ -20,7 +20,9 @@ import {
faUserPlus,
faEyeSlash,
faUser,
faSuitcaseRolling
faSuitcaseRolling,
faExpandAlt,
faCompressAlt
} from '@fortawesome/free-solid-svg-icons'
library.add(
@ -31,13 +33,15 @@ library.add(
faUserPlus,
faUser,
faEyeSlash,
faSuitcaseRolling
faSuitcaseRolling,
faExpandAlt,
faCompressAlt
)
const Notification = {
data () {
return {
userExpanded: false,
statusExpanded: false,
betterShadow: this.$store.state.interface.browserSupport.cssFilter,
unmuted: false
}
@ -55,8 +59,9 @@ const Notification = {
UserLink
},
methods: {
toggleUserExpanded () {
this.userExpanded = !this.userExpanded
toggleStatusExpanded () {
console.log('as')
this.statusExpanded = !this.statusExpanded
},
generateUserProfileLink (user) {
return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)

View file

@ -144,13 +144,23 @@
<router-link
v-if="notification.status"
:to="{ name: 'conversation', params: { id: notification.status.id } }"
class="faint-link"
class="timeago-link faint-link"
>
<Timeago
:time="notification.created_at"
:auto-update="240"
/>
</router-link>
<button
class="button-unstyled expand-icon"
@click.prevent="toggleStatusExpanded"
>
<FAIcon
class="fa-scale-110"
fixed-width
:icon="statusExpanded ? 'compress-alt' : 'expand-alt'"
/>
</button>
</div>
<div
v-else
@ -222,8 +232,8 @@
/>
<template v-else>
<StatusContent
class="faint"
:compact="true"
:class="{ faint: !statusExpanded }"
:compact="!statusExpanded"
:status="notification.action"
/>
</template>

View file

@ -112,6 +112,16 @@
min-width: 3em;
text-align: right;
}
.timeago-link {
margin-right: 0.2em;
}
.expand-icon {
.svg-inline--fa {
margin-left: 0.25em;
}
}
}
.emoji-reaction-emoji {