From 85c058e95c04245dacf3ffb6b45a6eceb3253e7b Mon Sep 17 00:00:00 2001 From: shpuld Date: Fri, 28 Dec 2018 21:39:54 +0200 Subject: [PATCH] New routes, notifications, other impovements in side drwaer --- src/App.js | 12 +- src/App.scss | 26 ++++- src/App.vue | 35 +++--- src/boot/routes.js | 10 +- src/components/chat_panel/chat_panel.js | 3 +- src/components/chat_panel/chat_panel.vue | 14 ++- src/components/nav_panel/nav_panel.js | 1 - src/components/nav_panel/nav_panel.vue | 12 +- src/components/notification/notification.js | 5 +- src/components/notification/notification.vue | 8 +- src/components/notifications/notifications.js | 25 ++-- .../notifications/notifications.vue | 2 +- src/components/side_drawer/side_drawer.js | 28 +++-- src/components/side_drawer/side_drawer.vue | 109 ++++++++++-------- src/components/status/status.js | 3 +- src/components/status/status.vue | 10 +- .../user_card_content/user_card_content.js | 2 +- .../user_card_content/user_card_content.vue | 6 +- src/components/user_panel/user_panel.js | 1 - src/components/user_panel/user_panel.vue | 2 +- src/components/user_search/user_search.js | 8 ++ src/components/user_search/user_search.vue | 18 +++ .../notification_utils/notification_utils.js | 20 ++++ .../specs/components/user_profile.spec.js | 3 +- .../notification_utils.spec.js | 88 ++++++++++++++ 25 files changed, 313 insertions(+), 138 deletions(-) create mode 100644 src/services/notification_utils/notification_utils.js create mode 100644 test/unit/specs/services/notification_utils/notification_utils.spec.js diff --git a/src/App.js b/src/App.js index 68fae50e..1132110c 100644 --- a/src/App.js +++ b/src/App.js @@ -7,6 +7,7 @@ import FeaturesPanel from './components/features_panel/features_panel.vue' import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue' import ChatPanel from './components/chat_panel/chat_panel.vue' import SideDrawer from './components/side_drawer/side_drawer.vue' +import { unseenNotificationsFromStore } from './services/notification_utils/notification_utils' export default { name: 'app', @@ -75,12 +76,15 @@ export default { sitename () { return this.$store.state.instance.name }, chat () { return this.$store.state.chat.channel.state === 'joined' }, suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled }, - showInstanceSpecificPanel () { return this.$store.state.instance.showInstanceSpecificPanel } + showInstanceSpecificPanel () { return this.$store.state.instance.showInstanceSpecificPanel }, + unseenNotifications () { + return unseenNotificationsFromStore(this.$store) + }, + unseenNotificationsCount () { + return this.unseenNotifications.length + } }, methods: { - activatePanel (panelName) { - this.mobileActivePanel = panelName - }, scrollToTop () { window.scrollTo(0, 0) }, diff --git a/src/App.scss b/src/App.scss index 9c8e2ad3..ed06bbbc 100644 --- a/src/App.scss +++ b/src/App.scss @@ -473,6 +473,24 @@ nav { } } +.menu-button { + display: none; + position: relative; +} + +.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); +} + .fade-enter-active, .fade-leave-active { transition: opacity .2s } @@ -524,9 +542,6 @@ nav { .back-button { display: none; } - .site-name { - padding-left: 20px; - } } .sidebar-bounds { @@ -665,4 +680,9 @@ nav { max-width: 4em; } } + + .menu-button { + display: block; + margin-right: 0.8em; + } } diff --git a/src/App.vue b/src/App.vue index 59398a34..9d4616bc 100644 --- a/src/App.vue +++ b/src/App.vue @@ -7,50 +7,45 @@
- + + +
+
+ {{sitename}}
- - +
- - -
- - - diff --git a/src/boot/routes.js b/src/boot/routes.js index 8ea8cc7f..4de0e104 100644 --- a/src/boot/routes.js +++ b/src/boot/routes.js @@ -12,6 +12,10 @@ import UserSettings from 'components/user_settings/user_settings.vue' import FollowRequests from 'components/follow_requests/follow_requests.vue' import OAuthCallback from 'components/oauth_callback/oauth_callback.vue' import UserSearch from 'components/user_search/user_search.vue' +import Notifications from 'components/notifications/notifications.vue' +import UserPanel from 'components/user_panel/user_panel.vue' +import LoginForm from 'components/login_form/login_form.vue' +import ChatPanel from 'components/chat_panel/chat_panel.vue' export default (store) => { return [ @@ -62,6 +66,10 @@ export default (store) => { { name: 'friend-requests', path: '/~/friend-requests', component: FollowRequests }, { name: 'user-settings', path: '/~/user-settings', component: UserSettings }, { name: 'oauth-callback', path: '/~/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) }, - { name: 'user-search', path: '/~/user-search', component: UserSearch, props: (route) => ({ query: route.query.query }) } + { name: 'user-search', path: '/~/user-search', component: UserSearch, props: (route) => ({ query: route.query.query }) }, + { name: 'notifications', path: '/:username/notifications', component: Notifications }, + { name: 'new-status', path: '/:username/new-status', component: UserPanel }, + { name: 'login', path: '/~/login', component: LoginForm }, + { name: 'chat', path: '/~/chat', component: ChatPanel, props: () => ({ floating: false }) } ] } diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js index e175e90c..d7238641 100644 --- a/src/components/chat_panel/chat_panel.js +++ b/src/components/chat_panel/chat_panel.js @@ -1,6 +1,7 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' const chatPanel = { + props: [ 'floating' ], data () { return { currentMessage: '', @@ -22,7 +23,7 @@ const chatPanel = { this.collapsed = !this.collapsed }, userProfileLink (user) { - return generateProfileLink(user.id, user.screen_name) + return generateProfileLink(user.id, user.username) } } } diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue index 1b9c63ff..bf65efc5 100644 --- a/src/components/chat_panel/chat_panel.vue +++ b/src/components/chat_panel/chat_panel.vue @@ -1,10 +1,10 @@