logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe
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:

Msrc/components/conversation/conversation.vue4++--
Msrc/components/notifications/notifications.js4++++
Msrc/components/notifications/notifications.scss62++++++++++++++++++++++++++++++++------------------------------
Msrc/components/notifications/notifications.vue34++++++++++++++++++----------------
Msrc/components/status/status.vue10+++++-----
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>