refactor
This commit is contained in:
parent
11d22c7b73
commit
3a924f3dc6
2 changed files with 13 additions and 106 deletions
|
@ -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>
|
|
|
@ -1,18 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in">
|
<div v-if="pending">
|
||||||
<div v-if="pending">
|
<MkLoading/>
|
||||||
<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>
|
||||||
<div v-else-if="resolved">
|
</div>
|
||||||
<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>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
@ -60,22 +58,9 @@ const retry = () => {
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" module>
|
||||||
.fade-enter-active,
|
.error {
|
||||||
.fade-leave-active {
|
|
||||||
transition: opacity 0.125s ease;
|
|
||||||
}
|
|
||||||
.fade-enter-from,
|
|
||||||
.fade-leave-to {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wszdbhzo {
|
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
> .retry {
|
|
||||||
margin-top: 16px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue