aboutsummaryrefslogtreecommitdiff
path: root/src/components/notifications
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/notifications')
-rw-r--r--src/components/notifications/notifications.js7
-rw-r--r--src/components/notifications/notifications.scss224
-rw-r--r--src/components/notifications/notifications.vue43
3 files changed, 135 insertions, 139 deletions
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index e55c6e24..f8314bfc 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,12 +1,11 @@
-import Status from '../status/status.vue'
-import StillImage from '../still-image/still-image.vue'
+import Notification from '../notification/notification.vue'
import { sortBy, take, filter } from 'lodash'
const Notifications = {
data () {
return {
- visibleNotificationCount: 10
+ visibleNotificationCount: 20
}
},
computed: {
@@ -27,7 +26,7 @@ const Notifications = {
}
},
components: {
- Status, StillImage
+ Notification
},
watch: {
unseenCount (count) {
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 3b7403e4..65ab7f5e 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -46,129 +46,167 @@
font-size: 0.9em;
text-align: center;
line-height: 1.3em;
- padding: 1px;
}
- .notification {
- // Will have to use pixels here to ensure consistent distance with
- // pad alone and pad + border, browsers bad at rounding this with em,
- // they love to give a 1 pixel ghost offset with 0.7em vs 0.3em + 0.4em,
- // which does not happen with 10px vs 4px + 6px.
- padding: 0.4em 0 0 10px;
- display: flex;
- border-bottom: 1px solid;
- border-bottom-color: inherit;
+ .unseen {
+ border-left: 4px solid $fallback--cRed;
+ border-left: 4px solid var(--cRed, $fallback--cRed);
+ padding-left: 0;
+ }
+}
- .notification-gradient {
- background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
- background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%)
+.notification {
+ box-sizing: border-box;
+ display: flex;
+ border-bottom: 1px solid;
+ border-bottom-color: inherit;
+ padding-left: 4px;
+
+ .avatar-compact {
+ width: 32px;
+ height: 32px;
+ border-radius: $fallback--avatarAltRadius;
+ border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+ overflow: hidden;
+ line-height: 0;
+
+ &.animated::before {
+ display: none;
}
+ }
- time {
- white-space: nowrap;
+ &:hover .animated.avatar {
+ canvas {
+ display: none;
}
+ img {
+ visibility: visible;
+ }
+ }
- .text {
- min-width: 0px;
- word-wrap: break-word;
- line-height:18px;
- position: relative;
- overflow: hidden;
+ .notification-usercard {
+ margin: 0;
+ }
- .icon-retweet.lit {
- color: $fallback--cGreen;
- color: var(--cGreen, $fallback--cGreen);
+ .non-mention {
+ display: flex;
+ flex: 1;
+ flex-wrap: nowrap;
+ padding: 0.6em;
+ min-width: 0;
+ .avatar-container {
+ width: 32px;
+ height: 32px;
+ }
+ .status-el {
+ .status {
+ padding: 0.25em 0;
+ color: $fallback--faint;
+ color: var($fallback--faint, --faint);
}
-
- .icon-user-plus.lit {
- color: $fallback--cBlue;
- color: var(--cBlue, $fallback--cBlue);
+ padding: 0;
+ .status-content.media-body {
+ margin: 0;
}
+ }
+ }
- .icon-reply.lit {
- color: $fallback--cBlue;
- color: var(--cBlue, $fallback--cBlue);
- }
+ .follow-text {
+ padding: 0.5em 0;
+ }
- .icon-star.lit {
- color: orange;
- color: $fallback--cOrange;
- color: var(--cOrange, $fallback--cOrange);
- }
+ .status-el {
+ flex: 1;
+ }
- .status-content {
- margin: 0;
- max-height: 300px;
- }
+ time {
+ white-space: nowrap;
+ }
- h1 {
- word-break: break-all;
- margin: 0 0 0.3em;
- padding: 0;
- font-size: 1em;
- line-height:20px;
- small {
- font-weight: lighter;
- }
- }
+ .notification-right {
+ flex: 1;
+ padding-left: 0.8em;
+ min-width: 0;
+ }
- padding: 0.3em 0.8em 0.5em;
- p {
- margin: 0;
- margin-top: 0;
- margin-bottom: 0.3em;
- }
+ .notification-details {
+ min-width: 0px;
+ word-wrap: break-word;
+ line-height:18px;
+ position: relative;
+ overflow: hidden;
+ width: 100%;
+ flex: 1 1 0;
+ display: flex;
+ flex-wrap: nowrap;
+
+ .name-and-action {
+ flex: 1;
}
- .avatar {
- margin-top: 0.3em;
- width: 32px;
- height: 32px;
- border-radius: $fallback--avatarAltRadius;
- border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
- overflow: hidden;
- line-height: 0;
+ .username {
+ font-weight: bolder;
+ }
+ .timeago {
+ float: right;
+ font-size: 12px;
+ }
- &.animated::before {
- display: none;
- }
+ .icon-retweet.lit {
+ color: $fallback--cGreen;
+ color: var(--cGreen, $fallback--cGreen);
+ }
+ .icon-user-plus.lit {
+ color: $fallback--cBlue;
+ color: var(--cBlue, $fallback--cBlue);
}
- &:hover .animated.avatar {
- canvas {
- display: none;
- }
- img {
- visibility: visible;
- }
+ .icon-reply.lit {
+ color: $fallback--cBlue;
+ color: var(--cBlue, $fallback--cBlue);
}
- &:last-child {
- border-bottom: none;
+ .icon-star.lit {
+ color: orange;
+ color: $fallback--cOrange;
+ color: var(--cOrange, $fallback--cOrange);
}
- }
- .notification-content {
- max-height: 12em;
- overflow-y: hidden;
- //text-overflow: ellipsis;
+ .status-content {
+ margin: 0;
+ max-height: 300px;
+ }
- img {
- object-fit: contain;
+ h1 {
+ word-break: break-all;
+ margin: 0 0 0.3em;
+ padding: 0;
+ font-size: 1em;
+ line-height:20px;
+ small {
+ font-weight: lighter;
+ }
+ }
+
+ p {
+ margin: 0;
+ margin-top: 0;
+ margin-bottom: 0.3em;
}
}
- .notification-gradient {
- position: absolute;
- width: 100%;
- height: 4em;
- margin-top:8em;
+ &:last-child {
+ border-bottom: none;
}
+}
- .unseen {
- border-left: 4px solid $fallback--cRed;
- border-left: 4px solid var(--cRed, $fallback--cRed);
- padding-left: 6px;
+.notification-content {
+ max-height: 12em;
+ overflow-y: hidden;
+ //text-overflow: ellipsis;
+
+ img {
+ object-fit: contain;
}
}
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 17bae71e..f01234d3 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -8,48 +8,7 @@
</div>
<div class="panel-body">
<div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'>
- <div>
- <a :href="notification.action.user.statusnet_profile_url" target="_blank">
- <StillImage class='avatar' :src="notification.action.user.profile_image_url_original"/>
- </a>
- </div>
- <div class='text' style="width: 100%;">
- <div v-if="notification.type === 'favorite'">
- <h1>
- <span :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
- <i class="fa icon-star 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 class="notification-gradient"></div>
- <div class="notification-content" v-html="notification.status.statusnet_html"></div>
- </div>
- <div v-if="notification.type === 'repeat'">
- <h1>
- <span :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
- <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 class="notification-gradient"></div>
- <div class="notification-content" v-html="notification.status.statusnet_html"></div>
- </div>
- <div v-if="notification.type === 'mention'">
- <h1>
- <span :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
- <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 v-if="notification.type === 'follow'">
- <h1>
- <span :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
- <i class="fa icon-user-plus lit"></i>
- </h1>
- <div>
- <router-link :to="{ name: 'user-profile', params: { id: notification.action.user.id } }">@{{ notification.action.user.screen_name }}</router-link> {{$t('notifications.followed_you')}}
- </div>
- </div>
- </div>
+ <notification :notification="notification"></notification>
</div>
</div>
</div>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-15 12:57:32 +0000