Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

refactor

Browse source
This commit is contained in:
syuilo 2023-05-29 17:22:09 +09:00
parent c5f9b1c224
commit 25d1b66ca4
3 changed files with 118 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
packages/frontend/src/ui/_common_/statusbar-federation.vue
View file

@ -1,14 +1,20 @@
<template> <template>
<span v-if="!fetching" class="nmidsaqw"> <span v-if="!fetching" :class="$style.root">
<template v-if="display === 'marquee'"> <template v-if="display === 'marquee'">
<Transition name="change" mode="default"> <Transition
:enterActiveClass="$style.transition_change_enterActive"
:leaveActiveClass="$style.transition_change_leaveActive"
:enterFromClass="$style.transition_change_enterFrom"
:leaveToClass="$style.transition_change_leaveTo"
mode="default"
>
<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse"> <MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
<span v-for="instance in instances" :key="instance.id" class="item" :class="{ colored }" :style="{ background: colored ? instance.themeColor : null }"> <span v-for="instance in instances" :key="instance.id" :class="[$style.item, { [$style.colored]: colored }]" :style="{ background: colored ? instance.themeColor : null }">
<img class="icon" :src="getInstanceIcon(instance)" alt=""/> <img :class="$style.icon" :src="getInstanceIcon(instance)" alt=""/>
<MkA :to="`/instance-info/${instance.host}`" class="host _monospace"> <MkA :to="`/instance-info/${instance.host}`" :class="$style.host" class="_monospace">
{{ instance.host }} {{ instance.host }}
</MkA> </MkA>
<span class="divider"></span> <span :class="$style.divider"></span>
</span> </span>
</MarqueeText> </MarqueeText>
</Transition> </Transition>
@ -61,46 +67,47 @@ function getInstanceIcon(instance): string {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.change-enter-active, .change-leave-active { .transition_change_enterActive,
.transition_change_leaveActive {
position: absolute; position: absolute;
top: 0; top: 0;
transition: all 1s ease; transition: all 1s ease;
} }
.change-enter-from { .transition_change_enterFrom {
opacity: 0; opacity: 0;
transform: translateY(-100%); transform: translateY(-100%);
} }
.change-leave-to { .transition_change_leaveTo {
opacity: 0; opacity: 0;
transform: translateY(100%); transform: translateY(100%);
} }
.nmidsaqw { .root {
display: inline-block; display: inline-block;
position: relative; position: relative;
}
::v-deep(.item) { .item {
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: bottom;
margin-right: 5em; margin-right: 5em;
> .icon { &.colored {
display: inline-block; padding-right: 1em;
height: var(--height); color: #fff;
aspect-ratio: 1;
vertical-align: bottom;
margin-right: 1em;
}
> .host {
vertical-align: bottom;
}
&.colored {
padding-right: 1em;
color: #fff;
}
} }
} }
.icon {
display: inline-block;
height: var(--height);
aspect-ratio: 1;
vertical-align: bottom;
margin-right: 1em;
}
.host {
vertical-align: bottom;
}
</style> </style>

57
packages/frontend/src/ui/_common_/statusbar-rss.vue
View file

@ -1,10 +1,16 @@
<template> <template>
<span v-if="!fetching" class="xbhtxfms"> <span v-if="!fetching" :class="$style.root">
<template v-if="display === 'marquee'"> <template v-if="display === 'marquee'">
<Transition name="change" mode="default"> <Transition
:enterActiveClass="$style.transition_change_enterActive"
:leaveActiveClass="$style.transition_change_leaveActive"
:enterFromClass="$style.transition_change_enterFrom"
:leaveToClass="$style.transition_change_leaveTo"
mode="default"
>
<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse"> <MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
<span v-for="item in items" class="item"> <span v-for="item in items" :class="$style.item">
<a class="link" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span class="divider"></span> <a :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span :class="$style.divider"></span>
</span> </span>
</MarqueeText> </MarqueeText>
</Transition> </Transition>
@ -54,39 +60,40 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.change-enter-active, .change-leave-active { .transition_change_enterActive,
.transition_change_leaveActive {
position: absolute; position: absolute;
top: 0; top: 0;
transition: all 1s ease; transition: all 1s ease;
} }
.change-enter-from { .transition_change_enterFrom {
opacity: 0; opacity: 0;
transform: translateY(-100%); transform: translateY(-100%);
} }
.change-leave-to { .transition_change_leaveTo {
opacity: 0; opacity: 0;
transform: translateY(100%); transform: translateY(100%);
} }
.xbhtxfms { .root {
display: inline-block; display: inline-block;
position: relative; position: relative;
}
::v-deep(.item) { .item {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
vertical-align: bottom; vertical-align: bottom;
margin: 0; margin: 0;
}
> .divider { .divider {
display: inline-block; display: inline-block;
width: 0.5px; width: 0.5px;
height: var(--height); height: var(--height);
margin: 0 3em; margin: 0 3em;
background: currentColor; background: currentColor;
opacity: 0.3; opacity: 0.3;
}
}
} }
</style> </style>

87
packages/frontend/src/ui/_common_/statusbar-user-list.vue
View file

@ -1,14 +1,20 @@
<template> <template>
<span v-if="!fetching" class="osdsvwzy"> <span v-if="!fetching" :class="$style.root">
<template v-if="display === 'marquee'"> <template v-if="display === 'marquee'">
<Transition name="change" mode="default"> <Transition
:enterActiveClass="$style.transition_change_enterActive"
:leaveActiveClass="$style.transition_change_leaveActive"
:enterFromClass="$style.transition_change_enterFrom"
:leaveToClass="$style.transition_change_leaveTo"
mode="default"
>
<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse"> <MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
<span v-for="note in notes" :key="note.id" class="item"> <span v-for="note in notes" :key="note.id" :class="$style.item">
<img class="avatar" :src="note.user.avatarUrl" decoding="async"/> <img :class="$style.avatar" :src="note.user.avatarUrl" decoding="async"/>
<MkA class="text" :to="notePage(note)"> <MkA :class="$style.text" :to="notePage(note)">
<Mfm class="text" :text="getNoteSummary(note)" :plain="true" :nowrap="true"/> <Mfm :text="getNoteSummary(note)" :plain="true" :nowrap="true"/>
</MkA> </MkA>
<span class="divider"></span> <span :class="$style.divider"></span>
</span> </span>
</MarqueeText> </MarqueeText>
</Transition> </Transition>
@ -60,54 +66,53 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.change-enter-active, .change-leave-active { .transition_change_enterActive,
.transition_change_leaveActive {
position: absolute; position: absolute;
top: 0; top: 0;
transition: all 1s ease; transition: all 1s ease;
} }
.change-enter-from { .transition_change_enterFrom {
opacity: 0; opacity: 0;
transform: translateY(-100%); transform: translateY(-100%);
} }
.change-leave-to { .transition_change_leaveTo {
opacity: 0; opacity: 0;
transform: translateY(100%); transform: translateY(100%);
} }
.osdsvwzy { .root {
display: inline-block; display: inline-block;
position: relative; position: relative;
}
::v-deep(.item) { .item {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
vertical-align: bottom; vertical-align: bottom;
margin: 0; margin: 0;
}
> .avatar { .avatar {
display: inline-block; display: inline-block;
height: var(--height); height: var(--height);
aspect-ratio: 1; aspect-ratio: 1;
vertical-align: bottom; vertical-align: bottom;
margin-right: 8px; margin-right: 8px;
} }
> .text { .text {
> .text { display: inline-block;
display: inline-block; vertical-align: bottom;
vertical-align: bottom; }
}
}
> .divider { .divider {
display: inline-block; display: inline-block;
width: 0.5px; width: 0.5px;
height: 16px; height: 16px;
margin: 0 3em; margin: 0 3em;
background: currentColor; background: currentColor;
opacity: 0; opacity: 0;
}
}
} }
</style> </style>