diff options
Diffstat (limited to 'packages/frontend/src/components')
17 files changed, 44 insertions, 34 deletions
diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue index e021cfbda9..1834224b8d 100644 --- a/packages/frontend/src/components/MkContainer.vue +++ b/packages/frontend/src/components/MkContainer.vue @@ -26,7 +26,7 @@ <div v-show="showBody" ref="content" :class="[$style.content, { [$style.omitted]: omitted }]"> <slot></slot> <button v-if="omitted" :class="$style.fade" class="_button" @click="() => { ignoreOmit = true; omitted = false; }"> - <span :class="$style.fadeLabel">{{ $ts.showMore }}</span> + <span :class="$style.fadeLabel">{{ i18n.ts.showMore }}</span> </button> </div> </Transition> @@ -36,6 +36,7 @@ <script lang="ts"> import { defineComponent } from 'vue'; import { defaultStore } from '@/store'; +import { i18n } from '@/i18n'; export default defineComponent({ props: { diff --git a/packages/frontend/src/components/MkFormDialog.vue b/packages/frontend/src/components/MkFormDialog.vue index 971bb806af..979df2e7c1 100644 --- a/packages/frontend/src/components/MkFormDialog.vue +++ b/packages/frontend/src/components/MkFormDialog.vue @@ -18,15 +18,15 @@ <div class="_gaps_m"> <template v-for="item in Object.keys(form).filter(item => !form[item].hidden)"> <MkInput v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1"> - <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template> + <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template> <template v-if="form[item].description" #caption>{{ form[item].description }}</template> </MkInput> <MkInput v-else-if="form[item].type === 'string' && !form[item].multiline" v-model="values[item]" type="text"> - <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template> + <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template> <template v-if="form[item].description" #caption>{{ form[item].description }}</template> </MkInput> <MkTextarea v-else-if="form[item].type === 'string' && form[item].multiline" v-model="values[item]"> - <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template> + <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template> <template v-if="form[item].description" #caption>{{ form[item].description }}</template> </MkTextarea> <MkSwitch v-else-if="form[item].type === 'boolean'" v-model="values[item]"> @@ -34,15 +34,15 @@ <template v-if="form[item].description" #caption>{{ form[item].description }}</template> </MkSwitch> <MkSelect v-else-if="form[item].type === 'enum'" v-model="values[item]"> - <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template> + <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template> <option v-for="item in form[item].enum" :key="item.value" :value="item.value">{{ item.label }}</option> </MkSelect> <MkRadios v-else-if="form[item].type === 'radio'" v-model="values[item]"> - <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template> + <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template> <option v-for="item in form[item].options" :key="item.value" :value="item.value">{{ item.label }}</option> </MkRadios> <MkRange v-else-if="form[item].type === 'range'" v-model="values[item]" :min="form[item].min" :max="form[item].max" :step="form[item].step" :text-converter="form[item].textConverter"> - <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template> + <template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ i18n.ts.optional }})</span></template> <template v-if="form[item].description" #caption>{{ form[item].description }}</template> </MkRange> <MkButton v-else-if="form[item].type === 'button'" @click="form[item].action($event, values)"> @@ -64,6 +64,7 @@ import MkRange from './MkRange.vue'; import MkButton from './MkButton.vue'; import MkRadios from './MkRadios.vue'; import MkModalWindow from '@/components/MkModalWindow.vue'; +import { i18n } from '@/i18n'; export default defineComponent({ components: { @@ -93,6 +94,7 @@ export default defineComponent({ data() { return { values: {}, + i18n, }; }, diff --git a/packages/frontend/src/components/MkGoogle.vue b/packages/frontend/src/components/MkGoogle.vue index 007728176e..227054d963 100644 --- a/packages/frontend/src/components/MkGoogle.vue +++ b/packages/frontend/src/components/MkGoogle.vue @@ -1,12 +1,13 @@ <template> <div :class="$style.root"> <input v-model="query" :class="$style.input" type="search" :placeholder="q"> - <button :class="$style.button" @click="search"><i class="ti ti-search"></i> {{ $ts.searchByGoogle }}</button> + <button :class="$style.button" @click="search"><i class="ti ti-search"></i> {{ i18n.ts.searchByGoogle }}</button> </div> </template> <script lang="ts" setup> import { ref } from 'vue'; +import { i18n } from '@/i18n'; const props = defineProps<{ q: string; diff --git a/packages/frontend/src/components/MkMediaBanner.vue b/packages/frontend/src/components/MkMediaBanner.vue index c0401a6455..1576144f6b 100644 --- a/packages/frontend/src/components/MkMediaBanner.vue +++ b/packages/frontend/src/components/MkMediaBanner.vue @@ -2,8 +2,8 @@ <div class="mk-media-banner"> <div v-if="media.isSensitive && hide" class="sensitive" @click="hide = false"> <span class="icon"><i class="ti ti-alert-triangle"></i></span> - <b>{{ $ts.sensitive }}</b> - <span>{{ $ts.clickToShow }}</span> + <b>{{ i18n.ts.sensitive }}</b> + <span>{{ i18n.ts.clickToShow }}</span> </div> <div v-else-if="media.type.startsWith('audio') && media.type !== 'audio/midi'" class="audio"> <VuePlyr :options="{ volume: 0.5 }"> @@ -33,6 +33,7 @@ import * as misskey from 'misskey-js'; import VuePlyr from 'vue-plyr'; import { ColdDeviceStorage } from '@/store'; import 'vue-plyr/dist/vue-plyr.css'; +import { i18n } from '@/i18n'; const props = withDefaults(defineProps<{ media: misskey.entities.DriveFile; diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue index 979c3eed28..e02a7af09e 100644 --- a/packages/frontend/src/components/MkMediaVideo.vue +++ b/packages/frontend/src/components/MkMediaVideo.vue @@ -1,8 +1,8 @@ <template> <div v-if="hide" class="icozogqfvdetwohsdglrbswgrejoxbdj" @click="hide = false"> <div> - <b><i class="ti ti-alert-triangle"></i> {{ $ts.sensitive }}</b> - <span>{{ $ts.clickToShow }}</span> + <b><i class="ti ti-alert-triangle"></i> {{ i18n.ts.sensitive }}</b> + <span>{{ i18n.ts.clickToShow }}</span> </div> </div> <div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu"> @@ -28,6 +28,7 @@ import * as misskey from 'misskey-js'; import VuePlyr from 'vue-plyr'; import { defaultStore } from '@/store'; import 'vue-plyr/dist/vue-plyr.css'; +import { i18n } from '@/i18n'; const props = defineProps<{ video: misskey.entities.DriveFile; diff --git a/packages/frontend/src/components/MkModalPageWindow.vue b/packages/frontend/src/components/MkModalPageWindow.vue index 68a3eda3d8..b38865f525 100644 --- a/packages/frontend/src/components/MkModalPageWindow.vue +++ b/packages/frontend/src/components/MkModalPageWindow.vue @@ -2,7 +2,7 @@ <MkModal ref="modal" @click="$emit('click')" @closed="$emit('closed')"> <div ref="rootEl" class="hrmcaedk" :style="{ width: `${width}px`, height: (height ? `min(${height}px, 100%)` : '100%') }"> <div class="header" @contextmenu="onContextmenu"> - <button v-if="history.length > 0" v-tooltip="$ts.goBack" class="_button" @click="back()"><i class="ti ti-arrow-left"></i></button> + <button v-if="history.length > 0" v-tooltip="i18n.ts.goBack" class="_button" @click="back()"><i class="ti ti-arrow-left"></i></button> <span v-else style="display: inline-block; width: 20px"></span> <span v-if="pageMetadata?.value" class="title"> <i v-if="pageMetadata?.value.icon" class="icon" :class="pageMetadata?.value.icon"></i> diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue index eb9793fcc1..700bbde6f0 100644 --- a/packages/frontend/src/components/MkNote.vue +++ b/packages/frontend/src/components/MkNote.vue @@ -57,7 +57,7 @@ <div v-if="translating || translation" :class="$style.translation"> <MkLoading v-if="translating" mini/> <div v-else :class="$style.translated"> - <b>{{ $t('translatedFrom', { x: translation.sourceLang }) }}: </b> + <b>{{ i18n.t('translatedFrom', { x: translation.sourceLang }) }}: </b> <Mfm :text="translation.text" :author="appearNote.user" :i="$i" :emoji-urls="appearNote.emojis"/> </div> </div> diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue index 715fd3a9a8..67bdfd2258 100644 --- a/packages/frontend/src/components/MkNoteDetailed.vue +++ b/packages/frontend/src/components/MkNoteDetailed.vue @@ -70,7 +70,7 @@ <div v-if="translating || translation" class="translation"> <MkLoading v-if="translating" mini/> <div v-else class="translated"> - <b>{{ $t('translatedFrom', { x: translation.sourceLang }) }}: </b> + <b>{{ i18n.t('translatedFrom', { x: translation.sourceLang }) }}: </b> <Mfm :text="translation.text" :author="appearNote.user" :i="$i" :emoji-urls="appearNote.emojis"/> </div> </div> diff --git a/packages/frontend/src/components/MkOmit.vue b/packages/frontend/src/components/MkOmit.vue index a806d92b22..9232ebb7c9 100644 --- a/packages/frontend/src/components/MkOmit.vue +++ b/packages/frontend/src/components/MkOmit.vue @@ -2,13 +2,14 @@ <div ref="content" :class="[$style.content, { [$style.omitted]: omitted }]"> <slot></slot> <button v-if="omitted" :class="$style.fade" class="_button" @click="() => { ignoreOmit = true; omitted = false; }"> - <span :class="$style.fadeLabel">{{ $ts.showMore }}</span> + <span :class="$style.fadeLabel">{{ i18n.ts.showMore }}</span> </button> </div> </template> <script lang="ts" setup> import { onMounted } from 'vue'; +import { i18n } from '@/i18n'; const props = withDefaults(defineProps<{ maxHeight: number; diff --git a/packages/frontend/src/components/MkPoll.vue b/packages/frontend/src/components/MkPoll.vue index fcbd8ad351..0810061ff9 100644 --- a/packages/frontend/src/components/MkPoll.vue +++ b/packages/frontend/src/components/MkPoll.vue @@ -6,12 +6,12 @@ <span> <template v-if="choice.isVoted"><i class="ti ti-check"></i></template> <Mfm :text="choice.text" :plain="true"/> - <span v-if="showResult" class="votes">({{ $t('_poll.votesCount', { n: choice.votes }) }})</span> + <span v-if="showResult" class="votes">({{ i18n.t('_poll.votesCount', { n: choice.votes }) }})</span> </span> </li> </ul> <p v-if="!readOnly"> - <span>{{ $t('_poll.totalVotes', { n: total }) }}</span> + <span>{{ i18n.t('_poll.totalVotes', { n: total }) }}</span> <span> ยท </span> <a v-if="!closed && !isVoted" @click="showResult = !showResult">{{ showResult ? i18n.ts._poll.vote : i18n.ts._poll.showResult }}</a> <span v-if="isVoted">{{ i18n.ts._poll.voted }}</span> diff --git a/packages/frontend/src/components/MkPollEditor.vue b/packages/frontend/src/components/MkPollEditor.vue index 9567c58b99..471ec39169 100644 --- a/packages/frontend/src/components/MkPollEditor.vue +++ b/packages/frontend/src/components/MkPollEditor.vue @@ -5,7 +5,7 @@ </p> <ul> <li v-for="(choice, i) in choices" :key="i"> - <MkInput class="input" small :model-value="choice" :placeholder="$t('_poll.choiceN', { n: i + 1 })" @update:model-value="onInput(i, $event)"> + <MkInput class="input" small :model-value="choice" :placeholder="i18n.t('_poll.choiceN', { n: i + 1 })" @update:model-value="onInput(i, $event)"> </MkInput> <button class="_button" @click="remove(i)"> <i class="ti ti-x"></i> diff --git a/packages/frontend/src/components/MkSubNoteContent.vue b/packages/frontend/src/components/MkSubNoteContent.vue index 5290129ee7..1ac7107aa7 100644 --- a/packages/frontend/src/components/MkSubNoteContent.vue +++ b/packages/frontend/src/components/MkSubNoteContent.vue @@ -8,7 +8,7 @@ <MkA v-if="note.renoteId" :class="$style.rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA> </div> <details v-if="note.files.length > 0"> - <summary>({{ $t('withNFiles', { n: note.files.length }) }})</summary> + <summary>({{ i18n.t('withNFiles', { n: note.files.length }) }})</summary> <MkMediaList :media-list="note.files"/> </details> <details v-if="note.poll"> diff --git a/packages/frontend/src/components/MkTokenGenerateWindow.vue b/packages/frontend/src/components/MkTokenGenerateWindow.vue index 6035c20d23..56be044405 100644 --- a/packages/frontend/src/components/MkTokenGenerateWindow.vue +++ b/packages/frontend/src/components/MkTokenGenerateWindow.vue @@ -10,7 +10,7 @@ @closed="$emit('closed')" @ok="ok()" > - <template #header>{{ title || $ts.generateAccessToken }}</template> + <template #header>{{ title || i18n.ts.generateAccessToken }}</template> <MkSpacer :margin-min="20" :margin-max="28"> <div class="_gaps_m"> @@ -19,15 +19,15 @@ </div> <div> <MkInput v-model="name"> - <template #label>{{ $ts.name }}</template> + <template #label>{{ i18n.ts.name }}</template> </MkInput> </div> - <div><b>{{ $ts.permission }}</b></div> + <div><b>{{ i18n.ts.permission }}</b></div> <div class="_buttons"> <MkButton inline @click="disableAll">{{ i18n.ts.disableAll }}</MkButton> <MkButton inline @click="enableAll">{{ i18n.ts.enableAll }}</MkButton> </div> - <MkSwitch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]">{{ $t(`_permissions.${kind}`) }}</MkSwitch> + <MkSwitch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]">{{ i18n.t(`_permissions.${kind}`) }}</MkSwitch> </div> </MkSpacer> </MkModalWindow> diff --git a/packages/frontend/src/components/MkUserInfo.vue b/packages/frontend/src/components/MkUserInfo.vue index 1660ca68fc..5086c1b319 100644 --- a/packages/frontend/src/components/MkUserInfo.vue +++ b/packages/frontend/src/components/MkUserInfo.vue @@ -6,7 +6,7 @@ <MkA class="name" :to="userPage(user)"><MkUserName :user="user" :nowrap="false"/></MkA> <p class="username"><MkAcct :user="user"/></p> </div> - <span v-if="$i && $i.id !== user.id && user.isFollowed" class="followed">{{ $ts.followsYou }}</span> + <span v-if="$i && $i.id !== user.id && user.isFollowed" class="followed">{{ i18n.ts.followsYou }}</span> <div class="description"> <div v-if="user.description" class="mfm"> <Mfm :text="user.description" :author="user" :i="$i"/> diff --git a/packages/frontend/src/components/MkUserPopup.vue b/packages/frontend/src/components/MkUserPopup.vue index 73f42a4e68..8ca0355448 100644 --- a/packages/frontend/src/components/MkUserPopup.vue +++ b/packages/frontend/src/components/MkUserPopup.vue @@ -9,7 +9,7 @@ <div v-if="showing" :class="$style.root" class="_popup _shadow" :style="{ zIndex, top: top + 'px', left: left + 'px' }" @mouseover="() => { emit('mouseover'); }" @mouseleave="() => { emit('mouseleave'); }"> <div v-if="user != null"> <div :class="$style.banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl})` : ''"> - <span v-if="$i && $i.id != user.id && user.isFollowed" :class="$style.followed">{{ $ts.followsYou }}</span> + <span v-if="$i && $i.id != user.id && user.isFollowed" :class="$style.followed">{{ i18n.ts.followsYou }}</span> </div> <svg viewBox="0 0 128 128" :class="$style.avatarBack"> <g transform="matrix(1.6,0,0,1.6,-38.4,-51.2)"> @@ -27,15 +27,15 @@ </div> <div :class="$style.status"> <div :class="$style.statusItem"> - <div :class="$style.statusItemLabel">{{ $ts.notes }}</div> + <div :class="$style.statusItemLabel">{{ i18n.ts.notes }}</div> <div>{{ number(user.notesCount) }}</div> </div> <div :class="$style.statusItem"> - <div :class="$style.statusItemLabel">{{ $ts.following }}</div> + <div :class="$style.statusItemLabel">{{ i18n.ts.following }}</div> <div>{{ number(user.followingCount) }}</div> </div> <div :class="$style.statusItem"> - <div :class="$style.statusItemLabel">{{ $ts.followers }}</div> + <div :class="$style.statusItemLabel">{{ i18n.ts.followers }}</div> <div>{{ number(user.followersCount) }}</div> </div> </div> diff --git a/packages/frontend/src/components/form/suspense.vue b/packages/frontend/src/components/form/suspense.vue index d4b36381a2..3a44c3da3d 100644 --- a/packages/frontend/src/components/form/suspense.vue +++ b/packages/frontend/src/components/form/suspense.vue @@ -8,8 +8,8 @@ </div> <div v-else> <div class="wszdbhzo"> - <div><i class="ti ti-alert-triangle"></i> {{ $ts.somethingHappened }}</div> - <MkButton inline class="retry" @click="retry"><i class="ti ti-reload"></i> {{ $ts.retry }}</MkButton> + <div><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</div> + <MkButton inline class="retry" @click="retry"><i class="ti ti-reload"></i> {{ i18n.ts.retry }}</MkButton> </div> </div> </Transition> @@ -19,6 +19,7 @@ import { defineComponent, PropType, ref, watch } from 'vue'; import MkButton from '@/components/MkButton.vue'; import { defaultStore } from '@/store'; +import { i18n } from '@/i18n'; export default defineComponent({ components: { @@ -74,6 +75,7 @@ export default defineComponent({ result, retry, defaultStore, + i18n, }; }, }); diff --git a/packages/frontend/src/components/global/MkAd.vue b/packages/frontend/src/components/global/MkAd.vue index e0304c8bc5..b8f749bd1c 100644 --- a/packages/frontend/src/components/global/MkAd.vue +++ b/packages/frontend/src/components/global/MkAd.vue @@ -9,9 +9,9 @@ <div v-else :class="$style.menu"> <div :class="$style.menuContainer"> <div>Ads by {{ host }}</div> - <!--<MkButton class="button" primary>{{ $ts._ad.like }}</MkButton>--> - <MkButton v-if="chosen.ratio !== 0" :class="$style.menuButton" @click="reduceFrequency">{{ $ts._ad.reduceFrequencyOfThisAd }}</MkButton> - <button class="_textButton" @click="toggleMenu">{{ $ts._ad.back }}</button> + <!--<MkButton class="button" primary>{{ i18n.ts._ad.like }}</MkButton>--> + <MkButton v-if="chosen.ratio !== 0" :class="$style.menuButton" @click="reduceFrequency">{{ i18n.ts._ad.reduceFrequencyOfThisAd }}</MkButton> + <button class="_textButton" @click="toggleMenu">{{ i18n.ts._ad.back }}</button> </div> </div> </div> @@ -26,6 +26,7 @@ import MkButton from '@/components/MkButton.vue'; import { defaultStore } from '@/store'; import * as os from '@/os'; import { $i } from '@/account'; +import { i18n } from '@/i18n'; type Ad = (typeof instance)['ads'][number]; |