Skip to content
Snippets Groups Projects
Commit 689411c1 authored by syuilo's avatar syuilo
Browse files

refactor(client): refacotr MkMediaCaption

parent 20fd9db7
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
locales/ja-JP.yml
+ 1
− 0
View file @ 689411c1
......@@ -908,6 +908,7 @@ sendPushNotificationReadMessage: "通知やメッセージが既読になった
sendPushNotificationReadMessageCaption: "「{emptyPushNotificationMessage}」という通知が一瞬表示されるようになります。端末の電池消費量が増加する可能性があります。"
windowMaximize: "最大化"
windowRestore: "元に戻す"
caption: "キャプション"
_sensitiveMediaDetection:
description: "機械学習を使って自動でセンシティブなメディアを検出し、モデレーションに役立てることができます。サーバーの負荷が少し増えます。"
......
packages/client/src/components/MkDrive.file.vue
+ 6
− 12
View file @ 689411c1
......@@ -71,7 +71,7 @@ function getMenu() {
action: toggleSensitive,
}, {
text: i18n.ts.describeFile,
icon: 'ti ti-forms',
icon: 'ti ti-text-caption',
action: describe,
}, null, {
text: i18n.ts.copyUrl,
......@@ -134,20 +134,14 @@ function rename() {
}
function describe() {
os.popup(defineAsyncComponent(() => import('@/components/MkMediaCaption.vue')), {
title: i18n.ts.describeFile,
input: {
placeholder: i18n.ts.inputNewDescription,
default: props.file.comment != null ? props.file.comment : '',
},
image: props.file,
os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), {
default: props.file.comment != null ? props.file.comment : '',
file: props.file,
}, {
done: result => {
if (!result || result.canceled) return;
let comment = result.result;
done: caption => {
os.api('drive/files/update', {
fileId: props.file.id,
comment: comment.length === 0 ? null : comment,
comment: caption.length === 0 ? null : caption,
});
},
}, 'closed');
......
packages/client/src/components/MkMediaCaption.vue → packages/client/src/components/MkFileCaptionEditWindow.vue
+ 175
− 0
View file @ 689411c1
<template>
<MkModal ref="modal" @click="done(true)" @closed="$emit('closed')">
<div class="container">
<div class="fullwidth top-caption">
<div class="mk-dialog">
<header>
<Mfm v-if="title" class="title" :text="title"/>
<span class="text-count" :class="{ over: remainingLength < 0 }">{{ remainingLength }}</span>
</header>
<textarea v-model="inputValue" autofocus :placeholder="input.placeholder" @keydown="onInputKeydown"></textarea>
<div v-if="(showOkButton || showCancelButton)" class="buttons">
<MkButton inline primary :disabled="remainingLength < 0" @click="ok">{{ $ts.ok }}</MkButton>
<MkButton inline @click="cancel" >{{ $ts.cancel }}</MkButton>
</div>
</div>
</div>
<div class="hdrwpsaf fullwidth">
<header>{{ image.name }}</header>
<img :src="image.url" :alt="image.comment" :title="image.comment" @click="$refs.modal.close()"/>
<footer>
<span>{{ image.type }}</span>
<span>{{ bytes(image.size) }}</span>
<span v-if="image.properties && image.properties.width">{{ number(image.properties.width) }}px × {{ number(image.properties.height) }}px</span>
</footer>
</div>
</div>
</MkModal>
<XModalWindow
ref="dialog"
:width="400"
:height="450"
:with-ok-button="true"
:ok-button-disabled="false"
@ok="ok()"
@close="dialog.close()"
@closed="emit('closed')"
>
<template #header>{{ i18n.ts.describeFile }}</template>
<div>
<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain" style="height: 100px;"/>
<MkTextarea v-model="caption" autofocus :placeholder="i18n.ts.inputNewDescription">
<template #label>{{ i18n.ts.caption }}</template>
</MkTextarea>
</div>
</XModalWindow>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { length } from 'stringz';
import MkModal from '@/components/MkModal.vue';
import MkButton from '@/components/MkButton.vue';
import bytes from '@/filters/bytes';
import number from '@/filters/number';
<script lang="ts" setup>
import { } from 'vue';
import * as Misskey from 'misskey-js';
import XModalWindow from '@/components/MkModalWindow.vue';
import MkTextarea from '@/components/form/textarea.vue';
import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
import { i18n } from '@/i18n';
export default defineComponent({
components: {
MkModal,
MkButton,
},
const props = defineProps<{
file: Misskey.entities.DriveFile;
default: string;
}>();
props: {
image: {
type: Object,
required: true,
},
title: {
type: String,
required: false
},
input: {
required: true
},
showOkButton: {
type: Boolean,
default: true
},
showCancelButton: {
type: Boolean,
default: true
},
cancelableByBgClick: {
type: Boolean,
default: true
},
},
const emit = defineEmits<{
(ev: 'done', v: string): void;
(ev: 'closed'): void;
}>();
emits: ['done', 'closed'],
const dialog = $ref<InstanceType<typeof XModalWindow>>();
data() {
return {
inputValue: this.input.default ? this.input.default : null
};
},
let caption = $ref(props.default);
computed: {
remainingLength(): number {
if (typeof this.inputValue !== "string") return 512;
return 512 - length(this.inputValue);
}
},
mounted() {
document.addEventListener('keydown', this.onKeydown);
},
beforeUnmount() {
document.removeEventListener('keydown', this.onKeydown);
},
methods: {
bytes,
number,
done(canceled, result?) {
this.$emit('done', { canceled, result });
this.$refs.modal.close();
},
async ok() {
if (!this.showOkButton) return;
const result = this.inputValue;
this.done(false, result);
},
cancel() {
this.done(true);
},
onBgClick() {
if (this.cancelableByBgClick) {
this.cancel();
}
},
onKeydown(evt) {
if (evt.which === 27) { // ESC
this.cancel();
}
},
onInputKeydown(evt) {
if (evt.which === 13) { // Enter
if (evt.ctrlKey) {
evt.preventDefault();
evt.stopPropagation();
this.ok();
}
}
}
}
});
async function ok() {
emit('done', caption);
dialog.close();
}
</script>
<style lang="scss" scoped>
......
packages/client/src/components/MkPostFormAttaches.vue
+ 6
− 11
View file @ 689411c1
......@@ -70,17 +70,12 @@ async function rename(file) {
}
async function describe(file) {
os.popup(defineAsyncComponent(() => import('@/components/MkMediaCaption.vue')), {
title: i18n.ts.describeFile,
input: {
placeholder: i18n.ts.inputNewDescription,
default: file.comment !== null ? file.comment : '',
},
image: file,
os.popup(defineAsyncComponent(() => import('@/components/MkFileCaptionEditWindow.vue')), {
default: file.comment !== null ? file.comment : '',
file: file,
}, {
done: result => {
if (!result || result.canceled) return;
let comment = result.result.length === 0 ? null : result.result;
done: caption => {
let comment = caption.length === 0 ? null : caption;
os.api('drive/files/update', {
fileId: file.id,
comment: comment,
......@@ -103,7 +98,7 @@ function showFileMenu(file, ev: MouseEvent) {
action: () => { toggleSensitive(file); },
}, {
text: i18n.ts.describeFile,
icon: 'ti ti-forms',
icon: 'ti ti-text-caption',
action: () => { describe(file); },
}, {
text: i18n.ts.attachCancel,
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment