misty.cafe/mistykey
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Merge tag '2025.5.0' into upstream/2025.5.0

Browse source
This commit is contained in:
dakkar 2025-05-13 11:29:59 +01:00
commit bd90a5aeaa
130 changed files with 1584 additions and 825 deletions
Download patch file Download diff file Expand all files Collapse all files

30
packages/frontend/src/components/global/MkError.vue
View file

@ -4,20 +4,14 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<Transition :name="prefer.s.animation ? '_transition_zoom' : ''" appear>
<div :class="$style.root">
<img :class="$style.img" :src="serverErrorImageUrl" draggable="false"/>
<p :class="$style.text"><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</p>
<MkButton :class="$style.button" @click="() => emit('retry')">{{ i18n.ts.retry }}</MkButton>
</div>
</Transition>
<MkResult type="error">
<MkButton :class="$style.button" rounded @click="() => emit('retry')">{{ i18n.ts.retry }}</MkButton>
</MkResult>
</template>
<script lang="ts" setup>
import MkButton from '@/components/MkButton.vue';
import { i18n } from '@/i18n.js';
import { prefer } from '@/preferences.js';
import { serverErrorImageUrl } from '@/instance.js';
const emit = defineEmits<{
(ev: 'retry'): void;
@ -25,25 +19,7 @@ const emit = defineEmits<{
</script>
<style lang="scss" module>
.root {
padding: 32px;
text-align: center;
align-items: center;
}
.text {
margin: 0 0 8px 0;
}
.button {
margin: 0 auto;
}
.img {
vertical-align: bottom;
width: 128px;
height: 128px;
margin-bottom: 16px;
border-radius: var(--MI-radius-md);
}
</style>

57
packages/frontend/src/components/global/MkResult.stories.impl.ts Normal file
View file

@ -0,0 +1,57 @@
/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
*/
import MkResult from './MkResult.vue';
import type { StoryObj } from '@storybook/vue3';
export const Default = {
render(args) {
return {
components: {
MkResult,
},
setup() {
return {
args,
};
},
computed: {
props() {
return {
...this.args,
};
},
},
template: '<MkResult v-bind="props" />',
};
},
args: {
type: 'empty',
text: 'Lorem Ipsum',
},
parameters: {
layout: 'centered',
},
} satisfies StoryObj<typeof MkResult>;
export const emptyWithNoText = {
...Default,
args: {
...Default.args,
text: undefined,
},
} satisfies StoryObj<typeof MkResult>;
export const notFound = {
...Default,
args: {
...Default.args,
type: 'notFound',
},
} satisfies StoryObj<typeof MkResult>;
export const errorType = {
...Default,
args: {
...Default.args,
type: 'error',
},
} satisfies StoryObj<typeof MkResult>;

53
packages/frontend/src/components/global/MkResult.vue Normal file
View file

@ -0,0 +1,53 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<Transition :name="prefer.s.animation ? '_transition_zoom' : ''" appear>
<div :class="[$style.root, { [$style.warn]: type === 'notFound', [$style.error]: type === 'error' }]" class="_gaps">
<img v-if="type === 'empty' && instance.infoImageUrl" :src="instance.infoImageUrl" draggable="false" :class="$style.img"/>
<MkSystemIcon v-else-if="type === 'empty'" type="info" :class="$style.icon"/>
<img v-if="type === 'notFound' && instance.notFoundImageUrl" :src="instance.notFoundImageUrl" draggable="false" :class="$style.img"/>
<MkSystemIcon v-else-if="type === 'notFound'" type="question" :class="$style.icon"/>
<img v-if="type === 'error' && instance.serverErrorImageUrl" :src="instance.serverErrorImageUrl" draggable="false" :class="$style.img"/>
<MkSystemIcon v-else-if="type === 'error'" type="error" :class="$style.icon"/>
<div style="opacity: 0.7;">{{ props.text ?? (type === 'empty' ? i18n.ts.nothing : type === 'notFound' ? i18n.ts.notFound : type === 'error' ? i18n.ts.somethingHappened : null) }}</div>
<slot></slot>
</div>
</Transition>
</template>
<script lang="ts" setup>
import {} from 'vue';
import { instance } from '@/instance.js';
import { i18n } from '@/i18n.js';
import { prefer } from '@/preferences.js';
const props = defineProps<{
type: 'empty' | 'notFound' | 'error';
text?: string;
}>();
</script>
<style lang="scss" module>
.root {
position: relative;
text-align: center;
padding: 32px;
}
.img {
vertical-align: bottom;
height: 128px;
margin-bottom: 16px;
border-radius: 16px;
}
.icon {
width: 65px;
height: 65px;
margin: 0 auto;
}
</style>

109
packages/frontend/src/components/global/MkSystemIcon.vue Normal file
View file

@ -0,0 +1,109 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<svg v-if="type === 'info'" :class="[$style.icon, $style.info]" viewBox="0 0 160 160">
<path d="M80,108L80,72" style="--l:37;" :class="[$style.line, $style.anim]"/>
<path d="M80,52L80,52" :class="[$style.line, $style.fade]"/>
<circle cx="80" cy="80" r="56" style="--l:350;" :class="[$style.line, $style.anim]"/>
</svg>
<svg v-else-if="type === 'question'" :class="[$style.icon, $style.question]" viewBox="0 0 160 160">
<path d="M80,92L79.991,84C88.799,83.98 96,76.962 96,68C96,59.038 88.953,52 79.991,52C71.03,52 64,59.038 64,68" style="--l:85;" :class="[$style.line, $style.anim]"/>
<path d="M80,108L80,108" :class="[$style.line, $style.fade]"/>
<circle cx="80" cy="80" r="56" style="--l:350;" :class="[$style.line, $style.anim]"/>
</svg>
<svg v-else-if="type === 'success'" :class="[$style.icon, $style.success]" viewBox="0 0 160 160">
<path d="M62,80L74,92L98,68" style="--l:50;" :class="[$style.line, $style.anim]"/>
<circle cx="80" cy="80" r="56" style="--l:350;" :class="[$style.line, $style.anim]"/>
</svg>
<svg v-else-if="type === 'warn'" :class="[$style.icon, $style.warn]" viewBox="0 0 160 160">
<path d="M80,64L80,88" style="--l:27;" :class="[$style.line, $style.anim]"/>
<path d="M80,108L80,108" :class="[$style.line, $style.fade]"/>
<path d="M92,28L144,116C148.709,124.65 144.083,135.82 136,136L24,136C15.917,135.82 11.291,124.65 16,116L68,28C73.498,19.945 86.771,19.945 92,28Z" style="--l:390;" :class="[$style.line, $style.anim]"/>
</svg>
<svg v-else-if="type === 'error'" :class="[$style.icon, $style.error]" viewBox="0 0 160 160">
<path d="M63,63L96,96" style="--l:47;--duration:0.3s;" :class="[$style.line, $style.anim]"/>
<path d="M96,63L63,96" style="--l:47;--duration:0.3s;--delay:0.2s;" :class="[$style.line, $style.anim]"/>
<circle cx="80" cy="80" r="56" style="--l:350;" :class="[$style.line, $style.anim]"/>
</svg>
</template>
<script lang="ts" setup>
import {} from 'vue';
const props = defineProps<{
type: 'info' | 'question' | 'success' | 'warn' | 'error';
}>();
</script>
<style lang="scss" module>
.icon {
stroke-linecap: round;
stroke-linejoin: round;
&.info {
color: var(--MI_THEME-accent);
}
&.question {
color: var(--MI_THEME-fg);
}
&.success {
color: var(--MI_THEME-success);
}
&.warn {
color: var(--MI_THEME-warn);
}
&.error {
color: var(--MI_THEME-error);
}
}
.line {
fill: none;
stroke: currentColor;
stroke-width: 8px;
}
.fill {
fill: currentColor;
}
.anim {
stroke-dasharray: var(--l);
stroke-dashoffset: var(--l);
animation: line-animation var(--duration, 0.5s) cubic-bezier(0,0,.25,1) 1 forwards;
animation-delay: var(--delay, 0s);
}
.fade {
opacity: 0;
animation: fade-in var(--duration, 0.5s) cubic-bezier(0,0,.25,1) 1 forwards;
animation-delay: var(--delay, 0s);
}
@keyframes line-animation {
0% {
stroke-dashoffset: var(--l);
opacity: 0;
}
100% {
stroke-dashoffset: 0;
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>

3
packages/frontend/src/components/global/PageWithHeader.vue
View file

@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkStickyContainer>
<template #header><MkPageHeader v-model:tab="tab" v-bind="pageHeaderProps"/></template>
<div :class="$style.body">
<MkSwiper v-if="swipable && (props.tabs?.length ?? 1) > 1" v-model:tab="tab" :class="$style.swiper" :tabs="props.tabs" :page="props.page">
<MkSwiper v-if="prefer.s.enableHorizontalSwipe && swipable && (props.tabs?.length ?? 1) > 1" v-model:tab="tab" :class="$style.swiper" :tabs="props.tabs" :page="props.page">
<slot></slot>
</MkSwiper>
<slot v-else></slot>
@ -25,6 +25,7 @@ import type { PageHeaderProps } from './MkPageHeader.vue';
import { useScrollPositionKeeper } from '@/use/use-scroll-position-keeper.js';
import MkSwiper from '@/components/MkSwiper.vue';
import { useRouter } from '@/router.js';
import { prefer } from '@/preferences.js';
const props = withDefaults(defineProps<PageHeaderProps & {
reversed?: boolean;