logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git
commit: 8ecb67230c87754d43c4255c56c05566c8c53feb
parent 8b25febe36a97d113c846928dab22ab36158ee07
Author: Henry Jameson <me@hjkos.com>
Date:   Wed, 31 Aug 2022 00:48:38 +0300

make custom router-link for nav-entry to un-nest the interactive elements

Diffstat:

Msrc/components/nav_panel/nav_panel.vue7-------
Msrc/components/navigation/navigation_entry.js4++++
Msrc/components/navigation/navigation_entry.vue133+++++++++++++++++++++++++++++++++++++++++++------------------------------------
Asrc/components/optional_router_link/optional_router_link.vue22++++++++++++++++++++++
4 files changed, 99 insertions(+), 67 deletions(-)

diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue @@ -121,7 +121,6 @@ border-bottom: 1px solid; border-color: $fallback--border; border-color: var(--border, $fallback--border); - padding: 0; } > li { @@ -150,12 +149,6 @@ font-size: 1.1em; } - .menu-item { - .timelines-chevron { - margin-right: 0; - } - } - .timelines-background { padding: 0 0 0 0.6em; background-color: $fallback--lightBg; diff --git a/src/components/navigation/navigation_entry.js b/src/components/navigation/navigation_entry.js @@ -1,5 +1,6 @@ import { mapState } from 'vuex' import { USERNAME_ROUTES } 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' @@ -7,6 +8,9 @@ library.add(faThumbtack) const NavigationEntry = { props: ['item', 'showPin'], + components: { + OptionalRouterLink + }, methods: { isPinned (value) { return this.pinnedItems.has(value) diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue @@ -1,26 +1,37 @@ <template> - <li class="NavigationEntry"> - <component - :is="routeTo ? 'router-link' : 'button'" - class="menu-item button-unstyled" - :to="routeTo" + <OptionalRouterLink + ass="ass" + :to="routeTo" + v-slot="{ isActive, href, navigate } = {}" + > + <li + class="NavigationEntry menu-item" + :class="{ '-active': isActive }" + v-bind="$attrs" > - <span> - <FAIcon - v-if="item.icon" - fixed-width - class="fa-scale-110 menu-icon" - :icon="item.icon" - /> - </span> - <span - v-if="item.iconLetter" - class="icon iconLetter fa-scale-110 menu-icon" - >{{ item.iconLetter }} - </span> - <span class="label"> - {{ item.labelRaw || $t(item.label) }} - </span> + <component + class="main-link button-unstyled" + :is="routeTo ? 'a' : 'button'" + :href="href" + @click="navigate" + > + <span> + <FAIcon + v-if="item.icon" + fixed-width + class="fa-scale-110 menu-icon" + :icon="item.icon" + /> + </span> + <span + v-if="item.iconLetter" + class="icon iconLetter fa-scale-110 menu-icon" + >{{ item.iconLetter }} + </span> + <span class="label"> + {{ item.labelRaw || $t(item.label) }} + </span> + </component> <slot /> <div v-if="item.badgeGetter && getters[item.badgeGetter]" @@ -45,8 +56,8 @@ icon="thumbtack" /> </button> - </component> - </li> + </li> + </OptionalRouterLink> </template> <script src="./navigation_entry.js"></script> @@ -55,7 +66,21 @@ @import '../../_variables.scss'; .NavigationEntry { - .label { + 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; + } + + .main-link { flex: 1; } @@ -72,48 +97,36 @@ } } - .menu-item { - display: flex; - box-sizing: border-box; - align-items: baseline; - height: 3.5em; - line-height: 3.5em; - padding: 0 1em; - width: 100%; + &:hover { + background-color: $fallback--lightBg; + background-color: var(--selectedMenu, $fallback--lightBg); 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); + 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); - } + .menu-icon { + --icon: var(--text, $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); + &.-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); - } + .menu-icon { + --icon: var(--text, $fallback--icon); + } - &:hover { - text-decoration: underline; - } + &:hover { + text-decoration: underline; } } } diff --git a/src/components/optional_router_link/optional_router_link.vue b/src/components/optional_router_link/optional_router_link.vue @@ -0,0 +1,22 @@ +<template> + <router-link + v-if="to" + :to="to" + custom + v-slot="props" + > + <slot + v-bind="props" + /> + </router-link> + <slot + v-else + v-bind="{}" + /> +</template> + +<script> +export default { + props: ['to'] +} +</script>