summaryrefslogtreecommitdiff
path: root/packages/client/src/components/MkFileCaptionEditWindow.vue
diff options
context:
space:
mode:
Diffstat (limited to 'packages/client/src/components/MkFileCaptionEditWindow.vue')
-rw-r--r--packages/client/src/components/MkFileCaptionEditWindow.vue175
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>