commit: 9723d7285df1ef74f572c07016b11dd1c692ad33
parent: bf7190bfca5221d0f81b34f5b7238ca4e9d1380c
Author: lambadalambda <gitgud@rogerbraun.net>
Date: Wed, 31 May 2017 08:16:43 -0400
Merge branch 'feature/notification-improvements' into 'develop'
Feature/notification improvements
See merge request !79
Diffstat:
5 files changed, 48 insertions(+), 12 deletions(-)
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
@@ -1,3 +1,5 @@
+import Status from '../status/status.vue'
+
import { sortBy, take, filter } from 'lodash'
const Notifications = {
@@ -23,6 +25,9 @@ const Notifications = {
return this.unseenNotifications.length
}
},
+ components: {
+ Status
+ },
watch: {
unseenCount (count) {
if (count > 0) {
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
@@ -45,19 +45,23 @@
word-wrap: break-word;
line-height:18px;
- .icon-retweet {
+ .icon-retweet.lit {
color: $green;
}
- .icon-reply {
+ .icon-reply.lit {
color: $blue;
}
h1 {
+ word-break: break-all;
margin: 0 0 0.3em;
padding: 0;
font-size: 1em;
line-height:20px;
+ small {
+ font-weight: lighter;
+ }
}
padding: 0.3em 0.8em 0.5em;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
@@ -11,19 +11,30 @@
<a :href="notification.action.user.statusnet_profile_url">
<img class='avatar' :src="notification.action.user.profile_image_url_original">
</a>
- <div class='text'>
- <timeago :since="notification.action.created_at" :auto-update="240"></timeago>
+ <div class='text' style="width: 100%;">
<div v-if="notification.type === 'favorite'">
- <h1>{{ notification.action.user.name }}<br><i class="fa icon-star"></i> favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</router-link></h1>
- <p>{{ notification.status.text }}</p>
+ <h1>
+ {{ notification.action.user.name }}
+ <i class="fa icon-star"></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 v-html="notification.status.statusnet_html"></div>
</div>
<div v-if="notification.type === 'repeat'">
- <h1>{{ notification.action.user.name }}<br><i class="fa icon-retweet"></i> repeated your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</router-link></h1>
- <p>{{ notification.status.text }}</p>
+ <h1>
+ {{ notification.action.user.name }}
+ <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 v-html="notification.status.statusnet_html"></div>
</div>
<div v-if="notification.type === 'mention'">
- <h1>{{ notification.action.user.name }}<br><i class="fa icon-reply"></i> <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">mentioned</router-link> you</h1>
- <p>{{ notification.status.text }}</p>
+ <h1>
+ {{ notification.action.user.name }}
+ <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>
</div>
diff --git a/src/components/status/status.js b/src/components/status/status.js
@@ -12,7 +12,8 @@ const Status = {
'expandable',
'inConversation',
'focused',
- 'highlight'
+ 'highlight',
+ 'compact'
],
data: () => ({
replying: false,
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
@@ -1,5 +1,20 @@
<template>
- <div class="status-el base00-background base03-border" v-if="!status.deleted" v-bind:class="[{ 'base01-background': isFocused }, { 'status-conversation': inConversation }]" >
+ <div class="status-el base00-background" v-if="compact">
+ <div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div>
+ <div v-if="loggedIn">
+ <div class='status-actions'>
+ <div>
+ <a href="#" v-on:click.prevent="toggleReplying">
+ <i class="fa icon-reply" :class="{'icon-reply-active': replying}"></i>
+ </a>
+ </div>
+ <retweet-button :status=status></retweet-button>
+ <favorite-button :status=status></favorite-button>
+ </div>
+ </div>
+ <post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying" v-if="replying"/>
+ </div>
+ <div class="status-el base00-background base03-border" v-else-if="!status.deleted" v-bind:class="[{ 'base01-background': isFocused }, { 'status-conversation': inConversation }]" >
<template v-if="muted">
<div class="media status container muted">
<small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
