Move Emoji settings to separate Emoji tab

src/lang/en.js

@@ -420,6 +420,7 @@ export default {
     activityPub: 'ActivityPub',
     auth: 'Authentication',
     captcha: 'Captcha',
+    emoji: 'Emoji',
     frontend: 'Frontend',
     http: 'HTTP',
     mrf: 'MRF',

src/views/settings/components/Emoji.vue

@@ -0,0 +1,75 @@
+<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>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import i18n from '@/lang'
+import Setting from './Setting'
+import _ from 'lodash'
+
+export default {
+  name: 'Emoji',
+  components: { Setting },
+  computed: {
+    ...mapGetters([
+      'settings'
+    ]),
+    emoji() {
+      return this.settings.description.find(setting => setting.key === ':emoji')
+    },
+    emojiData() {
+      return _.get(this.settings.settings, [':pleroma', ':emoji']) || {}
+    },
+    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 '120px'
+      } else if (this.isTablet) {
+        return '200px'
+      } else {
+        return '280px'
+      }
+    },
+    loading() {
+      return this.settings.loading
+    }
+  },
+  methods: {
+    async onSubmit() {
+      try {
+        await this.$store.dispatch('SubmitChanges')
+      } catch (e) {
+        return
+      }
+      this.$message({
+        type: 'success',
+        message: i18n.t('settings.success')
+      })
+    }
+  }
+}
+</script>
+
+<style rel='stylesheet/scss' lang='scss'>
+@import '../styles/main';
+@include settings
+</style>

src/views/settings/components/Frontend.vue

@@ -16,10 +16,6 @@
       <setting :setting-group="assets" :data="assetsData"/>
     </el-form>
     <el-divider v-if="assets" class="divider thick-line"/>
-    <el-form :model="emojiData" :label-position="labelPosition" :label-width="labelWidth">
-      <setting :setting-group="emoji" :data="emojiData"/>
-    </el-form>
-    <el-divider v-if="emoji" class="divider thick-line"/>
     <el-form :model="chatData" :label-position="labelPosition" :label-width="labelWidth">
       <setting :setting-group="chat" :data="chatData"/>
     </el-form>
@@ -62,12 +58,6 @@ export default {
     chatData() {
       return _.get(this.settings.settings, [':pleroma', ':chat']) || {}
     },
-    emoji() {
-      return this.settings.description.find(setting => setting.key === ':emoji')
-    },
-    emojiData() {
-      return _.get(this.settings.settings, [':pleroma', ':emoji']) || {}
-    },
     frontend() {
       return this.settings.description.find(setting => setting.key === ':frontend_configurations')
     },

src/views/settings/components/index.js

@@ -1,6 +1,7 @@
 export { default as ActivityPub } from './ActivityPub'
 export { default as Authentication } from './Authentication'
 export { default as Captcha } from './Captcha'
+export { default as Emoji } from './Emoji'
 export { default as Esshd } from './Esshd'
 export { default as Frontend } from './Frontend'
 export { default as Gopher } from './Gopher'

src/views/settings/components/tabs.js

@@ -16,6 +16,10 @@ export const tabs = description => {
       label: 'settings.captcha',
       settings: ['Pleroma.Captcha', 'Pleroma.Captcha.Kocaptcha']
     },
+    'emoji': {
+      label: 'settings.emoji',
+      settings: [':emoji']
+    },
     'frontend': {
       label: 'settings.frontend',
       settings: [':assets', ':chat', ':frontends', ':emoji', ':frontend_configurations', ':markup', ':static_fe']

src/views/settings/index.vue

@@ -60,6 +60,7 @@ import {
   ActivityPub,
   Authentication,
   Captcha,
+  Emoji,
   Esshd,
   Frontend,
   Gopher,
@@ -85,6 +86,7 @@ export default {
     ActivityPub,
     Authentication,
     Captcha,
+    Emoji,
     Esshd,
     Frontend,
     Gopher,