error display

This commit is contained in:
Henry Jameson 2018-08-20 20:45:54 +03:00
parent f9b0a95969
commit b97db4912d
4 changed files with 28 additions and 2 deletions

View file

@ -14,6 +14,9 @@ const Notifications = {
notifications () { notifications () {
return this.$store.state.statuses.notifications.data return this.$store.state.statuses.notifications.data
}, },
error () {
return this.$store.state.statuses.notifications.error
},
unseenNotifications () { unseenNotifications () {
return filter(this.notifications, ({seen}) => !seen) return filter(this.notifications, ({seen}) => !seen)
}, },

View file

@ -4,6 +4,10 @@
// a bit of a hack to allow scrolling below notifications // a bit of a hack to allow scrolling below notifications
padding-bottom: 15em; padding-bottom: 15em;
.title {
display: inline-block;
}
.panel { .panel {
background: $fallback--bg; background: $fallback--bg;
background: var(--bg, $fallback--bg) background: var(--bg, $fallback--bg)
@ -22,6 +26,8 @@
background: var(--btn, $fallback--btn); background: var(--btn, $fallback--btn);
color: $fallback--fg; color: $fallback--fg;
color: var(--fg, $fallback--fg); color: var(--fg, $fallback--fg);
display: flex;
align-items: baseline;
.read-button { .read-button {
position: absolute; position: absolute;
right: 0.7em; right: 0.7em;
@ -44,6 +50,19 @@
line-height: 1.3em; line-height: 1.3em;
} }
.loadmore-error {
position: absolute;
right: 0.6em;
font-size: 14px;
min-width: 6em;
font-family: sans-serif;
text-align: center;
padding: 0 0.25em 0 0.25em;
margin: 0;
color: $fallback--fg;
color: var(--fg, $fallback--fg);
}
.unseen { .unseen {
box-shadow: inset 4px 0 0 var(--cRed, $fallback--cRed); box-shadow: inset 4px 0 0 var(--cRed, $fallback--cRed);
padding-left: 0; padding-left: 0;

View file

@ -3,7 +3,10 @@
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span> <span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span>
{{$t('notifications.notifications')}} <div class="title"> {{$t('notifications.notifications')}}</div>
<div @click.prevent class="loadmore-error alert error" v-if="error">
{{$t('timeline.error_fetching')}}
</div>
<button v-if="unseenCount" @click.prevent="markAsSeen" class="read-button">{{$t('notifications.read')}}</button> <button v-if="unseenCount" @click.prevent="markAsSeen" class="read-button">{{$t('notifications.read')}}</button>
</div> </div>
<div class="panel-body"> <div class="panel-body">

View file

@ -29,6 +29,7 @@ export const defaultState = {
maxSavedId: 0, maxSavedId: 0,
minId: Number.POSITIVE_INFINITY, minId: Number.POSITIVE_INFINITY,
data: [], data: [],
error: false,
brokenFavorites: {} brokenFavorites: {}
}, },
favorites: new Set(), favorites: new Set(),
@ -364,7 +365,7 @@ export const mutations = {
state.error = value state.error = value
}, },
setNotificationsError (state, { value }) { setNotificationsError (state, { value }) {
state.notificationsError = value state.notifications.error = value
}, },
setNotificationsSilence (state, { value }) { setNotificationsSilence (state, { value }) {
state.notifications.desktopNotificationSilence = value state.notifications.desktopNotificationSilence = value