From c214197cee192d9ae511d145d8e28cef8ae9a0d1 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Mon, 9 Apr 2018 20:44:37 +0300
Subject: [PATCH] Separate notification into its own component, fix follow
notification type
---
src/components/notification/notification.js | 24 +++++++++++++
src/components/notification/notification.vue | 35 +++++++++++++++++++
src/components/notifications/notifications.js | 12 ++-----
.../notifications/notifications.scss | 12 +++++--
.../notifications/notifications.vue | 29 +--------------
5 files changed, 73 insertions(+), 39 deletions(-)
create mode 100644 src/components/notification/notification.js
create mode 100644 src/components/notification/notification.vue
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
new file mode 100644
index 00000000..3a274374
--- /dev/null
+++ b/src/components/notification/notification.js
@@ -0,0 +1,24 @@
+import Status from '../status/status.vue'
+import StillImage from '../still-image/still-image.vue'
+import UserCardContent from '../user_card_content/user_card_content.vue'
+
+const Notification = {
+ data () {
+ return {
+ userExpanded: false
+ }
+ },
+ props: [
+ 'notification'
+ ],
+ components: {
+ Status, StillImage, UserCardContent
+ },
+ methods: {
+ toggleUserExpanded () {
+ this.userExpanded = !this.userExpanded
+ }
+ }
+}
+
+export default Notification
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
new file mode 100644
index 00000000..74563ff9
--- /dev/null
+++ b/src/components/notification/notification.vue
@@ -0,0 +1,35 @@
+<template>
+ <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 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>
+ <div class="follow-text" v-if="notification.type === 'follow'">
+ <router-link :to="{ name: 'user-profile', params: { id: notification.action.user.id } }">@{{notification.action.user.screen_name}}</router-link>
+ </div>
+ <status v-else class="base04" :compact="true" :statusoid="notification.status" :noHeading="true"></status>
+ </div>
+ </div>
+</template>
+
+<script src="./notification.js"></script>
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 19f767ab..f8314bfc 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,14 +1,11 @@
-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 Notification from '../notification/notification.vue'
import { sortBy, take, filter } from 'lodash'
const Notifications = {
data () {
return {
- visibleNotificationCount: 10,
- userExpanded: false
+ visibleNotificationCount: 20
}
},
computed: {
@@ -29,7 +26,7 @@ const Notifications = {
}
},
components: {
- Status, StillImage, UserCardContent
+ Notification
},
watch: {
unseenCount (count) {
@@ -43,9 +40,6 @@ const Notifications = {
methods: {
markAsSeen () {
this.$store.commit('markNotificationsAsSeen', this.visibleNotifications)
- },
- toggleUserExpanded () {
- this.userExpanded = !this.userExpanded
}
}
}
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 73a70a14..b0136426 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -41,7 +41,11 @@
flex: 1;
flex-wrap: nowrap;
padding: 0.6em;
+ min-width: 0;
.status-el {
+ .status {
+ padding: 0.25em 0;
+ }
padding: 0;
.status-content.media-body {
margin: 0;
@@ -49,13 +53,18 @@
}
}
+ .follow-text {
+ padding: 0.5em 0;
+ }
+
.status-el {
flex: 1;
}
.notification-right {
flex: 1;
- margin-left: 0.8em;
+ padding-left: 0.8em;
+ min-width: 0;
}
.notification-details {
@@ -65,7 +74,6 @@
position: relative;
overflow: hidden;
width: 100%;
- padding: 0.5em;
flex: 1;
flex-wrap: nowrap;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 99f00032..71fd2604 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -8,34 +8,7 @@
</div>
<div class="panel-body base03-border">
<div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'>
- <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 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>
+ <notification :notification="notification"></notification>
</div>
</div>
</div>