diff options
Diffstat (limited to 'src/components/notifications')
| -rw-r--r-- | src/components/notifications/notifications.js | 5 | ||||
| -rw-r--r-- | src/components/notifications/notifications.scss | 48 | ||||
| -rw-r--r-- | src/components/notifications/notifications.vue | 12 |
3 files changed, 47 insertions, 18 deletions
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js index e9b83bf0..e55c6e24 100644 --- a/src/components/notifications/notifications.js +++ b/src/components/notifications/notifications.js @@ -24,11 +24,6 @@ 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: { diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 3c500b36..3b7403e4 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -4,21 +4,40 @@ // 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--faint; + color: var(--faint, $fallback--faint); .read-button { position: absolute; right: 0.7em; height: 1.8em; line-height: 100%; + background-color: $fallback--btn; + background-color: var(--btn, $fallback--btn); + color: $fallback--faint; + color: var(--faint, $fallback--faint); } } .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; @@ -27,6 +46,7 @@ font-size: 0.9em; text-align: center; line-height: 1.3em; + padding: 1px; } .notification { @@ -39,6 +59,14 @@ border-bottom: 1px solid; border-bottom-color: inherit; + .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%) + } + + time { + white-space: nowrap; + } .text { min-width: 0px; @@ -48,19 +76,24 @@ overflow: hidden; .icon-retweet.lit { - color: $green; + color: $fallback--cGreen; + color: var(--cGreen, $fallback--cGreen); } .icon-user-plus.lit { - color: $blue; + color: $fallback--cBlue; + color: var(--cBlue, $fallback--cBlue); } .icon-reply.lit { - color: $blue; + color: $fallback--cBlue; + color: var(--cBlue, $fallback--cBlue); } .icon-star.lit { color: orange; + color: $fallback--cOrange; + color: var(--cOrange, $fallback--cOrange); } .status-content { @@ -91,7 +124,8 @@ margin-top: 0.3em; width: 32px; height: 32px; - border-radius: 50%; + border-radius: $fallback--avatarAltRadius; + border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); overflow: hidden; line-height: 0; @@ -112,7 +146,6 @@ &:last-child { border-bottom: none; - border-radius: 0 0 10px 10px; } } @@ -134,7 +167,8 @@ } .unseen { - border-left: 4px solid rgba(255, 16, 8, 0.75); + border-left: 4px solid $fallback--cRed; + border-left: 4px solid var(--cRed, $fallback--cRed); padding-left: 6px; } } diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index 8e6f12b2..17bae71e 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -1,12 +1,12 @@ <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 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"> @@ -20,7 +20,7 @@ <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-gradient"></div> <div class="notification-content" v-html="notification.status.statusnet_html"></div> </div> <div v-if="notification.type === 'repeat'"> @@ -29,7 +29,7 @@ <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-gradient"></div> <div class="notification-content" v-html="notification.status.statusnet_html"></div> </div> <div v-if="notification.type === 'mention'"> |