From bd2ed617a740ef3b37dedf3bed608e433dc0ec09 Mon Sep 17 00:00:00 2001 From: shpuld Date: Sat, 15 Dec 2018 19:13:01 +0200 Subject: [PATCH 1/7] Remove panel switcher, add rudimentary drawer --- src/App.js | 18 +++- src/App.vue | 26 +++-- src/components/side_drawer/side_drawer.js | 13 +++ src/components/side_drawer/side_drawer.vue | 116 +++++++++++++++++++++ 4 files changed, 161 insertions(+), 12 deletions(-) create mode 100644 src/components/side_drawer/side_drawer.js create mode 100644 src/components/side_drawer/side_drawer.vue diff --git a/src/App.js b/src/App.js index 4f3fd798e7..e4ffb85a32 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 } } } diff --git a/src/App.vue b/src/App.vue index a3a7ecf6b5..fddc63da76 100644 --- a/src/App.vue +++ b/src/App.vue @@ -13,27 +13,33 @@ {{sitename}}
+
-
-
- - -
-
+ + + +
+ + +
- - - + + + - +
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js new file mode 100644 index 0000000000..bf9df75304 --- /dev/null +++ b/src/components/side_drawer/side_drawer.js @@ -0,0 +1,13 @@ +const SideDrawer = { + props: [ 'activatePanel', 'closed' ], + computed: { + currentUser () { + return this.$store.state.users.currentUser + }, + chat () { + return this.$store.state.chat.channel + } + } +} + +export default SideDrawer diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue new file mode 100644 index 0000000000..8e2629b8b5 --- /dev/null +++ b/src/components/side_drawer/side_drawer.vue @@ -0,0 +1,116 @@ + + + + + From 4836c8ac74569668001f1adc39fe84377ddb7dba Mon Sep 17 00:00:00 2001 From: shpuld Date: Sat, 22 Dec 2018 17:32:07 +0200 Subject: [PATCH 2/7] Add some more routes to side drawer --- src/App.vue | 8 +++++- src/components/side_drawer/side_drawer.js | 6 ++++- src/components/side_drawer/side_drawer.vue | 30 ++++++++++++++------- src/components/user_profile/user_profile.js | 1 - src/i18n/en.json | 1 + 5 files changed, 34 insertions(+), 12 deletions(-) diff --git a/src/App.vue b/src/App.vue index 2effc983a5..55cac52c3f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -24,7 +24,13 @@
- + +
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js index 6541077b20..2064dfa504 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 1593ae65de..99ea3dd38f 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 eeb76c357b..37d628fa70 100644 --- a/src/components/user_finder/user_finder.vue +++ b/src/components/user_finder/user_finder.vue @@ -1,14 +1,16 @@ From 47520818180eb9f0eb8d98fbed716ce8c72a46c1 Mon Sep 17 00:00:00 2001 From: shpuld Date: Sun, 23 Dec 2018 20:14:40 +0200 Subject: [PATCH 4/7] Add closed-check for touchmove --- src/components/side_drawer/side_drawer.js | 2 +- src/components/side_drawer/side_drawer.vue | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js index 2064dfa504..96297bb4d9 100644 --- a/src/components/side_drawer/side_drawer.js +++ b/src/components/side_drawer/side_drawer.js @@ -33,7 +33,7 @@ const SideDrawer = { }, touchMove (e) { const delta = deltaX(this.touchX, touchEventX(e)) - if (delta < -30) { + if (delta < -30 && !this.closed) { this.toggleDrawer() } } diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index 99ea3dd38f..b540e5d800 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -1,6 +1,10 @@ diff --git a/src/boot/routes.js b/src/boot/routes.js index 8ea8cc7fb4..4de0e104d8 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 e175e90c98..d723864180 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 1b9c63ff4a..bf65efc5a8 100644 --- a/src/components/chat_panel/chat_panel.vue +++ b/src/components/chat_panel/chat_panel.vue @@ -1,10 +1,10 @@