pleroma-fe/src/App.js

136 lines
5.3 KiB
JavaScript
Raw Normal View History

2016-10-27 16:01:48 +00:00
import UserPanel from './components/user_panel/user_panel.vue'
2016-11-06 19:11:23 +00:00
import NavPanel from './components/nav_panel/nav_panel.vue'
2018-02-03 15:27:33 +00:00
import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
2018-09-03 06:57:22 +00:00
import FeaturesPanel from './components/features_panel/features_panel.vue'
2018-09-03 05:43:10 +00:00
import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
import ShoutPanel from './components/shout_panel/shout_panel.vue'
import MediaModal from './components/media_modal/media_modal.vue'
import SideDrawer from './components/side_drawer/side_drawer.vue'
2019-09-19 17:59:34 +00:00
import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
import MobileNav from './components/mobile_nav/mobile_nav.vue'
import DesktopNav from './components/desktop_nav/desktop_nav.vue'
2019-03-19 08:53:11 +00:00
import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
2022-06-08 03:31:48 +00:00
import EditStatusModal from './components/edit_status_modal/edit_status_modal.vue'
import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
import StatusHistoryModal from './components/status_history_modal/status_history_modal.vue'
import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
2020-05-07 13:10:53 +00:00
import { windowWidth, windowHeight } from './services/window_utils/window_utils'
2020-12-17 23:01:58 +00:00
import { mapGetters } from 'vuex'
2022-04-05 16:22:15 +00:00
import { defineAsyncComponent } from 'vue'
2016-10-26 17:03:55 +00:00
export default {
name: 'app',
components: {
2016-11-06 19:11:23 +00:00
UserPanel,
2016-11-27 18:44:56 +00:00
NavPanel,
2022-04-05 16:22:15 +00:00
Notifications: defineAsyncComponent(() => import('./components/notifications/notifications.vue')),
2018-02-11 14:12:05 +00:00
InstanceSpecificPanel,
2018-09-03 06:57:22 +00:00
FeaturesPanel,
2018-09-03 05:55:40 +00:00
WhoToFollowPanel,
ShoutPanel,
MediaModal,
SideDrawer,
2019-09-19 17:59:34 +00:00
MobilePostStatusButton,
2019-03-19 08:53:11 +00:00
MobileNav,
DesktopNav,
2022-06-12 22:36:41 +00:00
SettingsModal: defineAsyncComponent(() => import('./components/settings_modal/settings_modal.vue')),
2022-08-01 21:37:48 +00:00
UpdateNotification: defineAsyncComponent(() => import('./components/update_notification/update_notification.vue')),
UserReportingModal,
PostStatusModal,
2022-06-08 03:31:48 +00:00
EditStatusModal,
StatusHistoryModal,
GlobalNoticeList
2016-11-03 15:58:32 +00:00
},
2017-01-17 16:27:39 +00:00
data: () => ({
2020-11-01 14:44:57 +00:00
mobileActivePanel: 'timeline'
2017-01-17 16:27:39 +00:00
}),
created () {
// Load the locale from the storage
const val = this.$store.getters.mergedConfig.interfaceLanguage
this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
2019-03-03 14:33:40 +00:00
window.addEventListener('resize', this.updateMobileState)
},
unmounted () {
2019-03-03 14:33:40 +00:00
window.removeEventListener('resize', this.updateMobileState)
},
2016-11-03 15:58:32 +00:00
computed: {
classes () {
return [
{
'-reverse': this.reverseLayout,
'-no-sticky-headers': this.noSticky,
'-has-new-post-button': this.newPostButtonShown
},
'-' + this.layoutType
]
},
navClasses () {
const { navbarColumnStretch } = this.$store.getters.mergedConfig
return [
'-' + this.layoutType,
...(navbarColumnStretch ? ['-column-stretch'] : [])
]
},
2016-11-27 18:44:56 +00:00
currentUser () { return this.$store.state.users.currentUser },
2020-12-17 23:01:58 +00:00
userBackground () { return this.currentUser.background_image },
instanceBackground () {
return this.mergedConfig.hideInstanceWallpaper
? null
: this.$store.state.instance.background
2017-02-16 15:59:06 +00:00
},
2020-12-17 23:01:58 +00:00
background () { return this.userBackground || this.instanceBackground },
2019-02-03 20:32:24 +00:00
bgStyle () {
2020-12-17 23:01:58 +00:00
if (this.background) {
2020-12-16 16:25:07 +00:00
return {
'--body-background-image': `url(${this.background})`
}
2019-02-15 12:20:52 +00:00
}
},
2022-04-06 21:06:41 +00:00
shout () { return this.$store.state.shout.joined },
2018-09-09 18:21:23 +00:00
suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
2019-08-12 18:29:11 +00:00
showInstanceSpecificPanel () {
return this.$store.state.instance.showInstanceSpecificPanel &&
!this.$store.getters.mergedConfig.hideISP &&
2019-08-12 18:29:11 +00:00
this.$store.state.instance.instanceSpecificPanelContent
},
2022-04-11 20:30:41 +00:00
isChats () {
return this.$route.name === 'chat' || this.$route.name === 'chats'
},
2022-08-16 21:48:10 +00:00
isListEdit () {
return this.$route.name === 'lists-edit'
},
newPostButtonShown () {
2022-04-11 20:30:41 +00:00
if (this.isChats) return false
2022-08-16 21:48:10 +00:00
if (this.isListEdit) return false
return this.$store.getters.mergedConfig.alwaysShowNewPostButton || this.layoutType === 'mobile'
},
2019-03-03 14:33:40 +00:00
showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
editingAvailable () { return this.$store.state.instance.editingAvailable },
shoutboxPosition () {
2022-04-26 15:12:45 +00:00
return this.$store.getters.mergedConfig.alwaysShowNewPostButton || false
},
2021-06-14 20:33:51 +00:00
hideShoutbox () {
2021-06-14 19:42:56 +00:00
return this.$store.getters.mergedConfig.hideShoutbox
},
layoutType () { return this.$store.state.interface.layoutType },
privateMode () { return this.$store.state.instance.private },
reverseLayout () {
const { thirdColumnMode, sidebarRight: reverseSetting } = this.$store.getters.mergedConfig
if (this.layoutType !== 'wide') {
return reverseSetting
} else {
return thirdColumnMode === 'notifications' ? reverseSetting : !reverseSetting
}
},
noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
showScrollbars () { return this.$store.getters.mergedConfig.showScrollbars },
2020-12-17 23:01:58 +00:00
...mapGetters(['mergedConfig'])
2017-01-17 16:27:39 +00:00
},
methods: {
2019-03-03 14:33:40 +00:00
updateMobileState () {
this.$store.dispatch('setLayoutWidth', windowWidth())
this.$store.dispatch('setLayoutHeight', windowHeight())
2020-05-07 13:10:53 +00:00
}
2016-10-26 17:03:55 +00:00
}
}