small fixes
This commit is contained in:
shpuld
parent
936ca1a38c
commit
f4f9b3fa26
9 changed files with 642 additions and 445 deletions
|
|
@ -1,12 +1,14 @@
|
|||
import Status from '../status/status.vue'
|
||||
import StillImage from '../still-image/still-image.vue'
|
||||
import UserCardContent from '../user_card_content/user_card_content.vue'
|
||||
|
||||
import { sortBy, take, filter } from 'lodash'
|
||||
|
||||
const Notifications = {
|
||||
data () {
|
||||
return {
|
||||
visibleNotificationCount: 10
|
||||
visibleNotificationCount: 10,
|
||||
userExpanded: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -24,15 +26,10 @@ const Notifications = {
|
|||
},
|
||||
unseenCount () {
|
||||
return this.unseenNotifications.length
|
||||
},
|
||||
hiderStyle () {
|
||||
return {
|
||||
background: `linear-gradient(to bottom, rgba(0, 0, 0, 0), ${this.$store.state.config.colors['base00']} 80%)`
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Status, StillImage
|
||||
Status, StillImage, UserCardContent
|
||||
},
|
||||
watch: {
|
||||
unseenCount (count) {
|
||||
|
|
@ -46,6 +43,9 @@ const Notifications = {
|
|||
methods: {
|
||||
markAsSeen () {
|
||||
this.$store.commit('markNotificationsAsSeen', this.visibleNotifications)
|
||||
},
|
||||
toggleUserExpanded () {
|
||||
this.userExpanded = !this.userExpanded
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,22 +30,52 @@
|
|||
}
|
||||
|
||||
.notification {
|
||||
// Will have to use pixels here to ensure consistent distance with
|
||||
// pad alone and pad + border, browsers bad at rounding this with em,
|
||||
// they love to give a 1 pixel ghost offset with 0.7em vs 0.3em + 0.4em,
|
||||
// which does not happen with 10px vs 4px + 6px.
|
||||
padding: 0.4em 0 0 10px;
|
||||
padding-left: 4px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
border-bottom: 1px solid;
|
||||
border-bottom-color: inherit;
|
||||
|
||||
.non-mention {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-wrap: nowrap;
|
||||
padding: 0.6em;
|
||||
.status-el {
|
||||
padding: 0;
|
||||
.status-content.media-body {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
.status-el {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.notification-right {
|
||||
flex: 1;
|
||||
margin-left: 0.8em;
|
||||
}
|
||||
|
||||
.notification-details {
|
||||
min-width: 0px;
|
||||
word-wrap: break-word;
|
||||
line-height:18px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
padding: 0.5em;
|
||||
flex: 1;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.username {
|
||||
font-weight: bolder;
|
||||
}
|
||||
.timeago {
|
||||
float: right;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.icon-retweet.lit {
|
||||
color: $green;
|
||||
|
|
@ -79,7 +109,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
padding: 0.3em 0.8em 0.5em;
|
||||
p {
|
||||
margin: 0;
|
||||
margin-top: 0;
|
||||
|
|
@ -87,29 +116,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-top: 0.3em;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
line-height: 0;
|
||||
|
||||
&.animated::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover .animated.avatar {
|
||||
canvas {
|
||||
display: none;
|
||||
}
|
||||
img {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
border-radius: 0 0 10px 10px;
|
||||
|
|
@ -135,6 +141,35 @@
|
|||
|
||||
.unseen {
|
||||
border-left: 4px solid rgba(255, 16, 8, 0.75);
|
||||
padding-left: 6px;
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.notification {
|
||||
.avatar-compact {
|
||||
margin-top: 0.3em;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
line-height: 0;
|
||||
|
||||
&.animated::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&:hover .animated.avatar {
|
||||
canvas {
|
||||
display: none;
|
||||
}
|
||||
img {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-usercard {
|
||||
margin-left: 0.8em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,46 +8,32 @@
|
|||
</div>
|
||||
<div class="panel-body base03-border">
|
||||
<div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'>
|
||||
<div>
|
||||
<a :href="notification.action.user.statusnet_profile_url" target="_blank">
|
||||
<StillImage class='avatar' :src="notification.action.user.profile_image_url_original"/>
|
||||
<status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status>
|
||||
<div class="non-mention" v-else>
|
||||
<a :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
|
||||
<StillImage class='avatar-compact' :src="notification.action.user.profile_image_url_original"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class='text' style="width: 100%;">
|
||||
<div v-if="notification.type === 'favorite'">
|
||||
<h1>
|
||||
<span :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
|
||||
<i class="fa icon-star lit"></i>
|
||||
<small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
|
||||
</h1>
|
||||
<div class="notification-gradient" :style="hiderStyle"></div>
|
||||
<div class="notification-content" v-html="notification.status.statusnet_html"></div>
|
||||
</div>
|
||||
<div v-if="notification.type === 'repeat'">
|
||||
<h1>
|
||||
<span :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
|
||||
<i class="fa icon-retweet lit"></i>
|
||||
<small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
|
||||
</h1>
|
||||
<div class="notification-gradient" :style="hiderStyle"></div>
|
||||
<div class="notification-content" v-html="notification.status.statusnet_html"></div>
|
||||
</div>
|
||||
<div v-if="notification.type === 'mention'">
|
||||
<h1>
|
||||
<span :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
|
||||
<i class="fa icon-reply lit"></i>
|
||||
<small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
|
||||
</h1>
|
||||
<status :compact="true" :statusoid="notification.status"></status>
|
||||
</div>
|
||||
<div v-if="notification.type === 'follow'">
|
||||
<h1>
|
||||
<span :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
|
||||
<i class="fa icon-user-plus lit"></i>
|
||||
</h1>
|
||||
<div>
|
||||
<router-link :to="{ name: 'user-profile', params: { id: notification.action.user.id } }">@{{ notification.action.user.screen_name }}</router-link> {{$t('notifications.followed_you')}}
|
||||
<div class='notification-right'>
|
||||
<div class="base03-border usercard" v-if="userExpanded">
|
||||
<user-card-content :user="notification.action.user" :switcher="false"></user-card-content>
|
||||
</div>
|
||||
<span class="notification-details">
|
||||
<span class="username" :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
|
||||
<span v-if="notification.type === 'favorite'">
|
||||
<i class="fa icon-star lit"></i>
|
||||
<small>{{$t('notifications.favorited_you')}}</small>
|
||||
</span>
|
||||
<span v-if="notification.type === 'repeat'">
|
||||
<i class="fa icon-retweet lit"></i>
|
||||
<small>{{$t('notifications.repeated_you')}}</small>
|
||||
</span>
|
||||
<span v-if="notification.type === 'follow'">
|
||||
<i class="fa icon-user-plus lit"></i>
|
||||
<small>{{$t('notifications.followed_you')}}</small>
|
||||
</span>
|
||||
<small class="timeago"><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
|
||||
</span>
|
||||
<status class="base04" :compact="true" :statusoid="notification.status" :noHeading="true"></status>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue