mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-23 09:54:06 +02:00
Code Releases Activity

wip

Browse Source
This commit is contained in:
syuilo
2026-04-26 12:11:15 +09:00
parent e703705d60
commit 4adca586ed
2 changed files with 62 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
packages/frontend/src/components/MkProgressBar.vue Normal file
View File

@@ -0,0 +1,60 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div
:class="[$style.root, { [$style.waiting]: waiting }]" :style="{
'--p': progress != null ? `${progress * 100}%` : '0%',
}"
>
</div>
</template>
<script lang="ts" setup>
import { } from 'vue';
const props = withDefaults(defineProps<{
progress?: number;
waiting?: boolean;
}>(), {
progress: 0,
waiting: false,
});
</script>
<style lang="scss" module>
.root {
--c1: color(from var(--MI_THEME-accent) srgb r g b / 0.25);
--c2: color(from var(--MI_THEME-accent) srgb r g b / 0.125);
position: relative;
height: 5px;
border-radius: 999px;
overflow: clip;
background: linear-gradient(-45deg, var(--c2) 25%, var(--c1) 25%,var(--c1) 50%, var(--c2) 50%, var(--c2) 75%, var(--c1) 75%, var(--c1));
background-size: 25px 25px;
animation: stripe .8s infinite linear;
&::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: var(--p);
height: 100%;
background: var(--MI_THEME-accent);
transition: all 0.5s cubic-bezier(0,.5,.5,1);
}
&.waiting {
// TODO
}
}
@keyframes stripe {
0% { background-position-x: 0; }
100% { background-position-x: -25px; }
}
</style>

15
packages/frontend/src/pages/room.vue
View File

@@ -15,9 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:leaveToClass="$style.transition_fade_leaveTo" :leaveToClass="$style.transition_fade_leaveTo"
> >
<div v-if="!controller.isReady.value" :class="$style.loading"> <div v-if="!controller.isReady.value" :class="$style.loading">
<div :class="$style.progressBar"> <MkProgressBar :class="$style.progressBar" :progress="controller.initializeProgress.value" :waiting="controller.initializeProgress.value === 1"/>
<div :class="$style.progressBarValue" :style="{ width: `${controller.initializeProgress.value * 100}%` }"></div>
</div>
</div> </div>
</Transition> </Transition>
@@ -173,6 +171,7 @@ import { cm, getHex, getRgb } from '@/world/utility.js';
import { deepClone } from '@/utility/clone.js'; import { deepClone } from '@/utility/clone.js';
import { GRAPHICS_QUALITY_HIGH, GRAPHICS_QUALITY_LOW, GRAPHICS_QUALITY_MEDIUM } from '@/world/room/engine.js'; import { GRAPHICS_QUALITY_HIGH, GRAPHICS_QUALITY_LOW, GRAPHICS_QUALITY_MEDIUM } from '@/world/room/engine.js';
import { deviceKind } from '@/utility/device-kind.js'; import { deviceKind } from '@/utility/device-kind.js';
import MkProgressBar from '@/components/MkProgressBar.vue';
const canvas = useTemplateRef('canvas'); const canvas = useTemplateRef('canvas');
@@ -461,16 +460,6 @@ definePage(() => ({
.progressBar { .progressBar {
width: 75%; width: 75%;
height: 4px;
border-radius: 999px;
overflow: clip;
background-color: var(--MI_THEME-accentedBg);
}
.progressBarValue {
height: 100%;
background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
transition: all 0.5s cubic-bezier(0,.5,.5,1);
} }
.transition_fade_enterActive, .transition_fade_enterActive,