aboutsummaryrefslogtreecommitdiff
path: root/src/components/notifications
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/notifications')
-rw-r--r--src/components/notifications/notifications.js11
-rw-r--r--src/components/notifications/notifications.scss228
-rw-r--r--src/components/notifications/notifications.vue53
3 files changed, 168 insertions, 124 deletions
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 5f0d7f26..f8314bfc 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,11 +1,11 @@
-import Status from '../status/status.vue'
+import Notification from '../notification/notification.vue'
import { sortBy, take, filter } from 'lodash'
const Notifications = {
data () {
return {
- visibleNotificationCount: 10
+ visibleNotificationCount: 20
}
},
computed: {
@@ -23,15 +23,10 @@ const Notifications = {
},
unseenCount () {
return this.unseenNotifications.length
- },
- hiderStyle () {
- return {
- background: `linear-gradient(to bottom, rgba(0, 0, 0, 0), ${this.$store.state.config.colors['base00']} 80%)`
- }
}
},
components: {
- Status
+ Notification
},
watch: {
unseenCount (count) {
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 241f10b4..9cbb1226 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -4,10 +4,24 @@
// a bit of a hack to allow scrolling below notifications
padding-bottom: 15em;
+ .panel {
+ background: $fallback--bg;
+ background: var(--bg, $fallback--bg)
+ }
+
+ .panel-body {
+ border-color: $fallback--border;
+ border-color: var(--border, $fallback--border)
+ }
+
.panel-heading {
// force the text to stay centered, while keeping
// the button in the right side of the panel heading
position: relative;
+ background: $fallback--btn;
+ background: var(--btn, $fallback--btn);
+ color: $fallback--fg;
+ color: var(--fg, $fallback--fg);
.read-button {
position: absolute;
right: 0.7em;
@@ -18,7 +32,8 @@
.unseen-count {
display: inline-block;
- background-color: rgba(255, 16, 8, 0.8);
+ background-color: $fallback--cRed;
+ background-color: var(--cRed, $fallback--cRed);
text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
min-width: 1.3em;
border-radius: 1.3em;
@@ -29,92 +44,167 @@
line-height: 1.3em;
}
- .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 {
+ 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;
+ }
+ }
- .text {
- min-width: 0px;
- word-wrap: break-word;
- line-height:18px;
- position: relative;
- overflow: hidden;
+ &:hover .animated.avatar {
+ canvas {
+ display: none;
+ }
+ img {
+ visibility: visible;
+ }
+ }
- .icon-retweet.lit {
- color: $green;
- }
+ .notification-usercard {
+ margin: 0;
+ }
- .icon-user-plus.lit {
- color: $blue;
+ .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-reply.lit {
- color: $blue;
+ padding: 0;
+ .media-body {
+ margin: 0;
}
+ }
+ }
- .icon-star.lit {
- color: orange;
- }
+ .follow-text {
+ padding: 0.5em 0;
+ }
- .status-content {
- margin: 0;
- max-height: 300px;
- }
+ .status-el {
+ flex: 1;
+ }
- h1 {
- word-break: break-all;
- margin: 0 0 0.3em;
- padding: 0;
- font-size: 1em;
- line-height:20px;
- small {
- font-weight: lighter;
- }
- }
+ time {
+ white-space: nowrap;
+ }
- padding: 0.3em 0.8em 0.5em;
- p {
- margin: 0;
- margin-top: 0;
- margin-bottom: 0.3em;
- }
+ .notification-right {
+ flex: 1;
+ padding-left: 0.8em;
+ min-width: 0;
+ }
+
+ .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;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
- .avatar {
- padding-top: 0.3em;
- width: 32px;
- height: 32px;
- border-radius: 50%;
+ .username {
+ font-weight: bolder;
+ max-width: 100%;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ .timeago {
+ float: right;
+ font-size: 12px;
}
- &:last-child {
- border-bottom: none;
- border-radius: 0 0 10px 10px;
+ .icon-retweet.lit {
+ color: $fallback--cGreen;
+ color: var(--cGreen, $fallback--cGreen);
}
- }
- .notification-content {
- max-height: 12em;
- overflow-y: hidden;
- //text-overflow: ellipsis;
- }
+ .icon-user-plus.lit {
+ color: $fallback--cBlue;
+ color: var(--cBlue, $fallback--cBlue);
+ }
- .notification-gradient {
- position: absolute;
- width: 100%;
- height: 4em;
- margin-top:8em;
+ .icon-reply.lit {
+ color: $fallback--cBlue;
+ color: var(--cBlue, $fallback--cBlue);
+ }
+
+ .icon-star.lit {
+ color: orange;
+ color: $fallback--cOrange;
+ color: var(--cOrange, $fallback--cOrange);
+ }
+
+ .status-content {
+ margin: 0;
+ max-height: 300px;
+ }
+
+ 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;
+ }
}
- .unseen {
- border-left: 4px solid rgba(255, 16, 8, 0.75);
- padding-left: 6px;
+ // ugly as heck
+ &:last-child {
+ border-bottom: none;
+ border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
+ border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+ .status-el {
+ border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
+ border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+ }
}
}
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index b341fcef..4fa6e925 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,55 +1,14 @@
<template>
<div class="notifications">
- <div class="panel panel-default base00-background">
- <div class="panel-heading base02-background base04">
+ <div class="panel panel-default">
+ <div class="panel-heading">
<span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span>
{{$t('notifications.notifications')}}
- <button v-if="unseenCount" @click.prevent="markAsSeen" class="base04 base02-background read-button">{{$t('notifications.read')}}</button>
+ <button v-if="unseenCount" @click.prevent="markAsSeen" class="read-button">{{$t('notifications.read')}}</button>
</div>
- <div class="panel-body base03-border">
- <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">
- <img 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" :style="hiderStyle"></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" :style="hiderStyle"></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>
+ <div class="panel-body">
+ <div v-for="notification in visibleNotifications" :key="notification.action.id" class="notification" :class='{"unseen": !notification.seen}'>
+ <notification :notification="notification"></notification>
</div>
</div>
</div>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 17:14:33 +0000