From 961099d34a3852d1019a00d390ad638fe45118e4 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson <shp@cock.li> Date: Thu, 2 Jul 2020 18:03:02 +0300 Subject: [PATCH 01/11] basic version done, needs cleanup from nav panel styles --- src/components/nav_panel/nav_panel.vue | 20 ++---- src/components/timeline/timeline.js | 10 +-- src/components/timeline/timeline.vue | 4 +- src/components/timeline_menu/timeline_menu.js | 30 +++++++++ .../timeline_menu/timeline_menu.vue | 62 +++++++++++++++++++ 5 files changed, 104 insertions(+), 22 deletions(-) create mode 100644 src/components/timeline_menu/timeline_menu.js create mode 100644 src/components/timeline_menu/timeline_menu.vue diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index 8cd04dc7..ed70f019 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -7,14 +7,14 @@ <i class="button-icon icon-home-2" /> {{ $t("nav.timeline") }} </router-link> </li> - <li v-if="currentUser"> - <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"> - <i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }} + <li v-else-if="!privateMode"> + <router-link :to="{ name: 'public-timeline' }"> + <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }} </router-link> </li> <li v-if="currentUser"> - <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }"> - <i class="button-icon icon-mail-alt" /> {{ $t("nav.dms") }} + <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"> + <i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }} </router-link> </li> <li v-if="currentUser && currentUser.locked"> @@ -28,16 +28,6 @@ </span> </router-link> </li> - <li v-if="currentUser || !privateMode"> - <router-link :to="{ name: 'public-timeline' }"> - <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }} - </router-link> - </li> - <li v-if="federating && (currentUser || !privateMode)"> - <router-link :to="{ name: 'public-external-timeline' }"> - <i class="button-icon icon-globe" /> {{ $t("nav.twkn") }} - </router-link> - </li> <li> <router-link :to="{ name: 'about' }"> <i class="button-icon icon-info-circled" /> {{ $t("nav.about") }} diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index d6519f4a..3a7a4268 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -1,6 +1,7 @@ import Status from '../status/status.vue' import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js' import Conversation from '../conversation/conversation.vue' +import TimelineMenu from '../timeline_menu/timeline_menu.vue' import { throttle, keyBy } from 'lodash' export const getExcludedStatusIdsByPinning = (statuses, pinnedStatusIds) => { @@ -35,6 +36,11 @@ const Timeline = { bottomedOut: false } }, + components: { + Status, + Conversation, + TimelineMenu + }, computed: { timelineError () { return this.$store.state.statuses.error @@ -74,10 +80,6 @@ const Timeline = { return keyBy(this.pinnedStatusIds) } }, - components: { - Status, - Conversation - }, created () { const store = this.$store const credentials = store.state.users.currentUser.credentials diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 111c0976..f8baaf19 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -1,9 +1,7 @@ <template> <div :class="classes.root"> <div :class="classes.header"> - <div class="title"> - {{ title }} - </div> + <TimelineMenu /> <div v-if="timelineError" class="loadmore-error alert error" diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js new file mode 100644 index 00000000..912dd79a --- /dev/null +++ b/src/components/timeline_menu/timeline_menu.js @@ -0,0 +1,30 @@ +import Popover from '../popover/popover.vue' +import { mapState } from 'vuex' + +const TimelineMenu = { + components: { + Popover + }, + created () { + if (this.currentUser && this.currentUser.locked) { + this.$store.dispatch('startFetchingFollowRequests') + } + }, + computed: { + ...mapState({ + currentUser: state => state.users.currentUser, + privateMode: state => state.instance.private, + federating: state => state.instance.federating + }), + timelineNamesForRoute () { + return { + 'friends': this.$t('nav.timeline'), + 'dms': this.$t('nav.dms'), + 'public-timeline': this.$t('nav.public_tl'), + 'public-external-timeline': this.$t('nav.twkn') + } + } + } +} + +export default TimelineMenu diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue new file mode 100644 index 00000000..dfdf7180 --- /dev/null +++ b/src/components/timeline_menu/timeline_menu.vue @@ -0,0 +1,62 @@ +<template> + <Popover + trigger="click" + class="timeline-menu" + popover-class="nav-panel timeline-menu-popover" + > + <div slot="content"> + <ul> + <li v-if="currentUser"> + <router-link :to="{ name: 'friends' }"> + <i class="button-icon icon-home-2" /> {{ $t("nav.timeline") }} + </router-link> + </li> + <li v-if="currentUser"> + <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }"> + <i class="button-icon icon-mail-alt" /> {{ $t("nav.dms") }} + </router-link> + </li> + <li v-if="currentUser || !privateMode"> + <router-link :to="{ name: 'public-timeline' }"> + <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }} + </router-link> + </li> + <li v-if="federating && (currentUser || !privateMode)"> + <router-link :to="{ name: 'public-external-timeline' }"> + <i class="button-icon icon-globe" /> {{ $t("nav.twkn") }} + </router-link> + </li> + </ul> + </div> + <div + slot="trigger" + class="title timeline-menu-title" + > + {{ timelineNamesForRoute[$route.name] }} + <i class="icon-down-open" /> + </div> + </Popover> +</template> + +<script src="./timeline_menu.js" ></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.timeline-menu { + flex-grow: 1; + .timeline-menu-popover { + width: 20rem; + font-size: 1rem; + margin-left: -0.6em; + margin-top: 0.6em; + } + + .timeline-menu-title { + flex-grow: 0; + width: 20rem; + margin: 0; + } +} + +</style> From 21d1f557f64cceda54755e2817d4799f1dbbea4f Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson <shp@cock.li> Date: Fri, 3 Jul 2020 12:56:31 +0300 Subject: [PATCH 02/11] change styles for the dropdown, make things work nicely on mobile --- src/App.vue | 2 +- src/components/nav_panel/nav_panel.js | 26 +++- src/components/nav_panel/nav_panel.vue | 5 +- src/components/popover/popover.js | 6 +- src/components/popover/popover.vue | 5 +- src/components/side_drawer/side_drawer.vue | 53 +++---- .../status_popover/status_popover.vue | 2 +- src/components/timeline/timeline.vue | 11 ++ src/components/timeline_menu/timeline_menu.js | 14 ++ .../timeline_menu/timeline_menu.vue | 140 ++++++++++++++++-- src/i18n/de.json | 2 +- src/i18n/en.json | 2 +- src/i18n/fi.json | 2 +- 13 files changed, 204 insertions(+), 66 deletions(-) diff --git a/src/App.vue b/src/App.vue index 7b9ad3dc..cad25ba1 100644 --- a/src/App.vue +++ b/src/App.vue @@ -112,7 +112,7 @@ {{ $t("login.hint") }} </router-link> </div> - <transition name="fade"> + <transition> <router-view /> </transition> </div> diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js index 8f7edb7f..eda01d35 100644 --- a/src/components/nav_panel/nav_panel.js +++ b/src/components/nav_panel/nav_panel.js @@ -1,18 +1,30 @@ import { mapState } from 'vuex' +const timelineRoutes = [ + 'friends', + 'dms', + 'public-timeline', + 'public-external-timeline' +] + const NavPanel = { created () { if (this.currentUser && this.currentUser.locked) { this.$store.dispatch('startFetchingFollowRequests') } }, - computed: mapState({ - currentUser: state => state.users.currentUser, - chat: state => state.chat.channel, - followRequestCount: state => state.api.followRequests.length, - privateMode: state => state.instance.private, - federating: state => state.instance.federating - }) + computed: { + onTimelineRoute () { + return timelineRoutes.includes(this.$route.name) + }, + ...mapState({ + currentUser: state => state.users.currentUser, + chat: state => state.chat.channel, + followRequestCount: state => state.api.followRequests.length, + privateMode: state => state.instance.private, + federating: state => state.instance.federating + }) + } } export default NavPanel diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index ed70f019..1622eafa 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -3,7 +3,10 @@ <div class="panel panel-default"> <ul> <li v-if="currentUser"> - <router-link :to="{ name: 'friends' }"> + <router-link + :to="{ name: 'friends' }" + :class="onTimelineRoute && 'router-link-active'" + > <i class="button-icon icon-home-2" /> {{ $t("nav.timeline") }} </router-link> </li> diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js index a40a9195..695f73b9 100644 --- a/src/components/popover/popover.js +++ b/src/components/popover/popover.js @@ -18,7 +18,9 @@ const Popover = { // Takes a x/y object and tells how many pixels to offset from // anchor point on either axis offset: Object, - // Additional styles you may want for the popover container + // Replaces the classes you may want for the popover container. + // Use 'popover-default' in addition to get the default popover + // styles with your custom class. popoverClass: String }, data () { @@ -106,7 +108,7 @@ const Popover = { // single translate or translate3d resulted in blurry text. this.styles = { opacity: 1, - transform: `translateX(${Math.floor(translateX)}px) translateY(${Math.floor(translateY)}px)` + transform: `translateX(${Math.round(translateX)}px) translateY(${Math.round(translateY)}px)` } }, showPopover () { diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue index a271cb1b..5c99c509 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -14,7 +14,7 @@ ref="content" :style="styles" class="popover" - :class="popoverClass" + :class="popoverClass || 'popover-default'" > <slot name="content" @@ -34,6 +34,9 @@ z-index: 8; position: absolute; min-width: 0; +} + +.popover-default { transition: opacity 0.3s; box-shadow: 1px 1px 4px rgba(0,0,0,.6); diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index f253742d..a941143c 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -39,24 +39,6 @@ <i class="button-icon icon-login" /> {{ $t("login.login") }} </router-link> </li> - <li - v-if="currentUser" - @click="toggleDrawer" - > - <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }"> - <i class="button-icon icon-mail-alt" /> {{ $t("nav.dms") }} - </router-link> - </li> - <li - v-if="currentUser" - @click="toggleDrawer" - > - <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"> - <i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }} - </router-link> - </li> - </ul> - <ul> <li v-if="currentUser" @click="toggleDrawer" @@ -66,7 +48,22 @@ </router-link> </li> <li - v-if="currentUser && currentUser.locked" + v-else + @click="toggleDrawer" + > + <router-link :to="{ name: 'public-timeline' }"> + <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }} + </router-link> + </li> + </ul> + <ul v-if="currentUser"> + <li @click="toggleDrawer"> + <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"> + <i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }} + </router-link> + </li> + <li + v-if="currentUser.locked" @click="toggleDrawer" > <router-link to="/friend-requests"> @@ -80,23 +77,7 @@ </router-link> </li> <li - v-if="currentUser || !privateMode" - @click="toggleDrawer" - > - <router-link to="/main/public"> - <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }} - </router-link> - </li> - <li - v-if="federating && (currentUser || !privateMode)" - @click="toggleDrawer" - > - <router-link to="/main/all"> - <i class="button-icon icon-globe" /> {{ $t("nav.twkn") }} - </router-link> - </li> - <li - v-if="currentUser && chat" + v-if="chat" @click="toggleDrawer" > <router-link :to="{ name: 'chat' }"> diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue index f5948207..2a8503e8 100644 --- a/src/components/status_popover/status_popover.vue +++ b/src/components/status_popover/status_popover.vue @@ -1,7 +1,7 @@ <template> <Popover trigger="hover" - popover-class="status-popover" + popover-class="popover-default status-popover" :bound-to="{ x: 'container' }" @show="enter" > diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index f8baaf19..caac5538 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -104,4 +104,15 @@ opacity: 1; } } + +.timeline-heading { + max-width: 100%; + flex-wrap: nowrap; + .loadmore-button { + flex-shrink: 0; + } + .loadmore-text { + flex-shrink: 0; + } +} </style> diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js index 912dd79a..d35b7789 100644 --- a/src/components/timeline_menu/timeline_menu.js +++ b/src/components/timeline_menu/timeline_menu.js @@ -5,11 +5,25 @@ const TimelineMenu = { components: { Popover }, + data () { + return { + isOpen: false + } + }, created () { if (this.currentUser && this.currentUser.locked) { this.$store.dispatch('startFetchingFollowRequests') } }, + methods: { + openMenu () { + // Tried using $nextTick, but the animation wouldn't + // play, I assume it played too quickly + setTimeout(() => { + this.isOpen = true + }, 1) + } + }, computed: { ...mapState({ currentUser: state => state.users.currentUser, diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue index dfdf7180..9cb40262 100644 --- a/src/components/timeline_menu/timeline_menu.vue +++ b/src/components/timeline_menu/timeline_menu.vue @@ -2,28 +2,36 @@ <Popover trigger="click" class="timeline-menu" - popover-class="nav-panel timeline-menu-popover" + :class="{ 'open': isOpen }" + :margin="{ left: -15, right: -200 }" + :bound-to="{ x: 'container' }" + popover-class="timeline-menu-popover-wrap" + @show="openMenu" + @close="() => isOpen = false" > - <div slot="content"> + <div + slot="content" + class="timeline-menu-popover panel panel-default" + > <ul> <li v-if="currentUser"> <router-link :to="{ name: 'friends' }"> - <i class="button-icon icon-home-2" /> {{ $t("nav.timeline") }} + <i class="button-icon icon-home-2" />{{ $t("nav.timeline") }} </router-link> </li> <li v-if="currentUser"> <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }"> - <i class="button-icon icon-mail-alt" /> {{ $t("nav.dms") }} + <i class="button-icon icon-mail-alt" />{{ $t("nav.dms") }} </router-link> </li> <li v-if="currentUser || !privateMode"> <router-link :to="{ name: 'public-timeline' }"> - <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }} + <i class="button-icon icon-users" />{{ $t("nav.public_tl") }} </router-link> </li> <li v-if="federating && (currentUser || !privateMode)"> <router-link :to="{ name: 'public-external-timeline' }"> - <i class="button-icon icon-globe" /> {{ $t("nav.twkn") }} + <i class="button-icon icon-globe" />{{ $t("nav.twkn") }} </router-link> </li> </ul> @@ -32,7 +40,7 @@ slot="trigger" class="title timeline-menu-title" > - {{ timelineNamesForRoute[$route.name] }} + <span>{{ timelineNamesForRoute[$route.name] }}</span> <i class="icon-down-open" /> </div> </Popover> @@ -44,18 +52,122 @@ @import '../../_variables.scss'; .timeline-menu { - flex-grow: 1; - .timeline-menu-popover { - width: 20rem; - font-size: 1rem; - margin-left: -0.6em; + flex-shrink: 1; + margin-right: auto; + min-width: 0; + width: 24rem; + .timeline-menu-popover-wrap { + overflow: hidden; margin-top: 0.6em; + padding: 0 15px 15px 15px; + } + .timeline-menu-popover { + width: 24rem; + max-width: 100vw; + margin: 0; + font-size: 1rem; + border-top-right-radius: 0; + border-top-left-radius: 0; + transform: translateY(-100%); + transition: transform 100ms; + } + .panel::after { + border-top-right-radius: 0; + border-top-left-radius: 0; + } + &.open .timeline-menu-popover { + transform: translateY(0); } .timeline-menu-title { - flex-grow: 0; - width: 20rem; margin: 0; + cursor: pointer; + display: flex; + user-select: none; + width: 100%; + + span { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + i { + margin-left: 0.6em; + flex-shrink: 0; + font-size: 1rem; + transition: transform 100ms; + } + } + + &.open .timeline-menu-title i { + color: $fallback--text; + color: var(--panelText, $fallback--text); + transform: rotate(180deg); + } + + .panel { + box-shadow: var(--popoverShadow); + } + + ul { + list-style: none; + margin: 0; + padding: 0; + } + + li { + border-bottom: 1px solid; + border-color: $fallback--border; + border-color: var(--border, $fallback--border); + padding: 0; + + &: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); + } + + &:last-child { + border: none; + } + + i { + margin: 0 0.5em; + } + } + + a { + display: block; + padding: 0.6em 0; + + &:hover { + background-color: $fallback--lightBg; + background-color: var(--selectedMenu, $fallback--lightBg); + color: $fallback--link; + color: var(--selectedMenuText, $fallback--link); + --faint: var(--selectedMenuFaintText, $fallback--faint); + --faintLink: var(--selectedMenuFaintLink, $fallback--faint); + --lightText: var(--selectedMenuLightText, $fallback--lightText); + --icon: var(--selectedMenuIcon, $fallback--icon); + } + + &.router-link-active { + font-weight: bolder; + background-color: $fallback--lightBg; + background-color: var(--selectedMenu, $fallback--lightBg); + color: $fallback--text; + color: var(--selectedMenuText, $fallback--text); + --faint: var(--selectedMenuFaintText, $fallback--faint); + --faintLink: var(--selectedMenuFaintLink, $fallback--faint); + --lightText: var(--selectedMenuLightText, $fallback--lightText); + --icon: var(--selectedMenuIcon, $fallback--icon); + + &:hover { + text-decoration: underline; + } + } } } diff --git a/src/i18n/de.json b/src/i18n/de.json index a44e58cb..1258dd9f 100644 --- a/src/i18n/de.json +++ b/src/i18n/de.json @@ -58,7 +58,7 @@ "dms": "Direktnachrichten", "public_tl": "Öffentliche Zeitleiste", "timeline": "Zeitleiste", - "twkn": "Das gesamte bekannte Netzwerk", + "twkn": "Bekannte Netzwerk", "user_search": "Benutzersuche", "search": "Suche", "preferences": "Voreinstellungen", diff --git a/src/i18n/en.json b/src/i18n/en.json index 59f69e57..bfe7b40d 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -119,7 +119,7 @@ "dms": "Direct Messages", "public_tl": "Public Timeline", "timeline": "Timeline", - "twkn": "The Whole Known Network", + "twkn": "Known Fediverse", "user_search": "User Search", "search": "Search", "who_to_follow": "Who to follow", diff --git a/src/i18n/fi.json b/src/i18n/fi.json index 99a1b53a..f8652d19 100644 --- a/src/i18n/fi.json +++ b/src/i18n/fi.json @@ -58,7 +58,7 @@ "dms": "Yksityisviestit", "public_tl": "Julkinen Aikajana", "timeline": "Aikajana", - "twkn": "Koko Tunnettu Verkosto", + "twkn": "Tunnettu Verkosto", "user_search": "Käyttäjähaku", "who_to_follow": "Seurausehdotukset", "preferences": "Asetukset", From ebe885953c023e96dd8574ce7667b84884bab3cc Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson <shp@cock.li> Date: Fri, 3 Jul 2020 12:59:30 +0300 Subject: [PATCH 03/11] change more opinionated translation --- src/i18n/en.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/i18n/en.json b/src/i18n/en.json index bfe7b40d..4329b8f8 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -119,7 +119,7 @@ "dms": "Direct Messages", "public_tl": "Public Timeline", "timeline": "Timeline", - "twkn": "Known Fediverse", + "twkn": "Known Network", "user_search": "User Search", "search": "Search", "who_to_follow": "Who to follow", From 77bb31b474f16aa2bbda66e2aa73cf0d20eb934e Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson <shp@cock.li> Date: Fri, 3 Jul 2020 13:26:11 +0300 Subject: [PATCH 04/11] remove extra computed from nav panel --- src/components/nav_panel/nav_panel.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js index eda01d35..f09f43a0 100644 --- a/src/components/nav_panel/nav_panel.js +++ b/src/components/nav_panel/nav_panel.js @@ -19,7 +19,6 @@ const NavPanel = { }, ...mapState({ currentUser: state => state.users.currentUser, - chat: state => state.chat.channel, followRequestCount: state => state.api.followRequests.length, privateMode: state => state.instance.private, federating: state => state.instance.federating From cde6acdbbd3a363832cfaf192b211c2576e5cc10 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson <shp@cock.li> Date: Tue, 7 Jul 2020 18:20:37 +0300 Subject: [PATCH 05/11] update navigation, rename timeline link in nav panel to timelines --- src/components/nav_panel/nav_panel.js | 3 +++ src/components/nav_panel/nav_panel.vue | 9 ++------- src/components/side_drawer/side_drawer.js | 3 +++ src/components/side_drawer/side_drawer.vue | 19 +++---------------- 4 files changed, 11 insertions(+), 23 deletions(-) diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js index 42637a82..d9e87a1b 100644 --- a/src/components/nav_panel/nav_panel.js +++ b/src/components/nav_panel/nav_panel.js @@ -11,6 +11,9 @@ const NavPanel = { onTimelineRoute () { return !!timelineNames()[this.$route.name] }, + timelinesRoute () { + return this.currentUser ? 'friends' : 'public-timeline' + }, ...mapState({ currentUser: state => state.users.currentUser, followRequestCount: state => state.api.followRequests.length, diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index d0e626e6..dd6a433b 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -2,19 +2,14 @@ <div class="nav-panel"> <div class="panel panel-default"> <ul> - <li v-if="currentUser"> + <li v-if="currentUser || !privateMode"> <router-link - :to="{ name: 'friends' }" + :to="{ name: timelinesRoute }" :class="onTimelineRoute && 'router-link-active'" > <i class="button-icon icon-home-2" /> {{ $t("nav.timelines") }} </router-link> </li> - <li v-else-if="!privateMode"> - <router-link :to="{ name: 'public-timeline' }"> - <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }} - </router-link> - </li> <li v-if="currentUser"> <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"> <i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }} diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js index d1f044f6..b955729c 100644 --- a/src/components/side_drawer/side_drawer.js +++ b/src/components/side_drawer/side_drawer.js @@ -47,6 +47,9 @@ const SideDrawer = { }, federating () { return this.$store.state.instance.federating + }, + timelinesRoute () { + return this.currentUser ? 'friends' : 'public-timeline' } }, methods: { diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index 6a0a86b4..5541b2cf 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -40,19 +40,11 @@ </router-link> </li> <li - v-if="currentUser" + v-if="currentUser || !privateMode" @click="toggleDrawer" > - <router-link :to="{ name: 'friends' }"> - <i class="button-icon icon-home-2" /> {{ $t("nav.timeline") }} - </router-link> - </li> - <li - v-else - @click="toggleDrawer" - > - <router-link :to="{ name: 'public-timeline' }"> - <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }} + <router-link :to="{ name: timelinesRoute }"> + <i class="button-icon icon-home-2" /> {{ $t("nav.timelines") }} </router-link> </li> </ul> @@ -62,11 +54,6 @@ <i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }} </router-link> </li> - <li @click="toggleDrawer"> - <router-link :to="{ name: 'bookmarks'}"> - <i class="button-icon icon-bookmark" /> {{ $t("nav.bookmarks") }} - </router-link> - </li> <li v-if="currentUser.locked" @click="toggleDrawer" From 5186929efa0212c272f963e43e0167b12a1cddbf Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson <shp@cock.li> Date: Wed, 8 Jul 2020 10:42:40 +0300 Subject: [PATCH 06/11] add hack to not overlap menu with timeline header --- src/components/timeline_menu/timeline_menu.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue index e30bfe34..9a3719f7 100644 --- a/src/components/timeline_menu/timeline_menu.vue +++ b/src/components/timeline_menu/timeline_menu.vue @@ -63,7 +63,11 @@ width: 24rem; .timeline-menu-popover-wrap { overflow: hidden; - margin-top: 0.6em; + // Hack: timeline heading padding is 0.6em with 14px font font-size + // in theory 0.6rem should match that exactly, but in reality it doesn't + // for seemingly rounding errors in both major browsers. This looks + // correct in firefox in chromium. + margin-top: calc(0.6rem + 1.5px); padding: 0 15px 15px 15px; } .timeline-menu-popover { From 78ec84477e978a654ecfd482157dbf04a69f32e2 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson <shp@cock.li> Date: Thu, 9 Jul 2020 12:49:16 +0300 Subject: [PATCH 07/11] fix pixel offset hack in panel heading --- src/components/timeline/timeline.vue | 1 + src/components/timeline_menu/timeline_menu.vue | 7 ++----- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index caac5538..c637dbd4 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -113,6 +113,7 @@ } .loadmore-text { flex-shrink: 0; + line-height: 1em; } } </style> diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue index 9a3719f7..add8a6eb 100644 --- a/src/components/timeline_menu/timeline_menu.vue +++ b/src/components/timeline_menu/timeline_menu.vue @@ -63,11 +63,8 @@ width: 24rem; .timeline-menu-popover-wrap { overflow: hidden; - // Hack: timeline heading padding is 0.6em with 14px font font-size - // in theory 0.6rem should match that exactly, but in reality it doesn't - // for seemingly rounding errors in both major browsers. This looks - // correct in firefox in chromium. - margin-top: calc(0.6rem + 1.5px); + // Match panel heading padding to line up menu with bottom of heading + margin-top: 0.6rem; padding: 0 15px 15px 15px; } .timeline-menu-popover { From 3598360ce55bf7701716a9974599f901ddb66bf7 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson <shp@cock.li> Date: Tue, 14 Jul 2020 11:54:03 +0300 Subject: [PATCH 08/11] fix missed conflict --- src/components/side_drawer/side_drawer.vue | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index 4a4e7610..0587ee02 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -86,27 +86,11 @@ </router-link> </li> <li -<<<<<<< HEAD v-if="chat" @click="toggleDrawer" > <router-link :to="{ name: 'chat' }"> <i class="button-icon icon-chat" /> {{ $t("nav.chat") }} -======= - v-if="currentUser || !privateMode" - @click="toggleDrawer" - > - <router-link to="/main/public"> - <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }} - </router-link> - </li> - <li - v-if="federating && (currentUser || !privateMode)" - @click="toggleDrawer" - > - <router-link to="/main/all"> - <i class="button-icon icon-globe" /> {{ $t("nav.twkn") }} ->>>>>>> develop </router-link> </li> </ul> From fdbacba36a99b1f2ef200b8194a1964d9b87f9e1 Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson <shp@cock.li> Date: Thu, 23 Jul 2020 15:09:32 +0300 Subject: [PATCH 09/11] resume last lasttime instead of always friends/public --- src/components/nav_panel/nav_panel.js | 3 +++ src/components/side_drawer/side_drawer.js | 3 +++ src/components/timeline_menu/timeline_menu.js | 1 + src/modules/interface.js | 9 ++++++++- src/modules/users.js | 1 + 5 files changed, 16 insertions(+), 1 deletion(-) diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js index 6ed7fc33..623dfaec 100644 --- a/src/components/nav_panel/nav_panel.js +++ b/src/components/nav_panel/nav_panel.js @@ -12,6 +12,9 @@ const NavPanel = { return !!timelineNames()[this.$route.name] }, timelinesRoute () { + if (this.$store.state.interface.lastTimeline) { + return this.$store.state.interface.lastTimeline + } return this.currentUser ? 'friends' : 'public-timeline' }, ...mapState({ diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js index e13c66db..281052e5 100644 --- a/src/components/side_drawer/side_drawer.js +++ b/src/components/side_drawer/side_drawer.js @@ -50,6 +50,9 @@ const SideDrawer = { return this.$store.state.instance.federating }, timelinesRoute () { + if (this.$store.state.interface.lastTimeline) { + return this.$store.state.interface.lastTimeline + } return this.currentUser ? 'friends' : 'public-timeline' }, ...mapState({ diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js index 02c1318d..0afeb8b4 100644 --- a/src/components/timeline_menu/timeline_menu.js +++ b/src/components/timeline_menu/timeline_menu.js @@ -26,6 +26,7 @@ const TimelineMenu = { if (this.currentUser && this.currentUser.locked) { this.$store.dispatch('startFetchingFollowRequests') } + this.$store.dispatch('setLastTimeline', this.$route.name) }, methods: { openMenu () { diff --git a/src/modules/interface.js b/src/modules/interface.js index ec08ac0a..748d3025 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -16,7 +16,8 @@ const defaultState = { }, mobileLayout: false, globalNotices: [], - layoutHeight: 0 + layoutHeight: 0, + lastTimeline: null } const interfaceMod = { @@ -69,6 +70,9 @@ const interfaceMod = { }, setLayoutHeight (state, value) { state.layoutHeight = value + }, + setLastTimeline (state, value) { + state.lastTimeline = value } }, actions: { @@ -117,6 +121,9 @@ const interfaceMod = { }, setLayoutHeight ({ commit }, value) { commit('setLayoutHeight', value) + }, + setLastTimeline ({ commit }, value) { + commit('setLastTimeline', value) } } } diff --git a/src/modules/users.js b/src/modules/users.js index 16c1e566..9245db5c 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -499,6 +499,7 @@ const users = { store.commit('clearNotifications') store.commit('resetStatuses') store.dispatch('resetChats') + store.dispatch('setLastTimeline', 'public-timeline') }) }, loginUser (store, accessToken) { From e86c5ea1fa7dcbae582707430a821d2197576f7b Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson <shp@cock.li> Date: Tue, 28 Jul 2020 09:40:04 +0300 Subject: [PATCH 10/11] fix non-timeline routes breaking current/previous timeline --- src/components/timeline/timeline.vue | 2 +- src/components/timeline_menu/timeline_menu.js | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index c637dbd4..9eed10f6 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -1,7 +1,7 @@ <template> <div :class="classes.root"> <div :class="classes.header"> - <TimelineMenu /> + <TimelineMenu v-if="!embedded" /> <div v-if="timelineError" class="loadmore-error alert error" diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js index 0afeb8b4..fcc7b4ef 100644 --- a/src/components/timeline_menu/timeline_menu.js +++ b/src/components/timeline_menu/timeline_menu.js @@ -26,7 +26,9 @@ const TimelineMenu = { if (this.currentUser && this.currentUser.locked) { this.$store.dispatch('startFetchingFollowRequests') } - this.$store.dispatch('setLastTimeline', this.$route.name) + if (timelineNames().includes(this.$route.name)) { + this.$store.dispatch('setLastTimeline', this.$route.name) + } }, methods: { openMenu () { From e57562959f5e71fd6e3bf180e2856d504ffb1fcf Mon Sep 17 00:00:00 2001 From: Shpuld Shpuldson <shp@cock.li> Date: Tue, 28 Jul 2020 09:41:00 +0300 Subject: [PATCH 11/11] fix oops --- src/components/timeline_menu/timeline_menu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js index fcc7b4ef..c0d75c54 100644 --- a/src/components/timeline_menu/timeline_menu.js +++ b/src/components/timeline_menu/timeline_menu.js @@ -26,7 +26,7 @@ const TimelineMenu = { if (this.currentUser && this.currentUser.locked) { this.$store.dispatch('startFetchingFollowRequests') } - if (timelineNames().includes(this.$route.name)) { + if (timelineNames()[this.$route.name]) { this.$store.dispatch('setLastTimeline', this.$route.name) } },