Refactoring of i18n (#3165)

Refactoring of i18n

src/client/app/common/views/components/drive-settings.vue

@@ -1,14 +1,14 @@
 <template>
 <ui-card>
-	<div slot="title"><fa icon="cloud"/> %i18n:common.drive%</div>
+	<div slot="title"><fa icon="cloud"/> {{ $t('@.drive') }}</div>
 
 	<section v-if="!fetching" class="juakhbxthdewydyreaphkepoxgxvfogn">
 		<div class="meter"><div :style="meterStyle"></div></div>
-		<p>%i18n:@max%: <b>{{ capacity | bytes }}</b> %i18n:@in-use%: <b>{{ usage | bytes }}</b></p>
+		<p>{{ $t('max') }}: <b>{{ capacity | bytes }}</b> {{ $t('in-use') }}: <b>{{ usage | bytes }}</b></p>
 	</section>
 
 	<section>
-		<header>%i18n:@stats%</header>
+		<header>{{ $t('stats') }}</header>
 		<div ref="chart" style="margin-bottom: -16px; color: #000;"></div>
 	</section>
 </ui-card>
@@ -16,10 +16,12 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import i18n from '../../../i18n';
 import * as tinycolor from 'tinycolor2';
 import * as ApexCharts from 'apexcharts';
 
 export default Vue.extend({
+	i18n: i18n('common/views/components/drive-settings.vue'),
 	data() {
 		return {
 			fetching: true,