Move Emoji pack page to Emoji tab inside Settings page
This commit is contained in:
Angelina Filippova
parent
2bd4b90b22
commit
8b1a60dce2
8 changed files with 337 additions and 370 deletions
|
|
@ -70,20 +70,6 @@ const invites = {
|
|||
]
|
||||
}
|
||||
|
||||
const emojiPacksDisabled = disabledFeatures.includes('emoji-packs')
|
||||
const emojiPacks = {
|
||||
path: '/emoji_packs',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/emojiPacks/index'),
|
||||
name: 'Emoji Packs',
|
||||
meta: { title: 'emoji-packs', icon: 'eye-open', noCache: true }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const moderationLogDisabled = disabledFeatures.includes('moderation-log')
|
||||
const moderationLog = {
|
||||
path: '/moderation_log',
|
||||
|
|
@ -179,7 +165,6 @@ export const asyncRouterMap = [
|
|||
...(statusesDisabled ? [] : [statuses]),
|
||||
...(reportsDisabled ? [] : [reports]),
|
||||
...(invitesDisabled ? [] : [invites]),
|
||||
...(emojiPacksDisabled ? [] : [emojiPacks]),
|
||||
...(moderationLogDisabled ? [] : [moderationLog]),
|
||||
...(mediaProxyCacheDisabled ? [] : [mediaProxyCache]),
|
||||
...(settingsDisabled ? [] : [settings]),
|
||||
|
|
|
|||
|
|
@ -1,344 +0,0 @@
|
|||
<template>
|
||||
<div class="emoji-packs">
|
||||
<div class="emoji-packs-header">
|
||||
<h1>{{ $t('emoji.emojiPacks') }}</h1>
|
||||
<reboot-button/>
|
||||
</div>
|
||||
<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 :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 :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-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LocalEmojiPack from './components/LocalEmojiPack'
|
||||
import RemoteEmojiPack from './components/RemoteEmojiPack'
|
||||
import i18n from '@/lang'
|
||||
import RebootButton from '@/components/RebootButton'
|
||||
|
||||
export default {
|
||||
components: { LocalEmojiPack, RebootButton, RemoteEmojiPack },
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'local',
|
||||
newPackName: '',
|
||||
activeLocalPack: '',
|
||||
activeRemotePack: '',
|
||||
fullscreenLoading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentLocalPacksPage() {
|
||||
return this.$store.state.emojiPacks.currentLocalPacksPage
|
||||
},
|
||||
currentRemotePacksPage() {
|
||||
return this.$store.state.emojiPacks.currentRemotePacksPage
|
||||
},
|
||||
isMobile() {
|
||||
return this.$store.state.app.device === 'mobile'
|
||||
},
|
||||
isTablet() {
|
||||
return this.$store.state.app.device === 'tablet'
|
||||
},
|
||||
labelWidth() {
|
||||
if (this.isMobile) {
|
||||
return '105px'
|
||||
} else if (this.isTablet) {
|
||||
return '180px'
|
||||
} else {
|
||||
return '200px'
|
||||
}
|
||||
},
|
||||
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
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('GetNodeInfo')
|
||||
this.$store.dispatch('NeedReboot')
|
||||
this.refreshLocalPacks()
|
||||
},
|
||||
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')
|
||||
})
|
||||
},
|
||||
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'>
|
||||
.create-pack {
|
||||
display: flex;
|
||||
justify-content: space-between
|
||||
}
|
||||
.create-pack-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.emoji-header-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 0 15px 22px 15px;
|
||||
}
|
||||
.emoji-name-warning {
|
||||
color: #666666;
|
||||
font-size: 13px;
|
||||
line-height: 22px;
|
||||
margin: 5px 0 0 0;
|
||||
overflow-wrap: break-word;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.emoji-packs-header-button-container {
|
||||
display: flex;
|
||||
}
|
||||
.emoji-packs-form {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.emoji-packs-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 10px 15px 15px 15px;
|
||||
}
|
||||
.emoji-packs-tabs {
|
||||
margin: 0 15px 15px 15px;
|
||||
}
|
||||
.import-pack-button {
|
||||
margin-left: 10px;
|
||||
width: 30%;
|
||||
max-width: 700px;
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
}
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
border: 1px solid #eee;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.pagination {
|
||||
margin: 25px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.reboot-button {
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
width: 145px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1824px) {
|
||||
.emoji-packs {
|
||||
max-width: 1824px;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width:480px) {
|
||||
.create-pack {
|
||||
height: 82px;
|
||||
flex-direction: column;
|
||||
}
|
||||
.create-pack-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
.divider {
|
||||
margin: 15px 0;
|
||||
}
|
||||
.el-message {
|
||||
min-width: 80%;
|
||||
}
|
||||
.el-message-box {
|
||||
width: 80%;
|
||||
}
|
||||
.emoji-header-container {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.emoji-packs-form {
|
||||
margin: 0 7px;
|
||||
label {
|
||||
padding-right: 8px;
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
.emoji-packs-header {
|
||||
margin: 15px;
|
||||
}
|
||||
.emoji-packs-header-button-container {
|
||||
height: 82px;
|
||||
flex-direction: column;
|
||||
.el-button+.el-button {
|
||||
margin: 7px 0 0 0;
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
.import-pack-button {
|
||||
width: 90%;
|
||||
}
|
||||
.reload-emoji-button {
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,33 +1,137 @@
|
|||
<template>
|
||||
<div v-if="!loading" :class="isSidebarOpen" class="form-container">
|
||||
<el-form :model="emojiData" :label-position="labelPosition" :label-width="labelWidth">
|
||||
<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 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: { Setting },
|
||||
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'
|
||||
},
|
||||
|
|
@ -41,6 +145,41 @@ export default {
|
|||
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
|
||||
},
|
||||
settingsLabelWidth() {
|
||||
if (this.isMobile) {
|
||||
return '120px'
|
||||
} else if (this.isTablet) {
|
||||
|
|
@ -48,12 +187,52 @@ export default {
|
|||
} else {
|
||||
return '280px'
|
||||
}
|
||||
},
|
||||
loading() {
|
||||
return this.settings.loading
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('GetNodeInfo')
|
||||
this.$store.dispatch('NeedReboot')
|
||||
this.refreshLocalPacks()
|
||||
},
|
||||
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')
|
||||
|
|
@ -64,6 +243,33 @@ export default {
|
|||
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')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -71,5 +277,6 @@ export default {
|
|||
|
||||
<style rel='stylesheet/scss' lang='scss'>
|
||||
@import '../styles/main';
|
||||
@include settings
|
||||
@include settings;
|
||||
@include emoji;
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -867,3 +867,122 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin emoji {
|
||||
.create-pack {
|
||||
display: flex;
|
||||
justify-content: space-between
|
||||
}
|
||||
.create-pack-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.emoji-header-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 0 15px 22px 15px;
|
||||
}
|
||||
.emoji-name-warning {
|
||||
color: #666666;
|
||||
font-size: 13px;
|
||||
line-height: 22px;
|
||||
margin: 5px 0 0 0;
|
||||
overflow-wrap: break-word;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.emoji-packs-header-button-container {
|
||||
display: flex;
|
||||
}
|
||||
.emoji-packs-form {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.emoji-packs-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 10px 15px 15px 15px;
|
||||
}
|
||||
.emoji-packs-tabs {
|
||||
margin: 0 15px 15px 15px;
|
||||
}
|
||||
.import-pack-button {
|
||||
margin-left: 10px;
|
||||
width: 30%;
|
||||
max-width: 700px;
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
}
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
border: 1px solid #eee;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.pagination {
|
||||
margin: 25px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.reboot-button {
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
width: 145px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1824px) {
|
||||
.emoji-packs {
|
||||
max-width: 1824px;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width:480px) {
|
||||
.create-pack {
|
||||
height: 82px;
|
||||
flex-direction: column;
|
||||
}
|
||||
.create-pack-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
.divider {
|
||||
margin: 15px 0;
|
||||
}
|
||||
.el-message {
|
||||
min-width: 80%;
|
||||
}
|
||||
.el-message-box {
|
||||
width: 80%;
|
||||
}
|
||||
.emoji-header-container {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.emoji-packs-form {
|
||||
margin: 0 7px;
|
||||
label {
|
||||
padding-right: 8px;
|
||||
}
|
||||
.el-form-item {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
.emoji-packs-header {
|
||||
margin: 15px;
|
||||
}
|
||||
.emoji-packs-header-button-container {
|
||||
height: 82px;
|
||||
flex-direction: column;
|
||||
.el-button+.el-button {
|
||||
margin: 7px 0 0 0;
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
.import-pack-button {
|
||||
width: 90%;
|
||||
}
|
||||
.reload-emoji-button {
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue