collapse fav/repeat notifications from muted users

This commit is contained in:
taehoon 2019-09-06 11:15:22 -04:00
parent dcef84363f
commit 8618857aa3
3 changed files with 128 additions and 93 deletions

View file

@ -9,7 +9,8 @@ const Notification = {
data () { data () {
return { return {
userExpanded: false, userExpanded: false,
betterShadow: this.$store.state.interface.browserSupport.cssFilter betterShadow: this.$store.state.interface.browserSupport.cssFilter,
unmuted: false
} }
}, },
props: [ 'notification' ], props: [ 'notification' ],
@ -23,11 +24,14 @@ const Notification = {
toggleUserExpanded () { toggleUserExpanded () {
this.userExpanded = !this.userExpanded this.userExpanded = !this.userExpanded
}, },
userProfileLink (user) { generateUserProfileLink (user) {
return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames) return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
}, },
getUser (notification) { getUser (notification) {
return this.$store.state.users.usersObject[notification.from_profile.id] return this.$store.state.users.usersObject[notification.from_profile.id]
},
toggleMute () {
this.unmuted = !this.unmuted
} }
}, },
computed: { computed: {
@ -47,6 +51,12 @@ const Notification = {
return this.userInStore return this.userInStore
} }
return this.notification.from_profile return this.notification.from_profile
},
userProfileLink () {
return this.generateUserProfileLink(this.notification.from_profile)
},
needMute () {
return this.notification.from_profile.muted
} }
} }
} }

View file

@ -4,6 +4,22 @@
:compact="true" :compact="true"
:statusoid="notification.status" :statusoid="notification.status"
/> />
<div v-else>
<div
v-if="needMute && !unmuted"
class="container muted"
>
<small>
<router-link :to="userProfileLink">
{{ notification.from_profile.screen_name }}
</router-link>
</small>
<a
href="#"
class="unmute"
@click.prevent="toggleMute"
><i class="button-icon icon-eye-off" /></a>
</div>
<div <div
v-else v-else
class="non-mention" class="non-mention"
@ -85,12 +101,17 @@
/> />
</router-link> </router-link>
</div> </div>
<a
v-if="needMute"
href="#"
@click.prevent="toggleMute"
><i class="button-icon icon-eye-off" /></a>
</span> </span>
<div <div
v-if="notification.type === 'follow'" v-if="notification.type === 'follow'"
class="follow-text" class="follow-text"
> >
<router-link :to="userProfileLink(notification.from_profile)"> <router-link :to="userProfileLink">
@{{ notification.from_profile.screen_name }} @{{ notification.from_profile.screen_name }}
</router-link> </router-link>
</div> </div>
@ -104,6 +125,7 @@
</template> </template>
</div> </div>
</div> </div>
</div>
</template> </template>
<script src="./notification.js"></script> <script src="./notification.js"></script>

View file

@ -33,7 +33,6 @@
.notification { .notification {
box-sizing: border-box; box-sizing: border-box;
display: flex;
border-bottom: 1px solid; border-bottom: 1px solid;
border-color: $fallback--border; border-color: $fallback--border;
border-color: var(--border, $fallback--border); border-color: var(--border, $fallback--border);
@ -47,6 +46,10 @@
} }
} }
.muted {
padding: .25em .6em;
}
.non-mention { .non-mention {
display: flex; display: flex;
flex: 1; flex: 1;