commit: 74931dece7d68167e5134e77e738c39f62a11146
parent: 7c0f3ea666a866a3bb1f2e8da161ae69901e519b
Author: Roger Braun <roger@rogerbraun.net>
Date: Thu, 23 Feb 2017 00:26:37 +0100
Revert "Show actual status in notifications when mentioned."
This reverts commit 0e1ab69c33f155865adc27d940a2542ffdcec30a.
Diffstat:
5 files changed, 53 insertions(+), 61 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 conversation">
+ <div class="timeline panel panel-default base00-background">
<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,5 +1,4 @@
import { sortBy, take, filter } from 'lodash'
-import Status from '../status/status.vue'
const Notifications = {
data () {
@@ -7,9 +6,6 @@ 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,44 +1,42 @@
@import '../../_variables.scss';
.notification {
+ padding: 0.4em 0 0 0.7em;
+ display: flex;
border-bottom: 1px solid silver;
- .notification-base {
- padding: 0.4em 0 0 0.7em;
- display: flex;
- .avatar {
- padding-top: 0.3em;
- width: 32px;
- height: 32px;
- border-radius: 50%;
- }
+ .text {
+ min-width: 0px;
+ word-wrap: break-word;
+ line-height:18px;
- .text {
- min-width: 0px;
- word-wrap: break-word;
- line-height:18px;
+ .icon-retweet {
+ color: $green;
+ }
- .icon-retweet {
- color: $green;
- }
+ .icon-reply {
+ color: $blue;
+ }
- .icon-reply {
- color: $blue;
- }
+ h1 {
+ margin: 0 0 0.3em;
+ padding: 0;
+ font-size: 1em;
+ line-height:20px;
+ }
- h1 {
- margin: 0 0 0.3em;
- padding: 0;
- font-size: 1em;
- line-height:20px;
- }
+ padding: 0.3em 0.8em 0.5em;
+ p {
+ margin: 0;
+ margin-top: 0;
+ margin-bottom: 0.3em;
+ }
+ }
- padding: 0.3em 0.8em 0.5em;
- p {
- margin: 0;
- margin-top: 0;
- margin-bottom: 0.3em;
- }
- }
+ .avatar {
+ padding-top: 0.3em;
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
}
&:last-child {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
@@ -4,26 +4,24 @@
<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}'>
- <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>
+ <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>
</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">
+ <div class="status-el base00-background" v-if="!status.deleted" v-bind:class="{ 'expanded-status': !expandable }">
<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,6 +121,10 @@
}
}
+ .expanded-status {
+ border-left: 4px solid rgba(255, 48, 16, 0.65);
+ }
+
.status-actions {
padding-top: 5px;
}
@@ -156,8 +160,4 @@
border-radius: 1em;
margin-bottom: 1em;
}
-
- .conversation .status-el {
- border-left: 4px solid rgba(255, 48, 16, 0.65);
- }
</style>
