akkoma-fe/src/App.js

137 lines
4.9 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'
2016-11-27 18:44:56 +00:00
import Notifications from './components/notifications/notifications.vue'
2019-07-15 16:42:27 +00:00
import SearchBar from './components/search_bar/search_bar.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'
2018-01-26 14:11:34 +00:00
import ChatPanel from './components/chat_panel/chat_panel.vue'
2020-05-03 14:36:12 +00:00
import SettingsModal from './components/settings_modal/settings_modal.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'
2019-03-19 08:53:11 +00:00
import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
2019-04-01 19:41:34 +00:00
import { windowWidth } from './services/window_utils/window_utils'
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,
2017-05-12 16:54:12 +00:00
Notifications,
2019-07-15 16:42:27 +00:00
SearchBar,
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,
ChatPanel,
MediaModal,
SideDrawer,
2019-09-19 17:59:34 +00:00
MobilePostStatusButton,
2019-03-19 08:53:11 +00:00
MobileNav,
2020-05-03 14:36:12 +00:00
SettingsModal,
UserReportingModal,
PostStatusModal,
GlobalNoticeList
2016-11-03 15:58:32 +00:00
},
2017-01-17 16:27:39 +00:00
data: () => ({
mobileActivePanel: 'timeline',
2019-07-15 16:42:27 +00:00
searchBarHidden: true,
supportsMask: window.CSS && window.CSS.supports && (
window.CSS.supports('mask-size', 'contain') ||
window.CSS.supports('-webkit-mask-size', 'contain') ||
window.CSS.supports('-moz-mask-size', 'contain') ||
window.CSS.supports('-ms-mask-size', 'contain') ||
window.CSS.supports('-o-mask-size', 'contain')
2019-04-29 18:37:08 +00:00
)
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)
},
destroyed () {
window.removeEventListener('resize', this.updateMobileState)
},
2016-11-03 15:58:32 +00:00
computed: {
2016-11-27 18:44:56 +00:00
currentUser () { return this.$store.state.users.currentUser },
2017-02-16 15:59:06 +00:00
background () {
2018-09-09 19:02:22 +00:00
return this.currentUser.background_image || this.$store.state.instance.background
2017-02-16 15:59:06 +00:00
},
2018-09-09 19:02:22 +00:00
enableMask () { return this.supportsMask && this.$store.state.instance.logoMask },
logoStyle () {
return {
'visibility': this.enableMask ? 'hidden' : 'visible'
}
},
logoMaskStyle () {
return this.enableMask ? {
2018-09-09 19:02:22 +00:00
'mask-image': `url(${this.$store.state.instance.logo})`
} : {
'background-color': this.enableMask ? '' : 'transparent'
}
},
logoBgStyle () {
return Object.assign({
'margin': `${this.$store.state.instance.logoMargin} 0`,
2019-07-15 16:42:27 +00:00
opacity: this.searchBarHidden ? 1 : 0
}, this.enableMask ? {} : {
'background-color': this.enableMask ? '' : 'transparent'
})
},
2018-09-09 19:02:22 +00:00
logo () { return this.$store.state.instance.logo },
2019-02-03 20:32:24 +00:00
bgStyle () {
return {
'background-image': `url(${this.background})`
}
},
2019-02-15 12:20:52 +00:00
bgAppStyle () {
return {
'--body-background-image': `url(${this.background})`
}
},
2018-09-09 18:21:23 +00:00
sitename () { return this.$store.state.instance.name },
2018-02-03 23:36:10 +00:00
chat () { return this.$store.state.chat.channel.state === 'joined' },
hideSitename () { return this.$store.state.instance.hideSitename },
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
},
2019-03-03 14:33:40 +00:00
showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
isMobileLayout () { return this.$store.state.interface.mobileLayout },
privateMode () { return this.$store.state.instance.private },
sidebarAlign () {
return {
'order': this.$store.state.instance.sidebarRight ? 99 : 0
}
}
2017-01-17 16:27:39 +00:00
},
methods: {
scrollToTop () {
window.scrollTo(0, 0)
2017-07-02 10:25:34 +00:00
},
logout () {
2018-11-10 09:43:25 +00:00
this.$router.replace('/main/public')
2017-07-02 10:25:34 +00:00
this.$store.dispatch('logout')
},
2019-07-15 16:42:27 +00:00
onSearchBarToggled (hidden) {
this.searchBarHidden = hidden
},
2020-05-03 14:36:12 +00:00
openSettingsModal () {
this.$store.dispatch('openSettingsModal')
},
2019-03-03 14:33:40 +00:00
updateMobileState () {
2019-04-01 19:41:34 +00:00
const mobileLayout = windowWidth() <= 800
const changed = mobileLayout !== this.isMobileLayout
2019-03-03 14:33:40 +00:00
if (changed) {
2019-04-01 19:41:34 +00:00
this.$store.dispatch('setMobileLayout', mobileLayout)
2019-03-03 14:33:40 +00:00
}
2017-01-17 16:27:39 +00:00
}
2016-10-26 17:03:55 +00:00
}
}