From 10634b361505c58c4ec5bf2d7309a6afe75d6273 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 26 May 2023 13:32:42 +0900
Subject: [PATCH] refactor
---
.../frontend/src/ui/_common_/statusbars.vue | 126 +++++++++---------
1 file changed, 63 insertions(+), 63 deletions(-)
diff --git a/packages/frontend/src/ui/_common_/statusbars.vue b/packages/frontend/src/ui/_common_/statusbars.vue
index b1e2c80f10..bb245c7dd8 100644
--- a/packages/frontend/src/ui/_common_/statusbars.vue
+++ b/packages/frontend/src/ui/_common_/statusbars.vue
@@ -1,18 +1,18 @@
<template>
-<div class="dlrsnxqu">
+<div :class="$style.root">
<div
- v-for="x in defaultStore.reactiveState.statusbars.value" :key="x.id" class="item" :class="[{ black: x.black }, {
- verySmall: x.size === 'verySmall',
- small: x.size === 'small',
- medium: x.size === 'medium',
- large: x.size === 'large',
- veryLarge: x.size === 'veryLarge',
+ v-for="x in defaultStore.reactiveState.statusbars.value" :key="x.id" :class="[$style.item, { [$style.black]: x.black,
+ [$style.verySmall]: x.size === 'verySmall',
+ [$style.small]: x.size === 'small',
+ [$style.medium]: x.size === 'medium',
+ [$style.large]: x.size === 'large',
+ [$style.veryLarge]: x.size === 'veryLarge',
}]"
>
- <span class="name">{{ x.name }}</span>
- <XRss v-if="x.type === 'rss'" class="body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :url="x.props.url" :shuffle="x.props.shuffle"/>
- <XFederation v-else-if="x.type === 'federation'" class="body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :colored="x.props.colored"/>
- <XUserList v-else-if="x.type === 'userList'" class="body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :userListId="x.props.userListId"/>
+ <span :class="$style.name">{{ x.name }}</span>
+ <XRss v-if="x.type === 'rss'" :class="$style.body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :url="x.props.url" :shuffle="x.props.shuffle"/>
+ <XFederation v-else-if="x.type === 'federation'" :class="$style.body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :colored="x.props.colored"/>
+ <XUserList v-else-if="x.type === 'userList'" :class="$style.body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :userListId="x.props.userListId"/>
</div>
</div>
</template>
@@ -25,67 +25,67 @@ const XFederation = defineAsyncComponent(() => import('./statusbar-federation.vu
const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue'));
</script>
-<style lang="scss" scoped>
-.dlrsnxqu {
+<style lang="scss" module>
+.root {
font-size: 15px;
background: var(--panel);
+}
- > .item {
- --height: 24px;
- --nameMargin: 10px;
- font-size: 0.85em;
+.item {
+ --height: 24px;
+ --nameMargin: 10px;
+ font-size: 0.85em;
- &.verySmall {
- --nameMargin: 7px;
- --height: 16px;
- font-size: 0.75em;
- }
+ &.verySmall {
+ --nameMargin: 7px;
+ --height: 16px;
+ font-size: 0.75em;
+ }
- &.small {
- --nameMargin: 8px;
- --height: 20px;
- font-size: 0.8em;
- }
+ &.small {
+ --nameMargin: 8px;
+ --height: 20px;
+ font-size: 0.8em;
+ }
- &.large {
- --nameMargin: 12px;
- --height: 26px;
- font-size: 0.875em;
- }
+ &.large {
+ --nameMargin: 12px;
+ --height: 26px;
+ font-size: 0.875em;
+ }
- &.veryLarge {
- --nameMargin: 14px;
- --height: 30px;
- font-size: 0.9em;
- }
+ &.veryLarge {
+ --nameMargin: 14px;
+ --height: 30px;
+ font-size: 0.9em;
+ }
- display: flex;
- vertical-align: bottom;
- width: 100%;
- line-height: var(--height);
- height: var(--height);
- overflow: clip;
- contain: strict;
+ display: flex;
+ vertical-align: bottom;
+ width: 100%;
+ line-height: var(--height);
+ height: var(--height);
+ overflow: clip;
+ contain: strict;
- > .name {
- padding: 0 var(--nameMargin);
- font-weight: bold;
- color: var(--accent);
-
- &:empty {
- display: none;
- }
- }
-
- > .body {
- min-width: 0;
- flex: 1;
- }
-
- &.black {
- background: #000;
- color: #fff;
- }
+ &.black {
+ background: #000;
+ color: #fff;
}
}
+
+.name {
+ padding: 0 var(--nameMargin);
+ font-weight: bold;
+ color: var(--accent);
+
+ &:empty {
+ display: none;
+ }
+}
+
+.body {
+ min-width: 0;
+ flex: 1;
+}
</style>