diff --git a/packages/frontend/src/components/MkImageViewer.vue b/packages/frontend/src/components/MkImageViewer.vue deleted file mode 100644 index e3b2ebe651..0000000000 --- a/packages/frontend/src/components/MkImageViewer.vue +++ /dev/null @@ -1,78 +0,0 @@ -<template> -<MkModal ref="modal" :zPriority="'middle'" @click="modal.close()" @closed="emit('closed')"> - <div class="xubzgfga"> - <header>{{ image.name }}</header> - <img :src="image.url" :alt="image.comment" :title="image.comment" @click="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> -</MkModal> -</template> - -<script lang="ts" setup> -import { } from 'vue'; -import * as misskey from 'misskey-js'; -import bytes from '@/filters/bytes'; -import number from '@/filters/number'; -import MkModal from '@/components/MkModal.vue'; - -const props = withDefaults(defineProps<{ - image: misskey.entities.DriveFile; -}>(), { -}); - -const emit = defineEmits<{ - (ev: 'closed'): void; -}>(); - -const modal = $shallowRef<InstanceType<typeof MkModal>>(); -</script> - -<style lang="scss" scoped> -.xubzgfga { - margin: auto; - 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> diff --git a/packages/frontend/src/components/form/suspense.vue b/packages/frontend/src/components/form/suspense.vue index 9b39858ca1..b3d8c22b27 100644 --- a/packages/frontend/src/components/form/suspense.vue +++ b/packages/frontend/src/components/form/suspense.vue @@ -1,18 +1,16 @@ <template> -<Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in"> - <div v-if="pending"> - <MkLoading/> +<div v-if="pending"> + <MkLoading/> +</div> +<div v-else-if="resolved"> + <slot :result="result"></slot> +</div> +<div v-else> + <div :class="$style.error"> + <div><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</div> + <MkButton inline style="margin-top: 16px;" @click="retry"><i class="ti ti-reload"></i> {{ i18n.ts.retry }}</MkButton> </div> - <div v-else-if="resolved"> - <slot :result="result"></slot> - </div> - <div v-else> - <div class="wszdbhzo"> - <div><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</div> - <MkButton inline class="retry" @click="retry"><i class="ti ti-reload"></i> {{ i18n.ts.retry }}</MkButton> - </div> - </div> -</Transition> +</div> </template> <script lang="ts" setup> @@ -60,22 +58,9 @@ const retry = () => { }; </script> -<style lang="scss" scoped> -.fade-enter-active, -.fade-leave-active { - transition: opacity 0.125s ease; -} -.fade-enter-from, -.fade-leave-to { - opacity: 0; -} - -.wszdbhzo { +<style lang="scss" module> +.error { padding: 16px; text-align: center; - - > .retry { - margin-top: 16px; - } } </style>