From ca0b73060556367b5a7ec0d771b9ca14ba958870 Mon Sep 17 00:00:00 2001 From: eris Date: Sun, 14 Aug 2022 23:24:59 +0000 Subject: [PATCH] Redo desktop nav, add options for site name and favicon (#83) Reviewed-on: https://akkoma.dev/AkkomaGang/pleroma-fe/pulls/83 Co-authored-by: eris Co-committed-by: eris --- src/components/desktop_nav/desktop_nav.js | 31 ++++- src/components/desktop_nav/desktop_nav.scss | 42 ++++-- src/components/desktop_nav/desktop_nav.vue | 125 +++++++++++++++--- src/components/mobile_nav/mobile_nav.js | 7 +- src/components/mobile_nav/mobile_nav.vue | 2 +- src/components/nav_panel/nav_panel.js | 4 +- src/components/nav_panel/nav_panel.vue | 2 +- .../settings_modal/settings_modal.js | 8 ++ .../settings_modal/settings_modal.scss | 6 + .../settings_modal/settings_modal.vue | 14 ++ .../settings_modal/tabs/general_tab.vue | 32 +++++ src/components/side_drawer/side_drawer.js | 4 +- src/components/side_drawer/side_drawer.vue | 2 +- src/i18n/en.json | 4 + src/modules/config.js | 4 + src/modules/instance.js | 5 +- 16 files changed, 251 insertions(+), 41 deletions(-) diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js index e048f53d..3307b5d5 100644 --- a/src/components/desktop_nav/desktop_nav.js +++ b/src/components/desktop_nav/desktop_nav.js @@ -5,12 +5,16 @@ import { faSignOutAlt, faHome, faComments, - faBell, faUserPlus, faBullhorn, faSearch, faTachometerAlt, faCog, + faGlobe, + faBolt, + faUsers, + faCommentMedical, + faBookmark, faInfoCircle } from '@fortawesome/free-solid-svg-icons' @@ -19,12 +23,16 @@ library.add( faSignOutAlt, faHome, faComments, - faBell, faUserPlus, faBullhorn, faSearch, faTachometerAlt, faCog, + faGlobe, + faBolt, + faUsers, + faCommentMedical, + faBookmark, faInfoCircle ) @@ -65,7 +73,22 @@ export default { }) }, logo () { return this.$store.state.instance.logo }, + mergedConfig () { + return this.$store.getters.mergedConfig + }, 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 }, logoLeft () { return this.$store.state.instance.logoLeft }, currentUser () { return this.$store.state.users.currentUser }, @@ -75,10 +98,6 @@ export default { scrollToTop () { window.scrollTo(0, 0) }, - logout () { - this.$router.replace('/main/public') - this.$store.dispatch('logout') - }, onSearchBarToggled (hidden) { this.searchBarHidden = hidden }, diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss index 7fd2b26f..4d8c40e3 100644 --- a/src/components/desktop_nav/desktop_nav.scss +++ b/src/components/desktop_nav/desktop_nav.scss @@ -15,16 +15,16 @@ display: grid; grid-template-rows: var(--navbar-height); grid-template-columns: 2fr auto 2fr; - grid-template-areas: "sitename logo actions"; + grid-template-areas: "nav-left logo actions"; box-sizing: border-box; padding: 0 1.2em; margin: auto; - max-width: 980px; + max-width: 1110px; } &.-logoLeft .inner-nav { grid-template-columns: auto 2fr 2fr; - grid-template-areas: "logo sitename actions"; + grid-template-areas: "logo nav-left actions"; } .button-default { @@ -84,14 +84,21 @@ } .nav-icon { - margin-left: 1em; + margin-left: 0.2em; width: 2em; height: 100%; - font-size: 130%; text-align: center; - &-logout { - margin-left: 2em; + &.router-link-active { + 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 { @@ -100,8 +107,25 @@ } } - .sitename { - grid-area: sitename; + .-wide { + .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 { diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue index fe9af544..32b90749 100644 --- a/src/components/desktop_nav/desktop_nav.vue +++ b/src/components/desktop_nav/desktop_nav.vue @@ -5,16 +5,79 @@ :class="{ '-logoLeft': logoLeft }" @click="scrollToTop()" > -
-
+
+
- {{ sitename }} + + + {{ sitename }} + +
+ + + + + + + + + + + + +
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js index 713fd37b..7a356921 100644 --- a/src/components/mobile_nav/mobile_nav.js +++ b/src/components/mobile_nav/mobile_nav.js @@ -41,7 +41,12 @@ const MobileNav = { unseenNotificationsCount () { 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 } }, methods: { diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue index 3583ab3c..308c8d57 100644 --- a/src/components/mobile_nav/mobile_nav.vue +++ b/src/components/mobile_nav/mobile_nav.vue @@ -22,7 +22,7 @@ /> {{ $t("nav.interactions") }} diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js index 0a72dca1..b1bb4eab 100644 --- a/src/components/settings_modal/settings_modal.js +++ b/src/components/settings_modal/settings_modal.js @@ -14,6 +14,7 @@ import { faTimes, faFileUpload, faFileDownload, + faSignOutAlt, faChevronDown } from '@fortawesome/free-solid-svg-icons' import { @@ -28,6 +29,7 @@ library.add( faWindowMinimize, faFileUpload, faFileDownload, + faSignOutAlt, faChevronDown ) @@ -66,6 +68,11 @@ const SettingsModal = { closeModal () { this.$store.dispatch('closeSettingsModal') }, + logout () { + this.$router.replace('/main/public') + this.$store.dispatch('closeSettingsModal') + this.$store.dispatch('logout') + }, peekModal () { this.$store.dispatch('togglePeekSettingsModal') }, @@ -150,6 +157,7 @@ const SettingsModal = { } }, computed: { + currentUser () { return this.$store.state.users.currentUser }, currentSaveStateNotice () { return this.$store.state.interface.settings.currentSaveStateNotice }, diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss index 13cb0e65..70b63360 100644 --- a/src/components/settings_modal/settings_modal.scss +++ b/src/components/settings_modal/settings_modal.scss @@ -71,5 +71,11 @@ display: flex; flex-grow: 1; } + + .logout-button { + position: absolute; + right: 20px; + padding-right: 10px; + } } } diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue index d3bed061..03c9978e 100644 --- a/src/components/settings_modal/settings_modal.vue +++ b/src/components/settings_modal/settings_modal.vue @@ -111,6 +111,20 @@ id="unscrolled-content" class="extra-content" /> +
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index b2d06eef..2c6ff5cd 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -25,6 +25,38 @@ {{ $t('settings.hide_wallpaper') }} +
  • + + {{ $t('settings.hide_site_favicon') }} + +
    • +
  • + + {{ $t('settings.hide_site_name') }} + +
    • +
  • + + {{ $t('settings.show_nav_shortcuts') }} + +
    • +
  • + + {{ $t('settings.show_wider_shortcuts') }} + +
  • {{ $t('settings.stop_gifs') }} diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js index 9bfee6bd..1c8d5865 100644 --- a/src/components/side_drawer/side_drawer.js +++ b/src/components/side_drawer/side_drawer.js @@ -8,7 +8,7 @@ import { faSignOutAlt, faHome, faComments, - faBell, + faBolt, faUserPlus, faBullhorn, faSearch, @@ -23,7 +23,7 @@ library.add( faSignOutAlt, faHome, faComments, - faBell, + faBolt, faUserPlus, faBullhorn, faSearch, diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index 4bbc43bb..6d78fa85 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -74,7 +74,7 @@ {{ $t("nav.interactions") }}
    • diff --git a/src/i18n/en.json b/src/i18n/en.json index 308575f4..853f5917 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -461,6 +461,8 @@ "hide_muted_threads": "Hide muted threads", "hide_post_stats": "Hide post statistics (e.g. the number of favorites)", "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_user_stats": "Hide user statistics (e.g. the number of followers)", "hide_wallpaper": "Hide instance wallpaper", @@ -613,7 +615,9 @@ "settings": "Settings", "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_scrollbars": "Show side column's scrollbars", + "show_wider_shortcuts": "Show wider gap between top panel shortcuts", "show_yous": "Show (You)s", "stop_gifs": "Pause animated images until you hover on them", "streaming": "Automatically show new posts when scrolled to the top", diff --git a/src/modules/config.js b/src/modules/config.js index 2f12e153..501d5dfe 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -36,6 +36,10 @@ export const defaultState = { muteBotStatuses: undefined, // instance default collapseMessageWithSubject: undefined, // instance default padEmoji: true, + showNavShortcuts: undefined, // instance default + showWiderShortcuts: undefined, // instance default + hideSiteFavicon: undefined, // instance default + hideSiteName: undefined, // instance default hideAttachments: false, hideAttachmentsInConv: false, maxThumbnails: 16, diff --git a/src/modules/instance.js b/src/modules/instance.js index cb6250ef..faa8692a 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -34,7 +34,8 @@ const defaultState = { hideWordFilteredPosts: false, hidePostStats: false, hideBotIndication: false, - hideSitename: false, + hideSiteFavicon: false, + hideSiteName: false, hideUserStats: false, muteBotStatuses: false, loginMethod: 'password', @@ -50,6 +51,8 @@ const defaultState = { scopeCopy: true, showFeaturesPanel: true, showInstanceSpecificPanel: false, + showNavShortcuts: true, + showWiderShortcuts: true, sidebarRight: false, subjectLineBehavior: 'email', theme: 'pleroma-dark',