commit: 0e1ab69c33f155865adc27d940a2542ffdcec30a
parent: 9778d4cfc04450a4fd9f1330c35df8487c8993bf
Author: Roger Braun <roger@rogerbraun.net>
Date: Wed, 22 Feb 2017 23:37:12 +0100
Show actual status in notifications when mentioned.
Diffstat:
5 files changed, 61 insertions(+), 53 deletions(-)
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
@@ -1,5 +1,5 @@
<template>
- <div class="timeline panel panel-default base00-background">
+ <div class="timeline panel panel-default base00-background conversation">
<div class="panel-heading base01-background base04">
Conversation
<div v-if="collapsable">
@@ -8,7 +8,7 @@
</div>
<div class="panel-body">
<div class="timeline">
- <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status":expandable='false'></status>
+ <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status" :expandable='false'></status>
</div>
</div>
</div>
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
@@ -1,4 +1,5 @@
import { sortBy, take, filter } from 'lodash'
+import Status from '../status/status.vue'
const Notifications = {
data () {
@@ -6,6 +7,9 @@ const Notifications = {
visibleNotificationCount: 10
}
},
+ components: {
+ Status
+ },
computed: {
notifications () {
return this.$store.state.statuses.notifications
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
@@ -1,42 +1,44 @@
@import '../../_variables.scss';
.notification {
- padding: 0.4em 0 0 0.7em;
- display: flex;
border-bottom: 1px solid silver;
- .text {
- min-width: 0px;
- word-wrap: break-word;
- line-height:18px;
+ .notification-base {
+ padding: 0.4em 0 0 0.7em;
+ display: flex;
+ .avatar {
+ padding-top: 0.3em;
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ }
- .icon-retweet {
- color: $green;
- }
+ .text {
+ min-width: 0px;
+ word-wrap: break-word;
+ line-height:18px;
- .icon-reply {
- color: $blue;
- }
+ .icon-retweet {
+ color: $green;
+ }
- h1 {
- margin: 0 0 0.3em;
- padding: 0;
- font-size: 1em;
- line-height:20px;
- }
+ .icon-reply {
+ color: $blue;
+ }
- padding: 0.3em 0.8em 0.5em;
- p {
- margin: 0;
- margin-top: 0;
- margin-bottom: 0.3em;
- }
- }
+ h1 {
+ margin: 0 0 0.3em;
+ padding: 0;
+ font-size: 1em;
+ line-height:20px;
+ }
- .avatar {
- padding-top: 0.3em;
- width: 32px;
- height: 32px;
- border-radius: 50%;
+ padding: 0.3em 0.8em 0.5em;
+ p {
+ margin: 0;
+ margin-top: 0;
+ margin-bottom: 0.3em;
+ }
+ }
}
&:last-child {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
@@ -4,24 +4,26 @@
<div class="panel-heading base01-background base04">Notifications ({{unseenCount}}) <button @click.prevent="markAsSeen">Read!</button></div>
<div class="panel-body">
<div v-for="notification in visibleNotifications" class="notification" :class='{"base01-background": notification.seen}'>
- <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 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</h1>
- <p>{{ notification.status.text }}</p>
- </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</h1>
- <p>{{ notification.status.text }}</p>
- </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>
+ <div class="notification-base">
+ <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 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</h1>
+ <p>{{ notification.status.text }}</p>
+ </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</h1>
+ <p>{{ notification.status.text }}</p>
+ </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>
+ </div>
</div>
</div>
+ <status v-if="notification.type === 'mention'" :statusoid="notification.action" :expandable="false"></status>
</div>
</div>
</div>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
@@ -1,5 +1,5 @@
<template>
- <div class="status-el base00-background" v-if="!status.deleted" v-bind:class="{ 'expanded-status': !expandable }">
+ <div class="status-el base00-background" v-if="!status.deleted">
<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>
@@ -121,10 +121,6 @@
}
}
- .expanded-status {
- border-left: 4px solid rgba(255, 48, 16, 0.65);
- }
-
.status-actions {
padding-top: 5px;
}
@@ -160,4 +156,8 @@
border-radius: 1em;
margin-bottom: 1em;
}
+
+ .conversation .status-el {
+ border-left: 4px solid rgba(255, 48, 16, 0.65);
+ }
</style>
