diff --git a/src/App.js b/src/App.js index 4f3fd798..85df9416 100644 --- a/src/App.js +++ b/src/App.js @@ -6,6 +6,8 @@ import InstanceSpecificPanel from './components/instance_specific_panel/instance 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', @@ -17,7 +19,8 @@ export default { InstanceSpecificPanel, FeaturesPanel, WhoToFollowPanel, - ChatPanel + ChatPanel, + SideDrawer }, data: () => ({ mobileActivePanel: 'timeline', @@ -70,12 +73,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) }, @@ -85,6 +91,9 @@ export default { }, onFinderToggled (hidden) { this.finderHidden = hidden + }, + toggleMobileSidebar () { + this.$refs.sideDrawer.toggleDrawer() } } } 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 4d4680e2..feadb009 100644 --- a/src/App.vue +++ b/src/App.vue @@ -7,44 +7,42 @@
- - - + + +
+ {{sitename}}
- - - + + +
-
-
- - -
-
+
+ +
- - + + - +
-
+
- +
diff --git a/src/boot/routes.js b/src/boot/routes.js index d349ec45..e892839c 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 [ @@ -36,6 +40,10 @@ export default (store) => { { name: 'registration', path: '/registration/:token', component: Registration }, { name: 'friend-requests', path: '/friend-requests', component: FollowRequests }, { name: 'user-settings', path: '/user-settings', component: UserSettings }, + { 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 }) }, { 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-profile', path: '/(users/)?:name', component: UserProfile } diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js index 8db12abb..bbc9b49f 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, this.$store.state.instance.restrictedNicknames) + return generateProfileLink(user.id, user.username, this.$store.state.instance.restrictedNicknames) } } } 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 @@