diff options
Diffstat (limited to 'src/client/components')
| -rw-r--r-- | src/client/components/global/loading.vue | 32 | ||||
| -rw-r--r-- | src/client/components/note-detailed.vue | 32 | ||||
| -rw-r--r-- | src/client/components/note.vue | 32 |
3 files changed, 80 insertions, 16 deletions
diff --git a/src/client/components/global/loading.vue b/src/client/components/global/loading.vue index 9b810f0a16..7bde53c12e 100644 --- a/src/client/components/global/loading.vue +++ b/src/client/components/global/loading.vue @@ -1,5 +1,5 @@ <template> -<div class="yxspomdl" :class="{ inline, colored }"> +<div class="yxspomdl" :class="{ inline, colored, mini }"> <div class="ring"></div> </div> </template> @@ -18,7 +18,12 @@ export default defineComponent({ type: Boolean, required: false, default: true - } + }, + mini: { + type: Boolean, + required: false, + default: false + }, } }); </script> @@ -38,6 +43,8 @@ export default defineComponent({ text-align: center; cursor: wait; + --size: 48px; + &.colored { color: var(--accent); } @@ -45,19 +52,12 @@ export default defineComponent({ &.inline { display: inline; padding: 0; + --size: 32px; + } - > .ring:after { - width: 32px; - height: 32px; - } - - > .ring { - &:before, - &:after { - width: 32px; - height: 32px; - } - } + &.mini { + padding: 16px; + --size: 32px; } > .ring { @@ -70,8 +70,8 @@ export default defineComponent({ content: " "; display: block; box-sizing: border-box; - width: 48px; - height: 48px; + width: var(--size); + height: var(--size); border-radius: 50%; border: solid 4px; } diff --git a/src/client/components/note-detailed.vue b/src/client/components/note-detailed.vue index d601052927..a2460950cd 100644 --- a/src/client/components/note-detailed.vue +++ b/src/client/components/note-detailed.vue @@ -67,6 +67,13 @@ <MkA class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA> <Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/> <a class="rp" v-if="appearNote.renote != null">RN:</a> + <div class="translation" v-if="translating || translation"> + <MkLoading v-if="translating" mini/> + <div class="translated" v-else> + <b>{{ $t('translatedFrom', { x: translation.sourceLang }) }}:</b> + {{ translation.text }} + </div> + </div> </div> <div class="files" v-if="appearNote.files.length > 0"> <XMediaList :media-list="appearNote.files"/> @@ -178,6 +185,8 @@ export default defineComponent({ showContent: false, isDeleted: false, muted: false, + translation: null, + translating: false, }; }, @@ -619,6 +628,11 @@ export default defineComponent({ text: this.$ts.share, action: this.share }, + this.$instance.translatorAvailable ? { + icon: 'fas fa-language', + text: this.$ts.translate, + action: this.translate + } : undefined, null, statePromise.then(state => state.isFavorited ? { icon: 'fas fa-star', @@ -852,6 +866,17 @@ export default defineComponent({ }); }, + async translate() { + if (this.translation != null) return; + this.translating = true; + const res = await os.api('notes/translate', { + noteId: this.appearNote.id, + targetLang: localStorage.getItem('lang') || navigator.language, + }); + this.translating = false; + this.translation = res; + }, + focus() { this.$el.focus(); }, @@ -1050,6 +1075,13 @@ export default defineComponent({ font-style: oblique; color: var(--renote); } + + > .translation { + border: solid 0.5px var(--divider); + border-radius: var(--radius); + padding: 12px; + margin-top: 8px; + } } > .url-preview { diff --git a/src/client/components/note.vue b/src/client/components/note.vue index 873b96030a..38b529dd91 100644 --- a/src/client/components/note.vue +++ b/src/client/components/note.vue @@ -51,6 +51,13 @@ <MkA class="reply" v-if="appearNote.replyId" :to="`/notes/${appearNote.replyId}`"><i class="fas fa-reply"></i></MkA> <Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/> <a class="rp" v-if="appearNote.renote != null">RN:</a> + <div class="translation" v-if="translating || translation"> + <MkLoading v-if="translating" mini/> + <div class="translated" v-else> + <b>{{ $t('translatedFrom', { x: translation.sourceLang }) }}:</b> + {{ translation.text }} + </div> + </div> </div> <div class="files" v-if="appearNote.files.length > 0"> <XMediaList :media-list="appearNote.files"/> @@ -164,6 +171,8 @@ export default defineComponent({ collapsed: false, isDeleted: false, muted: false, + translation: null, + translating: false, }; }, @@ -594,6 +603,11 @@ export default defineComponent({ text: this.$ts.share, action: this.share }, + this.$instance.translatorAvailable ? { + icon: 'fas fa-language', + text: this.$ts.translate, + action: this.translate + } : undefined, null, statePromise.then(state => state.isFavorited ? { icon: 'fas fa-star', @@ -827,6 +841,17 @@ export default defineComponent({ }); }, + async translate() { + if (this.translation != null) return; + this.translating = true; + const res = await os.api('notes/translate', { + noteId: this.appearNote.id, + targetLang: localStorage.getItem('lang') || navigator.language, + }); + this.translating = false; + this.translation = res; + }, + focus() { this.$el.focus(); }, @@ -1053,6 +1078,13 @@ export default defineComponent({ font-style: oblique; color: var(--renote); } + + > .translation { + border: solid 0.5px var(--divider); + border-radius: var(--radius); + padding: 12px; + margin-top: 8px; + } } > .url-preview { |