297 lines
9.7 KiB
Vue
297 lines
9.7 KiB
Vue
<template>
|
|
<div class="emoji-packs">
|
|
<div class="emoji-header-container">
|
|
<div class="emoji-packs-header-button-container">
|
|
<el-button class="reload-emoji-button" @click="reloadEmoji">{{ $t('emoji.reloadEmoji') }}</el-button>
|
|
<el-tooltip :content="$t('emoji.importEmojiTooltip')" effects="dark" placement="bottom" popper-class="import-pack-button">
|
|
<el-button @click="importFromFS">
|
|
{{ $t('emoji.importPacks') }}
|
|
</el-button>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
<el-tabs v-model="activeTab" type="card" class="emoji-packs-tabs">
|
|
<el-tab-pane v-if="!emojiPacksDisabled" :label="$t('emoji.localPacks')" name="local">
|
|
<el-form :label-width="labelWidth" class="emoji-packs-form">
|
|
<el-form-item :label="$t('emoji.localPacks')">
|
|
<el-button @click="refreshLocalPacks">{{ $t('emoji.refreshLocalPacks') }}</el-button>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('emoji.createLocalPack')">
|
|
<div class="create-pack">
|
|
<el-input v-model="newPackName" :placeholder="$t('users.name')" />
|
|
<el-button
|
|
:disabled="newPackName.trim() === ''"
|
|
class="create-pack-button"
|
|
@click="createLocalPack">
|
|
{{ $t('users.create') }}
|
|
</el-button>
|
|
</div>
|
|
<span class="emoji-name-warning">{{ $t('emoji.emojiWarning') }}</span>
|
|
</el-form-item>
|
|
<el-form-item v-if="Object.keys(localPacks).length > 0" :label="$t('emoji.packs')">
|
|
<el-collapse v-for="(pack, name) in localPacks" :key="name" v-model="activeLocalPack" accordion @change="closeRemoteTabs">
|
|
<local-emoji-pack ref="localEmojiPack" :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="true" />
|
|
</el-collapse>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="pagination">
|
|
<el-pagination
|
|
:total="localPacksCount"
|
|
:current-page="currentLocalPacksPage"
|
|
:page-size="pageSize"
|
|
hide-on-single-page
|
|
layout="prev, pager, next"
|
|
@current-change="handleLocalPageChange"
|
|
/>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane v-if="!emojiPacksDisabled" :label="$t('emoji.remotePacks')" name="remote">
|
|
<el-form :label-width="labelWidth" class="emoji-packs-form">
|
|
<el-form-item :label="$t('emoji.remotePacks')">
|
|
<div class="create-pack">
|
|
<el-input
|
|
v-model="remoteInstanceAddress"
|
|
:placeholder="$t('emoji.remoteInstanceAddress')" />
|
|
<el-button
|
|
v-loading.fullscreen.lock="fullscreenLoading"
|
|
:disabled="remoteInstanceAddress.trim() === ''"
|
|
class="create-pack-button"
|
|
@click="refreshRemotePacks">
|
|
{{ $t('emoji.refreshRemote') }}
|
|
</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item v-if="Object.keys(remotePacks).length > 0" :label="$t('emoji.packs')">
|
|
<el-collapse v-for="(pack, name) in remotePacks" :key="name" v-model="activeRemotePack" accordion @change="closeLocalTabs">
|
|
<remote-emoji-pack ref="remoteEmojiPack" :active-tab="activeRemotePack" :name="name" :pack="pack" :host="$store.getters.authHost" :is-local="false" />
|
|
</el-collapse>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="pagination">
|
|
<el-pagination
|
|
:total="remotePacksCount"
|
|
:current-page="currentRemotePacksPage"
|
|
:page-size="pageSize"
|
|
hide-on-single-page
|
|
layout="prev, pager, next"
|
|
@current-change="handleRemotePageChange"
|
|
/>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane :label="$t('settings.settings')" name="settings">
|
|
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
|
|
<el-form :model="emojiData" :label-position="labelPosition" :label-width="settingsLabelWidth">
|
|
<setting :setting-group="emoji" :data="emojiData"/>
|
|
</el-form>
|
|
<div class="submit-button-container">
|
|
<el-button class="submit-button" type="primary" @click="onSubmit">Submit</el-button>
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
import i18n from '@/lang'
|
|
import LocalEmojiPack from '../../emojiPacks/LocalEmojiPack'
|
|
import RemoteEmojiPack from '../../emojiPacks/RemoteEmojiPack'
|
|
import Setting from './Setting'
|
|
import _ from 'lodash'
|
|
|
|
export default {
|
|
name: 'Emoji',
|
|
components: { LocalEmojiPack, RemoteEmojiPack, Setting },
|
|
data() {
|
|
return {
|
|
activeTab: 'local',
|
|
newPackName: '',
|
|
activeLocalPack: '',
|
|
activeRemotePack: '',
|
|
fullscreenLoading: false
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'settings'
|
|
]),
|
|
currentLocalPacksPage() {
|
|
return this.$store.state.emojiPacks.currentLocalPacksPage
|
|
},
|
|
currentRemotePacksPage() {
|
|
return this.$store.state.emojiPacks.currentRemotePacksPage
|
|
},
|
|
emoji() {
|
|
return this.settings.description.find(setting => setting.key === ':emoji')
|
|
},
|
|
emojiData() {
|
|
return _.get(this.settings.settings, [':pleroma', ':emoji']) || {}
|
|
},
|
|
emojiPacksDisabled() {
|
|
const disabledFeatures = process.env.DISABLED_FEATURES || []
|
|
return disabledFeatures.includes('emoji-packs')
|
|
},
|
|
isMobile() {
|
|
return this.$store.state.app.device === 'mobile'
|
|
},
|
|
isSidebarOpen() {
|
|
return this.$store.state.app.sidebar.opened ? 'sidebar-opened' : 'sidebar-closed'
|
|
},
|
|
isTablet() {
|
|
return this.$store.state.app.device === 'tablet'
|
|
},
|
|
labelPosition() {
|
|
return this.isMobile ? 'top' : 'right'
|
|
},
|
|
labelWidth() {
|
|
if (this.isMobile) {
|
|
return '105px'
|
|
} else if (this.isTablet) {
|
|
return '180px'
|
|
} else {
|
|
return '200px'
|
|
}
|
|
},
|
|
loading() {
|
|
return this.settings.loading
|
|
},
|
|
localPacks() {
|
|
return this.$store.state.emojiPacks.localPacks
|
|
},
|
|
localPacksCount() {
|
|
return this.$store.state.emojiPacks.localPacksCount
|
|
},
|
|
pageSize() {
|
|
return this.$store.state.emojiPacks.pageSize
|
|
},
|
|
remoteInstanceAddress: {
|
|
get() {
|
|
return this.$store.state.emojiPacks.remoteInstance
|
|
},
|
|
set(instance) {
|
|
this.$store.dispatch('SetRemoteInstance', instance)
|
|
}
|
|
},
|
|
remotePacks() {
|
|
return this.$store.state.emojiPacks.remotePacks
|
|
},
|
|
remotePacksCount() {
|
|
return this.$store.state.emojiPacks.remotePacksCount
|
|
},
|
|
searchQuery() {
|
|
return this.$store.state.settings.searchQuery
|
|
},
|
|
settingsLabelWidth() {
|
|
if (this.isMobile) {
|
|
return '120px'
|
|
} else if (this.isTablet) {
|
|
return '200px'
|
|
} else {
|
|
return '280px'
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$store.dispatch('GetNodeInfo')
|
|
this.$store.dispatch('NeedReboot')
|
|
this.refreshLocalPacks()
|
|
|
|
if (this.searchQuery.length > 0) {
|
|
this.activeTab = 'settings'
|
|
const selectedSetting = document.querySelector(`[data-search="${this.searchQuery}"]`)
|
|
console.log(selectedSetting)
|
|
if (selectedSetting) {
|
|
selectedSetting.scrollIntoView({ block: 'start', behavior: 'smooth' })
|
|
}
|
|
|
|
this.$store.dispatch('SetSearchQuery', '')
|
|
}
|
|
},
|
|
methods: {
|
|
closeLocalTabs() {
|
|
this.collapseExistingEmojis()
|
|
this.activeLocalPack = ''
|
|
},
|
|
closeRemoteTabs() {
|
|
this.collapseExistingEmojis()
|
|
this.activeRemotePack = ''
|
|
},
|
|
collapseExistingEmojis() {
|
|
if (this.$refs.localEmojiPack && this.$refs.localEmojiPack.length > 0) {
|
|
this.$refs.localEmojiPack.forEach(el => el.collapse())
|
|
}
|
|
if (this.$refs.remoteEmojiPack && this.$refs.remoteEmojiPack.length > 0) {
|
|
this.$refs.remoteEmojiPack.forEach(el => el.collapse())
|
|
}
|
|
},
|
|
createLocalPack() {
|
|
this.$store.dispatch('CreatePack', { name: this.newPackName })
|
|
.then(() => {
|
|
this.newPackName = ''
|
|
|
|
this.$store.dispatch('FetchLocalEmojiPacks', this.currentLocalPacksPage)
|
|
this.$store.dispatch('ReloadEmoji')
|
|
})
|
|
},
|
|
handleLocalPageChange(page) {
|
|
this.$store.dispatch('FetchLocalEmojiPacks', page)
|
|
},
|
|
handleRemotePageChange(page) {
|
|
this.$store.dispatch('SetRemoteEmojiPacks', { page, remoteInstance: this.remoteInstanceAddress })
|
|
},
|
|
importFromFS() {
|
|
this.$store.dispatch('ImportFromFS')
|
|
.then(() => {
|
|
this.$store.dispatch('FetchLocalEmojiPacks', this.currentLocalPacksPage)
|
|
this.$store.dispatch('ReloadEmoji')
|
|
})
|
|
},
|
|
async onSubmit() {
|
|
try {
|
|
await this.$store.dispatch('SubmitChanges')
|
|
} catch (e) {
|
|
return
|
|
}
|
|
this.$message({
|
|
type: 'success',
|
|
message: i18n.t('settings.success')
|
|
})
|
|
},
|
|
refreshLocalPacks() {
|
|
try {
|
|
this.$store.dispatch('FetchLocalEmojiPacks', this.currentLocalPacksPage)
|
|
} catch (e) {
|
|
return
|
|
}
|
|
this.$message({
|
|
type: 'success',
|
|
message: i18n.t('emoji.refreshed')
|
|
})
|
|
},
|
|
async refreshRemotePacks() {
|
|
this.fullscreenLoading = true
|
|
await this.$store.dispatch('SetRemoteEmojiPacks', { page: 1, remoteInstance: this.remoteInstanceAddress })
|
|
this.fullscreenLoading = false
|
|
},
|
|
async reloadEmoji() {
|
|
try {
|
|
this.$store.dispatch('ReloadEmoji')
|
|
} catch (e) {
|
|
return
|
|
}
|
|
this.$message({
|
|
type: 'success',
|
|
message: i18n.t('emoji.reloaded')
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style rel='stylesheet/scss' lang='scss'>
|
|
@import '../../styles/settings';
|
|
@include settings;
|
|
@include emoji;
|
|
</style>
|