From 8b3a7ae8c0fec5f79971745f64aeb3c5ac470894 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 19 Oct 2020 22:35:46 +0300 Subject: more FA5 stuff with small related refactoring --- src/components/notifications/notifications.js | 6 +++++ src/components/notifications/notifications.scss | 31 ------------------------- src/components/notifications/notifications.vue | 2 +- 3 files changed, 7 insertions(+), 32 deletions(-) (limited to 'src/components/notifications') diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js index d951e2a8..4b479e13 100644 --- a/src/components/notifications/notifications.js +++ b/src/components/notifications/notifications.js @@ -6,6 +6,12 @@ import { filteredNotificationsFromStore, unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils.js' +import { library } from '@fortawesome/fontawesome-svg-core' +import { faCircleNotch } from '@fortawesome/free-solid-svg-icons' + +library.add( + faCircleNotch +) const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30 diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index c6b2a5b5..682ae127 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -158,37 +158,6 @@ margin-right: .2em; } - .icon-retweet.lit { - color: $fallback--cGreen; - color: var(--cGreen, $fallback--cGreen); - } - - .icon-user.lit { - color: $fallback--cBlue; - color: var(--cBlue, $fallback--cBlue); - } - - .icon-user-plus.lit { - color: $fallback--cBlue; - color: var(--cBlue, $fallback--cBlue); - } - - .icon-reply.lit { - color: $fallback--cBlue; - color: var(--cBlue, $fallback--cBlue); - } - - .icon-star.lit { - color: orange; - color: $fallback--cOrange; - color: var(--cOrange, $fallback--cOrange); - } - - .icon-arrow-curved.lit { - color: $fallback--cBlue; - color: var(--cBlue, $fallback--cBlue); - } - .status-content { margin: 0; max-height: 300px; diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index d477a41b..57972854 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -61,7 +61,7 @@ v-else class="new-status-notification text-center panel-footer" > - + -- cgit v1.2.3-70-g09d2 From f561e755530063b2e8e0db210264b1d244543bd0 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 21 Oct 2020 00:31:16 +0300 Subject: lint --- src/App.vue | 17 +++-- src/components/account_actions/account_actions.vue | 5 +- src/components/attachment/attachment.vue | 6 +- src/components/chat/chat.vue | 5 +- src/components/chat_new/chat_new.vue | 11 ++- src/components/chat_panel/chat_panel.vue | 5 +- src/components/emoji_picker/emoji_picker.vue | 10 ++- src/components/exporter/exporter.vue | 6 +- src/components/extra_buttons/extra_buttons.js | 2 +- src/components/extra_buttons/extra_buttons.vue | 48 ++++++++++--- src/components/font_control/font_control.vue | 5 +- .../global_notice_list/global_notice_list.vue | 3 +- src/components/image_cropper/image_cropper.vue | 3 +- .../interface_language_switcher.vue | 5 +- src/components/login_form/login_form.vue | 3 +- src/components/media_modal/media_modal.vue | 10 ++- src/components/mfa_form/recovery_form.vue | 3 +- src/components/mobile_nav/mobile_nav.vue | 18 ++++- src/components/nav_panel/nav_panel.vue | 35 +++++++-- src/components/notification/notification.vue | 33 +++++++-- src/components/notifications/notifications.vue | 6 +- src/components/panel_loading/panel_loading.vue | 6 +- src/components/poll/poll_form.vue | 15 +++- .../post_status_form/post_status_form.vue | 12 ++-- src/components/retweet_button/retweet_button.vue | 18 ++--- src/components/scope_selector/scope_selector.vue | 36 +++++++--- src/components/search/search.vue | 6 +- src/components/search_bar/search_bar.vue | 12 ++-- .../settings_modal/tabs/filtering_tab.vue | 5 +- src/components/settings_modal/tabs/general_tab.vue | 10 ++- src/components/settings_modal/tabs/profile_tab.vue | 12 ++-- .../settings_modal/tabs/theme_tab/preview.vue | 12 ++-- .../settings_modal/tabs/theme_tab/theme_tab.vue | 10 ++- src/components/shadow_control/shadow_control.vue | 25 +++++-- src/components/side_drawer/side_drawer.vue | 84 ++++++++++++++++++---- src/components/status/status.vue | 44 +++++++++--- src/components/status_popover/status_popover.vue | 6 +- src/components/timeline/timeline.vue | 6 +- src/components/timeline_menu/timeline_menu.vue | 40 +++++++++-- src/components/user_card/user_card.vue | 33 +++++++-- .../user_list_popover/user_list_popover.vue | 6 +- 41 files changed, 497 insertions(+), 140 deletions(-) (limited to 'src/components/notifications') diff --git a/src/App.vue b/src/App.vue index 5efaf717..c27f51bf 100644 --- a/src/App.vue +++ b/src/App.vue @@ -54,7 +54,8 @@ @@ -64,9 +65,10 @@ class="mobile-hidden nav-icon" target="_blank" > diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue index 61099d4f..e3ae376e 100644 --- a/src/components/account_actions/account_actions.vue +++ b/src/components/account_actions/account_actions.vue @@ -63,7 +63,10 @@ slot="trigger" class="btn btn-default ellipsis-button" > - + diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index 0b7a3f9c..f1fac2c8 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -38,7 +38,8 @@ >
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue index 0670f1ac..5f58b9a6 100644 --- a/src/components/chat/chat.vue +++ b/src/components/chat/chat.vue @@ -14,7 +14,10 @@ class="go-back-button" @click="goBack" > - +
- +
- +
- + {{ $t('shoutbox.title') }}
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index bd093c99..3262a3d9 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -13,7 +13,10 @@ :title="group.text" @click.prevent="highlight(group.id)" > - + - +
diff --git a/src/components/exporter/exporter.vue b/src/components/exporter/exporter.vue index 156db9a3..ecd71bf1 100644 --- a/src/components/exporter/exporter.vue +++ b/src/components/exporter/exporter.vue @@ -1,7 +1,11 @@ diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue index f6b767a2..4ab5d192 100644 --- a/src/components/login_form/login_form.vue +++ b/src/components/login_form/login_form.vue @@ -77,7 +77,8 @@
{{ error }}
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue index cbcfc6d2..ea7f7a7f 100644 --- a/src/components/media_modal/media_modal.vue +++ b/src/components/media_modal/media_modal.vue @@ -34,7 +34,10 @@ class="modal-view-button-arrow modal-view-button-arrow--prev" @click.stop.prevent="goPrev" > - + diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue index 61dbda24..f6526d2a 100644 --- a/src/components/mfa_form/recovery_form.vue +++ b/src/components/mfa_form/recovery_form.vue @@ -55,7 +55,8 @@
{{ error }}
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue index 4d91af77..db9b0ba0 100644 --- a/src/components/mobile_nav/mobile_nav.vue +++ b/src/components/mobile_nav/mobile_nav.vue @@ -15,7 +15,11 @@ class="mobile-nav-button" @click.stop.prevent="toggleMobileSidebar()" > - +
- +
- +
- + {{ $t("nav.timelines") }}
  • - + {{ $t("nav.interactions") }}
    • @@ -25,13 +35,23 @@ > {{ unreadChatCount }}
    - + {{ $t("nav.chats") }}
  • - + {{ $t("nav.friend_requests") }}
  • - {{ $t("nav.about") }} + {{ $t("nav.about") }}
    • diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index 857727a4..b609ae04 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -18,7 +18,10 @@ href="#" class="unmute" @click.prevent="toggleMute" - > + >
    {{ notification.from_profile.name }} - + {{ $t('notifications.favorited_you') }} {{ $t('notifications.repeated_you') }} - + {{ $t('notifications.followed_you') }} - + {{ $t('notifications.follow_request') }} - + {{ $t('notifications.migrated_to') }} @@ -120,7 +136,10 @@ v-if="needMute" href="#" @click.prevent="toggleMute" - > + >
    - +
    diff --git a/src/components/panel_loading/panel_loading.vue b/src/components/panel_loading/panel_loading.vue index 9bf3ab32..b15e7d38 100644 --- a/src/components/panel_loading/panel_loading.vue +++ b/src/components/panel_loading/panel_loading.vue @@ -1,7 +1,11 @@ @@ -61,7 +65,10 @@ v-if="showPinned" class="pin" > - + {{ $t('status.pinned') }}
    - + > + - + - + - +
    @@ -230,7 +253,7 @@ icon="reply" size="lg" flip="horizontal" - /> + /> @@ -358,7 +381,6 @@ @onSuccess="clearError" /> -
    - +
    diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index ab17cbbc..aaf0349c 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -92,7 +92,11 @@ v-else class="new-status-notification text-center panel-footer" > - + diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue index 1e546fae..8099ddd5 100644 --- a/src/components/timeline_menu/timeline_menu.vue +++ b/src/components/timeline_menu/timeline_menu.vue @@ -16,27 +16,52 @@
    • - {{ $t("nav.timeline") }} + {{ $t("nav.timeline") }}
    • - {{ $t("nav.bookmarks") }} + {{ $t("nav.bookmarks") }}
    • - {{ $t("nav.dms") }} + {{ $t("nav.dms") }}
    • - {{ $t("nav.public_tl") }} + {{ $t("nav.public_tl") }}
    • - {{ $t("nav.twkn") }} + {{ $t("nav.twkn") }}
    @@ -46,7 +71,10 @@ class="title timeline-menu-title" > {{ timelineName() }} - + diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 6c35c781..c5f10b75 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -21,7 +21,11 @@ :user="user" /> - + - + Striped bg - + @@ -162,8 +176,15 @@ :title="$t('user_card.unsubscribe')" > - - + + diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue index dd6977d2..95673733 100644 --- a/src/components/user_list_popover/user_list_popover.vue +++ b/src/components/user_list_popover/user_list_popover.vue @@ -31,7 +31,11 @@
    - +
    -- cgit v1.2.3-70-g09d2 From 350eb489c22e6bac20de92284193a87af63c52a9 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Mon, 2 Nov 2020 15:46:49 +0200 Subject: add favicon badge for unread notifs --- CHANGELOG.md | 1 + index.html | 2 +- src/boot/after_store.js | 3 ++ src/components/notifications/notifications.js | 3 ++ src/services/favicon_service/favicon_service.js | 56 ++++++++++++++++++++++++ static/dev_favicon.png | Bin 0 -> 7528 bytes 6 files changed, 64 insertions(+), 1 deletion(-) create mode 100644 src/services/favicon_service/favicon_service.js create mode 100644 static/dev_favicon.png (limited to 'src/components/notifications') diff --git a/CHANGELOG.md b/CHANGELOG.md index 68cab40c..997889fe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Import/export a muted users - Proper handling of deletes when using websocket streaming - Added optimistic chat message sending, so you can start writing next message before the previous one has been sent +- Added a small red badge to the favicon when there's unread notifications ### Fixed - Fixed chats list not updating its order when new messages come in diff --git a/index.html b/index.html index 1ff944d9..9ac0cfe9 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ Pleroma - + diff --git a/src/boot/after_store.js b/src/boot/after_store.js index 3cbbf020..b472fcf6 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -7,6 +7,7 @@ import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js' import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js' import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js' import { applyTheme } from '../services/style_setter/style_setter.js' +import FaviconService from '../services/favicon_service/favicon_service.js' let staticInitialResults = null @@ -326,6 +327,8 @@ const afterStoreSetup = async ({ store, i18n }) => { const width = windowWidth() store.dispatch('setMobileLayout', width <= 800) + FaviconService.initFaviconService() + const overrides = window.___pleromafe_dev_overrides || {} const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin store.dispatch('setInstanceOption', { name: 'server', value: server }) diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js index 4b479e13..49258563 100644 --- a/src/components/notifications/notifications.js +++ b/src/components/notifications/notifications.js @@ -6,6 +6,7 @@ import { filteredNotificationsFromStore, unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils.js' +import FaviconService from '../../services/favicon_service/favicon_service.js' import { library } from '@fortawesome/fontawesome-svg-core' import { faCircleNotch } from '@fortawesome/free-solid-svg-icons' @@ -75,8 +76,10 @@ const Notifications = { watch: { unseenCountTitle (count) { if (count > 0) { + FaviconService.drawFaviconBadge() this.$store.dispatch('setPageTitle', `(${count})`) } else { + FaviconService.clearFaviconBadge() this.$store.dispatch('setPageTitle', '') } } diff --git a/src/services/favicon_service/favicon_service.js b/src/services/favicon_service/favicon_service.js new file mode 100644 index 00000000..8e3f1170 --- /dev/null +++ b/src/services/favicon_service/favicon_service.js @@ -0,0 +1,56 @@ +import { find } from 'lodash' + +const createFaviconService = () => { + let favimg, favcanvas, favcontext, favicon + const faviconWidth = 48 + const faviconHeight = 48 + const strokeColor = 'rgb(200, 0, 0)' + const fillColor = 'rgb(255, 90, 90)' + const badgeRadius = 12 + + const initFaviconService = () => { + const nodes = document.getElementsByTagName('link') + favicon = find(nodes, node => node.rel === 'icon') + if (favicon) { + favcanvas = document.createElement('canvas') + favcanvas.width = faviconWidth + favcanvas.height = faviconHeight + favimg = new Image() + favimg.src = favicon.href + favcontext = favcanvas.getContext('2d') + } + } + + const clearFaviconBadge = () => { + if (!favimg || !favcontext || !favicon) return + + favcontext.clearRect(0, 0, faviconWidth, faviconHeight) + favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight) + favicon.href = favcanvas.toDataURL('image/png') + } + + const drawFaviconBadge = () => { + if (!favimg || !favcontext || !favcontext) return + + clearFaviconBadge() + + favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight) + favcontext.fillStyle = fillColor + favcontext.strokeStyle = strokeColor + favcontext.beginPath() + favcontext.arc(faviconWidth - badgeRadius, faviconHeight - badgeRadius, badgeRadius, 0, 2 * Math.PI, false) + favcontext.fill() + favcontext.stroke() + favicon.href = favcanvas.toDataURL('image/png') + } + + return { + initFaviconService, + clearFaviconBadge, + drawFaviconBadge + } +} + +const FaviconService = createFaviconService() + +export default FaviconService diff --git a/static/dev_favicon.png b/static/dev_favicon.png new file mode 100644 index 00000000..8b53d746 Binary files /dev/null and b/static/dev_favicon.png differ -- cgit v1.2.3-70-g09d2 From 1d2ba946b6b81dc225d0eec21548a737ca2fac5e Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson Date: Tue, 10 Nov 2020 14:28:10 +0200 Subject: make notifications also use the popup errors, remove all error from status/notif state --- CHANGELOG.md | 4 ++++ src/components/notifications/notifications.vue | 7 ------- src/i18n/en.json | 1 + src/modules/statuses.js | 21 +-------------------- .../notifications_fetcher.service.js | 18 ++++++++++++++---- .../timeline_fetcher/timeline_fetcher.service.js | 3 --- test/unit/specs/components/user_profile.spec.js | 3 +-- 7 files changed, 21 insertions(+), 36 deletions(-) (limited to 'src/components/notifications') diff --git a/CHANGELOG.md b/CHANGELOG.md index 8f14bc59..a6b62bfe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ### Fixed - Fixed regression in react popup alignment and overflowing - Fixed the occasional bug where screen would scroll 1px when typing into a reply form +- Fixed timeline errors locking timelines + +### Changed +- Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers ## [2.2.0] - 2020-11-06 diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index bd875cca..b976026e 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -15,13 +15,6 @@ class="badge badge-notification unseen-count" >{{ unseenCount }}     -
    - {{ $t('timeline.error_fetching') }} -
    diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss index 5af744a3..e4351d3b 100644 --- a/src/components/chat_message/chat_message.scss +++ b/src/components/chat_message/chat_message.scss @@ -31,9 +31,6 @@ color: $fallback--text; color: var(--text, $fallback--text); } - - border-radius: $fallback--chatMessageRadius; - border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius); } .popover { diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue index 3849ab6e..0777f880 100644 --- a/src/components/chat_message/chat_message.vue +++ b/src/components/chat_message/chat_message.vue @@ -53,7 +53,7 @@ - - + - + + + diff --git a/src/components/domain_mute_card/domain_mute_card.vue b/src/components/domain_mute_card/domain_mute_card.vue index 97aee243..3b5aec14 100644 --- a/src/components/domain_mute_card/domain_mute_card.vue +++ b/src/components/domain_mute_card/domain_mute_card.vue @@ -6,7 +6,7 @@ {{ $t('domain_mute_card.unmute') }}