mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-10-31 07:11:47 +09:00
Code

refactor

Browse Source
This commit is contained in:
syuilo 2023-05-27 11:44:04 +09:00
parent 11d22c7b73
commit 3a924f3dc6
2 changed files with 13 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
packages/frontend/src/components/MkImageViewer.vue
View File

@ -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>

35
packages/frontend/src/components/form/suspense.vue
View File

@ -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>
<div v-else-if="resolved"> <div v-else-if="resolved">
<slot :result="result"></slot> <slot :result="result"></slot>
</div> </div>
<div v-else> <div v-else>
<div class="wszdbhzo"> <div :class="$style.error">
<div><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</div> <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> <MkButton inline style="margin-top: 16px;" @click="retry"><i class="ti ti-reload"></i> {{ i18n.ts.retry }}</MkButton>
</div> </div>
</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>