forked from AkkomaGang/akkoma-fe
simplify timeline vibility checks
This commit is contained in:
parent
b552d8116a
commit
c3208db28d
9 changed files with 59 additions and 26 deletions
|
@ -1,6 +1,11 @@
|
||||||
import SearchBar from 'components/search_bar/search_bar.vue'
|
import SearchBar from 'components/search_bar/search_bar.vue'
|
||||||
import ConfirmModal from '../confirm_modal/confirm_modal.vue'
|
import ConfirmModal from '../confirm_modal/confirm_modal.vue'
|
||||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||||
|
import {
|
||||||
|
publicTimelineVisible,
|
||||||
|
federatedTimelineVisible,
|
||||||
|
bubbleTimelineVisible,
|
||||||
|
} from '../../lib/timeline_visibility'
|
||||||
import {
|
import {
|
||||||
faSignInAlt,
|
faSignInAlt,
|
||||||
faSignOutAlt,
|
faSignOutAlt,
|
||||||
|
@ -106,8 +111,9 @@ export default {
|
||||||
return this.$store.state.instance.localBubbleInstances.length > 0
|
return this.$store.state.instance.localBubbleInstances.length > 0
|
||||||
},
|
},
|
||||||
...mapState({
|
...mapState({
|
||||||
publicTimelineVisibility: state => state.instance.publicTimelineVisibility,
|
publicTimelineVisible,
|
||||||
federatedTimelineAvailable: state => state.instance.federatedTimelineAvailable,
|
federatedTimelineVisible,
|
||||||
|
bubbleTimelineVisible,
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
|
@ -46,7 +46,7 @@
|
||||||
<router-link
|
<router-link
|
||||||
:to="{ name: 'public-timeline' }"
|
:to="{ name: 'public-timeline' }"
|
||||||
class="nav-icon"
|
class="nav-icon"
|
||||||
v-if="(currentUser || (publicTimelineVisibility?.local ?? true))"
|
v-if="publicTimelineVisible"
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
fixed-width
|
fixed-width
|
||||||
|
@ -56,7 +56,7 @@
|
||||||
/>
|
/>
|
||||||
</router-link>
|
</router-link>
|
||||||
<router-link
|
<router-link
|
||||||
v-if="(currentUser || publicTimelineVisibility?.bubble) && showBubbleTimeline"
|
v-if="bubbleTimelineVisible"
|
||||||
:to="{ name: 'bubble-timeline' }"
|
:to="{ name: 'bubble-timeline' }"
|
||||||
class="nav-icon"
|
class="nav-icon"
|
||||||
>
|
>
|
||||||
|
@ -70,7 +70,7 @@
|
||||||
<router-link
|
<router-link
|
||||||
:to="{ name: 'public-external-timeline' }"
|
:to="{ name: 'public-external-timeline' }"
|
||||||
class="nav-icon"
|
class="nav-icon"
|
||||||
v-if="federatedTimelineAvailable && (currentUser || (publicTimelineVisibility?.federated ?? true))"
|
v-if="federatedTimelineVisible"
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
fixed-width
|
fixed-width
|
||||||
|
|
|
@ -8,6 +8,7 @@ import {
|
||||||
faHome,
|
faHome,
|
||||||
faCircle
|
faCircle
|
||||||
} from '@fortawesome/free-solid-svg-icons'
|
} from '@fortawesome/free-solid-svg-icons'
|
||||||
|
import { federatedTimelineVisible, publicTimelineVisible, bubbleTimelineVisible } from '../../lib/timeline_visibility'
|
||||||
|
|
||||||
library.add(
|
library.add(
|
||||||
faUsers,
|
faUsers,
|
||||||
|
@ -24,9 +25,9 @@ const TimelineMenuContent = {
|
||||||
currentUser: state => state.users.currentUser,
|
currentUser: state => state.users.currentUser,
|
||||||
privateMode: state => state.instance.private,
|
privateMode: state => state.instance.private,
|
||||||
federating: state => state.instance.federating,
|
federating: state => state.instance.federating,
|
||||||
showBubbleTimeline: state => (state.instance.localBubbleInstances.length > 0),
|
publicTimelineVisible,
|
||||||
publicTimelineVisibility: state => state.instance.publicTimelineVisibility,
|
federatedTimelineVisible,
|
||||||
federatedTimelineAvailable: state => state.instance.federatedTimelineAvailable,
|
bubbleTimelineVisible,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
>{{ $t("nav.home_timeline") }}</span>
|
>{{ $t("nav.home_timeline") }}</span>
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
<li v-if="(currentUser || publicTimelineVisibility?.bubble) && showBubbleTimeline">
|
<li v-if="bubbleTimelineVisible">
|
||||||
<router-link
|
<router-link
|
||||||
class="menu-item"
|
class="menu-item"
|
||||||
:to="{ name: 'bubble-timeline' }"
|
:to="{ name: 'bubble-timeline' }"
|
||||||
|
@ -32,7 +32,7 @@
|
||||||
>{{ $t("nav.bubble_timeline") }}</span>
|
>{{ $t("nav.bubble_timeline") }}</span>
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
<li v-if="(currentUser || !privateMode) && (currentUser || (publicTimelineVisibility?.local ?? true))">
|
<li v-if="publicTimelineVisible">
|
||||||
<router-link
|
<router-link
|
||||||
class="menu-item"
|
class="menu-item"
|
||||||
:to="{ name: 'public-timeline' }"
|
:to="{ name: 'public-timeline' }"
|
||||||
|
@ -48,7 +48,7 @@
|
||||||
>{{ $t("nav.public_tl") }}</span>
|
>{{ $t("nav.public_tl") }}</span>
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
<li v-if="federating && federatedTimelineAvailable && (currentUser || !privateMode) && (currentUser || (publicTimelineVisibility?.federated ?? true))">
|
<li v-if="federatedTimelineVisible">
|
||||||
<router-link
|
<router-link
|
||||||
class="menu-item"
|
class="menu-item"
|
||||||
:to="{ name: 'public-external-timeline' }"
|
:to="{ name: 'public-external-timeline' }"
|
||||||
|
|
|
@ -8,6 +8,7 @@ import {
|
||||||
faHome
|
faHome
|
||||||
} from '@fortawesome/free-solid-svg-icons'
|
} from '@fortawesome/free-solid-svg-icons'
|
||||||
import { faCircle } from '@fortawesome/free-regular-svg-icons'
|
import { faCircle } from '@fortawesome/free-regular-svg-icons'
|
||||||
|
import { federatedTimelineVisible, publicTimelineVisible, bubbleTimelineVisible } from '../../lib/timeline_visibility'
|
||||||
library.add(
|
library.add(
|
||||||
faUsers,
|
faUsers,
|
||||||
faGlobe,
|
faGlobe,
|
||||||
|
@ -23,9 +24,9 @@ const TimelineMenuContent = {
|
||||||
currentUser: state => state.users.currentUser,
|
currentUser: state => state.users.currentUser,
|
||||||
privateMode: state => state.instance.private,
|
privateMode: state => state.instance.private,
|
||||||
federating: state => state.instance.federating,
|
federating: state => state.instance.federating,
|
||||||
showBubbleTimeline: state => (state.instance.localBubbleInstances.length > 0),
|
publicTimelineVisible,
|
||||||
publicTimelineVisibility: state => state.instance.publicTimelineVisibility,
|
federatedTimelineVisible,
|
||||||
federatedTimelineAvailable: state => state.instance.federatedTimelineAvailable,
|
bubbleTimelineVisible,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
>{{ $t("nav.home_timeline") }}</span>
|
>{{ $t("nav.home_timeline") }}</span>
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
<li v-if="(currentUser || publicTimelineVisibility?.bubble) && showBubbleTimeline">
|
<li v-if="bubbleTimelineVisible">
|
||||||
<router-link
|
<router-link
|
||||||
class="menu-item"
|
class="menu-item"
|
||||||
:to="{ name: 'bubble-timeline' }"
|
:to="{ name: 'bubble-timeline' }"
|
||||||
|
@ -32,7 +32,7 @@
|
||||||
>{{ $t("nav.bubble_timeline") }}</span>
|
>{{ $t("nav.bubble_timeline") }}</span>
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
<li v-if="currentUser || !privateMode">
|
<li v-if="publicTimelineVisible">
|
||||||
<router-link
|
<router-link
|
||||||
class="menu-item"
|
class="menu-item"
|
||||||
:to="{ name: 'public-timeline' }"
|
:to="{ name: 'public-timeline' }"
|
||||||
|
@ -48,7 +48,7 @@
|
||||||
>{{ $t("nav.public_tl") }}</span>
|
>{{ $t("nav.public_tl") }}</span>
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
<li v-if="federating && federatedTimelineAvailable && (currentUser || !privateMode || publicTimelineVisibility?.federated)">
|
<li v-if="federatedTimelineVisible">
|
||||||
<router-link
|
<router-link
|
||||||
class="menu-item"
|
class="menu-item"
|
||||||
:to="{ name: 'public-external-timeline' }"
|
:to="{ name: 'public-external-timeline' }"
|
||||||
|
|
|
@ -5,6 +5,11 @@ import {
|
||||||
faChevronDown
|
faChevronDown
|
||||||
} from '@fortawesome/free-solid-svg-icons'
|
} from '@fortawesome/free-solid-svg-icons'
|
||||||
import { mapState } from 'vuex'
|
import { mapState } from 'vuex'
|
||||||
|
import {
|
||||||
|
publicTimelineVisible,
|
||||||
|
federatedTimelineVisible,
|
||||||
|
bubbleTimelineVisible,
|
||||||
|
} from '../../lib/timeline_visibility'
|
||||||
|
|
||||||
library.add(faChevronDown)
|
library.add(faChevronDown)
|
||||||
|
|
||||||
|
@ -37,17 +42,14 @@ const TimelineMenuTabs = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
currentUser () {
|
|
||||||
return this.$store.state.users.currentUser
|
|
||||||
},
|
|
||||||
privateMode () {
|
privateMode () {
|
||||||
return this.$store.state.instance.private
|
return this.$store.state.instance.private
|
||||||
},
|
},
|
||||||
...mapState({
|
...mapState({
|
||||||
currentUser: state => state.users.currentUser,
|
currentUser: state => state.users.currentUser,
|
||||||
publicTimelineVisibility: state => state.instance.publicTimelineVisibility,
|
publicTimelineVisible,
|
||||||
federatedTimelineAvailable: state => state.instance.federatedTimelineAvailable,
|
federatedTimelineVisible,
|
||||||
showBubbleTimeline: state => (state.instance.localBubbleInstances.length > 0),
|
bubbleTimelineVisible,
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
|
@ -18,7 +18,7 @@
|
||||||
<router-link
|
<router-link
|
||||||
:to="{ name: 'public-timeline' }"
|
:to="{ name: 'public-timeline' }"
|
||||||
class="nav-icon"
|
class="nav-icon"
|
||||||
v-if="currentUser || (publicTimelineVisibility?.local ?? true)"
|
v-if="publicTimelineVisible"
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
fixed-width
|
fixed-width
|
||||||
|
@ -28,7 +28,7 @@
|
||||||
/>
|
/>
|
||||||
</router-link>
|
</router-link>
|
||||||
<router-link
|
<router-link
|
||||||
v-if="(currentUser || publicTimelineVisibility?.bubble) && showBubbleTimeline"
|
v-if="bubbleTimelineVisible"
|
||||||
:to="{ name: 'bubble-timeline' }"
|
:to="{ name: 'bubble-timeline' }"
|
||||||
class="nav-icon"
|
class="nav-icon"
|
||||||
>
|
>
|
||||||
|
@ -42,7 +42,7 @@
|
||||||
<router-link
|
<router-link
|
||||||
:to="{ name: 'public-external-timeline' }"
|
:to="{ name: 'public-external-timeline' }"
|
||||||
class="nav-icon"
|
class="nav-icon"
|
||||||
v-if="(currentUser || (publicTimelineVisibility?.federated ?? true)) && federatedTimelineAvailable"
|
v-if="federatedTimelineVisible"
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
fixed-width
|
fixed-width
|
||||||
|
|
23
src/lib/timeline_visibility.js
Normal file
23
src/lib/timeline_visibility.js
Normal file
|
@ -0,0 +1,23 @@
|
||||||
|
const timelineVisibleUnauthenticated = (state, timeline) => (
|
||||||
|
state.instance.publicTimelineVisibility[timeline] ?? false
|
||||||
|
);
|
||||||
|
|
||||||
|
const currentUser = (state) => state.users.currentUser;
|
||||||
|
|
||||||
|
const currentUserOrTimelineVisibleUnauthenticated = (state, timeline) => (
|
||||||
|
currentUser(state) || timelineVisibleUnauthenticated(state, timeline)
|
||||||
|
);
|
||||||
|
|
||||||
|
const federatedTimelineAvailable = (state) => state.instance.federatedTimelineAvailable;
|
||||||
|
|
||||||
|
export const federatedTimelineVisible = (state) => (
|
||||||
|
federatedTimelineAvailable(state) && currentUserOrTimelineVisibleUnauthenticated(state, 'federated')
|
||||||
|
);
|
||||||
|
|
||||||
|
export const publicTimelineVisible = (state) => (
|
||||||
|
currentUserOrTimelineVisibleUnauthenticated(state, 'local')
|
||||||
|
);
|
||||||
|
|
||||||
|
export const bubbleTimelineVisible = (state) => (
|
||||||
|
state.instance.localBubbleInstances.length > 0 && currentUserOrTimelineVisibleUnauthenticated(state, 'bubble')
|
||||||
|
);
|
Loading…
Reference in a new issue