toggle emoji via spotlight

resources/js/components/Others/Emoji.vue

@@ -1,12 +1,12 @@
 <template>
     <div v-if="emoji">
         <div
-			v-if="!isApple"
+			v-if="config.defaultEmoji === 'twemoji'"
 			v-html="transferEmoji"
 			style="font-size: inherit; transform: scale(0.95)"
 		></div>
         <div
-			v-if="isApple"
+			v-if="config.defaultEmoji === 'applemoji'"
 			style="font-size: inherit"
 		>
 			{{ emoji.char }}
@@ -16,6 +16,7 @@
 
 <script>
 	import twemoji from 'twemoji'
+	import {mapGetters} from "vuex";
 
 	export default {
 		name: 'Emoji',
@@ -29,9 +30,10 @@
 			}
 		},
 		computed: {
+			...mapGetters([
+				'config',
+			]),
 			transferEmoji() {
-				//if (! this.apple) return
-
 				return twemoji.parse(this.emoji.char, {
 					folder: 'svg',
 					ext: '.svg',

resources/js/components/Spotlight/Spotlight.vue

@@ -101,6 +101,7 @@
 							<power-icon v-if="result.action.value === 'log-out'" size="18" class="vue-feather text-theme"/>
 							<trash-icon v-if="result.action.value === 'empty-trash'" size="18" class="vue-feather text-theme"/>
 							<grid-icon v-if="result.action.value === 'toggle-grid-list'" size="18" class="vue-feather text-theme"/>
+							<smile-icon v-if="result.action.value === 'toggle-emoji'" size="18" class="vue-feather text-theme"/>
 
 							<b class="font-bold text-sm ml-3.5">
 								{{ result.title }}
@@ -172,6 +173,7 @@
 
 <script>
 import {
+	SmileIcon,
 	BoxIcon,
 	CreditCardIcon,
 	DatabaseIcon,
@@ -210,6 +212,7 @@ import KeyboardHints from "./KeyboardHints";
 export default {
 	name: 'Spotlight',
 	components: {
+		SmileIcon,
 		KeyboardHints,
 		CreditCardIcon,
 		GridIcon,
@@ -430,6 +433,17 @@ export default {
 				},
 			]
 
+			// Available only for apple users
+			if (this.$isApple()) {
+				functionList.push({
+					title: this.$t('Toggle Emoji Type'),
+					action: {
+						type: 'function',
+						value: 'toggle-emoji',
+					},
+				})
+			}
+
 			if (this.user.data.attributes.role === 'admin') {
 
 				// Available only for fixed subscription
@@ -565,6 +579,10 @@ export default {
 
 			if (arg.action.type === 'function') {
 
+				if (arg.action.value === 'toggle-emoji') {
+					this.$store.dispatch('toggleEmojiType')
+				}
+
 				if (arg.action.value === 'toggle-grid-list') {
 					this.$store.dispatch('togglePreviewType')
 				}

resources/js/helpers/functionHelpers.js

@@ -11,7 +11,7 @@ const FunctionHelpers = {
 
             if ((value === '' || value === ' ' || typeof value === 'object') && !allowEmpty) return
 
-            axios.post(this.$store.getters.api + route, {name, value, _method: 'patch'})
+            axios.post(store.getters.api + route, {name, value, _method: 'patch'})
                 .catch(() => {
                     events.$emit('alert:open', {
                         title: this.$t('popup_error.title'),

resources/js/store/modules/app.js

@@ -1,5 +1,6 @@
 import i18n from '/resources/js/i18n/index'
-import axios from "axios";
+import axios from "axios"
+import Vue from "vue"
 
 const defaultState = {
     isVisibleNavigationBars: localStorage.getItem('is_navigation_bars') !== 'false',
@@ -42,6 +43,20 @@ const actions = {
         // Change preview
         commit('CHANGE_PREVIEW', previewType)
     },
+    toggleEmojiType: ({commit, getters}) => {
+        let newType = getters.config.defaultEmoji === 'twemoji'
+            ? 'applemoji'
+            : 'twemoji'
+
+        // Update config
+        commit('REPLACE_CONFIG_VALUE', {
+            key: 'defaultEmoji',
+            value: newType,
+        })
+
+        // Update user settings
+        Vue.prototype.$updateText('/user/settings', 'emoji_type', newType)
+    },
     fileInfoToggle: (context, visibility = undefined) => {
         if (!visibility) {
             if (context.state.isVisibleSidebar) {