diff options
Diffstat (limited to 'src/components/mobile_nav')
| -rw-r--r-- | src/components/mobile_nav/mobile_nav.js | 23 | ||||
| -rw-r--r-- | src/components/mobile_nav/mobile_nav.vue | 58 |
2 files changed, 44 insertions, 37 deletions
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js index dad1f6aa..8c9261b0 100644 --- a/src/components/mobile_nav/mobile_nav.js +++ b/src/components/mobile_nav/mobile_nav.js @@ -1,7 +1,10 @@ import SideDrawer from '../side_drawer/side_drawer.vue' import Notifications from '../notifications/notifications.vue' import ConfirmModal from '../confirm_modal/confirm_modal.vue' -import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils' +import { + unseenNotificationsFromStore, + countExtraNotifications +} from '../../services/notification_utils/notification_utils' import GestureService from '../../services/gesture_service/gesture_service' import NavigationPins from 'src/components/navigation/navigation_pins.vue' import { mapGetters } from 'vuex' @@ -11,7 +14,8 @@ import { faBell, faBars, faArrowUp, - faMinus + faMinus, + faCheckDouble } from '@fortawesome/free-solid-svg-icons' library.add( @@ -19,7 +23,8 @@ library.add( faBell, faBars, faArrowUp, - faMinus + faMinus, + faCheckDouble ) const MobileNav = { @@ -50,8 +55,14 @@ const MobileNav = { return unseenNotificationsFromStore(this.$store) }, unseenNotificationsCount () { + return this.unseenNotifications.length + countExtraNotifications(this.$store) + }, + unseenCount () { return this.unseenNotifications.length }, + unseenCountBadgeText () { + return `${this.unseenCount ? this.unseenCount : ''}` + }, hideSitename () { return this.$store.state.instance.hideSitename }, sitename () { return this.$store.state.instance.name }, isChat () { @@ -64,6 +75,9 @@ const MobileNav = { shouldConfirmLogout () { return this.$store.getters.mergedConfig.modalOnLogout }, + closingDrawerMarksAsSeen () { + return this.$store.getters.mergedConfig.closingDrawerMarksAsSeen + }, ...mapGetters(['unreadChatCount']) }, methods: { @@ -78,7 +92,7 @@ const MobileNav = { // make sure to mark notifs seen only when the notifs were open and not // from close-calls. this.notificationsOpen = false - if (markRead) { + if (markRead && this.closingDrawerMarksAsSeen) { this.markNotificationsAsSeen() } } @@ -114,7 +128,6 @@ const MobileNav = { this.hideConfirmLogout() }, markNotificationsAsSeen () { - // this.$refs.notifications.markAsSeen() this.$store.dispatch('markNotificationsAsSeen') }, onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) { diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue index c2746abe..6e134ef2 100644 --- a/src/components/mobile_nav/mobile_nav.vue +++ b/src/components/mobile_nav/mobile_nav.vue @@ -20,7 +20,7 @@ /> <div v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount" - class="alert-dot" + class="badge -dot -notification" /> </button> <NavigationPins class="pins" /> @@ -37,20 +37,26 @@ /> <div v-if="unseenNotificationsCount" - class="alert-dot" + class="badge -dot -notification" /> </button> </div> </nav> <aside v-if="currentUser" - class="mobile-notifications-drawer" + class="mobile-notifications-drawer mobile-drawer" :class="{ '-closed': !notificationsOpen }" @touchstart.stop="notificationsTouchStart" @touchmove.stop="notificationsTouchMove" > - <div class="mobile-notifications-header"> - <span class="title">{{ $t('notifications.notifications') }}</span> + <div class="panel-heading mobile-notifications-header"> + <span class="title"> + {{ $t('notifications.notifications') }} + <span + v-if="unseenCountBadgeText" + class="badge -notification unseen-count" + >{{ unseenCountBadgeText }}</span> + </span> <span class="spacer" /> <button v-if="notificationsAtTop" @@ -67,6 +73,17 @@ </FALayers> </button> <button + v-if="!closingDrawerMarksAsSeen" + class="button-unstyled mobile-nav-button" + :title="$t('nav.mobile_notifications_mark_as_seen')" + @click.stop.prevent="markNotificationsAsSeen()" + > + <FAIcon + class="fa-scale-110 fa-old-padding" + icon="check-double" + /> + </button> + <button class="button-unstyled mobile-nav-button" :title="$t('nav.mobile_notifications_close')" @click.stop.prevent="closeMobileNotifications(true)" @@ -106,8 +123,6 @@ <script src="./mobile_nav.js"></script> <style lang="scss"> -@import "../../variables"; - .MobileNav { z-index: var(--ZI_navbar); @@ -120,7 +135,7 @@ box-sizing: border-box; a { - color: var(--topBarLink, $fallback--link); + color: var(--link); } } @@ -148,19 +163,6 @@ display: flex; } - .alert-dot { - border-radius: 100%; - height: 8px; - width: 8px; - position: absolute; - left: calc(50% - 4px); - top: calc(50% - 4px); - margin-left: 6px; - margin-top: -6px; - background-color: $fallback--cRed; - background-color: var(--badgeNotification, $fallback--cRed); - } - .mobile-notifications-drawer { width: 100%; height: 100vh; @@ -168,13 +170,13 @@ position: fixed; top: 0; left: 0; - box-shadow: 1px 1px 4px rgb(0 0 0 / 60%); - box-shadow: var(--panelShadow); + box-shadow: var(--shadow); transition-property: transform; transition-duration: 0.25s; transform: translateX(0); z-index: var(--ZI_navbar); -webkit-overflow-scrolling: touch; + background: var(--background); &.-closed { transform: translateX(100%); @@ -191,11 +193,7 @@ height: 50px; line-height: 50px; position: absolute; - color: var(--topBarText); - background-color: $fallback--fg; - background-color: var(--topBar, $fallback--fg); - box-shadow: 0 0 4px rgb(0 0 0 / 60%); - box-shadow: var(--topBarShadow); + box-shadow: var(--shadow); .spacer { flex: 1; @@ -221,10 +219,6 @@ height: calc(100vh - var(--navbar-height)); overflow-x: hidden; overflow-y: scroll; - color: $fallback--text; - color: var(--text, $fallback--text); - background-color: $fallback--bg; - background-color: var(--bg, $fallback--bg); .notifications { padding: 0; |