sam/pleroma-fe
sam/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

timeline panel nav (#131)

Browse source 
Reviewed-on: https://akkoma.dev/AkkomaGang/pleroma-fe/pulls/131
This commit is contained in:
floatingghost 2022-08-17 08:41:36 +00:00
parent ca0b730605
commit 64fdde52f6
15 changed files with 349 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -19,7 +19,7 @@
"@babel/runtime": "7.17.8",
"@chenfengyuan/vue-qrcode": "2.0.0",
"@fortawesome/fontawesome-svg-core": "1.3.0",
"@fortawesome/free-regular-svg-icons": "5.15.4",
"@fortawesome/free-regular-svg-icons": "^6.1.2",
"@fortawesome/free-solid-svg-icons": "5.15.4",
"@fortawesome/vue-fontawesome": "3.0.1",
"@kazvmoe-infra/pinch-zoom-element": "1.2.0",

23
src/components/desktop_nav/desktop_nav.vue
View file

@ -54,17 +54,6 @@
:title="$t('nav.public_tl')"
/>
</router-link>
<router-link
:to="{ name: 'public-external-timeline' }"
class="nav-icon"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="globe"
:title="$t('nav.twkn')"
/>
</router-link>
<router-link
v-if="currentUser"
:to="{ name: 'bubble-timeline' }"
@ -77,6 +66,17 @@
:title="$t('nav.bubble_timeline')"
/>
</router-link>
<router-link
:to="{ name: 'public-external-timeline' }"
class="nav-icon"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="globe"
:title="$t('nav.twkn')"
/>
</router-link>
</div>
</div>
<router-link
@ -105,6 +105,7 @@
>
<router-link
class="nav-icon"
v-if="currentUser"
:to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
>
<FAIcon

5
src/components/moderation_tools/moderation_tools.vue
View file

@ -13,13 +13,13 @@
<span v-if="user.is_local">
<button
class="button-default dropdown-item"
@click="toggleRight(&quot;admin&quot;)"
@click="toggleRight('admin')"
>
{{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
</button>
<button
class="button-default dropdown-item"
@click="toggleRight(&quot;moderator&quot;)"
@click="toggleRight('moderator')"
>
{{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
</button>
@ -167,6 +167,7 @@
.moderation-tools-popover {
height: 100%;
z-index: 999;
.trigger {
display: flex !important;
height: 100%;

8
src/components/settings_modal/tabs/general_tab.vue
View file

@ -49,6 +49,14 @@
{{ $t('settings.show_nav_shortcuts') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting
path="showPanelNavShortcuts"
expert="1"
>
{{ $t('settings.show_panel_nav_shortcuts') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting
path="showWiderShortcuts"

5
src/components/timeline/timeline.js
View file

@ -2,6 +2,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 TimelineMenuTabs from '../timeline_menu_tabs/timeline_menu_tabs.vue'
import TimelineQuickSettings from './timeline_quick_settings.vue'
import { debounce, throttle, keyBy } from 'lodash'
import { library } from '@fortawesome/fontawesome-svg-core'
@ -39,6 +40,7 @@ const Timeline = {
Status,
Conversation,
TimelineMenu,
TimelineMenuTabs,
TimelineQuickSettings
},
computed: {
@ -85,6 +87,9 @@ const Timeline = {
},
virtualScrollingEnabled () {
return this.$store.getters.mergedConfig.virtualScrolling
},
showPanelNavShortcuts () {
return this.$store.getters.mergedConfig.showPanelNavShortcuts
}
},
created () {

6
src/components/timeline/timeline.vue
View file

@ -1,7 +1,11 @@
<template>
<div :class="['Timeline', classes.root]">
<div :class="classes.header">
<TimelineMenu v-if="!embedded" />
<template v-if="!embedded">
<TimelineMenuTabs v-if="showPanelNavShortcuts" />
<TimelineMenu v-else />
</template>
<button
v-if="showLoadButton"
class="button-default loadmore-button"

30
src/components/timeline_menu_tabs/timeline_menu_content.js Normal file
View file

@ -0,0 +1,30 @@
import { mapState } from 'vuex'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faUsers,
faGlobe,
faBookmark,
faEnvelope,
faHome
} from '@fortawesome/free-solid-svg-icons'
import { faCircle } from '@fortawesome/free-regular-svg-icons'
library.add(
faUsers,
faGlobe,
faBookmark,
faEnvelope,
faHome,
faCircle
)
const TimelineMenuContent = {
computed: {
...mapState({
currentUser: state => state.users.currentUser,
privateMode: state => state.instance.private,
federating: state => state.instance.federating
})
}
}
export default TimelineMenuContent

114
src/components/timeline_menu_tabs/timeline_menu_content.vue Normal file
View file

@ -0,0 +1,114 @@
<template>
<ul>
<li v-if="currentUser">
<router-link
class="menu-item"
:to="{ name: 'friends' }"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding "
icon="home"
/>
<span
:title="$t('nav.home_timeline_description')"
:aria-label="$t('nav.home_timeline_description')"
>{{ $t("nav.home_timeline") }}</span>
</router-link>
</li>
<li v-if="currentUser">
<router-link
class="menu-item"
:to="{ name: 'bubble-timeline' }"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding "
:icon="['far', 'circle']"
/>
<span
:title="$t('nav.bubble_timeline_description')"
:aria-label="$t('nav.bubble_timeline_description')"
>{{ $t("nav.bubble_timeline") }}</span>
</router-link>
</li>
<li v-if="currentUser || !privateMode">
<router-link
class="menu-item"
:to="{ name: 'public-timeline' }"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding "
icon="users"
/>
<span
:title="$t('nav.public_timeline_description')"
:aria-label="$t('nav.public_timeline_description')"
>{{ $t("nav.public_tl") }}</span>
</router-link>
</li>
<li v-if="federating && (currentUser || !privateMode)">
<router-link
class="menu-item"
:to="{ name: 'public-external-timeline' }"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding "
icon="globe"
/>
<span
:title="$t('nav.twkn_timeline_description')"
:aria-label="$t('nav.twkn_timeline_description')"
>{{ $t("nav.twkn") }}</span>
</router-link>
</li>
<li v-if="currentUser">
<router-link
class="menu-item"
:to="{ name: 'bookmarks'}"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding "
icon="bookmark"
/>
<span
:title="$t('nav.bookmarks')"
:aria-label="$t('nav.bookmarks')"
>{{ $t("nav.bookmarks") }}</span>
</router-link>
</li>
<li v-if="currentUser">
<router-link
class="menu-item"
:to="{ name: 'dms', params: { username: currentUser.screen_name } }"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding "
icon="envelope"
/>
<span
:title="$t('nav.dms')"
:aria-label="$t('nav.dms')"
>{{ $t("nav.dms") }}</span>
</router-link>
</li>
</ul>
</template>
<script src="./timeline_menu_content.js" ></script>
<style lang="scss">
@import "../../_variables.scss";
.timeline-desc {
text-decoration: none;
color: var(--text, $fallback--text);
padding-left: 1em;
display: block;
background-color: scale(var(--bg, $fallback--bg), 0.1);
padding-bottom: 0.4em;
}
</style>

61
src/components/timeline_menu_tabs/timeline_menu_tabs.js Normal file
View file

@ -0,0 +1,61 @@
import Popover from '../popover/popover.vue'
import TimelineMenuContent from './timeline_menu_content.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faChevronDown
} from '@fortawesome/free-solid-svg-icons'
library.add(faChevronDown)
// Route -> i18n key mapping, exported and not in the computed
// because nav panel benefits from the same information.
export const timelineNames = () => {
return {
'friends': 'nav.home_timeline',
'bookmarks': 'nav.bookmarks',
'dms': 'nav.dms',
'public-timeline': 'nav.public_tl',
'public-external-timeline': 'nav.twkn',
'bubble-timeline': 'nav.bubble_timeline'
}
}
const TimelineMenuTabs = {
components: {
Popover,
TimelineMenuContent
},
data () {
return {
isOpen: false
}
},
created () {
if (timelineNames()[this.$route.name]) {
this.$store.dispatch('setLastTimeline', this.$route.name)
}
},
computed: {
currentUser () {
return this.$store.state.users.currentUser
},
privateMode () {
return this.$store.state.instance.private
}
},
methods: {
timelineName () {
const route = this.$route.name
if (route === 'tag-timeline') {
return '#' + this.$route.params.tag
}
if (route === 'list-timeline') {
return this.$store.getters.findListTitle(this.$route.params.id)
}
const i18nkey = timelineNames()[this.$route.name]
return i18nkey ? this.$t(i18nkey) : route
}
}
}
export default TimelineMenuTabs

96
src/components/timeline_menu_tabs/timeline_menu_tabs.vue Normal file
View file

@ -0,0 +1,96 @@
<template>
<div
v-if="currentUser || !privateMode"
class="nav-items timeline-menu-tabs"
>
<router-link
v-if="currentUser"
:to="{ name: 'friends' }"
class="nav-icon"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="home"
:title="$t('nav.home_timeline_description')"
/>
</router-link>
<router-link
:to="{ name: 'public-timeline' }"
class="nav-icon"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="users"
:title="$t('nav.public_timeline_description')"
/>
</router-link>
<router-link
v-if="currentUser"
:to="{ name: 'bubble-timeline' }"
class="nav-icon"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
:icon="['far', 'circle']"
:title="$t('nav.bubble_timeline_description')"
/>
</router-link>
<router-link
:to="{ name: 'public-external-timeline' }"
class="nav-icon"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="globe"
:title="$t('nav.twkn_timeline_description')"
/>
</router-link>
<span class="timeline-title">{{ timelineName() }}</span>
</div>
</template>
<script src="./timeline_menu_tabs.js" ></script>
<style lang="scss">
@import '../../_variables.scss';
.timeline-menu-tabs {
.nav-icon {
margin-left: 0.7em;
width: 2em;
height: 100%;
text-align: center;
&.router-link-active {
border-bottom: 2px solid var(--selectedMenuText, $fallback--text);
padding-bottom: 0.8em;
.svg-inline--fa {
font-weight: bolder;
color: $fallback--text;
color: var(--selectedMenuText, $fallback--text);
--lightText: var(--selectedMenuLightText, $fallback--lightText);
}
}
}
.timeline-title {
margin-left: 1em;
font-size: 1.2em;
font-weight: bold;
color: var(--selectedMenuText, $fallback--text);
color: var(--selectedMenuText, $fallback--text);
--lightText: var(--selectedMenuLightText, $fallback--lightText);
}
@media all and (max-width: 900px) {
.timeline-title {
display: none;
}
}
}
</style>

1
src/components/user_card/user_card.js
View file

@ -69,6 +69,7 @@ export default {
return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
},
loggedIn () {
console.log({ ...this.$store.state.users.currentUser })
return this.$store.state.users.currentUser
},
dailyAvg () {

2
src/components/user_card/user_card.vue
View file

@ -245,7 +245,7 @@
</button>
</div>
<ModerationTools
v-if="loggedIn.role === &quot;admin&quot;"
v-if="loggedIn.role === 'admin'"
:user="user"
/>
</div>

1
src/i18n/en.json
View file

@ -616,6 +616,7 @@
"show_admin_badge": "Show \"Admin\" badge in my profile",
"show_moderator_badge": "Show \"Moderator\" badge in my profile",
"show_nav_shortcuts": "Show extra navigation shortcuts in top panel",
"show_panel_nav_shortcuts": "Show timeline navigation shortcuts at the top of the panel",
"show_scrollbars": "Show side column's scrollbars",
"show_wider_shortcuts": "Show wider gap between top panel shortcuts",
"show_yous": "Show (You)s",

1
src/modules/config.js
View file

@ -37,6 +37,7 @@ export const defaultState = {
collapseMessageWithSubject: undefined, // instance default
padEmoji: true,
showNavShortcuts: undefined, // instance default
showPanelNavShortcuts: undefined, // instance default
showWiderShortcuts: undefined, // instance default
hideSiteFavicon: undefined, // instance default
hideSiteName: undefined, // instance default

15
yarn.lock
View file

@ -1085,6 +1085,11 @@
minimatch "^3.1.2"
strip-json-comments "^3.1.1"
"@fortawesome/fontawesome-common-types@6.1.2":
version "6.1.2"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.2.tgz#c1095b1bbabf19f37f9ff0719db38d92a410bcfe"
integrity sha512-wBaAPGz1Awxg05e0PBRkDRuTsy4B3dpBm+zreTTyd9TH4uUM27cAL4xWyWR0rLJCrRwzVsQ4hF3FvM6rqydKPA==
"@fortawesome/fontawesome-common-types@^0.2.36":
version "0.2.36"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
@ -1102,12 +1107,12 @@
dependencies:
"@fortawesome/fontawesome-common-types" "^0.3.0"
"@fortawesome/free-regular-svg-icons@5.15.4":
version "5.15.4"
resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.4.tgz#b97edab436954333bbeac09cfc40c6a951081a02"
integrity sha512-9VNNnU3CXHy9XednJ3wzQp6SwNwT3XaM26oS4Rp391GsxVYA+0oDR2J194YCIWf7jNRCYKjUCOduxdceLrx+xw==
"@fortawesome/free-regular-svg-icons@^6.1.2":
version "6.1.2"
resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.1.2.tgz#9f04009098addcc11d0d185126f058ed042c3099"
integrity sha512-xR4hA+tAwsaTHGfb+25H1gVU/aJ0Rzu+xIUfnyrhaL13yNQ7TWiI2RvzniAaB+VGHDU2a+Pk96Ve+pkN3/+TTQ==
dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.36"
"@fortawesome/fontawesome-common-types" "6.1.2"
"@fortawesome/free-solid-svg-icons@5.15.4":
version "5.15.4"