From bd2ed617a740ef3b37dedf3bed608e433dc0ec09 Mon Sep 17 00:00:00 2001 From: shpuld Date: Sat, 15 Dec 2018 19:13:01 +0200 Subject: Remove panel switcher, add rudimentary drawer --- src/App.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) (limited to 'src/App.js') diff --git a/src/App.js b/src/App.js index 4f3fd798..e4ffb85a 100644 --- a/src/App.js +++ b/src/App.js @@ -6,6 +6,7 @@ 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' export default { name: 'app', @@ -17,7 +18,8 @@ export default { InstanceSpecificPanel, FeaturesPanel, WhoToFollowPanel, - ChatPanel + ChatPanel, + SideDrawer }, data: () => ({ mobileActivePanel: 'timeline', @@ -28,7 +30,13 @@ export default { window.CSS.supports('-moz-mask-size', 'contain') || window.CSS.supports('-ms-mask-size', 'contain') || window.CSS.supports('-o-mask-size', 'contain') - ) + ), + mobileViews: { + postStatus: 'poststatus', + notifications: 'notifications', + timeline: 'timeline' + }, + showMobileSidebar: false }), created () { // Load the locale from the storage @@ -67,6 +75,9 @@ export default { 'background-image': `url(${this.background})` } }, + mobileShowOnlyIn () { + return view => ({ 'mobile-hidden': this.mobileActivePanel !== view }) + }, sitename () { return this.$store.state.instance.name }, chat () { return this.$store.state.chat.channel.state === 'joined' }, suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled }, @@ -85,6 +96,9 @@ export default { }, onFinderToggled (hidden) { this.finderHidden = hidden + }, + toggleMobileSidebar () { + this.showMobileSidebar = !this.showMobileSidebar } } } -- cgit v1.2.3-70-g09d2 From e46b560ead02ab5d9df8edbb997c56b835aa21d4 Mon Sep 17 00:00:00 2001 From: shpuld Date: Sun, 23 Dec 2018 19:50:19 +0200 Subject: move closing logic to drawer, add swipe to close --- src/App.js | 5 +-- src/App.vue | 14 ++----- src/components/side_drawer/side_drawer.js | 32 ++++++++++---- src/components/side_drawer/side_drawer.vue | 67 ++++++++++++++++-------------- src/components/user_finder/user_finder.vue | 22 +++++----- 5 files changed, 78 insertions(+), 62 deletions(-) (limited to 'src/App.js') diff --git a/src/App.js b/src/App.js index 728c8e54..68fae50e 100644 --- a/src/App.js +++ b/src/App.js @@ -30,8 +30,7 @@ export default { window.CSS.supports('-moz-mask-size', 'contain') || window.CSS.supports('-ms-mask-size', 'contain') || window.CSS.supports('-o-mask-size', 'contain') - ), - showMobileSidebar: false + ) }), created () { // Load the locale from the storage @@ -93,7 +92,7 @@ export default { this.finderHidden = hidden }, toggleMobileSidebar () { - this.showMobileSidebar = !this.showMobileSidebar + this.$refs.sideDrawer.toggleDrawer() } } } diff --git a/src/App.vue b/src/App.vue index 55cac52c..59398a34 100644 --- a/src/App.vue +++ b/src/App.vue @@ -14,9 +14,9 @@
- - - + + +
@@ -25,17 +25,11 @@
-
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js index 6541077b..2064dfa5 100644 --- a/src/components/side_drawer/side_drawer.js +++ b/src/components/side_drawer/side_drawer.js @@ -1,23 +1,41 @@ +import UserCardContent from '../user_card_content/user_card_content.vue' + +const deltaX = (oldX, newX) => newX - oldX + +const touchEventX = e => e.touches[0].screenX + const SideDrawer = { - props: [ 'activatePanel', 'closed', 'clickoutside', 'logout' ], + props: [ 'activatePanel', 'logout' ], + data: () => ({ + closed: true, + touchX: 0 + }), + components: { UserCardContent }, computed: { currentUser () { return this.$store.state.users.currentUser } }, methods: { + toggleDrawer () { + this.closed = !this.closed + }, gotoPanel (panel) { this.activatePanel(panel) - this.clickoutside && this.clickoutside() - }, - clickedOutside () { - if (typeof this.clickoutside === 'function') { - this.clickoutside() - } + this.toggleDrawer() }, doLogout () { this.logout() this.gotoPanel('timeline') + }, + touchStart (e) { + this.touchX = touchEventX(e) + }, + touchMove (e) { + const delta = deltaX(this.touchX, touchEventX(e)) + if (delta < -30) { + this.toggleDrawer() + } } } } diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index 1593ae65..99ea3dd3 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -1,6 +1,10 @@ @@ -110,7 +114,28 @@ .side-drawer .panel { overflow: hidden; margin: 0; + display: flex; +} + +.side-drawer-heading { + background: transparent; + flex-direction: column; + align-items: stretch; + display: flex; + min-height: 8em; + padding: 0; + margin: 0; + + .profile-panel-background { + border-radius: 0; + .panel-heading { + background: transparent; + flex-direction: column; + align-items: stretch; + } + } } + .side-drawer ul { list-style: none; margin: 0; @@ -123,40 +148,18 @@ border-color: var(--border, $fallback--border); padding: 0; - &:first-child a { - border-top-right-radius: $fallback--panelRadius; - border-top-right-radius: var(--panelRadius, $fallback--panelRadius); - border-top-left-radius: $fallback--panelRadius; - border-top-left-radius: var(--panelRadius, $fallback--panelRadius); - } + a { + display: block; + padding: 0.8em 0.85em; - &:last-child a { - border-bottom-right-radius: $fallback--panelRadius; - border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius); - border-bottom-left-radius: $fallback--panelRadius; - border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius); + &:hover { + background-color: $fallback--lightBg; + background-color: var(--lightBg, $fallback--lightBg); + } } } .side-drawer li:last-child { border: none; } - -.side-drawer a { - display: block; - padding: 0.8em 0.85em; - - &:hover { - background-color: $fallback--lightBg; - background-color: var(--lightBg, $fallback--lightBg); - } - - &.router-link-active { - font-weight: bolder; - - &:hover { - text-decoration: underline; - } - } -} diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue index eeb76c35..37d628fa 100644 --- a/src/components/user_finder/user_finder.vue +++ b/src/components/user_finder/user_finder.vue @@ -1,14 +1,16 @@ -- cgit v1.2.3-70-g09d2 From 85c058e95c04245dacf3ffb6b45a6eceb3253e7b Mon Sep 17 00:00:00 2001 From: shpuld Date: Fri, 28 Dec 2018 21:39:54 +0200 Subject: 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 ++--- src/components/notifications/notifications.vue | 2 +- src/components/side_drawer/side_drawer.js | 28 +++--- src/components/side_drawer/side_drawer.vue | 103 ++++++++++++--------- 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 ++++ test/unit/specs/components/user_profile.spec.js | 3 +- .../notification_utils/notification_utils.spec.js | 88 ++++++++++++++++++ 25 files changed, 310 insertions(+), 135 deletions(-) create mode 100644 src/services/notification_utils/notification_utils.js create mode 100644 test/unit/specs/services/notification_utils/notification_utils.spec.js (limited to 'src/App.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 @@