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)
}
},