logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git
commit: 768b3ea14fa8f69192b39642701babcb94f80156
parent ea3ce55929b2c6460ee548bc85c4bef55f55dba7
Author: Henry Jameson <me@hjkos.com>
Date:   Tue, 30 Aug 2022 00:15:42 +0300

refactor navigation-entry and use them in other nav items

Diffstat:

Msrc/App.scss9++++-----
Msrc/components/nav_panel/nav_panel.vue184++++++++++++++++++++++++++++---------------------------------------------------
Msrc/components/navigation/navigation_entry.js1+
Msrc/components/navigation/navigation_entry.vue74++++++++++++++++++++++++++++++++++++++++++++++++--------------------------
4 files changed, 118 insertions(+), 150 deletions(-)

diff --git 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 @@ -22,95 +22,77 @@ v-if="!collapsed || forceExpand" class="panel-body" > - <li v-if="currentUser || !privateMode"> - <button - class="button-unstyled menu-item" - :aria-expanded="showTimelines ? 'true' : 'false'" - @click="toggleTimelines" - > - <FAIcon - fixed-width - class="fa-scale-110" - icon="stream" - />{{ $t("nav.timelines") }} - <FAIcon - class="timelines-chevron" - fixed-width - :icon="showTimelines ? 'chevron-up' : 'chevron-down'" + <NavigationEntry + v-if="currentUser || !privateMode" + :show-pin="false" + :item="{ icon: 'stream', label: 'nav.timelines' }" + :aria-expanded="showTimelines ? 'true' : 'false'" + @click="toggleTimelines" + > + <FAIcon + class="timelines-chevron" + fixed-width + :icon="showTimelines ? 'chevron-up' : 'chevron-down'" + /> + </NavigationEntry> + <div + v-show="showTimelines" + class="timelines-background" + > + <div class="timelines"> + <NavigationEntry + v-for="item in timelinesItems" + :key="item.name" + :show-pin="editMode || forceEditMode" + :item="item" /> - </button> - <div - v-show="showTimelines" - class="timelines-background" - > - <ul class="timelines"> - <NavigationEntry - v-for="item in timelinesItems" - :key="item.name" - :show-pin="editMode || forceEditMode" - :item="item" - /> - </ul> </div> - </li> - <li v-if="currentUser"> - <button - class="button-unstyled menu-item" - :aria-expanded="showLists ? 'true' : 'false'" - @click="toggleLists" + </div> + <NavigationEntry + v-if="currentUser" + :show-pin="false" + :item="{ icon: 'list', label: 'nav.lists' }" + :aria-expanded="showLists ? 'true' : 'false'" + @click="toggleLists" + > + <router-link + class="extra-button" + :to="{ name: 'lists' }" + @click.stop > <FAIcon + class="extra-button" fixed-width - class="fa-scale-110" - icon="list" - />{{ $t("nav.lists") }} - <FAIcon - class="timelines-chevron" - fixed-width - :icon="showLists ? 'chevron-up' : 'chevron-down'" + icon="wrench" /> - <router-link - :to="{ name: 'lists' }" - @click.stop - > - <FAIcon - class="timelines-chevron" - fixed-width - icon="wrench" - /> - </router-link> - </button> - <div - v-show="showLists" - class="timelines-background" - > - <ListsMenuContent - :show-pin="editMode || forceEditMode" - class="timelines" - /> - </div> - </li> + </router-link> + <FAIcon + class="timelines-chevron" + fixed-width + :icon="showLists ? 'chevron-up' : 'chevron-down'" + /> + </NavigationEntry> + <div + v-show="showLists" + class="timelines-background" + > + <ListsMenuContent + :show-pin="editMode || forceEditMode" + class="timelines" + /> + </div> <NavigationEntry v-for="item in rootItems" :key="item.name" :show-pin="editMode || forceEditMode" :item="item" /> - <li + <NavigationEntry v-if="!forceEditMode && currentUser" - > - <button - class="menu-item button-unstyled" - @click="toggleEditMode" - > - <FAIcon - fixed-width - class="fa-scale-110" - :icon="editMode ? 'check' : 'wrench'" - /> - {{ editMode ? $t('nav.edit_finish') : $t('nav.edit_pinned') }} - </button> - </li> + :show-pin="false" + :item="{ label: editMode ? $t('nav.edit_finish') : $t('nav.edit_pinned'), icon: editMode ? 'check' : 'wrench' }" + @click="toggleEditMode" + /> </ul> </div> </div> @@ -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; - } } </style> diff --git 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 @@ -1,23 +1,37 @@ <template> <li class="NavigationEntry"> - <router-link - class="menu-item" + <component + :is="routeTo ? 'router-link' : 'button'" + class="menu-item button-unstyled" :to="routeTo" > - <FAIcon - v-if="item.icon" - fixed-width - class="fa-scale-110" - :icon="item.icon" - /> + <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" + class="icon iconLetter fa-scale-110 menu-icon" >{{ item.iconLetter }} - </span>{{ item.labelRaw || $t(item.label) }} + </span> + <span class="label"> + {{ item.labelRaw || $t(item.label) }} + </span> + <slot /> + <div + v-if="item.badgeGetter && getters[item.badgeGetter]" + class="badge badge-notification" + > + {{ getters[item.badgeGetter] }} + </div> <button + v-if="showPin && currentUser" type="button" - class="button-unstyled" + class="button-unstyled extra-button" :title="$t(isPinned ? 'general.unpin' : 'general.pin' )" :aria-pressed="!!isPinned" @click.stop.prevent="togglePin(item.name)" @@ -30,14 +44,8 @@ :transform="!isPinned(item.name) ? 'rotate-45' : ''" icon="thumbtack" /> - <div - v-if="item.badgeGetter && getters[item.badgeGetter]" - class="badge badge-notification" - > - {{ getters[item.badgeGetter] }} - </div> </button> - </router-link> + </component> </li> </template> @@ -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;