diff options
Diffstat (limited to 'packages/client/src/components/MkFileCaptionEditWindow.vue')
| -rw-r--r-- | packages/client/src/components/MkFileCaptionEditWindow.vue | 175 |
1 files changed, 0 insertions, 175 deletions
diff --git a/packages/client/src/components/MkFileCaptionEditWindow.vue b/packages/client/src/components/MkFileCaptionEditWindow.vue deleted file mode 100644 index 73875251f0..0000000000 --- a/packages/client/src/components/MkFileCaptionEditWindow.vue +++ /dev/null @@ -1,175 +0,0 @@ -<template> -<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" 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'; - -const props = defineProps<{ - file: Misskey.entities.DriveFile; - default: string; -}>(); - -const emit = defineEmits<{ - (ev: 'done', v: string): void; - (ev: 'closed'): void; -}>(); - -const dialog = $ref<InstanceType<typeof XModalWindow>>(); - -let caption = $ref(props.default); - -async function ok() { - emit('done', caption); - dialog.close(); -} -</script> - -<style lang="scss" scoped> -.container { - display: flex; - width: 100%; - height: 100%; - flex-direction: row; - overflow: scroll; - position: fixed; - left: 0; - top: 0; -} -@media (max-width: 850px) { - .container { - flex-direction: column; - } - .top-caption { - padding-bottom: 8px; - } -} -.fullwidth { - width: 100%; - margin: auto; -} -.mk-dialog { - position: relative; - padding: 32px; - min-width: 320px; - max-width: 480px; - box-sizing: border-box; - text-align: center; - background: var(--panel); - border-radius: var(--radius); - margin: auto; - - > header { - margin: 0 0 8px 0; - position: relative; - - > .title { - font-weight: bold; - font-size: 20px; - } - - > .text-count { - opacity: 0.7; - position: absolute; - right: 0; - } - } - - > .buttons { - margin-top: 16px; - - > * { - margin: 0 8px; - } - } - - > textarea { - display: block; - box-sizing: border-box; - padding: 0 24px; - margin: 0; - width: 100%; - font-size: 16px; - border: none; - border-radius: 0; - background: transparent; - color: var(--fg); - font-family: inherit; - max-width: 100%; - min-width: 100%; - min-height: 90px; - - &:focus-visible { - outline: none; - } - - &:disabled { - opacity: 0.5; - } - } -} -.hdrwpsaf { - display: flex; - flex-direction: column; - height: 100%; - - > header, - > footer { - align-self: center; - display: inline-block; - padding: 6px 9px; - font-size: 90%; - background: rgba(0, 0, 0, 0.5); - border-radius: 6px; - color: #fff; - } - - > header { - margin-bottom: 8px; - opacity: 0.9; - } - - > img { - display: block; - flex: 1; - min-height: 0; - object-fit: contain; - width: 100%; - cursor: zoom-out; - image-orientation: from-image; - } - - > footer { - margin-top: 8px; - opacity: 0.8; - - > span + span { - margin-left: 0.5em; - padding-left: 0.5em; - border-left: solid 1px rgba(255, 255, 255, 0.5); - } - } -} -</style> |