add icon to allow expand collapsed (status-related) notifications
This commit is contained in:
parent
bcb24938aa
commit
efdcfedfbe
3 changed files with 33 additions and 8 deletions
|
@ -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)
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue