Redo desktop nav, add options for site name and favicon (#83)

Reviewed-on: AkkomaGang/pleroma-fe#83
Co-authored-by: eris <femmediscord@gmail.com>
Co-committed-by: eris <femmediscord@gmail.com>
This commit is contained in:
eris 2022-08-14 23:24:59 +00:00 committed by floatingghost
parent 4dcca7cf53
commit ca0b730605
16 changed files with 251 additions and 41 deletions

View file

@ -5,12 +5,16 @@ import {
faSignOutAlt, faSignOutAlt,
faHome, faHome,
faComments, faComments,
faBell,
faUserPlus, faUserPlus,
faBullhorn, faBullhorn,
faSearch, faSearch,
faTachometerAlt, faTachometerAlt,
faCog, faCog,
faGlobe,
faBolt,
faUsers,
faCommentMedical,
faBookmark,
faInfoCircle faInfoCircle
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
@ -19,12 +23,16 @@ library.add(
faSignOutAlt, faSignOutAlt,
faHome, faHome,
faComments, faComments,
faBell,
faUserPlus, faUserPlus,
faBullhorn, faBullhorn,
faSearch, faSearch,
faTachometerAlt, faTachometerAlt,
faCog, faCog,
faGlobe,
faBolt,
faUsers,
faCommentMedical,
faBookmark,
faInfoCircle faInfoCircle
) )
@ -65,7 +73,22 @@ export default {
}) })
}, },
logo () { return this.$store.state.instance.logo }, logo () { return this.$store.state.instance.logo },
mergedConfig () {
return this.$store.getters.mergedConfig
},
sitename () { return this.$store.state.instance.name }, sitename () { return this.$store.state.instance.name },
showNavShortcuts () {
return this.mergedConfig.showNavShortcuts
},
showWiderShortcuts () {
return this.mergedConfig.showWiderShortcuts
},
hideSiteFavicon () {
return this.mergedConfig.hideSiteFavicon
},
hideSiteName () {
return this.mergedConfig.hideSiteName
},
hideSitename () { return this.$store.state.instance.hideSitename }, hideSitename () { return this.$store.state.instance.hideSitename },
logoLeft () { return this.$store.state.instance.logoLeft }, logoLeft () { return this.$store.state.instance.logoLeft },
currentUser () { return this.$store.state.users.currentUser }, currentUser () { return this.$store.state.users.currentUser },
@ -75,10 +98,6 @@ export default {
scrollToTop () { scrollToTop () {
window.scrollTo(0, 0) window.scrollTo(0, 0)
}, },
logout () {
this.$router.replace('/main/public')
this.$store.dispatch('logout')
},
onSearchBarToggled (hidden) { onSearchBarToggled (hidden) {
this.searchBarHidden = hidden this.searchBarHidden = hidden
}, },

View file

@ -15,16 +15,16 @@
display: grid; display: grid;
grid-template-rows: var(--navbar-height); grid-template-rows: var(--navbar-height);
grid-template-columns: 2fr auto 2fr; grid-template-columns: 2fr auto 2fr;
grid-template-areas: "sitename logo actions"; grid-template-areas: "nav-left logo actions";
box-sizing: border-box; box-sizing: border-box;
padding: 0 1.2em; padding: 0 1.2em;
margin: auto; margin: auto;
max-width: 980px; max-width: 1110px;
} }
&.-logoLeft .inner-nav { &.-logoLeft .inner-nav {
grid-template-columns: auto 2fr 2fr; grid-template-columns: auto 2fr 2fr;
grid-template-areas: "logo sitename actions"; grid-template-areas: "logo nav-left actions";
} }
.button-default { .button-default {
@ -84,14 +84,21 @@
} }
.nav-icon { .nav-icon {
margin-left: 1em; margin-left: 0.2em;
width: 2em; width: 2em;
height: 100%; height: 100%;
font-size: 130%;
text-align: center; text-align: center;
&-logout { &.router-link-active {
margin-left: 2em; font-size: 1.2em;
margin-top: 0.05em;
.svg-inline--fa {
font-weight: bolder;
color: $fallback--text;
color: var(--selectedMenuText, $fallback--text);
--lightText: var(--selectedMenuLightText, $fallback--lightText);
}
} }
.svg-inline--fa { .svg-inline--fa {
@ -100,8 +107,25 @@
} }
} }
.sitename { .-wide {
grid-area: sitename; .nav-icon {
margin-left: 0.7em;
}
}
.left {
padding-left: 5px;
display: flex;
}
.nav-left-wrapper {
grid-area: nav-left;
.favicon {
height: 28px;
vertical-align: middle;
padding-right: 5px;
}
} }
.actions { .actions {

View file

@ -5,16 +5,79 @@
:class="{ '-logoLeft': logoLeft }" :class="{ '-logoLeft': logoLeft }"
@click="scrollToTop()" @click="scrollToTop()"
> >
<div class="inner-nav"> <div
<div class="item sitename"> class="inner-nav"
:class="{ '-wide': showWiderShortcuts }"
>
<div class="item nav-left-wrapper">
<router-link <router-link
v-if="!hideSitename" class="site-brand"
class="site-name"
:to="{ name: 'root' }" :to="{ name: 'root' }"
active-class="home" active-class="home"
> >
{{ sitename }} <img
v-if="!hideSiteFavicon"
class="favicon"
src="/favicon.png"
>
<span
v-if="!hideSiteName"
class="site-name"
>
{{ sitename }}
</span>
</router-link> </router-link>
<div
v-if="(currentUser || !privateMode) && showNavShortcuts"
class="nav-items left"
>
<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')"
/>
</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_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' }"
class="nav-icon"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="circle"
:title="$t('nav.bubble_timeline')"
/>
</router-link>
</div>
</div> </div>
<router-link <router-link
class="logo" class="logo"
@ -36,6 +99,46 @@
@toggled="onSearchBarToggled" @toggled="onSearchBarToggled"
@click.stop @click.stop
/> />
<div
v-if="(currentUser || !privateMode) && showNavShortcuts"
class="nav-items right"
>
<router-link
class="nav-icon"
:to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="bolt"
:title="$t('nav.interactions')"
/>
</router-link>
<router-link
v-if="currentUser"
:to="{ name: 'lists' }"
class="nav-icon"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="list"
:title="$t('nav.lists')"
/>
</router-link>
<router-link
v-if="currentUser"
:to="{ name: 'bookmarks' }"
class="nav-icon"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="bookmark"
:title="$t('nav.bookmarks')"
/>
</router-link>
</div>
<button <button
class="button-unstyled nav-icon" class="button-unstyled nav-icon"
@click.stop="openSettingsModal" @click.stop="openSettingsModal"
@ -61,18 +164,6 @@
:title="$t('nav.administration')" :title="$t('nav.administration')"
/> />
</a> </a>
<button
v-if="currentUser"
class="button-unstyled nav-icon nav-icon-logout"
@click.prevent="logout"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="sign-out-alt"
:title="$t('login.logout')"
/>
</button>
</div> </div>
</div> </div>
</nav> </nav>

View file

@ -41,7 +41,12 @@ const MobileNav = {
unseenNotificationsCount () { unseenNotificationsCount () {
return this.unseenNotifications.length return this.unseenNotifications.length
}, },
hideSitename () { return this.$store.state.instance.hideSitename }, mergedConfig () {
return this.$store.getters.mergedConfig
},
hideSiteName () {
return this.mergedConfig.hideSiteName
},
sitename () { return this.$store.state.instance.name } sitename () { return this.$store.state.instance.name }
}, },
methods: { methods: {

View file

@ -22,7 +22,7 @@
/> />
</button> </button>
<router-link <router-link
v-if="!hideSitename" v-if="!hideSiteName"
class="site-name" class="site-name"
:to="{ name: 'root' }" :to="{ name: 'root' }"
active-class="home" active-class="home"

View file

@ -10,7 +10,7 @@ import {
faChevronDown, faChevronDown,
faChevronUp, faChevronUp,
faComments, faComments,
faBell, faBolt,
faInfoCircle, faInfoCircle,
faStream, faStream,
faList, faList,
@ -25,7 +25,7 @@ library.add(
faChevronDown, faChevronDown,
faChevronUp, faChevronUp,
faComments, faComments,
faBell, faBolt,
faInfoCircle, faInfoCircle,
faStream, faStream,
faList, faList,

View file

@ -45,7 +45,7 @@
<FAIcon <FAIcon
fixed-width fixed-width
class="fa-scale-110" class="fa-scale-110"
icon="bell" icon="bolt"
/>{{ $t("nav.interactions") }} />{{ $t("nav.interactions") }}
</router-link> </router-link>
</li> </li>

View file

@ -14,6 +14,7 @@ import {
faTimes, faTimes,
faFileUpload, faFileUpload,
faFileDownload, faFileDownload,
faSignOutAlt,
faChevronDown faChevronDown
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
import { import {
@ -28,6 +29,7 @@ library.add(
faWindowMinimize, faWindowMinimize,
faFileUpload, faFileUpload,
faFileDownload, faFileDownload,
faSignOutAlt,
faChevronDown faChevronDown
) )
@ -66,6 +68,11 @@ const SettingsModal = {
closeModal () { closeModal () {
this.$store.dispatch('closeSettingsModal') this.$store.dispatch('closeSettingsModal')
}, },
logout () {
this.$router.replace('/main/public')
this.$store.dispatch('closeSettingsModal')
this.$store.dispatch('logout')
},
peekModal () { peekModal () {
this.$store.dispatch('togglePeekSettingsModal') this.$store.dispatch('togglePeekSettingsModal')
}, },
@ -150,6 +157,7 @@ const SettingsModal = {
} }
}, },
computed: { computed: {
currentUser () { return this.$store.state.users.currentUser },
currentSaveStateNotice () { currentSaveStateNotice () {
return this.$store.state.interface.settings.currentSaveStateNotice return this.$store.state.interface.settings.currentSaveStateNotice
}, },

View file

@ -71,5 +71,11 @@
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
} }
.logout-button {
position: absolute;
right: 20px;
padding-right: 10px;
}
} }
} }

View file

@ -111,6 +111,20 @@
id="unscrolled-content" id="unscrolled-content"
class="extra-content" class="extra-content"
/> />
<button
v-if="currentUser"
class="button-default logout-button"
:title="$t('login.logout')"
:aria-label="$t('login.logout')"
@click.prevent="logout"
>
<FAIcon
fixed-width
class="fa-scale-110 fa-old-padding"
icon="sign-out-alt"
/>
<span>{{ $t('login.logout') }}</span>
</button>
</div> </div>
</div> </div>
</Modal> </Modal>

View file

@ -25,6 +25,38 @@
{{ $t('settings.hide_wallpaper') }} {{ $t('settings.hide_wallpaper') }}
</BooleanSetting> </BooleanSetting>
</li> </li>
<li>
<BooleanSetting
path="hideSiteFavicon"
expert="1"
>
{{ $t('settings.hide_site_favicon') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting
path="hideSiteName"
expert="1"
>
{{ $t('settings.hide_site_name') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting
path="showNavShortcuts"
expert="1"
>
{{ $t('settings.show_nav_shortcuts') }}
</BooleanSetting>
</li>
<li>
<BooleanSetting
path="showWiderShortcuts"
expert="1"
>
{{ $t('settings.show_wider_shortcuts') }}
</BooleanSetting>
</li>
<li> <li>
<BooleanSetting path="stopGifs"> <BooleanSetting path="stopGifs">
{{ $t('settings.stop_gifs') }} {{ $t('settings.stop_gifs') }}

View file

@ -8,7 +8,7 @@ import {
faSignOutAlt, faSignOutAlt,
faHome, faHome,
faComments, faComments,
faBell, faBolt,
faUserPlus, faUserPlus,
faBullhorn, faBullhorn,
faSearch, faSearch,
@ -23,7 +23,7 @@ library.add(
faSignOutAlt, faSignOutAlt,
faHome, faHome,
faComments, faComments,
faBell, faBolt,
faUserPlus, faUserPlus,
faBullhorn, faBullhorn,
faSearch, faSearch,

View file

@ -74,7 +74,7 @@
<FAIcon <FAIcon
fixed-width fixed-width
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
icon="bell" icon="bolt"
/> {{ $t("nav.interactions") }} /> {{ $t("nav.interactions") }}
</router-link> </router-link>
</li> </li>

View file

@ -461,6 +461,8 @@
"hide_muted_threads": "Hide muted threads", "hide_muted_threads": "Hide muted threads",
"hide_post_stats": "Hide post statistics (e.g. the number of favorites)", "hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
"hide_shoutbox": "Hide instance shoutbox", "hide_shoutbox": "Hide instance shoutbox",
"hide_site_favicon": "Hide instance favicon in top panel",
"hide_site_name": "Hide instance name in top panel",
"hide_threads_with_blocked_users": "Hide threads mentioning blocked users", "hide_threads_with_blocked_users": "Hide threads mentioning blocked users",
"hide_user_stats": "Hide user statistics (e.g. the number of followers)", "hide_user_stats": "Hide user statistics (e.g. the number of followers)",
"hide_wallpaper": "Hide instance wallpaper", "hide_wallpaper": "Hide instance wallpaper",
@ -613,7 +615,9 @@
"settings": "Settings", "settings": "Settings",
"show_admin_badge": "Show \"Admin\" badge in my profile", "show_admin_badge": "Show \"Admin\" badge in my profile",
"show_moderator_badge": "Show \"Moderator\" badge in my profile", "show_moderator_badge": "Show \"Moderator\" badge in my profile",
"show_nav_shortcuts": "Show extra navigation shortcuts in top panel",
"show_scrollbars": "Show side column's scrollbars", "show_scrollbars": "Show side column's scrollbars",
"show_wider_shortcuts": "Show wider gap between top panel shortcuts",
"show_yous": "Show (You)s", "show_yous": "Show (You)s",
"stop_gifs": "Pause animated images until you hover on them", "stop_gifs": "Pause animated images until you hover on them",
"streaming": "Automatically show new posts when scrolled to the top", "streaming": "Automatically show new posts when scrolled to the top",

View file

@ -36,6 +36,10 @@ export const defaultState = {
muteBotStatuses: undefined, // instance default muteBotStatuses: undefined, // instance default
collapseMessageWithSubject: undefined, // instance default collapseMessageWithSubject: undefined, // instance default
padEmoji: true, padEmoji: true,
showNavShortcuts: undefined, // instance default
showWiderShortcuts: undefined, // instance default
hideSiteFavicon: undefined, // instance default
hideSiteName: undefined, // instance default
hideAttachments: false, hideAttachments: false,
hideAttachmentsInConv: false, hideAttachmentsInConv: false,
maxThumbnails: 16, maxThumbnails: 16,

View file

@ -34,7 +34,8 @@ const defaultState = {
hideWordFilteredPosts: false, hideWordFilteredPosts: false,
hidePostStats: false, hidePostStats: false,
hideBotIndication: false, hideBotIndication: false,
hideSitename: false, hideSiteFavicon: false,
hideSiteName: false,
hideUserStats: false, hideUserStats: false,
muteBotStatuses: false, muteBotStatuses: false,
loginMethod: 'password', loginMethod: 'password',
@ -50,6 +51,8 @@ const defaultState = {
scopeCopy: true, scopeCopy: true,
showFeaturesPanel: true, showFeaturesPanel: true,
showInstanceSpecificPanel: false, showInstanceSpecificPanel: false,
showNavShortcuts: true,
showWiderShortcuts: true,
sidebarRight: false, sidebarRight: false,
subjectLineBehavior: 'email', subjectLineBehavior: 'email',
theme: 'pleroma-dark', theme: 'pleroma-dark',