logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe
commit: 3e6e6096bfd1dad3283396c086e45b09523faaee
parent 9a10ad38260cc4d1ef93a6988ef2cb0941080156
Author: lain <lain@soykaf.club>
Date:   Thu,  6 Aug 2020 10:17:44 +0000

Merge branch 'feat/separate-timeline-navigation-from-navpanel' into 'develop'

Separate timeline navigation from navpanel

See merge request pleroma/pleroma-fe!1172

Diffstat:

Msrc/components/nav_panel/nav_panel.js11++++++++++-
Msrc/components/nav_panel/nav_panel.vue29++++++-----------------------
Msrc/components/popover/popover.js6++++--
Msrc/components/popover/popover.vue5++++-
Msrc/components/side_drawer/side_drawer.js6++++++
Msrc/components/side_drawer/side_drawer.vue52+++++++++++++++-------------------------------------
Msrc/components/status_popover/status_popover.vue2+-
Msrc/components/timeline/timeline.js10++++++----
Msrc/components/timeline/timeline.vue16+++++++++++++---
Asrc/components/timeline_menu/timeline_menu.js57+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Asrc/components/timeline_menu/timeline_menu.vue180+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Msrc/i18n/de.json2+-
Msrc/i18n/en.json3++-
Msrc/i18n/fi.json2+-
Msrc/modules/interface.js9++++++++-
Msrc/modules/users.js1+
16 files changed, 315 insertions(+), 76 deletions(-)

diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js @@ -1,3 +1,4 @@ +import { timelineNames } from '../timeline_menu/timeline_menu.js' import { mapState, mapGetters } from 'vuex' const NavPanel = { @@ -7,9 +8,17 @@ const NavPanel = { } }, computed: { + onTimelineRoute () { + 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({ 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, diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue @@ -2,9 +2,12 @@ <div class="nav-panel"> <div class="panel panel-default"> <ul> - <li v-if="currentUser"> - <router-link :to="{ name: 'friends' }"> - <i class="button-icon icon-home-2" /> {{ $t("nav.timeline") }} + <li v-if="currentUser || !privateMode"> + <router-link + :to="{ name: timelinesRoute }" + :class="onTimelineRoute && 'router-link-active'" + > + <i class="button-icon icon-home-2" /> {{ $t("nav.timelines") }} </router-link> </li> <li v-if="currentUser"> @@ -12,16 +15,6 @@ <i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }} </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"> - <router-link :to="{ name: 'bookmarks'}"> - <i class="button-icon icon-bookmark" /> {{ $t("nav.bookmarks") }} - </router-link> - </li> <li v-if="currentUser && pleromaChatMessagesAvailable"> <router-link :to="{ name: 'chats', params: { username: currentUser.screen_name } }"> <div @@ -44,16 +37,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/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 @@ -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.js b/src/components/side_drawer/side_drawer.js @@ -49,6 +49,12 @@ const SideDrawer = { federating () { 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({ pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable }), diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue @@ -40,12 +40,17 @@ </router-link> </li> <li - v-if="currentUser && pleromaChatMessagesAvailable" + v-if="currentUser || !privateMode" @click="toggleDrawer" > - <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }"> - <i class="button-icon icon-mail-alt" /> {{ $t("nav.dms") }} + <router-link :to="{ name: timelinesRoute }"> + <i class="button-icon icon-home-2" /> {{ $t("nav.timelines") }} </router-link> + </li> + <li + v-if="currentUser && pleromaChatMessagesAvailable" + @click="toggleDrawer" + > <router-link :to="{ name: 'chats', params: { username: currentUser.screen_name } }" style="position: relative" @@ -59,34 +64,15 @@ </span> </router-link> </li> - <li - v-if="currentUser" - @click="toggleDrawer" - > + </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> - </ul> - <ul> <li - v-if="currentUser" - @click="toggleDrawer" - > - <router-link :to="{ name: 'friends' }"> - <i class="button-icon icon-home-2" /> {{ $t("nav.timeline") }} - </router-link> - </li> - <li - v-if="currentUser" - @click="toggleDrawer" - > - <router-link :to="{ name: 'bookmarks'}"> - <i class="button-icon icon-bookmark" /> {{ $t("nav.bookmarks") }} - </router-link> - </li> - <li - v-if="currentUser && currentUser.locked" + v-if="currentUser.locked" @click="toggleDrawer" > <router-link to="/friend-requests"> @@ -100,19 +86,11 @@ </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)" + v-if="chat" @click="toggleDrawer" > - <router-link to="/main/all"> - <i class="button-icon icon-globe" /> {{ $t("nav.twkn") }} + <router-link :to="{ name: 'chat' }"> + <i class="button-icon icon-chat" /> {{ $t("nav.chat") }} </router-link> </li> </ul> diff --git 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.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 @@ -1,9 +1,7 @@ <template> <div :class="classes.root"> <div :class="classes.header"> - <div class="title"> - {{ title }} - </div> + <TimelineMenu v-if="!embedded" /> <div v-if="timelineError" class="loadmore-error alert error" @@ -106,4 +104,16 @@ opacity: 1; } } + +.timeline-heading { + max-width: 100%; + flex-wrap: nowrap; + .loadmore-button { + flex-shrink: 0; + } + .loadmore-text { + flex-shrink: 0; + line-height: 1em; + } +} </style> diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js @@ -0,0 +1,57 @@ +import Popover from '../popover/popover.vue' +import { mapState } from 'vuex' + +// Route -> i18n key mapping, exported andnot in the computed +// because nav panel benefits from the same information. +export const timelineNames = () => { + return { + 'friends': 'nav.timeline', + 'bookmarks': 'nav.bookmarks', + 'dms': 'nav.dms', + 'public-timeline': 'nav.public_tl', + 'public-external-timeline': 'nav.twkn' + } +} + +const TimelineMenu = { + components: { + Popover + }, + data () { + return { + isOpen: false + } + }, + created () { + if (this.currentUser && this.currentUser.locked) { + this.$store.dispatch('startFetchingFollowRequests') + } + if (timelineNames()[this.$route.name]) { + this.$store.dispatch('setLastTimeline', this.$route.name) + } + }, + methods: { + openMenu () { + // $nextTick is too fast, animation won't play back but + // instead starts in fully open position. Low values + // like 1-5 work on fast machines but not on mobile, 25 + // seems like a good compromise that plays without significant + // added lag. + setTimeout(() => { + this.isOpen = true + }, 25) + } + }, + computed: { + ...mapState({ + currentUser: state => state.users.currentUser, + privateMode: state => state.instance.private, + federating: state => state.instance.federating + }), + timelineNames () { + return timelineNames() + } + } +} + +export default TimelineMenu diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue @@ -0,0 +1,180 @@ +<template> + <Popover + trigger="click" + class="timeline-menu" + :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" + 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") }} + </router-link> + </li> + <li v-if="currentUser"> + <router-link :to="{ name: 'bookmarks'}"> + <i class="button-icon icon-bookmark" />{{ $t("nav.bookmarks") }} + </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" + > + <span>{{ $t(timelineNames[$route.name]) }}</span> + <i class="icon-down-open" /> + </div> + </Popover> +</template> + +<script src="./timeline_menu.js" ></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.timeline-menu { + flex-shrink: 1; + margin-right: auto; + min-width: 0; + width: 24rem; + .timeline-menu-popover-wrap { + overflow: hidden; + // Match panel heading padding to line up menu with bottom of heading + margin-top: 0.6rem; + 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 { + 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; + } + } + } +} + +</style> diff --git 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 @@ -120,12 +120,13 @@ "dms": "Direct Messages", "public_tl": "Public Timeline", "timeline": "Timeline", - "twkn": "The Whole Known Network", + "twkn": "Known Network", "bookmarks": "Bookmarks", "user_search": "User Search", "search": "Search", "who_to_follow": "Who to follow", "preferences": "Preferences", + "timelines": "Timelines", "chats": "Chats" }, "notifications": { diff --git a/src/i18n/fi.json b/src/i18n/fi.json @@ -63,7 +63,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", diff --git 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 @@ -499,6 +499,7 @@ const users = { store.commit('clearNotifications') store.commit('resetStatuses') store.dispatch('resetChats') + store.dispatch('setLastTimeline', 'public-timeline') }) }, loginUser (store, accessToken) {