aboutsummaryrefslogtreecommitdiff
path: root/src/components/navigation
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/navigation')
-rw-r--r--src/components/navigation/navigation.js18
-rw-r--r--src/components/navigation/navigation_entry.js14
-rw-r--r--src/components/navigation/navigation_entry.vue79
-rw-r--r--src/components/navigation/navigation_pins.js14
-rw-r--r--src/components/navigation/navigation_pins.vue28
5 files changed, 59 insertions, 94 deletions
diff --git a/src/components/navigation/navigation.js b/src/components/navigation/navigation.js
index 7f096316..face430e 100644
--- a/src/components/navigation/navigation.js
+++ b/src/components/navigation/navigation.js
@@ -80,3 +80,21 @@ export const ROOT_ITEMS = {
criteria: ['announcements']
}
}
+
+export function routeTo (item, currentUser) {
+ if (!item.route && !item.routeObject) return null
+
+ let route
+
+ if (item.routeObject) {
+ route = item.routeObject
+ } else {
+ route = { name: (item.anon || currentUser) ? item.route : item.anonRoute }
+ }
+
+ if (USERNAME_ROUTES.has(route.name)) {
+ route.params = { username: currentUser.screen_name, name: currentUser.screen_name }
+ }
+
+ return route
+}
diff --git a/src/components/navigation/navigation_entry.js b/src/components/navigation/navigation_entry.js
index 81cc936a..22ed77d9 100644
--- a/src/components/navigation/navigation_entry.js
+++ b/src/components/navigation/navigation_entry.js
@@ -1,5 +1,5 @@
import { mapState } from 'vuex'
-import { USERNAME_ROUTES } from 'src/components/navigation/navigation.js'
+import { routeTo } from 'src/components/navigation/navigation.js'
import OptionalRouterLink from 'src/components/optional_router_link/optional_router_link.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faThumbtack } from '@fortawesome/free-solid-svg-icons'
@@ -26,17 +26,7 @@ const NavigationEntry = {
},
computed: {
routeTo () {
- if (!this.item.route && !this.item.routeObject) return null
- let route
- if (this.item.routeObject) {
- route = this.item.routeObject
- } else {
- 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, name: this.currentUser.screen_name }
- }
- return route
+ return routeTo(this.item, this.currentUser)
},
getters () {
return this.$store.getters
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index 411ca536..4ea54ee3 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -1,7 +1,6 @@
<template>
<OptionalRouterLink
v-slot="{ isActive, href, navigate } = {}"
- ass="ass"
:to="routeTo"
>
<li
@@ -11,7 +10,7 @@
>
<component
:is="routeTo ? 'a' : 'button'"
- class="main-link button-unstyled"
+ class="main-link"
:href="href"
@click="navigate"
>
@@ -35,7 +34,7 @@
<slot />
<div
v-if="item.badgeGetter && getters[item.badgeGetter]"
- class="badge badge-notification"
+ class="badge -notification"
>
{{ getters[item.badgeGetter] }}
</div>
@@ -63,73 +62,53 @@
<script src="./navigation_entry.js"></script>
<style lang="scss">
-@import "../../variables";
+.NavigationEntry.menu-item {
+ --__line-height: 2.5em;
+ --__horizontal-gap: 0.5em;
+ --__vertical-gap: 0.4em;
-.NavigationEntry {
+ padding: 0;
display: flex;
- box-sizing: border-box;
align-items: baseline;
- height: 3.5em;
- line-height: 3.5em;
- padding: 0 1em;
- width: 100%;
- color: $fallback--link;
- color: var(--link, $fallback--link);
- .timelines-chevron {
- margin-right: 0;
+ &[aria-expanded] {
+ padding-right: var(--__horizontal-gap);
}
.main-link {
+ line-height: var(--__line-height);
+ box-sizing: border-box;
flex: 1;
+ padding: var(--__vertical-gap) var(--__horizontal-gap);
}
.menu-icon {
- margin-right: 0.8em;
+ line-height: var(--__line-height);
+ padding: 0;
+ width: var(--__line-height);
+ margin-right: var(--__horizontal-gap);
+ }
+
+ .timelines-chevron {
+ line-height: var(--__line-height);
+ padding: 0;
+ width: var(--__line-height);
+ margin-right: 0;
}
.extra-button {
- width: 3em;
+ line-height: var(--__line-height);
+ padding: 0;
+ width: var(--__line-height);
text-align: center;
&:last-child {
- margin-right: -0.8em;
- }
- }
-
- &: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);
-
- .menu-icon {
- --icon: var(--text, $fallback--icon);
+ margin-right: calc(-1 * var(--__horizontal-gap));
}
}
- &.-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);
-
- .menu-icon {
- --icon: var(--text, $fallback--icon);
- }
-
- &:hover {
- text-decoration: underline;
- }
+ .badge {
+ margin: 0 var(--__horizontal-gap);
}
}
</style>
diff --git a/src/components/navigation/navigation_pins.js b/src/components/navigation/navigation_pins.js
index 9dd795aa..86c33d1f 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, USERNAME_ROUTES } from 'src/components/navigation/navigation.js'
+import { TIMELINES, ROOT_ITEMS, routeTo } from 'src/components/navigation/navigation.js'
import { getListEntries, filterNavigation } from 'src/components/navigation/filter.js'
import { library } from '@fortawesome/fontawesome-svg-core'
@@ -31,14 +31,7 @@ const NavPanel = {
props: ['limit'],
methods: {
getRouteTo (item) {
- if (item.routeObject) {
- return item.routeObject
- }
- const route = { name: (item.anon || this.currentUser) ? item.route : item.anonRoute }
- if (USERNAME_ROUTES.has(route.name)) {
- route.params = { username: this.currentUser.screen_name }
- }
- return route
+ return routeTo(item, this.currentUser)
}
},
computed: {
@@ -52,6 +45,7 @@ const NavPanel = {
privateMode: state => state.instance.private,
federating: state => state.instance.federating,
pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable,
+ supportsAnnouncements: state => state.announcements.supportsAnnouncements,
pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems)
}),
pinnedList () {
@@ -63,6 +57,7 @@ const NavPanel = {
],
{
hasChats: this.pleromaChatMessagesAvailable,
+ hasAnnouncements: this.supportsAnnouncements,
isFederating: this.federating,
isPrivate: this.privateMode,
currentUser: this.currentUser
@@ -82,6 +77,7 @@ const NavPanel = {
],
{
hasChats: this.pleromaChatMessagesAvailable,
+ hasAnnouncements: this.supportsAnnouncements,
isFederating: this.federating,
isPrivate: this.privateMode,
currentUser: this.currentUser
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index 4fbb4f95..decd1c04 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -3,7 +3,8 @@
<router-link
v-for="item in pinnedList"
:key="item.name"
- class="pinned-item"
+ class="button-unstyled pinned-item"
+ active-class="toggled"
:to="getRouteTo(item)"
:title="item.labelRaw || $t(item.label)"
>
@@ -18,7 +19,7 @@
>{{ item.iconLetter }}</span>
<div
v-if="item.badgeGetter && getters[item.badgeGetter]"
- class="alert-dot"
+ class="badge -dot -notification"
/>
</router-link>
</span>
@@ -27,25 +28,12 @@
<script src="./navigation_pins.js"></script>
<style lang="scss">
-@import "../../variables";
-
.NavigationPins {
display: flex;
flex-wrap: wrap;
overflow: hidden;
height: 100%;
- .alert-dot {
- border-radius: 100%;
- height: 0.5em;
- width: 0.5em;
- position: absolute;
- right: calc(50% - 0.75em);
- top: calc(50% - 0.5em);
- background-color: $fallback--cRed;
- background-color: var(--badgeNotification, $fallback--cRed);
- }
-
.pinned-item {
position: relative;
flex: 1 0 3em;
@@ -60,15 +48,9 @@
margin: 0;
}
- &.router-link-active {
- color: $fallback--text;
- color: var(--panelText, $fallback--text);
+ &.toggled {
+ margin-bottom: -4px;
border-bottom: 4px solid;
-
- & .svg-inline--fa,
- & .iconLetter {
- color: inherit;
- }
}
}
}
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 10:10:46 +0000