Skip to content
Snippets Groups Projects
Commit 25d1b66c authored by syuilo's avatar syuilo
Browse files

refactor

parent c5f9b1c2
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
packages/frontend/src/ui/_common_/statusbar-federation.vue
+ 39
− 32
View file @ 25d1b66c
<template>
<span v-if="!fetching" class="nmidsaqw">
<span v-if="!fetching" :class="$style.root">
<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">
<span v-for="instance in instances" :key="instance.id" class="item" :class="{ colored }" :style="{ background: colored ? instance.themeColor : null }">
<img class="icon" :src="getInstanceIcon(instance)" alt=""/>
<MkA :to="`/instance-info/${instance.host}`" class="host _monospace">
<span v-for="instance in instances" :key="instance.id" :class="[$style.item, { [$style.colored]: colored }]" :style="{ background: colored ? instance.themeColor : null }">
<img :class="$style.icon" :src="getInstanceIcon(instance)" alt=""/>
<MkA :to="`/instance-info/${instance.host}`" :class="$style.host" class="_monospace">
{{ instance.host }}
</MkA>
<span class="divider"></span>
<span :class="$style.divider"></span>
</span>
</MarqueeText>
</Transition>
......@@ -61,46 +67,47 @@ function getInstanceIcon(instance): string {
}
</script>
<style lang="scss" scoped>
.change-enter-active, .change-leave-active {
<style lang="scss" module>
.transition_change_enterActive,
.transition_change_leaveActive {
position: absolute;
top: 0;
transition: all 1s ease;
}
.change-enter-from {
opacity: 0;
.transition_change_enterFrom {
opacity: 0;
transform: translateY(-100%);
}
.change-leave-to {
opacity: 0;
.transition_change_leaveTo {
opacity: 0;
transform: translateY(100%);
}
.nmidsaqw {
.root {
display: inline-block;
position: relative;
}
::v-deep(.item) {
display: inline-block;
vertical-align: bottom;
margin-right: 5em;
.item {
display: inline-block;
vertical-align: bottom;
margin-right: 5em;
> .icon {
display: inline-block;
height: var(--height);
aspect-ratio: 1;
vertical-align: bottom;
margin-right: 1em;
}
&.colored {
padding-right: 1em;
color: #fff;
}
}
> .host {
vertical-align: bottom;
}
.icon {
display: inline-block;
height: var(--height);
aspect-ratio: 1;
vertical-align: bottom;
margin-right: 1em;
}
&.colored {
padding-right: 1em;
color: #fff;
}
}
.host {
vertical-align: bottom;
}
</style>
packages/frontend/src/ui/_common_/statusbar-rss.vue
+ 32
− 25
View file @ 25d1b66c
<template>
<span v-if="!fetching" class="xbhtxfms">
<span v-if="!fetching" :class="$style.root">
<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">
<span v-for="item in items" class="item">
<a class="link" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span class="divider"></span>
<span v-for="item in items" :class="$style.item">
<a :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span :class="$style.divider"></span>
</span>
</MarqueeText>
</Transition>
......@@ -54,39 +60,40 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
});
</script>
<style lang="scss" scoped>
.change-enter-active, .change-leave-active {
<style lang="scss" module>
.transition_change_enterActive,
.transition_change_leaveActive {
position: absolute;
top: 0;
transition: all 1s ease;
}
.change-enter-from {
opacity: 0;
.transition_change_enterFrom {
opacity: 0;
transform: translateY(-100%);
}
.change-leave-to {
opacity: 0;
.transition_change_leaveTo {
opacity: 0;
transform: translateY(100%);
}
.xbhtxfms {
.root {
display: inline-block;
position: relative;
}
::v-deep(.item) {
display: inline-flex;
align-items: center;
vertical-align: bottom;
margin: 0;
.item {
display: inline-flex;
align-items: center;
vertical-align: bottom;
margin: 0;
}
> .divider {
display: inline-block;
width: 0.5px;
height: var(--height);
margin: 0 3em;
background: currentColor;
opacity: 0.3;
}
}
.divider {
display: inline-block;
width: 0.5px;
height: var(--height);
margin: 0 3em;
background: currentColor;
opacity: 0.3;
}
</style>
packages/frontend/src/ui/_common_/statusbar-user-list.vue
+ 46
− 41
View file @ 25d1b66c
<template>
<span v-if="!fetching" class="osdsvwzy">
<span v-if="!fetching" :class="$style.root">
<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">
<span v-for="note in notes" :key="note.id" class="item">
<img class="avatar" :src="note.user.avatarUrl" decoding="async"/>
<MkA class="text" :to="notePage(note)">
<Mfm class="text" :text="getNoteSummary(note)" :plain="true" :nowrap="true"/>
<span v-for="note in notes" :key="note.id" :class="$style.item">
<img :class="$style.avatar" :src="note.user.avatarUrl" decoding="async"/>
<MkA :class="$style.text" :to="notePage(note)">
<Mfm :text="getNoteSummary(note)" :plain="true" :nowrap="true"/>
</MkA>
<span class="divider"></span>
<span :class="$style.divider"></span>
</span>
</MarqueeText>
</Transition>
......@@ -60,54 +66,53 @@ useInterval(tick, Math.max(5000, props.refreshIntervalSec * 1000), {
});
</script>
<style lang="scss" scoped>
.change-enter-active, .change-leave-active {
<style lang="scss" module>
.transition_change_enterActive,
.transition_change_leaveActive {
position: absolute;
top: 0;
transition: all 1s ease;
}
.change-enter-from {
opacity: 0;
.transition_change_enterFrom {
opacity: 0;
transform: translateY(-100%);
}
.change-leave-to {
opacity: 0;
.transition_change_leaveTo {
opacity: 0;
transform: translateY(100%);
}
.osdsvwzy {
.root {
display: inline-block;
position: relative;
}
::v-deep(.item) {
display: inline-flex;
align-items: center;
vertical-align: bottom;
margin: 0;
.item {
display: inline-flex;
align-items: center;
vertical-align: bottom;
margin: 0;
}
> .avatar {
display: inline-block;
height: var(--height);
aspect-ratio: 1;
vertical-align: bottom;
margin-right: 8px;
}
.avatar {
display: inline-block;
height: var(--height);
aspect-ratio: 1;
vertical-align: bottom;
margin-right: 8px;
}
> .text {
> .text {
display: inline-block;
vertical-align: bottom;
}
}
.text {
display: inline-block;
vertical-align: bottom;
}
> .divider {
display: inline-block;
width: 0.5px;
height: 16px;
margin: 0 3em;
background: currentColor;
opacity: 0;
}
}
.divider {
display: inline-block;
width: 0.5px;
height: 16px;
margin: 0 3em;
background: currentColor;
opacity: 0;
}
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment