Refactoring of i18n (#3165)

Refactoring of i18n

src/client/app/desktop/views/components/drive.file.vue

@@ -11,15 +11,15 @@
 >
 	<div class="label" v-if="$store.state.i.avatarId == file.id">
 		<img src="/assets/label.svg"/>
-		<p>%i18n:@avatar%</p>
+		<p>{{ $t('avatar') }}</p>
 	</div>
 	<div class="label" v-if="$store.state.i.bannerId == file.id">
 		<img src="/assets/label.svg"/>
-		<p>%i18n:@banner%</p>
+		<p>{{ $t('banner') }}</p>
 	</div>
 	<div class="label red" v-if="file.isSensitive">
 		<img src="/assets/label-red.svg"/>
-		<p>%i18n:@nsfw%</p>
+		<p>{{ $t('nsfw') }}</p>
 	</div>
 	<div class="thumbnail" ref="thumbnail" :style="`background-color: ${ background }`">
 		<img :src="file.thumbnailUrl" alt="" @load="onThumbnailLoaded"/>
@@ -33,11 +33,13 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import * as anime from 'animejs';
 import contextmenu from '../../api/contextmenu';
 import copyToClipboard from '../../../common/scripts/copy-to-clipboard';
 
 export default Vue.extend({
+	i18n: i18n('desktop/views/components/drive.file.vue'),
 	props: ['file'],
 	data() {
 		return {
@@ -70,44 +72,44 @@ export default Vue.extend({
 			this.isContextmenuShowing = true;
 			contextmenu((this as any).os)(e, [{
 				type: 'item',
-				text: '%i18n:@contextmenu.rename%',
+				text: this.$t('contextmenu.rename'),
 				icon: 'i-cursor',
 				action: this.rename
 			}, {
 				type: 'item',
-				text: this.file.isSensitive ? '%i18n:@contextmenu.unmark-as-sensitive%' : '%i18n:@contextmenu.mark-as-sensitive%',
+				text: this.file.isSensitive ? this.$t('contextmenu.unmark-as-sensitive') : this.$t('contextmenu.mark-as-sensitive'),
 				icon: this.file.isSensitive ? ['far', 'eye'] : ['far', 'eye-slash'],
 				action: this.toggleSensitive
 			}, null, {
 				type: 'item',
-				text: '%i18n:@contextmenu.copy-url%',
+				text: this.$t('contextmenu.copy-url'),
 				icon: 'link',
 				action: this.copyUrl
 			}, {
 				type: 'link',
 				href: `${this.file.url}?download`,
-				text: '%i18n:@contextmenu.download%',
+				text: this.$t('contextmenu.download'),
 				icon: 'download',
 			}, null, {
 				type: 'item',
-				text: '%i18n:common.delete%',
+				text: this.$t('@.delete'),
 				icon: ['far', 'trash-alt'],
 				action: this.deleteFile
 			}, null, {
 				type: 'nest',
-				text: '%i18n:@contextmenu.else-files%',
+				text: this.$t('contextmenu.else-files'),
 				menu: [{
 					type: 'item',
-					text: '%i18n:@contextmenu.set-as-avatar%',
+					text: this.$t('contextmenu.set-as-avatar'),
 					action: this.setAsAvatar
 				}, {
 					type: 'item',
-					text: '%i18n:@contextmenu.set-as-banner%',
+					text: this.$t('contextmenu.set-as-banner'),
 					action: this.setAsBanner
 				}]
 			}, /*{
 				type: 'nest',
-				text: '%i18n:@contextmenu.open-in-app%',
+				text: this.$t('contextmenu.open-in-app'),
 				menu: [{
 					type: 'item',
 					text: '%i18n:@contextmenu.add-app%...',
@@ -148,8 +150,8 @@ export default Vue.extend({
 
 		rename() {
 			(this as any).apis.input({
-				title: '%i18n:@contextmenu.rename-file%',
-				placeholder: '%i18n:@contextmenu.input-new-file-name%',
+				title: this.$t('contextmenu.rename-file'),
+				placeholder: this.$t('contextmenu.input-new-file-name'),
 				default: this.file.name,
 				allowEmpty: false
 			}).then(name => {
@@ -170,10 +172,10 @@ export default Vue.extend({
 		copyUrl() {
 			copyToClipboard(this.file.url);
 			(this as any).apis.dialog({
-				title: '<fa icon="check"/>%i18n:@contextmenu.copied%',
-				text: '%i18n:@contextmenu.copied-url-to-clipboard%',
+				title: this.$t('contextmenu.copied'),
+				text: this.$t('contextmenu.copied-url-to-clipboard'),
 				actions: [{
-					text: '%i18n:common.ok%'
+					text: this.$t('@.ok')
 				}]
 			});
 		},