sliver/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Pull requests Activity

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

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/components/desktop_nav/desktop_nav.js
View file

@ -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
},

42
src/components/desktop_nav/desktop_nav.scss
View file

@ -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 {

123
src/components/desktop_nav/desktop_nav.vue
View file

@ -5,16 +5,79 @@
:class="{ '-logoLeft': logoLeft }"
@click="scrollToTop()"
>
<div class="inner-nav">
<div class="item sitename">
<div
class="inner-nav"
:class="{ '-wide': showWiderShortcuts }"
>
<div class="item nav-left-wrapper">
<router-link
v-if="!hideSitename"
class="site-name"
class="site-brand"
:to="{ name: 'root' }"
active-class="home"
>
<img
v-if="!hideSiteFavicon"
class="favicon"
src="/favicon.png"
>
<span
v-if="!hideSiteName"
class="site-name"
>
{{ sitename }}
</span>
</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>
<router-link
class="logo"
@ -36,6 +99,46 @@
@toggled="onSearchBarToggled"
@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
class="button-unstyled nav-icon"
@click.stop="openSettingsModal"
@ -61,18 +164,6 @@
:title="$t('nav.administration')"
/>
</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>
</nav>

7
src/components/mobile_nav/mobile_nav.js
View file

@ -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: {

2
src/components/mobile_nav/mobile_nav.vue
View file

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

4
src/components/nav_panel/nav_panel.js
View file

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

2
src/components/nav_panel/nav_panel.vue
View file

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

8
src/components/settings_modal/settings_modal.js
View file

@ -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
},

6
src/components/settings_modal/settings_modal.scss
View file

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

14
src/components/settings_modal/settings_modal.vue
View file

@ -111,6 +111,20 @@
id="unscrolled-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>
</Modal>

32
src/components/settings_modal/tabs/general_tab.vue
View file

@ -25,6 +25,38 @@
{{ $t('settings.hide_wallpaper') }}
</BooleanSetting>
</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>
<BooleanSetting path="stopGifs">
{{ $t('settings.stop_gifs') }}

4
src/components/side_drawer/side_drawer.js
View file

@ -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,

2
src/components/side_drawer/side_drawer.vue
View file

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

4
src/i18n/en.json
View file

@ -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",

4
src/modules/config.js
View file

@ -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,

5
src/modules/instance.js
View file

@ -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',