From 3a16a59f37b9b637bb4cbc1c3575810a65515cbc Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Thu, 11 Aug 2022 21:56:30 +0300 Subject: navigation refactored, used in mobile nav as well --- src/components/navigation/navigation_entry.js | 32 +++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 src/components/navigation/navigation_entry.js (limited to 'src/components/navigation/navigation_entry.js') diff --git a/src/components/navigation/navigation_entry.js b/src/components/navigation/navigation_entry.js new file mode 100644 index 00000000..09c216ed --- /dev/null +++ b/src/components/navigation/navigation_entry.js @@ -0,0 +1,32 @@ +import { mapState } from 'vuex' +import { library } from '@fortawesome/fontawesome-svg-core' +import { faThumbtack } from '@fortawesome/free-solid-svg-icons' + +library.add(faThumbtack) + +const NavigationEntry = { + props: ['item', 'showPin'], + methods: { + isPinned (value) { + return this.pinnedItems.has(value) + }, + togglePin (value) { + if (this.isPinned(value)) { + this.$store.commit('removeCollectionPreference', { path: 'collections.pinnedNavItems', value }) + } else { + this.$store.commit('addCollectionPreference', { path: 'collections.pinnedNavItems', value }) + } + } + }, + computed: { + getters () { + return this.$store.getters + }, + ...mapState({ + currentUser: state => state.users.currentUser, + pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems) + }) + } +} + +export default NavigationEntry -- cgit v1.2.3-70-g09d2 From 8d3d8fffab0106a8aff5822044a8c3c30bd6e057 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Fri, 12 Aug 2022 01:19:19 +0300 Subject: fixes, clear cache on logout --- src/components/nav_panel/nav_panel.js | 4 ++-- src/components/navigation/navigation_entry.js | 1 + src/components/navigation/navigation_pins.js | 2 +- src/modules/serverSideStorage.js | 17 +++++++++++++---- src/modules/users.js | 1 + .../entity_normalizer/entity_normalizer.service.js | 1 + test/unit/specs/modules/serverSideStorage.spec.js | 2 +- 7 files changed, 20 insertions(+), 8 deletions(-) (limited to 'src/components/navigation/navigation_entry.js') diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js index 0d71a924..26e8440a 100644 --- a/src/components/nav_panel/nav_panel.js +++ b/src/components/nav_panel/nav_panel.js @@ -95,7 +95,7 @@ const NavPanel = { { hasChats: this.pleromaChatMessagesAvailable, isFederating: this.federating, - isPrivate: this.private, + isPrivate: this.privateMode, currentUser: this.currentUser } ) @@ -108,7 +108,7 @@ const NavPanel = { { hasChats: this.pleromaChatMessagesAvailable, isFederating: this.federating, - isPrivate: this.private, + isPrivate: this.privateMode, currentUser: this.currentUser } ) diff --git a/src/components/navigation/navigation_entry.js b/src/components/navigation/navigation_entry.js index 09c216ed..e17e9436 100644 --- a/src/components/navigation/navigation_entry.js +++ b/src/components/navigation/navigation_entry.js @@ -16,6 +16,7 @@ const NavigationEntry = { } else { this.$store.commit('addCollectionPreference', { path: 'collections.pinnedNavItems', value }) } + this.$store.dispatch('pushServerSideStorage') } }, computed: { diff --git a/src/components/navigation/navigation_pins.js b/src/components/navigation/navigation_pins.js index 8a892466..43be4275 100644 --- a/src/components/navigation/navigation_pins.js +++ b/src/components/navigation/navigation_pins.js @@ -64,7 +64,7 @@ const NavPanel = { { hasChats: this.pleromaChatMessagesAvailable, isFederating: this.federating, - isPrivate: this.private, + isPrivate: this.privateMode, currentUser: this.currentUser } ) diff --git a/src/modules/serverSideStorage.js b/src/modules/serverSideStorage.js index d95fbb8a..5581783f 100644 --- a/src/modules/serverSideStorage.js +++ b/src/modules/serverSideStorage.js @@ -51,8 +51,9 @@ export const _moveItemInArray = (array, value, movement) => { return newArray } -const _wrapData = (data) => ({ +const _wrapData = (data, userName) => ({ ...data, + _user: userName, _timestamp: Date.now(), _version: VERSION }) @@ -254,10 +255,17 @@ export const _doMigrations = (cache) => { } export const mutations = { + clearServerSideStorage (state, userData) { + state = { ...cloneDeep(defaultState) } + }, setServerSideStorage (state, userData) { const live = userData.storage state.raw = live let cache = state.cache + if (cache._user !== userData.fqn) { + console.warn('cache belongs to another user! reinitializing local cache!') + cache = null + } cache = _doMigrations(cache) @@ -371,12 +379,12 @@ export const mutations = { ] state.dirty = true }, - updateCache (state) { + updateCache (state, { username }) { state.prefsStorage._journal = _mergeJournal(state.prefsStorage._journal) state.cache = _wrapData({ flagStorage: toRaw(state.flagStorage), prefsStorage: toRaw(state.prefsStorage) - }) + }, username) } } @@ -388,8 +396,9 @@ const serverSideStorage = { actions: { pushServerSideStorage ({ state, rootState, commit }, { force = false } = {}) { const needPush = state.dirty || force + console.log(needPush) if (!needPush) return - commit('updateCache') + commit('updateCache', { username: rootState.users.currentUser.fqn }) const params = { pleroma_settings_store: { 'pleroma-fe': state.cache } } rootState.api.backendInteractor .updateProfile({ params }) diff --git a/src/modules/users.js b/src/modules/users.js index b6fb9746..fe92d697 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -509,6 +509,7 @@ const users = { store.dispatch('setLastTimeline', 'public-timeline') store.dispatch('setLayoutWidth', windowWidth()) store.dispatch('setLayoutHeight', windowHeight()) + store.commit('clearServerSideStorage') }) }, loginUser (store, accessToken) { diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js index e9cbcfe6..b1ad2691 100644 --- a/src/services/entity_normalizer/entity_normalizer.service.js +++ b/src/services/entity_normalizer/entity_normalizer.service.js @@ -48,6 +48,7 @@ export const parseUser = (data) => { if (masto) { output.screen_name = data.acct + output.fqn = data.fqn output.statusnet_profile_url = data.url // There's nothing else to get diff --git a/test/unit/specs/modules/serverSideStorage.spec.js b/test/unit/specs/modules/serverSideStorage.spec.js index edb23e8a..f10e21e6 100644 --- a/test/unit/specs/modules/serverSideStorage.spec.js +++ b/test/unit/specs/modules/serverSideStorage.spec.js @@ -127,7 +127,7 @@ describe('The serverSideStorage module', () => { const state = cloneDeep(defaultState) setPreference(state, { path: 'simple.testing', value: 1 }) setPreference(state, { path: 'simple.testing', value: 2 }) - updateCache(state) + updateCache(state, { username: 'test' }) expect(state.prefsStorage.simple.testing).to.eql(2) expect(state.prefsStorage._journal.length).to.eql(1) expect(state.prefsStorage._journal[0]).to.eql({ -- cgit v1.2.3-70-g09d2 From bd7356376ec9137da674f146a89c17ed62f56bc3 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 23 Aug 2022 15:36:54 +0300 Subject: fix links not being active by default --- src/components/navigation/navigation_entry.js | 19 +++++++++++++++++++ src/components/navigation/navigation_entry.vue | 2 +- src/components/navigation/navigation_pins.js | 22 ++++++++++++++++++++++ src/components/navigation/navigation_pins.vue | 2 +- 4 files changed, 43 insertions(+), 2 deletions(-) (limited to 'src/components/navigation/navigation_entry.js') diff --git a/src/components/navigation/navigation_entry.js b/src/components/navigation/navigation_entry.js index e17e9436..a19ee1b4 100644 --- a/src/components/navigation/navigation_entry.js +++ b/src/components/navigation/navigation_entry.js @@ -4,6 +4,15 @@ import { faThumbtack } from '@fortawesome/free-solid-svg-icons' library.add(faThumbtack) +const USERNAME_ROUTES = new Set([ + 'bookmarks', + 'dms', + 'interactions', + 'notifications', + 'chat', + 'chats' +]) + const NavigationEntry = { props: ['item', 'showPin'], methods: { @@ -20,6 +29,16 @@ const NavigationEntry = { } }, computed: { + routeTo () { + if (this.item.routeObject) { + return this.item.routeObject + } + const route = { name: (this.item.anon || this.currentUser) ? this.item.route : this.item.anonRoute } + if (USERNAME_ROUTES.has(route.name)) { + route.params = { username: this.currentUser.screen_name } + } + return route + }, getters () { return this.$store.getters }, diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue index 64601be6..c0b405f5 100644 --- a/src/components/navigation/navigation_entry.vue +++ b/src/components/navigation/navigation_entry.vue @@ -2,7 +2,7 @@
  • Date: Tue, 23 Aug 2022 22:10:21 +0300 Subject: fix mobile side drawer causing issues --- src/components/navigation/navigation.js | 9 +++++++++ src/components/navigation/navigation_entry.js | 10 +--------- src/components/navigation/navigation_pins.js | 11 +---------- src/components/side_drawer/side_drawer.js | 11 +++++++++-- src/components/side_drawer/side_drawer.vue | 2 +- 5 files changed, 21 insertions(+), 22 deletions(-) (limited to 'src/components/navigation/navigation_entry.js') diff --git a/src/components/navigation/navigation.js b/src/components/navigation/navigation.js index 57db2253..b4bcb05f 100644 --- a/src/components/navigation/navigation.js +++ b/src/components/navigation/navigation.js @@ -1,3 +1,12 @@ +export const USERNAME_ROUTES = new Set([ + 'bookmarks', + 'dms', + 'interactions', + 'notifications', + 'chat', + 'chats' +]) + export const TIMELINES = { home: { route: 'friends', diff --git a/src/components/navigation/navigation_entry.js b/src/components/navigation/navigation_entry.js index a19ee1b4..d8866c12 100644 --- a/src/components/navigation/navigation_entry.js +++ b/src/components/navigation/navigation_entry.js @@ -1,18 +1,10 @@ import { mapState } from 'vuex' +import { USERNAME_ROUTES } from 'src/components/navigation/navigation.js' import { library } from '@fortawesome/fontawesome-svg-core' import { faThumbtack } from '@fortawesome/free-solid-svg-icons' library.add(faThumbtack) -const USERNAME_ROUTES = new Set([ - 'bookmarks', - 'dms', - 'interactions', - 'notifications', - 'chat', - 'chats' -]) - const NavigationEntry = { props: ['item', 'showPin'], methods: { diff --git a/src/components/navigation/navigation_pins.js b/src/components/navigation/navigation_pins.js index f0295c70..57b8d589 100644 --- a/src/components/navigation/navigation_pins.js +++ b/src/components/navigation/navigation_pins.js @@ -1,5 +1,5 @@ import { mapState } from 'vuex' -import { TIMELINES, ROOT_ITEMS } from 'src/components/navigation/navigation.js' +import { TIMELINES, ROOT_ITEMS, USERNAME_ROUTES } from 'src/components/navigation/navigation.js' import { getListEntries, filterNavigation } from 'src/components/navigation/filter.js' import { library } from '@fortawesome/fontawesome-svg-core' @@ -27,15 +27,6 @@ library.add( faList ) -const USERNAME_ROUTES = new Set([ - 'bookmarks', - 'dms', - 'interactions', - 'notifications', - 'chat', - 'chats' -]) - const NavPanel = { props: ['limit'], methods: { diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js index cbfd6b7d..d5dabb72 100644 --- a/src/components/side_drawer/side_drawer.js +++ b/src/components/side_drawer/side_drawer.js @@ -2,6 +2,7 @@ import { mapState, mapGetters } from 'vuex' import UserCard from '../user_card/user_card.vue' import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils' import GestureService from '../../services/gesture_service/gesture_service' +import { USERNAME_ROUTES } from 'src/components/navigation/navigation.js' import { library } from '@fortawesome/fontawesome-svg-core' import { faSignInAlt, @@ -82,10 +83,16 @@ const SideDrawer = { return this.$store.state.instance.federating }, timelinesRoute () { + let name if (this.$store.state.interface.lastTimeline) { - return this.$store.state.interface.lastTimeline + name = this.$store.state.interface.lastTimeline + } + name = this.currentUser ? 'friends' : 'public-timeline' + if (USERNAME_ROUTES.has(name)) { + return { name, params: { username: this.currentUser.screen_name }} + } else { + return { name } } - 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 index 5223fdfa..cbeafdd2 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -47,7 +47,7 @@ v-if="currentUser || !privateMode" @click="toggleDrawer" > - + Date: Tue, 30 Aug 2022 00:15:42 +0300 Subject: refactor navigation-entry and use them in other nav items --- src/App.scss | 9 +- src/components/nav_panel/nav_panel.vue | 184 +++++++++---------------- src/components/navigation/navigation_entry.js | 1 + src/components/navigation/navigation_entry.vue | 74 ++++++---- 4 files changed, 118 insertions(+), 150 deletions(-) (limited to 'src/components/navigation/navigation_entry.js') diff --git a/src/App.scss b/src/App.scss index 9c08c6b2..75b2667c 100644 --- a/src/App.scss +++ b/src/App.scss @@ -132,11 +132,10 @@ i[class*=icon-], .button-unstyled:hover, a:hover { - i[class*=icon-], - .svg-inline--fa, - .iconLetter { - color: $fallback--text; - color: var(--text, $fallback--text); + > i[class*=icon-], + > .svg-inline--fa, + > .iconLetter { + color: var(--text); } } diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index c88b019c..5ee2b701 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -22,95 +22,77 @@ v-if="!collapsed || forceExpand" class="panel-body" > -
  • - -
    -
      - -
    -
    • -
  • - -
    - -
    -
    • + + + +
    + +
    -
  • - -
    • + :show-pin="false" + :item="{ label: editMode ? $t('nav.edit_finish') : $t('nav.edit_pinned'), icon: editMode ? 'check' : 'wrench' }" + @click="toggleEditMode" + /> @@ -161,55 +143,23 @@ border: none; } - .menu-item { - display: block; - box-sizing: border-box; - height: 3.5em; - line-height: 3.5em; - padding: 0 1em; - width: 100%; - color: $fallback--link; - color: var(--link, $fallback--link); - - &: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; - } - } - } - .timelines-chevron { margin-left: 0.8em; margin-right: 0.8em; font-size: 1.1em; } + .menu-item { + .timelines-chevron { + margin-right: 0; + } + } + .timelines-background { padding: 0 0 0 0.6em; background-color: $fallback--lightBg; background-color: var(--selectedMenu, $fallback--lightBg); - border-top: 1px solid; + border-bottom: 1px solid; border-color: $fallback--border; border-color: var(--border, $fallback--border); } @@ -223,9 +173,5 @@ // breaks without a unit --panel-heading-height-padding: 0em; } - - .fa-scale-110 { - margin-right: 0.8em; - } } diff --git a/src/components/navigation/navigation_entry.js b/src/components/navigation/navigation_entry.js index d8866c12..eb0a9cc4 100644 --- a/src/components/navigation/navigation_entry.js +++ b/src/components/navigation/navigation_entry.js @@ -22,6 +22,7 @@ const NavigationEntry = { }, computed: { routeTo () { + if (!this.item.route && !this.item.routeObject) return null if (this.item.routeObject) { return this.item.routeObject } diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue index ecd4dc73..824c00a2 100644 --- a/src/components/navigation/navigation_entry.vue +++ b/src/components/navigation/navigation_entry.vue @@ -1,23 +1,37 @@ @@ -47,19 +55,27 @@ @import '../../_variables.scss'; .NavigationEntry { - .fa-scale-110 { + .label { + flex: 1; + } + + .menu-icon { margin-right: 0.8em; } - .badge { - position: absolute; - right: 0.6rem; - top: 1.25em; + .extra-button { + width: 3em; + text-align: center; + + &:last-child { + margin-right: -0.8em; + } } .menu-item { - display: block; + display: flex; box-sizing: border-box; + align-items: baseline; height: 3.5em; line-height: 3.5em; padding: 0 1em; @@ -75,7 +91,10 @@ --faint: var(--selectedMenuFaintText, $fallback--faint); --faintLink: var(--selectedMenuFaintLink, $fallback--faint); --lightText: var(--selectedMenuLightText, $fallback--lightText); - --icon: var(--selectedMenuIcon, $fallback--icon); + + .menu-icon { + --icon: var(--text, $fallback--icon); + } } &.router-link-active { @@ -87,7 +106,10 @@ --faint: var(--selectedMenuFaintText, $fallback--faint); --faintLink: var(--selectedMenuFaintLink, $fallback--faint); --lightText: var(--selectedMenuLightText, $fallback--lightText); - --icon: var(--selectedMenuIcon, $fallback--icon); + + .menu-icon { + --icon: var(--text, $fallback--icon); + } &:hover { text-decoration: underline; -- cgit v1.2.3-70-g09d2 From ec320e8fb6fbab4271e43b66d61b90dc07b3fc0b Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 30 Aug 2022 00:53:20 +0300 Subject: add a favorites "timeline" shortcut --- src/components/navigation/navigation.js | 8 +++++++- src/components/navigation/navigation_entry.js | 8 +++++--- 2 files changed, 12 insertions(+), 4 deletions(-) (limited to 'src/components/navigation/navigation_entry.js') diff --git a/src/components/navigation/navigation.js b/src/components/navigation/navigation.js index b4bcb05f..f66dd981 100644 --- a/src/components/navigation/navigation.js +++ b/src/components/navigation/navigation.js @@ -4,7 +4,8 @@ export const USERNAME_ROUTES = new Set([ 'interactions', 'notifications', 'chat', - 'chats' + 'chats', + 'user-profile' ]) export const TIMELINES = { @@ -33,6 +34,11 @@ export const TIMELINES = { icon: 'bookmark', label: 'nav.bookmarks' }, + favorites: { + routeObject: { name: 'user-profile', query: { tab: 'favorites' } }, + icon: 'star', + label: 'user_card.favorites' + }, dms: { route: 'dms', icon: 'envelope', diff --git a/src/components/navigation/navigation_entry.js b/src/components/navigation/navigation_entry.js index eb0a9cc4..fe3402fc 100644 --- a/src/components/navigation/navigation_entry.js +++ b/src/components/navigation/navigation_entry.js @@ -23,12 +23,14 @@ const NavigationEntry = { computed: { routeTo () { if (!this.item.route && !this.item.routeObject) return null + let route if (this.item.routeObject) { - return this.item.routeObject + route = this.item.routeObject + } else { + route = { name: (this.item.anon || this.currentUser) ? this.item.route : this.item.anonRoute } } - const route = { name: (this.item.anon || this.currentUser) ? this.item.route : this.item.anonRoute } if (USERNAME_ROUTES.has(route.name)) { - route.params = { username: this.currentUser.screen_name } + route.params = { username: this.currentUser.screen_name, name: this.currentUser.screen_name } } return route }, -- cgit v1.2.3-70-g09d2