sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactoring of i18n (#3165)

Browse Source 
Refactoring of i18n
This commit is contained in:
syuilo
2018-11-09 03:44:35 +09:00
committed by GitHub
parent 21303bd06a
commit 25a69ec1b6
211 changed files with 1825 additions and 1624 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/client/app/common/views/components/api-settings.vue
View File

@@ -4,29 +4,29 @@
<section class="fit-top">
<ui-input :value="$store.state.i.token" readonly>
<span>%i18n:@token%</span>
<span>{{ $t('token') }}</span>
</ui-input>
<p>%i18n:@intro%</p>
<ui-info warn>%i18n:@caution%</ui-info>
<p>%i18n:@regeneration-of-token%</p>
<ui-button @click="regenerateToken"><fa icon="sync-alt"/> %i18n:@regenerate-token%</ui-button>
<p>{{ $t('intro') }}</p>
<ui-info warn>{{ $t('caution') }}</ui-info>
<p>{{ $t('regeneration-of-token') }}</p>
<ui-button @click="regenerateToken"><fa icon="sync-alt"/> {{ $t('regenerate-token') }}</ui-button>
</section>
<section>
<header><fa icon="terminal"/> %i18n:@console.title%</header>
<header><fa icon="terminal"/> {{ $t('console.title') }}</header>
<ui-input v-model="endpoint">
<span>%i18n:@console.endpoint%</span>
<span>{{ $t('console.endpoint') }}</span>
</ui-input>
<ui-textarea v-model="body">
<span>%i18n:@console.parameter% (JSON or JSON5)</span>
<span slot="desc">%i18n:@console.credential-info%</span>
<span>{{ $t('console.parameter') }} (JSON or JSON5)</span>
<span slot="desc">{{ $t('console.credential-info') }}</span>
</ui-textarea>
<ui-button @click="send" :disabled="sending">
<template v-if="sending">%i18n:@console.sending%</template>
<template v-else><fa icon="paper-plane"/> %i18n:@console.send%</template>
<template v-if="sending">{{ $t('console.sending') }}</template>
<template v-else><fa icon="paper-plane"/> {{ $t('console.send') }}</template>
</ui-button>
<ui-textarea v-if="res" v-model="res" readonly tall>
<span>%i18n:@console.response%</span>
<span>{{ $t('console.response') }}</span>
</ui-textarea>
</section>
</ui-card>
@@ -34,9 +34,11 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import * as JSON5 from 'json5';
export default Vue.extend({
i18n: i18n('common/views/components/api-settings.vue'),
data() {
return {
endpoint: '',
@@ -49,7 +51,7 @@ export default Vue.extend({
methods: {
regenerateToken() {
(this as any).apis.input({
title: '%i18n:@enter-password%',
title: this.$t('enter-password'),
type: 'password'
}).then(password => {
(this as any).api('i/regenerate_token', {

1
src/client/app/common/views/components/avatar.vue
View File

@@ -15,6 +15,7 @@
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
user: {

22
src/client/app/common/views/components/connect-failed.troubleshooter.vue
View File

@@ -1,47 +1,49 @@
<template>
<div class="troubleshooter">
<div class="body">
<h1><fa icon="wrench"/>%i18n:@title%</h1>
<h1><fa icon="wrench"/>{{ $t('title') }}</h1>
<div>
<p :data-wip="network == null">
<template v-if="network != null">
<template v-if="network"><fa icon="check"/></template>
<template v-if="!network"><fa icon="times"/></template>
</template>
{{ network == null ? '%i18n:@checking-network%' : '%i18n:@network%' }}<mk-ellipsis v-if="network == null"/>
{{ network == null ? this.$t('checking-network') : this.$t('network') }}<mk-ellipsis v-if="network == null"/>
</p>
<p v-if="network == true" :data-wip="internet == null">
<template v-if="internet != null">
<template v-if="internet"><fa icon="check"/></template>
<template v-if="!internet"><fa icon="times"/></template>
</template>
{{ internet == null ? '%i18n:@checking-internet%' : '%i18n:@internet%' }}<mk-ellipsis v-if="internet == null"/>
{{ internet == null ? this.$t('checking-internet') : this.$t('internet') }}<mk-ellipsis v-if="internet == null"/>
</p>
<p v-if="internet == true" :data-wip="server == null">
<template v-if="server != null">
<template v-if="server"><fa icon="check"/></template>
<template v-if="!server"><fa icon="times"/></template>
</template>
{{ server == null ? '%i18n:@checking-server%' : '%i18n:@server%' }}<mk-ellipsis v-if="server == null"/>
{{ server == null ? this.$t('checking-server') : this.$t('server') }}<mk-ellipsis v-if="server == null"/>
</p>
</div>
<p v-if="!end">%i18n:@finding%<mk-ellipsis/></p>
<p v-if="network === false"><b><fa icon="exclamation-triangle"/>%i18n:@no-network%</b><br>%i18n:@no-network-desc%</p>
<p v-if="internet === false"><b><fa icon="exclamation-triangle"/>%i18n:@no-internet%</b><br>%i18n:@no-internet-desc%</p>
<p v-if="server === false"><b><fa icon="exclamation-triangle"/>%i18n:@no-server%</b><br>%i18n:@no-server-desc%</p>
<p v-if="server === true" class="success"><b><fa icon="info-circle"/>%i18n:@success%</b><br>%i18n:@success-desc%</p>
<p v-if="!end">{{ $t('finding') }}<mk-ellipsis/></p>
<p v-if="network === false"><b><fa icon="exclamation-triangle"/>{{ $t('no-network') }}</b><br>{{ $t('no-network-desc') }}</p>
<p v-if="internet === false"><b><fa icon="exclamation-triangle"/>{{ $t('no-internet') }}</b><br>{{ $t('no-internet-desc') }}</p>
<p v-if="server === false"><b><fa icon="exclamation-triangle"/>{{ $t('no-server') }}</b><br>{{ $t('no-server-desc') }}</p>
<p v-if="server === true" class="success"><b><fa icon="info-circle"/>{{ $t('success') }}</b><br>{{ $t('success-desc') }}</p>
</div>
<footer>
<a href="/assets/flush.html">%i18n:@flush%</a> | <a href="/assets/version.html">%i18n:@set-version%</a>
<a href="/assets/flush.html">{{ $t('flush') }}</a> | <a href="/assets/version.html">{{ $t('set-version') }}</a>
</footer>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import { apiUrl } from '../../../config';
export default Vue.extend({
i18n: i18n('common/views/components/connect-failed.troubleshooter.vue'),
data() {
return {
network: navigator.onLine,

14
src/client/app/common/views/components/connect-failed.vue
View File

@@ -1,23 +1,25 @@
<template>
<div class="mk-connect-failed">
<img src="https://raw.githubusercontent.com/syuilo/misskey/develop/src/client/assets/error.jpg" alt=""/>
<h1>%i18n:@title%</h1>
<h1>{{ $t('title') }}</h1>
<p class="text">
<span>{{ '%i18n:@description%'.substr(0, '%i18n:@description%'.indexOf('{')) }}</span>
<a @click="reload">{{ '%i18n:@description%'.match(/\{(.+?)\}/)[1] }}</a>
<span>{{ '%i18n:@description%'.substr('%i18n:@description%'.indexOf('}') + 1) }}</span>
<span>{{ this.$t('description').substr(0, this.$t('description').indexOf('{')) }}</span>
<a @click="reload">{{ this.$t('description').match(/\{(.+?)\}/)[1] }}</a>
<span>{{ this.$t('description').substr(this.$t('description').indexOf('}') + 1) }}</span>
</p>
<button v-if="!troubleshooting" @click="troubleshooting = true">%i18n:@troubleshoot%</button>
<button v-if="!troubleshooting" @click="troubleshooting = true">{{ $t('troubleshoot') }}</button>
<x-troubleshooter v-if="troubleshooting"/>
<p class="thanks">%i18n:@thanks%</p>
<p class="thanks">{{ $t('thanks') }}</p>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import XTroubleshooter from './connect-failed.troubleshooter.vue';
export default Vue.extend({
i18n: i18n('common/views/components/connect-failed.vue'),
components: {
XTroubleshooter
},

4
src/client/app/common/views/components/cw-button.vue
View File

@@ -1,11 +1,13 @@
<template>
<button class="nrvgflfuaxwgkxoynpnumyookecqrrvh" @click="toggle">{{ value ? '%i18n:@hide%' : '%i18n:@show%' }}</button>
<button class="nrvgflfuaxwgkxoynpnumyookecqrrvh" @click="toggle">{{ value ? this.$t('hide') : this.$t('show') }}</button>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
export default Vue.extend({
i18n: i18n('common/views/components/cw-button.vue'),
props: {
value: {
type: Boolean,

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

@@ -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,

13
src/client/app/common/views/components/error.vue
View File

@@ -1,10 +1,19 @@
<template>
<div class="wjqjnyhzogztorhrdgcpqlkxhkmuetgj">
<p><fa icon="exclamation-triangle"/> %i18n:common.error.title%</p>
<ui-button @click="() => $emit('retry')">%i18n:common.error.retry%</ui-button>
<p><fa icon="exclamation-triangle"/> {{ $t('@.error.title') }}</p>
<ui-button @click="() => $emit('retry')">{{ $t('@.error.retry') }}</ui-button>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
export default Vue.extend({
i18n: i18n()
});
</script>
<style lang="stylus" scoped>
.wjqjnyhzogztorhrdgcpqlkxhkmuetgj
max-width 350px

28
src/client/app/common/views/components/games/reversi/reversi.game.vue
View File

@@ -1,19 +1,19 @@
<template>
<div class="xqnhankfuuilcwvhgsopeqncafzsquya">
<button class="go-index" v-if="selfNav" @click="goIndex"><fa icon="arrow-left"/></button>
<header><b><router-link :to="blackUser | userPage">{{ blackUser | userName }}</router-link></b>(%i18n:common.reversi.black%) vs <b><router-link :to="whiteUser | userPage">{{ whiteUser | userName }}</router-link></b>(%i18n:common.reversi.white%)</header>
<header><b><router-link :to="blackUser | userPage">{{ blackUser | userName }}</router-link></b>({{ $t('@.reversi.black') }}) vs <b><router-link :to="whiteUser | userPage">{{ whiteUser | userName }}</router-link></b>({{ $t('@.reversi.white') }})</header>
<div style="overflow: hidden; line-height: 28px;">
<p class="turn" v-if="!iAmPlayer && !game.isEnded">{{ '%i18n:common.reversi.turn-of%'.replace('{}', $options.filters.userName(turnUser)) }}<mk-ellipsis/></p>
<p class="turn" v-if="logPos != logs.length">{{ '%i18n:common.reversi.past-turn-of%'.replace('{}', $options.filters.userName(turnUser)) }}</p>
<p class="turn1" v-if="iAmPlayer && !game.isEnded && !isMyTurn">%i18n:common.reversi.opponent-turn%<mk-ellipsis/></p>
<p class="turn2" v-if="iAmPlayer && !game.isEnded && isMyTurn" v-animate-css="{ classes: 'tada', iteration: 'infinite' }">%i18n:common.reversi.my-turn%</p>
<p class="turn" v-if="!iAmPlayer && !game.isEnded">{{ $t('@.reversi.turn-of', { name: $options.filters.userName(turnUser) }) }}<mk-ellipsis/></p>
<p class="turn" v-if="logPos != logs.length">{{ $t('@.reversi.past-turn-of', { name: $options.filters.userName(turnUser) }) }}</p>
<p class="turn1" v-if="iAmPlayer && !game.isEnded && !isMyTurn">{{ $t('@.reversi.opponent-turn') }}<mk-ellipsis/></p>
<p class="turn2" v-if="iAmPlayer && !game.isEnded && isMyTurn" v-animate-css="{ classes: 'tada', iteration: 'infinite' }">{{ $t('@.reversi.my-turn') }}</p>
<p class="result" v-if="game.isEnded && logPos == logs.length">
<template v-if="game.winner">
<span>{{ '%i18n:common.reversi.won%'.replace('{}', $options.filters.userName(game.winner)) }}</span>
<span v-if="game.surrendered != null"> (%i18n:@surrendered%)</span>
<span>{{ $t('@.reversi.won', { name: $options.filters.userName(game.winner) }) }}</span>
<span v-if="game.surrendered != null"> ({{ $t('surrendered') }})</span>
</template>
<template v-else>%i18n:common.reversi.drawn%</template>
<template v-else>{{ $t('@.reversi.drawn') }}</template>
</p>
</div>
@@ -43,10 +43,10 @@
</div>
</div>
<p class="status"><b>{{ '%i18n:common.reversi.this-turn%'.split('{}')[0] }}{{ logPos }}{{ '%i18n:common.reversi.this-turn%'.split('{}')[1] }}</b> %i18n:common.reversi.black%:{{ o.blackCount }} %i18n:common.reversi.white%:{{ o.whiteCount }} %i18n:common.reversi.total%:{{ o.blackCount + o.whiteCount }}</p>
<p class="status"><b>{{ $t('@.reversi.this-turn', { count: logPos }) }}</b> {{ $t('@.reversi.black') }}:{{ o.blackCount }} {{ $t('@.reversi.white') }}:{{ o.whiteCount }} {{ $t('@.reversi.total') }}:{{ o.blackCount + o.whiteCount }}</p>
<div class="actions" v-if="!game.isEnded && iAmPlayer">
<form-button @click="surrender">%i18n:@surrender%</form-button>
<form-button @click="surrender">{{ $t('surrender') }}</form-button>
</div>
<div class="player" v-if="game.isEnded">
@@ -62,20 +62,22 @@
</div>
<div class="info">
<p v-if="game.settings.isLlotheo">%i18n:@is-llotheo%</p>
<p v-if="game.settings.loopedBoard">%i18n:@looped-map%</p>
<p v-if="game.settings.canPutEverywhere">%i18n:@can-put-everywhere%</p>
<p v-if="game.settings.isLlotheo">{{ $t('is-llotheo') }}</p>
<p v-if="game.settings.loopedBoard">{{ $t('looped-map') }}</p>
<p v-if="game.settings.canPutEverywhere">{{ $t('can-put-everywhere') }}</p>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../../../i18n';
import * as CRC32 from 'crc-32';
import Reversi, { Color } from '../../../../../../../games/reversi/core';
import { url } from '../../../../../config';
export default Vue.extend({
i18n: i18n('common/views/components/games/reversi/reversi.game.vue'),
props: {
initGame: {
type: Object,

2
src/client/app/common/views/components/games/reversi/reversi.gameroom.vue
View File

@@ -7,10 +7,12 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../../../i18n';
import XGame from './reversi.game.vue';
import XRoom from './reversi.room.vue';
export default Vue.extend({
i18n: i18n('common/views/components/games/reversi/reversi.gameroom.vue'),
components: {
XGame,
XRoom

28
src/client/app/common/views/components/games/reversi/reversi.index.vue
View File

@@ -1,22 +1,22 @@
<template>
<div class="phgnkghfpyvkrvwiajkiuoxyrdaqpzcx">
<h1>%i18n:@title%</h1>
<p>%i18n:@sub-title%</p>
<h1>{{ $t('title') }}</h1>
<p>{{ $t('sub-title') }}</p>
<div class="play">
<form-button primary round @click="match">%i18n:@invite%</form-button>
<form-button primary round @click="match">{{ $t('invite') }}</form-button>
<details>
<summary>%i18n:@rule%</summary>
<summary>{{ $t('rule') }}</summary>
<div>
<p>%i18n:@rule-desc%</p>
<p>{{ $t('rule-desc') }}</p>
<dl>
<dt><b>%i18n:@mode-invite%</b></dt>
<dd>%i18n:@mode-invite-desc%</dd>
<dt><b>{{ $t('mode-invite') }}</b></dt>
<dd>{{ $t('mode-invite-desc') }}</dd>
</dl>
</div>
</details>
</div>
<section v-if="invitations.length > 0">
<h2>%i18n:@invitations%</h2>
<h2>{{ $t('invitations') }}</h2>
<div class="invitation" v-for="i in invitations" tabindex="-1" @click="accept(i)">
<mk-avatar class="avatar" :user="i.parent"/>
<span class="name"><b>{{ i.parent | userName }}</b></span>
@@ -25,22 +25,22 @@
</div>
</section>
<section v-if="myGames.length > 0">
<h2>%i18n:@my-games%</h2>
<h2>{{ $t('my-games') }}</h2>
<a class="game" v-for="g in myGames" tabindex="-1" @click.prevent="go(g)" :href="`/reversi/${g.id}`">
<mk-avatar class="avatar" :user="g.user1"/>
<mk-avatar class="avatar" :user="g.user2"/>
<span><b>{{ g.user1 | userName }}</b> vs <b>{{ g.user2 | userName }}</b></span>
<span class="state">{{ g.isEnded ? '%i18n:@game-state.ended%' : '%i18n:@game-state.playing%' }}</span>
<span class="state">{{ g.isEnded ? this.$t('game-state.ended') : this.$t('game-state.playing') }}</span>
<mk-time :time="g.createdAt" />
</a>
</section>
<section v-if="games.length > 0">
<h2>%i18n:@all-games%</h2>
<h2>{{ $t('all-games') }}</h2>
<a class="game" v-for="g in games" tabindex="-1" @click.prevent="go(g)" :href="`/reversi/${g.id}`">
<mk-avatar class="avatar" :user="g.user1"/>
<mk-avatar class="avatar" :user="g.user2"/>
<span><b>{{ g.user1 | userName }}</b> vs <b>{{ g.user2 | userName }}</b></span>
<span class="state">{{ g.isEnded ? '%i18n:@game-state.ended%' : '%i18n:@game-state.playing%' }}</span>
<span class="state">{{ g.isEnded ? this.$t('game-state.ended') : this.$t('game-state.playing') }}</span>
<mk-time :time="g.createdAt" />
</a>
</section>
@@ -49,8 +49,10 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../../../i18n';
export default Vue.extend({
i18n: i18n('common/views/components/games/reversi/reversi.index.vue'),
data() {
return {
games: [],
@@ -99,7 +101,7 @@ export default Vue.extend({
match() {
(this as any).apis.input({
title: '%i18n:@enter-username%'
title: this.$t('enter-username')
}).then(username => {
(this as any).api('users/show', {
username

40
src/client/app/common/views/components/games/reversi/reversi.room.vue
View File

@@ -3,13 +3,13 @@
<header><b>{{ game.user1 | userName }}</b> vs <b>{{ game.user2 | userName }}</b></header>
<div>
<p>%i18n:@settings-of-the-game%</p>
<p>{{ $t('settings-of-the-game') }}</p>
<div class="card map">
<header>
<select v-model="mapName" placeholder="%i18n:@choose-map%" @change="onMapChange">
<select v-model="mapName" :placeholder="$t('placeholder')" @change="onMapChange">
<option label="-Custom-" :value="mapName" v-if="mapName == '-Custom-'"/>
<option label="%i18n:@random%" :value="null"/>
<option :label="$t('label')" :value="null"/>
<optgroup v-for="c in mapCategories" :key="c" :label="c">
<option v-for="m in maps" v-if="m.category == c" :key="m.name" :label="m.name" :value="m.name">{{ m.name }}</option>
</optgroup>
@@ -31,31 +31,31 @@
<div class="card">
<header>
<span>%i18n:@black-or-white%</span>
<span>{{ $t('black-or-white') }}</span>
</header>
<div>
<form-radio v-model="game.settings.bw" value="random" @change="updateSettings">%i18n:@random%</form-radio>
<form-radio v-model="game.settings.bw" :value="1" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}<b>{{ game.user1 | userName }}</b>{{ '%i18n:@black-is%'.split('{}')[1] }}</form-radio>
<form-radio v-model="game.settings.bw" :value="2" @change="updateSettings">{{ '%i18n:@black-is%'.split('{}')[0] }}<b>{{ game.user2 | userName }}</b>{{ '%i18n:@black-is%'.split('{}')[1] }}</form-radio>
<form-radio v-model="game.settings.bw" value="random" @change="updateSettings">{{ $t('random') }}</form-radio>
<form-radio v-model="game.settings.bw" :value="1" @change="updateSettings">{{ this.$t('black-is').split('{}')[0] }}<b>{{ game.user1 | userName }}</b>{{ this.$t('black-is').split('{}')[1] }}</form-radio>
<form-radio v-model="game.settings.bw" :value="2" @change="updateSettings">{{ this.$t('black-is').split('{}')[0] }}<b>{{ game.user2 | userName }}</b>{{ this.$t('black-is').split('{}')[1] }}</form-radio>
</div>
</div>
<div class="card">
<header>
<span>%i18n:@rules%</span>
<span>{{ $t('rules') }}</span>
</header>
<div>
<ui-switch v-model="game.settings.isLlotheo" @change="updateSettings">%i18n:@is-llotheo%</ui-switch>
<ui-switch v-model="game.settings.loopedBoard" @change="updateSettings">%i18n:@looped-map%</ui-switch>
<ui-switch v-model="game.settings.canPutEverywhere" @change="updateSettings">%i18n:@can-put-everywhere%</ui-switch>
<ui-switch v-model="game.settings.isLlotheo" @change="updateSettings">{{ $t('is-llotheo') }}</ui-switch>
<ui-switch v-model="game.settings.loopedBoard" @change="updateSettings">{{ $t('looped-map') }}</ui-switch>
<ui-switch v-model="game.settings.canPutEverywhere" @change="updateSettings">{{ $t('can-put-everywhere') }}</ui-switch>
</div>
</div>
<div class="card form" v-if="form">
<header>
<span>%i18n:@settings-of-the-bot%</span>
<span>{{ $t('settings-of-the-bot') }}</span>
</header>
<div>
@@ -98,16 +98,16 @@
<footer>
<p class="status">
<template v-if="isAccepted && isOpAccepted">%i18n:@this-game-is-started-soon%<mk-ellipsis/></template>
<template v-if="isAccepted && !isOpAccepted">%i18n:@waiting-for-other%<mk-ellipsis/></template>
<template v-if="!isAccepted && isOpAccepted">%i18n:@waiting-for-me%</template>
<template v-if="!isAccepted && !isOpAccepted">%i18n:@waiting-for-both%<mk-ellipsis/></template>
<template v-if="isAccepted && isOpAccepted">{{ $t('this-game-is-started-soon') }}<mk-ellipsis/></template>
<template v-if="isAccepted && !isOpAccepted">{{ $t('waiting-for-other') }}<mk-ellipsis/></template>
<template v-if="!isAccepted && isOpAccepted">{{ $t('waiting-for-me') }}</template>
<template v-if="!isAccepted && !isOpAccepted">{{ $t('waiting-for-both') }}<mk-ellipsis/></template>
</p>
<div class="actions">
<form-button @click="exit">%i18n:@cancel%</form-button>
<form-button primary @click="accept" v-if="!isAccepted">%i18n:@ready%</form-button>
<form-button primary @click="cancel" v-if="isAccepted">%i18n:@cancel-ready%</form-button>
<form-button @click="exit">{{ $t('cancel') }}</form-button>
<form-button primary @click="accept" v-if="!isAccepted">{{ $t('ready') }}</form-button>
<form-button primary @click="cancel" v-if="isAccepted">{{ $t('cancel-ready') }}</form-button>
</div>
</footer>
</div>
@@ -115,9 +115,11 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../../../i18n';
import * as maps from '../../../../../../../games/reversi/maps';
export default Vue.extend({
i18n: i18n('common/views/components/games/reversi/reversi.room.vue'),
props: ['game', 'connection'],
data() {

6
src/client/app/common/views/components/games/reversi/reversi.vue
View File

@@ -4,9 +4,9 @@
<x-gameroom :game="game" :self-nav="selfNav" @go-index="goIndex"/>
</div>
<div class="matching" v-else-if="matching">
<h1>{{ '%i18n:@matching.waiting-for%'.split('{}')[0] }}<b>{{ matching | userName }}</b>{{ '%i18n:@matching.waiting-for%'.split('{}')[1] }}<mk-ellipsis/></h1>
<h1>{{ this.$t('matching.waiting-for').split('{}')[0] }}<b>{{ matching | userName }}</b>{{ this.$t('matching.waiting-for').split('{}')[1] }}<mk-ellipsis/></h1>
<div class="cancel">
<form-button round @click="cancel">%i18n:@matching.cancel%</form-button>
<form-button round @click="cancel">{{ $t('matching.cancel') }}</form-button>
</div>
</div>
<div v-else-if="gameId">
@@ -20,11 +20,13 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../../../i18n';
import XGameroom from './reversi.gameroom.vue';
import XIndex from './reversi.index.vue';
import Progress from '../../../../scripts/loading';
export default Vue.extend({
i18n: i18n('common/views/components/games/reversi/reversi.vue'),
components: {
XGameroom,
XIndex

10
src/client/app/common/views/components/github-setting.vue
View File

@@ -1,11 +1,11 @@
<template>
<div class="mk-github-setting">
<p>%i18n:@description%<a :href="`${docsUrl}/link-to-github`" target="_blank">%i18n:@detail%</a></p>
<p class="account" v-if="$store.state.i.github" :title="`GitHub ID: ${$store.state.i.github.id}`">%i18n:@connected-to%: <a :href="`https://github.com/${$store.state.i.github.login}`" target="_blank">@{{ $store.state.i.github.login }}</a></p>
<p>{{ $t('description') }}<a :href="`${docsUrl}/link-to-github`" target="_blank">{{ $t('detail') }}</a></p>
<p class="account" v-if="$store.state.i.github" :title="`GitHub ID: ${$store.state.i.github.id}`">{{ $t('connected-to') }}: <a :href="`https://github.com/${$store.state.i.github.login}`" target="_blank">@{{ $store.state.i.github.login }}</a></p>
<p>
<a :href="`${apiUrl}/connect/github`" target="_blank" @click.prevent="connect">{{ $store.state.i.github ? '%i18n:@reconnect%' : '%i18n:@connect%' }}</a>
<a :href="`${apiUrl}/connect/github`" target="_blank" @click.prevent="connect">{{ $store.state.i.github ? this.$t('reconnect') : this.$t('connect') }}</a>
<span v-if="$store.state.i.github"> or </span>
<a :href="`${apiUrl}/disconnect/github`" target="_blank" v-if="$store.state.i.github" @click.prevent="disconnect">%i18n:@disconnect%</a>
<a :href="`${apiUrl}/disconnect/github`" target="_blank" v-if="$store.state.i.github" @click.prevent="disconnect">{{ $t('disconnect') }}</a>
</p>
<p class="id" v-if="$store.state.i.github">GitHub ID: {{ $store.state.i.github.id }}</p>
</div>
@@ -13,9 +13,11 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import { apiUrl, docsUrl } from '../../../config';
export default Vue.extend({
i18n: i18n('common/views/components/github-setting.vue'),
data() {
return {
form: null,

5
src/client/app/common/views/components/google.vue
View File

@@ -1,13 +1,16 @@
<template>
<div class="mk-google">
<input type="search" v-model="query" :placeholder="q">
<button @click="search"><fa icon="search"/> %i18n:common.search%</button>
<button @click="search"><fa icon="search"/> {{ $t('@.search') }}</button>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
export default Vue.extend({
i18n: i18n(),
props: ['q'],
data() {
return {

2
src/client/app/common/views/components/index.ts
View File

@@ -30,7 +30,6 @@ import time from './time.vue';
import timer from './timer.vue';
import mediaList from './media-list.vue';
import uploader from './uploader.vue';
import specialMessage from './special-message.vue';
import streamIndicator from './stream-indicator.vue';
import ellipsis from './ellipsis.vue';
import messaging from './messaging.vue';
@@ -84,7 +83,6 @@ Vue.component('mk-time', time);
Vue.component('mk-timer', timer);
Vue.component('mk-media-list', mediaList);
Vue.component('mk-uploader', uploader);
Vue.component('mk-special-message', specialMessage);
Vue.component('mk-stream-indicator', streamIndicator);
Vue.component('mk-ellipsis', ellipsis);
Vue.component('mk-messaging', messaging);

6
src/client/app/common/views/components/instance.vue
View File

@@ -3,15 +3,17 @@
<div class="banner" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }"></div>
<h1>{{ meta.name }}</h1>
<p v-html="meta.description || '%i18n:common.about%'"></p>
<router-link to="/">%i18n:@start%</router-link>
<p v-html="meta.description || this.$t('@.about')"></p>
<router-link to="/">{{ $t('start') }}</router-link>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
export default Vue.extend({
i18n: i18n('common/views/components/instance.vue'),
data() {
return {
meta: null

6
src/client/app/common/views/components/media-banner.vue
View File

@@ -2,8 +2,8 @@
<div class="mk-media-banner">
<div class="sensitive" v-if="media.isSensitive && hide" @click="hide = false">
<span class="icon"><fa icon="exclamation-triangle"/></span>
<b>%i18n:@sensitive%</b>
<span>%i18n:@click-to-show%</span>
<b>{{ $t('sensitive') }}</b>
<span>{{ $t('click-to-show') }}</span>
</div>
<div class="audio" v-else-if="media.type.startsWith('audio')">
<audio class="audio"
@@ -26,8 +26,10 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
export default Vue.extend({
i18n: i18n('common/views/components/media-banner.vue'),
props: {
media: {
type: Object,

10
src/client/app/common/views/components/messaging-room.form.vue
View File

@@ -8,18 +8,18 @@
ref="textarea"
@keypress="onKeypress"
@paste="onPaste"
placeholder="%i18n:@input-message-here%"
:placeholder="$t('placeholder')"
v-autocomplete="'text'"
></textarea>
<div class="file" @click="file = null" v-if="file">{{ file.name }}</div>
<mk-uploader ref="uploader" @uploaded="onUploaded"/>
<button class="send" @click="send" :disabled="!canSend || sending" title="%i18n:@send%">
<button class="send" @click="send" :disabled="!canSend || sending" :title="$t('send')">
<template v-if="!sending"><fa icon="paper-plane"/></template><template v-if="sending"><fa icon="spinner .spin"/></template>
</button>
<button class="attach-from-local" @click="chooseFile" title="%i18n:@attach-from-local%">
<button class="attach-from-local" @click="chooseFile" :title="$t('attach-from-local')">
<fa icon="upload"/>
</button>
<button class="attach-from-drive" @click="chooseFileFromDrive" title="%i18n:@attach-from-drive%">
<button class="attach-from-drive" @click="chooseFileFromDrive" :title="$t('attach-from-drive')">
<fa :icon="['far', 'folder-open']"/>
</button>
<input ref="file" type="file" @change="onChangeFile"/>
@@ -28,9 +28,11 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import * as autosize from 'autosize';
export default Vue.extend({
i18n: i18n('common/views/components/messaging-room.form.vue'),
props: ['user'],
data() {
return {

8
src/client/app/common/views/components/messaging-room.message.vue
View File

@@ -3,7 +3,7 @@
<mk-avatar class="avatar" :user="message.user" target="_blank"/>
<div class="content">
<div class="balloon" :data-no-text="message.text == null">
<!-- <button class="delete-button" v-if="isMe" title="%i18n:common.delete%">
<!-- <button class="delete-button" v-if="isMe" :title="$t('@.delete')">
<img src="/assets/desktop/messaging/delete.png" alt="Delete"/>
</button> -->
<div class="content" v-if="!message.isDeleted">
@@ -16,13 +16,13 @@
</div>
</div>
<div class="content" v-if="message.isDeleted">
<p class="is-deleted">%i18n:@deleted%</p>
<p class="is-deleted">{{ $t('deleted') }}</p>
</div>
</div>
<div></div>
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
<footer>
<span class="read" v-if="isMe && message.isRead">%i18n:@is-read%</span>
<span class="read" v-if="isMe && message.isRead">{{ $t('is-read') }}</span>
<mk-time :time="message.createdAt"/>
<template v-if="message.is_edited"><fa icon="pencil-alt"/></template>
</footer>
@@ -32,9 +32,11 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import parse from '../../../../../mfm/parse';
export default Vue.extend({
i18n: i18n('common/views/components/messaging-room.message.vue'),
props: {
message: {
required: true

16
src/client/app/common/views/components/messaging-room.vue
View File

@@ -4,11 +4,11 @@
@drop.prevent.stop="onDrop"
>
<div class="body">
<p class="init" v-if="init"><fa icon="spinner .spin"/>%i18n:common.loading%</p>
<p class="empty" v-if="!init && messages.length == 0"><fa icon="info-circle"/>%i18n:@empty%</p>
<p class="no-history" v-if="!init && messages.length > 0 && !existMoreMessages"><fa icon="flag"/>%i18n:@no-history%</p>
<p class="init" v-if="init"><fa icon="spinner .spin"/>{{ $t('@.loading') }}</p>
<p class="empty" v-if="!init && messages.length == 0"><fa icon="info-circle"/>{{ $t('empty') }}</p>
<p class="no-history" v-if="!init && messages.length > 0 && !existMoreMessages"><fa icon="flag"/>{{ $t('no-history') }}</p>
<button class="more" :class="{ fetching: fetchingMoreMessages }" v-if="existMoreMessages" @click="fetchMoreMessages" :disabled="fetchingMoreMessages">
<template v-if="fetchingMoreMessages"><fa icon="spinner .pulse" fixed-width/></template>{{ fetchingMoreMessages ? '%i18n:common.loading%' : '%i18n:@more%' }}
<template v-if="fetchingMoreMessages"><fa icon="spinner .pulse" fixed-width/></template>{{ fetchingMoreMessages ? $t('@.loading') : $t('@.load-more') }}
</button>
<template v-for="(message, i) in _messages">
<x-message :message="message" :key="message.id"/>
@@ -20,7 +20,7 @@
<footer>
<transition name="fade">
<div class="new-message" v-show="showIndicator">
<button @click="onIndicatorClick"><i><fa icon="arrow-circle-down"/></i>%i18n:@new-message%</button>
<button @click="onIndicatorClick"><i><fa icon="arrow-circle-down"/></i>{{ $t('new-message') }}</button>
</div>
</transition>
<x-form :user="user" ref="form"/>
@@ -30,11 +30,13 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import XMessage from './messaging-room.message.vue';
import XForm from './messaging-room.form.vue';
import { url } from '../../../config';
export default Vue.extend({
i18n: i18n('common/views/components/messaging-room.vue'),
components: {
XMessage,
XForm
@@ -60,7 +62,7 @@ export default Vue.extend({
const date = new Date(message.createdAt).getDate();
const month = new Date(message.createdAt).getMonth() + 1;
message._date = date;
message._datetext = '%i18n:common.month-and-day%'.replace('{month}', month.toString()).replace('{day}', date.toString());
message._datetext = this.$t('@.month-and-day').replace('{month}', month.toString()).replace('{day}', date.toString());
return message;
});
},
@@ -120,7 +122,7 @@ export default Vue.extend({
this.form.upload(e.dataTransfer.files[0]);
return;
} else if (e.dataTransfer.files.length > 1) {
alert('%i18n:@only-one-file-attached%');
alert(this.$t('only-one-file-attached'));
return;
}

10
src/client/app/common/views/components/messaging.vue
View File

@@ -3,7 +3,7 @@
<div class="search" v-if="!compact" :style="{ top: headerTop + 'px' }">
<div class="form">
<label for="search-input"><i><fa icon="search"/></i></label>
<input v-model="q" type="search" @input="search" @keydown="onSearchKeydown" placeholder="%i18n:@search-user%"/>
<input v-model="q" type="search" @input="search" @keydown="onSearchKeydown" :placeholder="$t('placeholder')"/>
</div>
<div class="result">
<ol class="users" v-if="result.length > 0" ref="searchResult">
@@ -38,22 +38,24 @@
<mk-time :time="message.createdAt"/>
</header>
<div class="body">
<p class="text"><span class="me" v-if="isMe(message)">%i18n:@you%:</span>{{ message.text }}</p>
<p class="text"><span class="me" v-if="isMe(message)">{{ $t('you') }}:</span>{{ message.text }}</p>
</div>
</div>
</a>
</template>
</div>
<p class="no-history" v-if="!fetching && messages.length == 0">%i18n:@no-history%</p>
<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:common.loading%<mk-ellipsis/></p>
<p class="no-history" v-if="!fetching && messages.length == 0">{{ $t('no-history') }}</p>
<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import getAcct from '../../../../../misc/acct/render';
export default Vue.extend({
i18n: i18n('common/views/components/messaging.vue'),
props: {
compact: {
type: Boolean,

12
src/client/app/common/views/components/mute-and-block.vue
View File

@@ -1,10 +1,10 @@
<template>
<ui-card>
<div slot="title"><fa icon="ban"/> %i18n:@mute-and-block%</div>
<div slot="title"><fa icon="ban"/> {{ $t('mute-and-block') }}</div>
<section>
<header>%i18n:@mute%</header>
<ui-info v-if="!muteFetching && mute.length == 0">%i18n:@no-muted-users%</ui-info>
<header>{{ $t('mute') }}</header>
<ui-info v-if="!muteFetching && mute.length == 0">{{ $t('no-muted-users') }}</ui-info>
<div class="users" v-if="mute.length != 0">
<div v-for="user in mute" :key="user.id">
<p><b>{{ user | userName }}</b> @{{ user | acct }}</p>
@@ -13,8 +13,8 @@
</section>
<section>
<header>%i18n:@block%</header>
<ui-info v-if="!blockFetching && block.length == 0">%i18n:@no-blocked-users%</ui-info>
<header>{{ $t('block') }}</header>
<ui-info v-if="!blockFetching && block.length == 0">{{ $t('no-blocked-users') }}</ui-info>
<div class="users" v-if="block.length != 0">
<div v-for="user in block" :key="user.id">
<p><b>{{ user | userName }}</b> @{{ user | acct }}</p>
@@ -26,8 +26,10 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
export default Vue.extend({
i18n: i18n('common/views/components/mute-and-block.vue'),
data() {
return {
muteFetching: true,

10
src/client/app/common/views/components/nav.vue
View File

@@ -1,20 +1,22 @@
<template>
<span class="mk-nav">
<a :href="aboutUrl">%i18n:@about%</a>
<a :href="aboutUrl">{{ $t('about') }}</a>
<i>・</i>
<a :href="repositoryUrl">%i18n:@repository%</a>
<a :href="repositoryUrl">{{ $t('repository') }}</a>
<i>・</i>
<a :href="feedbackUrl" target="_blank">%i18n:@feedback%</a>
<a :href="feedbackUrl" target="_blank">{{ $t('feedback') }}</a>
<i>・</i>
<a href="/dev">%i18n:@develop%</a>
<a href="/dev">{{ $t('develop') }}</a>
</span>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import { lang } from '../../../config';
export default Vue.extend({
i18n: i18n('common/views/components/nav.vue'),
data() {
return {
aboutUrl: `/docs/${lang}/about`,

4
src/client/app/common/views/components/note-header.vue
View File

@@ -6,7 +6,7 @@
<span class="is-bot" v-if="note.user.isBot">bot</span>
<span class="is-cat" v-if="note.user.isCat">cat</span>
<span class="username"><mk-acct :user="note.user"/></span>
<span class="is-verified" v-if="note.user.isVerified" title="%i18n:common.verified-user%"><fa icon="star"/></span>
<span class="is-verified" v-if="note.user.isVerified" :title="$t('@.verified-user')"><fa icon="star"/></span>
<div class="info">
<span class="app" v-if="note.app && !mini">via <b>{{ note.app.name }}</b></span>
<span class="mobile" v-if="note.viaMobile"><fa icon="mobile-alt"/></span>
@@ -25,8 +25,10 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
export default Vue.extend({
i18n: i18n(),
props: {
note: {
type: Object,

20
src/client/app/common/views/components/note-menu.vue
View File

@@ -6,28 +6,30 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import { url } from '../../../config';
import copyToClipboard from '../../../common/scripts/copy-to-clipboard';
import Ok from './ok.vue';
export default Vue.extend({
i18n: i18n('common/views/components/note-menu.vue'),
props: ['note', 'source', 'compact'],
computed: {
items() {
const items = [{
icon: 'info-circle',
text: '%i18n:@detail%',
text: this.$t('detail'),
action: this.detail
}, {
icon: 'link',
text: '%i18n:@copy-link%',
text: this.$t('copy-link'),
action: this.copyLink
}];
if (this.note.uri) {
items.push({
icon: 'external-link-square-alt',
text: '%i18n:@remote%',
text: this.$t('remote'),
action: () => {
window.open(this.note.uri, '_blank');
}
@@ -39,13 +41,13 @@ export default Vue.extend({
if (this.note.isFavorited) {
items.push({
icon: 'star',
text: '%i18n:@unfavorite%',
text: this.$t('unfavorite'),
action: this.unfavorite
});
} else {
items.push({
icon: 'star',
text: '%i18n:@favorite%',
text: this.$t('favorite'),
action: this.favorite
});
}
@@ -54,13 +56,13 @@ export default Vue.extend({
if ((this.$store.state.i.pinnedNoteIds || []).includes(this.note.id)) {
items.push({
icon: 'thumbtack',
text: '%i18n:@unpin%',
text: this.$t('unpin'),
action: this.unpin
});
} else {
items.push({
icon: 'thumbtack',
text: '%i18n:@pin%',
text: this.$t('pin'),
action: this.pin
});
}
@@ -70,7 +72,7 @@ export default Vue.extend({
items.push(null);
items.push({
icon: ['far', 'trash-alt'],
text: '%i18n:@delete%',
text: this.$t('delete'),
action: this.del
});
}
@@ -106,7 +108,7 @@ export default Vue.extend({
},
del() {
if (!window.confirm('%i18n:@delete-confirm%')) return;
if (!window.confirm(this.$t('delete-confirm'))) return;
(this as any).api('notes/delete', {
noteId: this.note.id
}).then(() => {

14
src/client/app/common/views/components/password-settings.vue
View File

@@ -1,31 +1,33 @@
<template>
<div>
<ui-button @click="reset">%i18n:@reset%</ui-button>
<ui-button @click="reset">{{ $t('reset') }}</ui-button>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
export default Vue.extend({
i18n: i18n('common/views/components/password-settings.vue'),
methods: {
reset() {
(this as any).apis.input({
title: '%i18n:@enter-current-password%',
title: this.$t('enter-current-password'),
type: 'password'
}).then(currentPassword => {
(this as any).apis.input({
title: '%i18n:@enter-new-password%',
title: this.$t('enter-new-password'),
type: 'password'
}).then(newPassword => {
(this as any).apis.input({
title: '%i18n:@enter-new-password-again%',
title: this.$t('enter-new-password-again'),
type: 'password'
}).then(newPassword2 => {
if (newPassword !== newPassword2) {
(this as any).apis.dialog({
title: null,
text: '%i18n:@not-match%',
text: this.$t('not-match'),
actions: [{
text: 'OK'
}]
@@ -36,7 +38,7 @@ export default Vue.extend({
currentPasword: currentPassword,
newPassword: newPassword
}).then(() => {
(this as any).apis.notify('%i18n:@changed%');
(this as any).apis.notify(this.$t('changed'));
});
});
});

12
src/client/app/common/views/components/poll-editor.vue
View File

@@ -1,18 +1,18 @@
<template>
<div class="mk-poll-editor">
<p class="caution" v-if="choices.length < 2">
<fa icon="exclamation-triangle"/>%i18n:@no-only-one-choice%
<fa icon="exclamation-triangle"/>{{ $t('no-only-one-choice') }}
</p>
<ul ref="choices">
<li v-for="(choice, i) in choices">
<input :value="choice" @input="onInput(i, $event)" :placeholder="'%i18n:@choice-n%'.replace('{}', i + 1)">
<button @click="remove(i)" title="%i18n:@remove%">
<input :value="choice" @input="onInput(i, $event)" :placeholder="this.$t('choice-n').replace('{}', i + 1)">
<button @click="remove(i)" :title="$t('remove')">
<fa icon="times"/>
</button>
</li>
</ul>
<button class="add" v-if="choices.length < 10" @click="add">%i18n:@add%</button>
<button class="destroy" @click="destroy" title="%i18n:@destroy%">
<button class="add" v-if="choices.length < 10" @click="add">{{ $t('add') }}</button>
<button class="destroy" @click="destroy" :title="$t('destroy')">
<fa icon="times"/>
</button>
</div>
@@ -20,8 +20,10 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import { erase } from '../../../../../prelude/array';
export default Vue.extend({
i18n: i18n('common/views/components/poll-editor.vue'),
data() {
return {
choices: ['', '']

12
src/client/app/common/views/components/poll.vue
View File

@@ -1,28 +1,30 @@
<template>
<div class="mk-poll" :data-is-voted="isVoted">
<ul>
<li v-for="choice in poll.choices" :key="choice.id" @click="vote(choice.id)" :class="{ voted: choice.voted }" :title="!isVoted ? '%i18n:@vote-to%'.replace('{}', choice.text) : ''">
<li v-for="choice in poll.choices" :key="choice.id" @click="vote(choice.id)" :class="{ voted: choice.voted }" :title="!isVoted ? $t('vote-to').replace('{}', choice.text) : ''">
<div class="backdrop" :style="{ 'width': (showResult ? (choice.votes / total * 100) : 0) + '%' }"></div>
<span>
<template v-if="choice.isVoted"><fa icon="check"/></template>
<span>{{ choice.text }}</span>
<span class="votes" v-if="showResult">({{ '%i18n:@vote-count%'.replace('{}', choice.votes) }})</span>
<span class="votes" v-if="showResult">({{ $t('vote-count').replace('{}', choice.votes) }})</span>
</span>
</li>
</ul>
<p v-if="total > 0">
<span>{{ '%i18n:@total-users%'.replace('{}', total) }}</span>
<span>{{ $t('total-users').replace('{}', total) }}</span>
<span>・</span>
<a v-if="!isVoted" @click="toggleShowResult">{{ showResult ? '%i18n:@vote%' : '%i18n:@show-result%' }}</a>
<span v-if="isVoted">%i18n:@voted%</span>
<a v-if="!isVoted" @click="toggleShowResult">{{ showResult ? $t('vote') : $t('show-result') }}</a>
<span v-if="isVoted">{{ $t('voted') }}</span>
</p>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import { sum } from '../../../../../prelude/array';
export default Vue.extend({
i18n: i18n('common/views/components/poll.vue'),
props: ['note'],
data() {
return {

40
src/client/app/common/views/components/profile-editor.vue
View File

@@ -1,65 +1,65 @@
<template>
<ui-card>
<div slot="title"><fa icon="user"/> %i18n:@title%</div>
<div slot="title"><fa icon="user"/> {{ $t('title') }}</div>
<section class="fit-top">
<ui-form :disabled="saving">
<ui-input v-model="name" :max="30">
<span>%i18n:@name%</span>
<span>{{ $t('name') }}</span>
</ui-input>
<ui-input v-model="username" readonly>
<span>%i18n:@account%</span>
<span>{{ $t('account') }}</span>
<span slot="prefix">@</span>
<span slot="suffix">@{{ host }}</span>
</ui-input>
<ui-input v-model="location">
<span>%i18n:@location%</span>
<span>{{ $t('location') }}</span>
<span slot="prefix"><fa icon="map-marker-alt"/></span>
</ui-input>
<ui-input v-model="birthday" type="date">
<span>%i18n:@birthday%</span>
<span>{{ $t('birthday') }}</span>
<span slot="prefix"><fa icon="birthday-cake"/></span>
</ui-input>
<ui-textarea v-model="description" :max="500">
<span>%i18n:@description%</span>
<span>{{ $t('description') }}</span>
</ui-textarea>
<ui-input type="file" @change="onAvatarChange">
<span>%i18n:@avatar%</span>
<span>{{ $t('avatar') }}</span>
<span slot="icon"><fa icon="image"/></span>
<span slot="desc" v-if="avatarUploading">%i18n:@uploading%<mk-ellipsis/></span>
<span slot="desc" v-if="avatarUploading">{{ $t('uploading') }}<mk-ellipsis/></span>
</ui-input>
<ui-input type="file" @change="onBannerChange">
<span>%i18n:@banner%</span>
<span>{{ $t('banner') }}</span>
<span slot="icon"><fa icon="image"/></span>
<span slot="desc" v-if="bannerUploading">%i18n:@uploading%<mk-ellipsis/></span>
<span slot="desc" v-if="bannerUploading">{{ $t('uploading') }}<mk-ellipsis/></span>
</ui-input>
<ui-button @click="save(true)">%i18n:@save%</ui-button>
<ui-button @click="save(true)">{{ $t('save') }}</ui-button>
</ui-form>
</section>
<section>
<header>%i18n:@advanced%</header>
<header>{{ $t('advanced') }}</header>
<div>
<ui-switch v-model="isCat" @change="save(false)">%i18n:@is-cat%</ui-switch>
<ui-switch v-model="isBot" @change="save(false)">%i18n:@is-bot%</ui-switch>
<ui-switch v-model="alwaysMarkNsfw">%i18n:common.always-mark-nsfw%</ui-switch>
<ui-switch v-model="isCat" @change="save(false)">{{ $t('is-cat') }}</ui-switch>
<ui-switch v-model="isBot" @change="save(false)">{{ $t('is-bot') }}</ui-switch>
<ui-switch v-model="alwaysMarkNsfw">{{ $t('@.always-mark-nsfw') }}</ui-switch>
</div>
</section>
<section>
<header>%i18n:@privacy%</header>
<header>{{ $t('privacy') }}</header>
<div>
<ui-switch v-model="isLocked" @change="save(false)">%i18n:@is-locked%</ui-switch>
<ui-switch v-model="carefulBot" @change="save(false)">%i18n:@careful-bot%</ui-switch>
<ui-switch v-model="isLocked" @change="save(false)">{{ $t('is-locked') }}</ui-switch>
<ui-switch v-model="carefulBot" @change="save(false)">{{ $t('careful-bot') }}</ui-switch>
</div>
</section>
</ui-card>
@@ -67,9 +67,11 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import { apiUrl, host } from '../../../config';
export default Vue.extend({
i18n: i18n('common/views/components/profile-editor.vue'),
data() {
return {
host,
@@ -180,7 +182,7 @@ export default Vue.extend({
if (notify) {
this.$swal({
type: 'success',
text: '%i18n:@saved%'
text: this.$t('saved')
});
}
});

24
src/client/app/common/views/components/reaction-icon.vue
View File

@@ -1,24 +1,26 @@
<template>
<span class="mk-reaction-icon">
<img v-if="reaction == 'like'" src="https://twemoji.maxcdn.com/2/svg/1f44d.svg" alt="%i18n:common.reactions.like%">
<img v-if="reaction == 'love'" src="https://twemoji.maxcdn.com/2/svg/2764.svg" alt="%i18n:common.reactions.love%">
<img v-if="reaction == 'laugh'" src="https://twemoji.maxcdn.com/2/svg/1f606.svg" alt="%i18n:common.reactions.laugh%">
<img v-if="reaction == 'hmm'" src="https://twemoji.maxcdn.com/2/svg/1f914.svg" alt="%i18n:common.reactions.hmm%">
<img v-if="reaction == 'surprise'" src="https://twemoji.maxcdn.com/2/svg/1f62e.svg" alt="%i18n:common.reactions.surprise%">
<img v-if="reaction == 'congrats'" src="https://twemoji.maxcdn.com/2/svg/1f389.svg" alt="%i18n:common.reactions.congrats%">
<img v-if="reaction == 'angry'" src="https://twemoji.maxcdn.com/2/svg/1f4a2.svg" alt="%i18n:common.reactions.angry%">
<img v-if="reaction == 'confused'" src="https://twemoji.maxcdn.com/2/svg/1f625.svg" alt="%i18n:common.reactions.confused%">
<img v-if="reaction == 'rip'" src="https://twemoji.maxcdn.com/2/svg/1f607.svg" alt="%i18n:common.reactions.rip%">
<img v-if="reaction == 'like'" src="https://twemoji.maxcdn.com/2/svg/1f44d.svg" :alt="$t('@.reactions.like')">
<img v-if="reaction == 'love'" src="https://twemoji.maxcdn.com/2/svg/2764.svg" :alt="$t('@.reactions.love')">
<img v-if="reaction == 'laugh'" src="https://twemoji.maxcdn.com/2/svg/1f606.svg" :alt="$t('@.reactions.laugh')">
<img v-if="reaction == 'hmm'" src="https://twemoji.maxcdn.com/2/svg/1f914.svg" :alt="$t('@.reactions.hmm')">
<img v-if="reaction == 'surprise'" src="https://twemoji.maxcdn.com/2/svg/1f62e.svg" :alt="$t('@.reactions.surprise')">
<img v-if="reaction == 'congrats'" src="https://twemoji.maxcdn.com/2/svg/1f389.svg" :alt="$t('@.reactions.congrats')">
<img v-if="reaction == 'angry'" src="https://twemoji.maxcdn.com/2/svg/1f4a2.svg" :alt="$t('@.reactions.angry')">
<img v-if="reaction == 'confused'" src="https://twemoji.maxcdn.com/2/svg/1f625.svg" :alt="$t('@.reactions.confused')">
<img v-if="reaction == 'rip'" src="https://twemoji.maxcdn.com/2/svg/1f607.svg" :alt="$t('@.reactions.rip')">
<template v-if="reaction == 'pudding'">
<img v-if="$store.getters.isSignedIn && $store.state.settings.iLikeSushi" src="https://twemoji.maxcdn.com/2/svg/1f363.svg" alt="%i18n:common.reactions.pudding%">
<img v-else src="https://twemoji.maxcdn.com/2/svg/1f36e.svg" alt="%i18n:common.reactions.pudding%">
<img v-if="$store.getters.isSignedIn && $store.state.settings.iLikeSushi" src="https://twemoji.maxcdn.com/2/svg/1f363.svg" :alt="$t('@.reactions.pudding')">
<img v-else src="https://twemoji.maxcdn.com/2/svg/1f36e.svg" :alt="$t('@.reactions.pudding')">
</template>
</span>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
export default Vue.extend({
i18n: i18n(),
props: ['reaction']
});
</script>

28
src/client/app/common/views/components/reaction-picker.vue
View File

@@ -4,16 +4,16 @@
<div class="popover" :class="{ compact, big }" ref="popover">
<p v-if="!compact">{{ title }}</p>
<div ref="buttons" :class="{ showFocus }">
<button @click="react('like')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="1" title="%i18n:common.reactions.like%"><mk-reaction-icon reaction='like'/></button>
<button @click="react('love')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="2" title="%i18n:common.reactions.love%"><mk-reaction-icon reaction='love'/></button>
<button @click="react('laugh')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="3" title="%i18n:common.reactions.laugh%"><mk-reaction-icon reaction='laugh'/></button>
<button @click="react('hmm')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="4" title="%i18n:common.reactions.hmm%"><mk-reaction-icon reaction='hmm'/></button>
<button @click="react('surprise')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="5" title="%i18n:common.reactions.surprise%"><mk-reaction-icon reaction='surprise'/></button>
<button @click="react('congrats')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="6" title="%i18n:common.reactions.congrats%"><mk-reaction-icon reaction='congrats'/></button>
<button @click="react('angry')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="7" title="%i18n:common.reactions.angry%"><mk-reaction-icon reaction='angry'/></button>
<button @click="react('confused')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="8" title="%i18n:common.reactions.confused%"><mk-reaction-icon reaction='confused'/></button>
<button @click="react('rip')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="9" title="%i18n:common.reactions.rip%"><mk-reaction-icon reaction='rip'/></button>
<button @click="react('pudding')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="10" title="%i18n:common.reactions.pudding%"><mk-reaction-icon reaction='pudding'/></button>
<button @click="react('like')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="1" :title="$t('@.reactions.like')"><mk-reaction-icon reaction='like'/></button>
<button @click="react('love')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="2" :title="$t('@.reactions.love')"><mk-reaction-icon reaction='love'/></button>
<button @click="react('laugh')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="3" :title="$t('@.reactions.laugh')"><mk-reaction-icon reaction='laugh'/></button>
<button @click="react('hmm')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="4" :title="$t('@.reactions.hmm')"><mk-reaction-icon reaction='hmm'/></button>
<button @click="react('surprise')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="5" :title="$t('@.reactions.surprise')"><mk-reaction-icon reaction='surprise'/></button>
<button @click="react('congrats')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="6" :title="$t('@.reactions.congrats')"><mk-reaction-icon reaction='congrats'/></button>
<button @click="react('angry')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="7" :title="$t('@.reactions.angry')"><mk-reaction-icon reaction='angry'/></button>
<button @click="react('confused')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="8" :title="$t('@.reactions.confused')"><mk-reaction-icon reaction='confused'/></button>
<button @click="react('rip')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="9" :title="$t('@.reactions.rip')"><mk-reaction-icon reaction='rip'/></button>
<button @click="react('pudding')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="10" :title="$t('@.reactions.pudding')"><mk-reaction-icon reaction='pudding'/></button>
</div>
</div>
</div>
@@ -21,11 +21,11 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import * as anime from 'animejs';
const placeholder = '%i18n:@choose-reaction%';
export default Vue.extend({
i18n: i18n('common/views/components/reaction-picker.vue'),
props: {
note: {
type: Object,
@@ -67,7 +67,7 @@ export default Vue.extend({
data() {
return {
title: placeholder,
title: this.$t('choose-reaction'),
focus: null
};
},
@@ -160,7 +160,7 @@ export default Vue.extend({
},
onMouseout(e) {
this.title = placeholder;
this.title = this.$t('choose-reaction');
},
close() {

1
src/client/app/common/views/components/reactions-viewer.vue
View File

@@ -17,6 +17,7 @@
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: ['note'],
computed: {

14
src/client/app/common/views/components/signin.vue
View File

@@ -2,26 +2,28 @@
<form class="mk-signin" :class="{ signing }" @submit.prevent="onSubmit">
<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div>
<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @input="onUsernameChange" styl="fill">
<span>%i18n:@username%</span>
<span>{{ $t('username') }}</span>
<span slot="prefix">@</span>
<span slot="suffix">@{{ host }}</span>
</ui-input>
<ui-input v-model="password" type="password" required styl="fill">
<span>%i18n:@password%</span>
<span>{{ $t('password') }}</span>
<span slot="prefix"><fa icon="lock"/></span>
</ui-input>
<ui-input v-if="user && user.twoFactorEnabled" v-model="token" type="number" required styl="fill"/>
<ui-button type="submit" :disabled="signing">{{ signing ? '%i18n:@signing-in%' : '%i18n:@signin%' }}</ui-button>
<p style="margin: 8px 0;">%i18n:@or% <a :href="`${apiUrl}/signin/twitter`">%i18n:@signin-with-twitter%</a></p>
<p style="margin: 8px 0;">%i18n:@or% <a :href="`${apiUrl}/signin/github`">%i18n:@signin-with-github%</a></p>
<ui-button type="submit" :disabled="signing">{{ signing ? $t('signing-in') : $t('signin') }}</ui-button>
<p style="margin: 8px 0;"><a :href="`${apiUrl}/signin/twitter`">{{ $t('signin-with-twitter') }}</a></p>
<p style="margin: 8px 0;"><a :href="`${apiUrl}/signin/github`">{{ $t('signin-with-github') }}</a></p>
</form>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import { apiUrl, host } from '../../../config';
export default Vue.extend({
i18n: i18n('common/views/components/signin.vue'),
props: {
withAvatar: {
type: Boolean,
@@ -60,7 +62,7 @@ export default Vue.extend({
}, true).then(() => {
location.reload();
}).catch(() => {
alert('%i18n:@login-failed%');
alert(this.$t('login-failed'));
this.signing = false;
});
}

40
src/client/app/common/views/components/signup.vue
View File

@@ -2,51 +2,53 @@
<form class="mk-signup" @submit.prevent="onSubmit" :autocomplete="Math.random()">
<template v-if="meta">
<ui-input v-if="meta.disableRegistration" v-model="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required styl="fill">
<span>%i18n:@invitation-code%</span>
<span>{{ $t('invitation-code') }}</span>
<span slot="prefix"><fa icon="id-card-alt"/></span>
<p slot="desc" v-html="'%i18n:@invitation-info%'.replace('{}', 'mailto:' + meta.maintainer.email)"></p>
<p slot="desc" v-html="this.$t('invitation-info').replace('{}', 'mailto:' + meta.maintainer.email)"></p>
</ui-input>
<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @input="onChangeUsername" styl="fill">
<span>%i18n:@username%</span>
<span>{{ $t('username') }}</span>
<span slot="prefix">@</span>
<span slot="suffix">@{{ host }}</span>
<p slot="desc" v-if="usernameState == 'wait'" style="color:#999"><fa icon="spinner .pulse" fixed-width/> %i18n:@checking%</p>
<p slot="desc" v-if="usernameState == 'ok'" style="color:#3CB7B5"><fa icon="check" fixed-width/> %i18n:@available%</p>
<p slot="desc" v-if="usernameState == 'unavailable'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@unavailable%</p>
<p slot="desc" v-if="usernameState == 'error'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@error%</p>
<p slot="desc" v-if="usernameState == 'invalid-format'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@invalid-format%</p>
<p slot="desc" v-if="usernameState == 'min-range'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@too-short%</p>
<p slot="desc" v-if="usernameState == 'max-range'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@too-long%</p>
<p slot="desc" v-if="usernameState == 'wait'" style="color:#999"><fa icon="spinner .pulse" fixed-width/> {{ $t('checking') }}</p>
<p slot="desc" v-if="usernameState == 'ok'" style="color:#3CB7B5"><fa icon="check" fixed-width/> {{ $t('available') }}</p>
<p slot="desc" v-if="usernameState == 'unavailable'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('unavailable') }}</p>
<p slot="desc" v-if="usernameState == 'error'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('error') }}</p>
<p slot="desc" v-if="usernameState == 'invalid-format'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('invalid-format') }}</p>
<p slot="desc" v-if="usernameState == 'min-range'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('too-short') }}</p>
<p slot="desc" v-if="usernameState == 'max-range'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('too-long') }}</p>
</ui-input>
<ui-input v-model="password" type="password" :autocomplete="Math.random()" required @input="onChangePassword" :with-password-meter="true" styl="fill">
<span>%i18n:@password%</span>
<span>{{ $t('password') }}</span>
<span slot="prefix"><fa icon="lock"/></span>
<div slot="desc">
<p v-if="passwordStrength == 'low'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@weak-password%</p>
<p v-if="passwordStrength == 'medium'" style="color:#3CB7B5"><fa icon="check" fixed-width/> %i18n:@normal-password%</p>
<p v-if="passwordStrength == 'high'" style="color:#3CB7B5"><fa icon="check" fixed-width/> %i18n:@strong-password%</p>
<p v-if="passwordStrength == 'low'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('weak-password') }}</p>
<p v-if="passwordStrength == 'medium'" style="color:#3CB7B5"><fa icon="check" fixed-width/> {{ $t('normal-password') }}</p>
<p v-if="passwordStrength == 'high'" style="color:#3CB7B5"><fa icon="check" fixed-width/> {{ $t('strong-password') }}</p>
</div>
</ui-input>
<ui-input v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @input="onChangePasswordRetype" styl="fill">
<span>%i18n:@password% (%i18n:@retype%)</span>
<span>{{ $t('password') }} ({{ $t('retype') }})</span>
<span slot="prefix"><fa icon="lock"/></span>
<div slot="desc">
<p v-if="passwordRetypeState == 'match'" style="color:#3CB7B5"><fa icon="check" fixed-width/> %i18n:@password-matched%</p>
<p v-if="passwordRetypeState == 'not-match'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> %i18n:@password-not-matched%</p>
<p v-if="passwordRetypeState == 'match'" style="color:#3CB7B5"><fa icon="check" fixed-width/> {{ $t('password-matched') }}</p>
<p v-if="passwordRetypeState == 'not-match'" style="color:#FF1161"><fa icon="exclamation-triangle" fixed-width/> {{ $t('password-not-matched') }}</p>
</div>
</ui-input>
<div v-if="meta.enableRecaptcha" class="g-recaptcha" :data-sitekey="meta.recaptchaSiteKey" style="margin: 16px 0;"></div>
<ui-button type="submit">%i18n:@create%</ui-button>
<ui-button type="submit">{{ $t('create') }}</ui-button>
</template>
</form>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
const getPasswordStrength = require('syuilo-password-strength');
import { host, url } from '../../../config';
export default Vue.extend({
i18n: i18n('common/views/components/signup.vue'),
data() {
return {
host,
@@ -139,7 +141,7 @@ export default Vue.extend({
location.href = '/';
});
}).catch(() => {
alert('%i18n:@some-error%');
alert(this.$t('some-error'));
if (this.meta.enableRecaptcha) {
(window as any).grecaptcha.reset();

42
src/client/app/common/views/components/special-message.vue
View File

@@ -1,42 +0,0 @@
<template>
<div class="mk-special-message">
<p v-if="m == 1 && d == 1">%i18n:@new-year%</p>
<p v-if="m == 12 && d == 25">%i18n:@christmas%</p>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
data() {
return {
now: new Date()
};
},
computed: {
d(): number {
return this.now.getDate();
},
m(): number {
return this.now.getMonth() + 1;
}
}
});
</script>
<style lang="stylus" scoped>
.mk-special-message
&:empty
display none
> p
margin 0
padding 4px
text-align center
font-size 14px
font-weight bold
text-transform uppercase
color #fff
background #ff1036
</style>

8
src/client/app/common/views/components/stream-indicator.vue
View File

@@ -2,24 +2,26 @@
<div class="mk-stream-indicator">
<p v-if="stream.state == 'initializing'">
<fa icon="spinner .pulse"/>
<span>%i18n:@connecting%<mk-ellipsis/></span>
<span>{{ $t('connecting') }}<mk-ellipsis/></span>
</p>
<p v-if="stream.state == 'reconnecting'">
<fa icon="spinner .pulse"/>
<span>%i18n:@reconnecting%<mk-ellipsis/></span>
<span>{{ $t('reconnecting') }}<mk-ellipsis/></span>
</p>
<p v-if="stream.state == 'connected'">
<fa icon="check"/>
<span>%i18n:@connected%</span>
<span>{{ $t('connected') }}</span>
</p>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import * as anime from 'animejs';
export default Vue.extend({
i18n: i18n('common/views/components/stream-indicator.vue'),
computed: {
stream() {
return (this as any).os.stream;

6
src/client/app/common/views/components/tag-cloud.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="jtivnzhfwquxpsfidertopbmwmchmnmo">
<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:common.loading%<mk-ellipsis/></p>
<p class="empty" v-else-if="tags.length == 0"><fa icon="exclamation-circle"/>%i18n:@empty%</p>
<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
<p class="empty" v-else-if="tags.length == 0"><fa icon="exclamation-circle"/>{{ $t('empty') }}</p>
<div v-else>
<vue-word-cloud
:words="tags.slice(0, 20).map(x => [x.name, x.count])"
@@ -19,9 +19,11 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import * as VueWordCloud from 'vuewordcloud';
export default Vue.extend({
i18n: i18n('common/views/components/tag-cloud.vue'),
components: {
[VueWordCloud.name]: VueWordCloud
},

84
src/client/app/common/views/components/theme.vue
View File

@@ -1,96 +1,96 @@
<template>
<div class="nicnklzforebnpfgasiypmpdaaglujqm">
<label>
<span>%i18n:@light-theme%</span>
<ui-select v-model="light" placeholder="%i18n:@light-theme%">
<optgroup label="%i18n:@light-themes%">
<span>{{ $t('light-theme') }}</span>
<ui-select v-model="light" :placeholder="$t('placeholder')">
<optgroup :label="$t('label')">
<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
<optgroup label="%i18n:@dark-themes%">
<optgroup :label="$t('label')">
<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
</ui-select>
</label>
<label>
<span>%i18n:@dark-theme%</span>
<ui-select v-model="dark" placeholder="%i18n:@dark-theme%">
<optgroup label="%i18n:@dark-themes%">
<span>{{ $t('dark-theme') }}</span>
<ui-select v-model="dark" :placeholder="$t('placeholder')">
<optgroup :label="$t('label')">
<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
<optgroup label="%i18n:@light-themes%">
<optgroup :label="$t('label')">
<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
</ui-select>
</label>
<details class="creator">
<summary><fa icon="palette"/> %i18n:@create-a-theme%</summary>
<summary><fa icon="palette"/> {{ $t('create-a-theme') }}</summary>
<div>
<span>%i18n:@base-theme%:</span>
<ui-radio v-model="myThemeBase" value="light">%i18n:@base-theme-light%</ui-radio>
<ui-radio v-model="myThemeBase" value="dark">%i18n:@base-theme-dark%</ui-radio>
<span>{{ $t('base-theme') }}:</span>
<ui-radio v-model="myThemeBase" value="light">{{ $t('base-theme-light') }}</ui-radio>
<ui-radio v-model="myThemeBase" value="dark">{{ $t('base-theme-dark') }}</ui-radio>
</div>
<div>
<ui-input v-model="myThemeName">
<span>%i18n:@theme-name%</span>
<span>{{ $t('theme-name') }}</span>
</ui-input>
<ui-textarea v-model="myThemeDesc">
<span>%i18n:@desc%</span>
<span>{{ $t('desc') }}</span>
</ui-textarea>
</div>
<div>
<div style="padding-bottom:8px;">%i18n:@primary-color%:</div>
<div style="padding-bottom:8px;">{{ $t('primary-color') }}:</div>
<color-picker v-model="myThemePrimary"/>
</div>
<div>
<div style="padding-bottom:8px;">%i18n:@secondary-color%:</div>
<div style="padding-bottom:8px;">{{ $t('secondary-color') }}:</div>
<color-picker v-model="myThemeSecondary"/>
</div>
<div>
<div style="padding-bottom:8px;">%i18n:@text-color%:</div>
<div style="padding-bottom:8px;">{{ $t('text-color') }}:</div>
<color-picker v-model="myThemeText"/>
</div>
<ui-button @click="preview()"><fa icon="eye"/> %i18n:@preview-created-theme%</ui-button>
<ui-button primary @click="gen()"><fa :icon="['far', 'save']"/> %i18n:@save-created-theme%</ui-button>
<ui-button @click="preview()"><fa icon="eye"/> {{ $t('preview-created-theme') }}</ui-button>
<ui-button primary @click="gen()"><fa :icon="['far', 'save']"/> {{ $t('save-created-theme') }}</ui-button>
</details>
<details>
<summary><fa icon="download"/> %i18n:@install-a-theme%</summary>
<ui-button @click="import_()"><fa icon="file-import"/> %i18n:@import%</ui-button>
<summary><fa icon="download"/> {{ $t('install-a-theme') }}</summary>
<ui-button @click="import_()"><fa icon="file-import"/> {{ $t('import') }}</ui-button>
<input ref="file" type="file" accept=".misskeytheme" style="display:none;" @change="onUpdateImportFile"/>
<p>%i18n:@import-by-code%:</p>
<p>{{ $t('import-by-code') }}:</p>
<ui-textarea v-model="installThemeCode">
<span>%i18n:@theme-code%</span>
<span>{{ $t('theme-code') }}</span>
</ui-textarea>
<ui-button @click="() => install(this.installThemeCode)"><fa icon="check"/> %i18n:@install%</ui-button>
<ui-button @click="() => install(this.installThemeCode)"><fa icon="check"/> {{ $t('install') }}</ui-button>
</details>
<details>
<summary><fa icon="folder-open"/> %i18n:@manage-themes%</summary>
<ui-select v-model="selectedThemeId" placeholder="%i18n:@select-theme%">
<optgroup label="%i18n:@builtin-themes%">
<summary><fa icon="folder-open"/> {{ $t('manage-themes') }}</summary>
<ui-select v-model="selectedThemeId" :placeholder="$t('placeholder')">
<optgroup :label="$t('label')">
<option v-for="x in builtinThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
<optgroup label="%i18n:@my-themes%">
<optgroup :label="$t('label')">
<option v-for="x in installedThemes.filter(t => t.author == this.$store.state.i.username)" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
<optgroup label="%i18n:@installed-themes%">
<optgroup :label="$t('label')">
<option v-for="x in installedThemes.filter(t => t.author != this.$store.state.i.username)" :value="x.id" :key="x.id">{{ x.name }}</option>
</optgroup>
</ui-select>
<template v-if="selectedTheme">
<ui-input readonly :value="selectedTheme.author">
<span>%i18n:@author%</span>
<span>{{ $t('author') }}</span>
</ui-input>
<ui-textarea v-if="selectedTheme.desc" readonly :value="selectedTheme.desc">
<span>%i18n:@desc%</span>
<span>{{ $t('desc') }}</span>
</ui-textarea>
<ui-textarea readonly :value="selectedThemeCode">
<span>%i18n:@theme-code%</span>
<span>{{ $t('theme-code') }}</span>
</ui-textarea>
<ui-button @click="export_()" link :download="`${selectedTheme.name}.misskeytheme`" ref="export"><fa icon="box"/> %i18n:@export%</ui-button>
<ui-button @click="uninstall()" v-if="!builtinThemes.some(t => t.id == selectedTheme.id)"><fa :icon="['far', 'trash-alt']"/> %i18n:@uninstall%</ui-button>
<ui-button @click="export_()" link :download="`${selectedTheme.name}.misskeytheme`" ref="export"><fa icon="box"/> {{ $t('export') }}</ui-button>
<ui-button @click="uninstall()" v-if="!builtinThemes.some(t => t.id == selectedTheme.id)"><fa :icon="['far', 'trash-alt']"/> {{ $t('uninstall') }}</ui-button>
</template>
</details>
</div>
@@ -98,6 +98,7 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import { lightTheme, darkTheme, builtinThemes, applyTheme, Theme } from '../../../theme';
import { Chrome } from 'vue-color';
import * as uuid from 'uuid';
@@ -119,6 +120,7 @@ function convertOldThemedefinition(t) {
}
export default Vue.extend({
i18n: i18n('common/views/components/theme.vue'),
components: {
ColorPicker: Chrome
},
@@ -221,7 +223,7 @@ export default Vue.extend({
} catch (e) {
this.$swal({
type: 'error',
text: '%i18n:@invalid-theme%'
text: this.$t('invalid-theme')
});
return;
}
@@ -234,7 +236,7 @@ export default Vue.extend({
if (theme.id == null) {
this.$swal({
type: 'error',
text: '%i18n:@invalid-theme%'
text: this.$t('invalid-theme')
});
return;
}
@@ -242,7 +244,7 @@ export default Vue.extend({
if (this.$store.state.device.themes.some(t => t.id == theme.id)) {
this.$swal({
type: 'info',
text: '%i18n:@already-installed%'
text: this.$t('already-installed')
});
return;
}
@@ -254,7 +256,7 @@ export default Vue.extend({
this.$swal({
type: 'success',
text: '%i18n:@installed%'.replace('{}', theme.name)
text: this.$t('installed').replace('{}', theme.name)
});
},
@@ -267,7 +269,7 @@ export default Vue.extend({
this.$swal({
type: 'info',
text: '%i18n:@uninstalled%'.replace('{}', theme.name)
text: this.$t('uninstalled').replace('{}', theme.name)
});
},
@@ -304,7 +306,7 @@ export default Vue.extend({
if (theme.name == null || theme.name.trim() == '') {
this.$swal({
type: 'warning',
text: '%i18n:@theme-name-required%'
text: this.$t('theme-name-required')
});
return;
}
@@ -318,7 +320,7 @@ export default Vue.extend({
this.$swal({
type: 'success',
text: '%i18n:@saved%'
text: this.$t('saved')
});
}
}

22
src/client/app/common/views/components/time.vue
View File

@@ -8,8 +8,10 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
export default Vue.extend({
i18n: i18n(),
props: {
time: {
type: [Date, String],
@@ -44,16 +46,16 @@ export default Vue.extend({
const time = this._time;
const ago = (this.now.getTime() - time.getTime()) / 1000/*ms*/;
return (
ago >= 31536000 ? '%i18n:common.time.years_ago%' .replace('{}', (~~(ago / 31536000)).toString()) :
ago >= 2592000 ? '%i18n:common.time.months_ago%' .replace('{}', (~~(ago / 2592000)).toString()) :
ago >= 604800 ? '%i18n:common.time.weeks_ago%' .replace('{}', (~~(ago / 604800)).toString()) :
ago >= 86400 ? '%i18n:common.time.days_ago%' .replace('{}', (~~(ago / 86400)).toString()) :
ago >= 3600 ? '%i18n:common.time.hours_ago%' .replace('{}', (~~(ago / 3600)).toString()) :
ago >= 60 ? '%i18n:common.time.minutes_ago%'.replace('{}', (~~(ago / 60)).toString()) :
ago >= 10 ? '%i18n:common.time.seconds_ago%'.replace('{}', (~~(ago % 60)).toString()) :
ago >= 0 ? '%i18n:common.time.just_now%' :
ago < 0 ? '%i18n:common.time.future%' :
'%i18n:common.time.unknown%');
ago >= 31536000 ? this.$t('@.time.years_ago') .replace('{}', (~~(ago / 31536000)).toString()) :
ago >= 2592000 ? this.$t('@.time.months_ago') .replace('{}', (~~(ago / 2592000)).toString()) :
ago >= 604800 ? this.$t('@.time.weeks_ago') .replace('{}', (~~(ago / 604800)).toString()) :
ago >= 86400 ? this.$t('@.time.days_ago') .replace('{}', (~~(ago / 86400)).toString()) :
ago >= 3600 ? this.$t('@.time.hours_ago') .replace('{}', (~~(ago / 3600)).toString()) :
ago >= 60 ? this.$t('@.time.minutes_ago').replace('{}', (~~(ago / 60)).toString()) :
ago >= 10 ? this.$t('@.time.seconds_ago').replace('{}', (~~(ago % 60)).toString()) :
ago >= 0 ? this.$t('@.time.just_now') :
ago < 0 ? this.$t('@.time.future') :
this.$t('@.time.unknown'));
}
},
created() {

8
src/client/app/common/views/components/trends.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="csqvmxybqbycalfhkxvyfrgbrdalkaoc">
<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:common.loading%<mk-ellipsis/></p>
<p class="empty" v-else-if="stats.length == 0"><fa icon="exclamation-circle"/>%i18n:@empty%</p>
<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>{{ $t('@.loading') }}<mk-ellipsis/></p>
<p class="empty" v-else-if="stats.length == 0"><fa icon="exclamation-circle"/>{{ $t('empty') }}</p>
<!-- トランジションを有効にするとなぜかメモリリークする -->
<transition-group v-else tag="div" name="chart">
<div v-for="stat in stats" :key="stat.tag">
<div class="tag">
<router-link :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</router-link>
<p>{{ '%i18n:@count%'.replace('{}', stat.usersCount) }}</p>
<p>{{ this.$t('count').replace('{}', stat.usersCount) }}</p>
</div>
<x-chart class="chart" :src="stat.chart"/>
</div>
@@ -17,9 +17,11 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import XChart from './trends.chart.vue';
export default Vue.extend({
i18n: i18n('common/views/components/trends.vue'),
components: {
XChart
},

10
src/client/app/common/views/components/twitter-setting.vue
View File

@@ -1,11 +1,11 @@
<template>
<div class="mk-twitter-setting">
<p>%i18n:@description%<a :href="`${docsUrl}/link-to-twitter`" target="_blank">%i18n:@detail%</a></p>
<p class="account" v-if="$store.state.i.twitter" :title="`Twitter ID: ${$store.state.i.twitter.userId}`">%i18n:@connected-to%: <a :href="`https://twitter.com/${$store.state.i.twitter.screenName}`" target="_blank">@{{ $store.state.i.twitter.screenName }}</a></p>
<p>{{ $t('description') }}<a :href="`${docsUrl}/link-to-twitter`" target="_blank">{{ $t('detail') }}</a></p>
<p class="account" v-if="$store.state.i.twitter" :title="`Twitter ID: ${$store.state.i.twitter.userId}`">{{ $t('connected-to') }}: <a :href="`https://twitter.com/${$store.state.i.twitter.screenName}`" target="_blank">@{{ $store.state.i.twitter.screenName }}</a></p>
<p>
<a :href="`${apiUrl}/connect/twitter`" target="_blank" @click.prevent="connect">{{ $store.state.i.twitter ? '%i18n:@reconnect%' : '%i18n:@connect%' }}</a>
<a :href="`${apiUrl}/connect/twitter`" target="_blank" @click.prevent="connect">{{ $store.state.i.twitter ? this.$t('reconnect') : this.$t('connect') }}</a>
<span v-if="$store.state.i.twitter"> or </span>
<a :href="`${apiUrl}/disconnect/twitter`" target="_blank" v-if="$store.state.i.twitter" @click.prevent="disconnect">%i18n:@disconnect%</a>
<a :href="`${apiUrl}/disconnect/twitter`" target="_blank" v-if="$store.state.i.twitter" @click.prevent="disconnect">{{ $t('disconnect') }}</a>
</p>
<p class="id" v-if="$store.state.i.twitter">Twitter ID: {{ $store.state.i.twitter.userId }}</p>
</div>
@@ -13,9 +13,11 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import { apiUrl, docsUrl } from '../../../config';
export default Vue.extend({
i18n: i18n('common/views/components/twitter-setting.vue'),
data() {
return {
form: null,

1
src/client/app/common/views/components/ui/textarea.vue
View File

@@ -19,7 +19,6 @@
<script lang="ts">
import Vue from 'vue';
const getPasswordStrength = require('syuilo-password-strength');
export default Vue.extend({
props: {

4
src/client/app/common/views/components/uploader.vue
View File

@@ -5,7 +5,7 @@
<div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div>
<p class="name"><fa icon="spinner .pulse"/>{{ ctx.name }}</p>
<p class="status">
<span class="initing" v-if="ctx.progress == undefined">%i18n:@waiting%<mk-ellipsis/></span>
<span class="initing" v-if="ctx.progress == undefined">{{ $t('waiting') }}<mk-ellipsis/></span>
<span class="kb" v-if="ctx.progress != undefined">{{ String(Math.floor(ctx.progress.value / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progress.max / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>
<span class="percentage" v-if="ctx.progress != undefined">{{ Math.floor((ctx.progress.value / ctx.progress.max) * 100) }}</span>
</p>
@@ -19,10 +19,12 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import { apiUrl } from '../../../config';
import getMD5 from '../../scripts/get-md5';
export default Vue.extend({
i18n: i18n('common/views/components/uploader.vue'),
data() {
return {
uploads: []

1
src/client/app/common/views/components/url.vue
View File

@@ -13,6 +13,7 @@
<script lang="ts">
import Vue from 'vue';
import { toUnicode as decodePunycode } from 'punycode';
export default Vue.extend({
props: ['url', 'target'],
data() {

18
src/client/app/common/views/components/visibility-chooser.vue
View File

@@ -5,34 +5,34 @@
<div @click="choose('public')" :class="{ active: v == 'public' }">
<div><fa icon="globe"/></div>
<div>
<span>%i18n:@public%</span>
<span>{{ $t('public') }}</span>
</div>
</div>
<div @click="choose('home')" :class="{ active: v == 'home' }">
<div><fa icon="home"/></div>
<div>
<span>%i18n:@home%</span>
<span>%i18n:@home-desc%</span>
<span>{{ $t('home') }}</span>
<span>{{ $t('home-desc') }}</span>
</div>
</div>
<div @click="choose('followers')" :class="{ active: v == 'followers' }">
<div><fa icon="unlock"/></div>
<div>
<span>%i18n:@followers%</span>
<span>%i18n:@followers-desc%</span>
<span>{{ $t('followers') }}</span>
<span>{{ $t('followers-desc') }}</span>
</div>
</div>
<div @click="choose('specified')" :class="{ active: v == 'specified' }">
<div><fa icon="envelope"/></div>
<div>
<span>%i18n:@specified%</span>
<span>%i18n:@specified-desc%</span>
<span>{{ $t('specified') }}</span>
<span>{{ $t('specified-desc') }}</span>
</div>
</div>
<div @click="choose('private')" :class="{ active: v == 'private' }">
<div><fa icon="lock"/></div>
<div>
<span>%i18n:@private%</span>
<span>{{ $t('private') }}</span>
</div>
</div>
</div>
@@ -41,9 +41,11 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import * as anime from 'animejs';
export default Vue.extend({
i18n: i18n('common/views/components/visibility-chooser.vue'),
props: ['source', 'compact'],
data() {
return {