From 330288b4cd874bb960735edb1acde01b0bfbf684 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 28 Aug 2018 16:14:32 +0300 Subject: panel styling cleanup --- src/components/notifications/notifications.scss | 46 ++++--------------------- src/components/notifications/notifications.vue | 6 ++-- 2 files changed, 11 insertions(+), 41 deletions(-) (limited to 'src/components/notifications') diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 5b09685b..0213d5b8 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -4,58 +4,25 @@ // a bit of a hack to allow scrolling below notifications padding-bottom: 15em; - .title { - display: inline-block; - } - - .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); - display: flex; - align-items: baseline; - .read-button { - position: absolute; - right: 0.7em; - height: 1.8em; - line-height: 100%; - } - } - .unseen-count { display: inline-block; 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; - margin: 0 0.2em 0 -0.4em; + border-radius: 99px; + min-width: 1.5em; + max-width: 1.5em; + min-height: 1.5em; + max-height: 1.5em; color: white; font-size: 0.9em; text-align: center; - 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; @@ -73,7 +40,8 @@ box-sizing: border-box; display: flex; border-bottom: 1px solid; - border-bottom-color: inherit; + border-color: $fallback--border; + border-color: var(--border, $fallback--border); .broken-favorite { border-radius: $fallback--tooltipRadius; diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index a0b0e5f5..7a4322f9 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -2,8 +2,10 @@
- {{unseenCount}} -
{{$t('notifications.notifications')}}
+
+ {{$t('notifications.notifications')}} + {{unseenCount}} +
{{$t('timeline.error_fetching')}}
-- cgit v1.2.3-70-g09d2 From b0e0686c7f1084e7074feee509ad189c6010431b Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 28 Aug 2018 21:21:29 +0300 Subject: Added ability to hide certain types of notifications --- src/components/notifications/notifications.js | 12 ++++- src/components/settings/settings.js | 13 ++++++ src/components/settings/settings.vue | 67 +++++++++++++++++++++++---- src/i18n/messages.js | 10 ++++ src/main.js | 1 + src/modules/config.js | 6 +++ src/modules/statuses.js | 18 +++++-- 7 files changed, 110 insertions(+), 17 deletions(-) (limited to 'src/components/notifications') diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js index b24250b0..58956f98 100644 --- a/src/components/notifications/notifications.js +++ b/src/components/notifications/notifications.js @@ -11,6 +11,14 @@ const Notifications = { notificationsFetcher.startFetching({ store, credentials }) }, computed: { + visibleTypes () { + return [ + this.$store.state.config.notificationVisibility.likes && 'like', + this.$store.state.config.notificationVisibility.mentions && 'mention', + this.$store.state.config.notificationVisibility.repeats && 'repeat', + this.$store.state.config.notificationVisibility.follows && 'follow' + ].filter(_ => _) + }, notifications () { return this.$store.state.statuses.notifications.data }, @@ -18,13 +26,13 @@ const Notifications = { return this.$store.state.statuses.notifications.error }, unseenNotifications () { - return filter(this.notifications, ({seen}) => !seen) + return filter(this.visibleNotifications, ({seen}) => !seen) }, visibleNotifications () { // Don't know why, but sortBy([seen, -action.id]) doesn't work. let sortedNotifications = sortBy(this.notifications, ({action}) => -action.id) sortedNotifications = sortBy(sortedNotifications, 'seen') - return sortedNotifications + return sortedNotifications.filter((notification) => this.visibleTypes.includes(notification.type)) }, unseenCount () { return this.unseenNotifications.length diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index 333633c9..de12894b 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -10,6 +10,7 @@ const settings = { hideAttachmentsLocal: this.$store.state.config.hideAttachments, hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv, hideNsfwLocal: this.$store.state.config.hideNsfw, + notificationVisibilityLocal: this.$store.state.config.notificationVisibility, replyVisibilityLocal: this.$store.state.config.replyVisibility, loopVideoLocal: this.$store.state.config.loopVideo, loopVideoSilentOnlyLocal: this.$store.state.config.loopVideoSilentOnly, @@ -49,6 +50,18 @@ const settings = { hideNsfwLocal (value) { this.$store.dispatch('setOption', { name: 'hideNsfw', value }) }, + 'notificationVisibilityLocal.likes' (value) { + this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility }) + }, + 'notificationVisibilityLocal.follows' (value) { + this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility }) + }, + 'notificationVisibilityLocal.repeats' (value) { + this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility }) + }, + 'notificationVisibilityLocal.mentions' (value) { + this.$store.dispatch('setOption', { name: 'notificationVisibility', value: this.$store.state.config.notificationVisibility }) + }, replyVisibilityLocal (value) { this.$store.dispatch('setOption', { name: 'replyVisibility', value }) }, diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index c92602b7..dbc85f1f 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -81,15 +81,47 @@
- {{$t('settings.replies_in_timeline')}} - +
+ {{$t('settings.notification_visibility')}} +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+ +
+
+ {{$t('settings.replies_in_timeline')}} + +

{{$t('settings.filtering_explanation')}}

@@ -113,6 +145,13 @@ margin: 1em 1em 1.4em; padding-bottom: 1.4em; + div { + margin-bottom: .5em; + &:last-child { + margin-bottom: 0; + } + } + &:last-child { border-bottom: none; padding-bottom: 0; @@ -159,7 +198,15 @@ width: 10em; } } -.setting-list { +.select-multiple { + display: flex; + .option-list { + margin: 0; + padding-left: .5em; + } +} +.setting-list, +.option-list{ list-style-type: none; padding-left: 2em; li { diff --git a/src/i18n/messages.js b/src/i18n/messages.js index ebc96e81..08d81841 100644 --- a/src/i18n/messages.js +++ b/src/i18n/messages.js @@ -331,6 +331,11 @@ const en = { reply_visibility_all: 'Show all replies', reply_visibility_following: 'Only show replies directed at me or users I\'m following', reply_visibility_self: 'Only show replies directed at me', + notification_visibility: 'Types of notifications to show', + notification_visibility_likes: 'Likes', + notification_visibility_mentions: 'Mentions', + notification_visibility_repeats: 'Repeats', + notification_visibility_follows: 'Follows', follow_import: 'Follow import', import_followers_from_a_csv_file: 'Import follows from a csv file', follows_imported: 'Follows imported! Processing them will take a while.', @@ -1679,6 +1684,11 @@ const ru = { reply_visibility_all: 'Показывать все ответы', reply_visibility_following: 'Показывать только ответы мне и тех на кого я подписан', reply_visibility_self: 'Показывать только ответы мне', + notification_visibility: 'Показывать уведомления', + notification_visibility_likes: 'Лайки', + notification_visibility_mentions: 'Упоминания', + notification_visibility_repeats: 'Повторы', + notification_visibility_follows: 'Подписки', follow_import: 'Импортировать читаемых', import_followers_from_a_csv_file: 'Импортировать читаемых из файла .csv', follows_imported: 'Список читаемых импортирован. Обработка займёт некоторое время..', diff --git a/src/main.js b/src/main.js index 5258fbd9..6c9bf36e 100644 --- a/src/main.js +++ b/src/main.js @@ -50,6 +50,7 @@ const persistedStateOptions = { 'config.hideAttachmentsInConv', 'config.hideNsfw', 'config.replyVisibility', + 'config.notificationVisibility', 'config.autoLoad', 'config.hoverPreview', 'config.streaming', diff --git a/src/modules/config.js b/src/modules/config.js index ac163316..60a34bc1 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -18,6 +18,12 @@ const defaultState = { pauseOnUnfocused: true, stopGifs: false, replyVisibility: 'all', + notificationVisibility: { + follows: true, + mentions: true, + likes: true, + repeats: true + }, muteWords: [], highlight: {}, interfaceLanguage: browserLocale diff --git a/src/modules/statuses.js b/src/modules/statuses.js index 0dd88266..c69c5be6 100644 --- a/src/modules/statuses.js +++ b/src/modules/statuses.js @@ -68,6 +68,15 @@ export const prepareStatus = (status) => { return status } +const visibleNotificationTypes = (rootState) => { + return [ + rootState.config.notificationVisibility.likes && 'like', + rootState.config.notificationVisibility.mentions && 'mention', + rootState.config.notificationVisibility.repeats && 'repeat', + rootState.config.notificationVisibility.follows && 'follow' + ].filter(_ => _) +} + export const statusType = (status) => { if (status.is_post_verb) { return 'status' @@ -86,8 +95,7 @@ export const statusType = (status) => { return 'deletion' } - // TODO change to status.activity_type === 'follow' when gs supports it - if (status.text.match(/started following/)) { + if (status.text.match(/started following/) || status.activity_type === 'follow') { return 'follow' } @@ -269,7 +277,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us } } -const addNewNotifications = (state, { dispatch, notifications, older }) => { +const addNewNotifications = (state, { dispatch, notifications, older, visibleNotificationTypes }) => { const allStatuses = state.allStatuses const allStatusesObject = state.allStatusesObject each(notifications, (notification) => { @@ -318,7 +326,7 @@ const addNewNotifications = (state, { dispatch, notifications, older }) => { result.image = action.attachments[0].url } - if (fresh && !state.notifications.desktopNotificationSilence) { + if (fresh && !state.notifications.desktopNotificationSilence && visibleNotificationTypes.includes(notification.ntype)) { let notification = new window.Notification(title, result) // Chrome is known for not closing notifications automatically // according to MDN, anyway. @@ -405,7 +413,7 @@ const statuses = { commit('addNewStatuses', { statuses, showImmediately, timeline, noIdUpdate, user: rootState.users.currentUser }) }, addNewNotifications ({ rootState, commit, dispatch }, { notifications, older }) { - commit('addNewNotifications', { dispatch, notifications, older }) + commit('addNewNotifications', { visibleNotificationTypes: visibleNotificationTypes(rootState), dispatch, notifications, older }) }, setError ({ rootState, commit }, { value }) { commit('setError', { value }) -- cgit v1.2.3-70-g09d2 From fa1116249d489cff25f5caf426e65aa8ad991e7c Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 30 Aug 2018 17:13:54 +0300 Subject: fixup! panel styling cleanup --- src/components/notifications/notifications.scss | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) (limited to 'src/components/notifications') diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 0213d5b8..f14b7d40 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -10,13 +10,15 @@ background-color: var(--cRed, $fallback--cRed); text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); border-radius: 99px; - min-width: 1.5em; - max-width: 1.5em; - min-height: 1.5em; - max-height: 1.5em; + min-width: 22px; + max-width: 22px; + min-height: 22px; + max-height: 22px; color: white; - font-size: 0.9em; + font-size: 15px; + line-height: 22px; text-align: center; + vertical-align: middle } .loadmore-error { -- cgit v1.2.3-70-g09d2 From 8c07e63f773a15119f3cf773c083fe3b76306c3f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 31 Aug 2018 04:39:07 +0300 Subject: fix --- src/components/notifications/notifications.scss | 2 -- src/components/timeline/timeline.vue | 2 -- 2 files changed, 4 deletions(-) (limited to 'src/components/notifications') diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index f14b7d40..4dbceede 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -22,8 +22,6 @@ } .loadmore-error { - position: absolute; - right: 0.6em; min-width: 6em; text-align: center; padding: 0 0.25em 0 0.25em; diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index ed354030..e42c0c4b 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -66,8 +66,6 @@ } .loadmore-error { - position: absolute; - right: 0.6em; font-size: 14px; min-width: 6em; text-align: center; -- cgit v1.2.3-70-g09d2