From d23aa94b4150f980b43bbf26776ff45dc366ecdc Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sun, 15 Jan 2023 08:30:29 +0900
Subject: [PATCH] refactor(client): use css modules
---
.../frontend/src/components/MkContainer.vue | 200 ++++++++----------
packages/frontend/src/pages/gallery/post.vue | 3 +-
packages/frontend/src/pages/page.vue | 3 +-
.../src/pages/user/index.activity.vue | 7 +-
.../frontend/src/pages/user/index.photos.vue | 49 ++---
.../frontend/src/widgets/WidgetActivity.vue | 5 +-
.../frontend/src/widgets/WidgetAiscript.vue | 3 +-
.../frontend/src/widgets/WidgetClicker.vue | 3 +-
.../frontend/src/widgets/WidgetFederation.vue | 3 +-
packages/frontend/src/widgets/WidgetMemo.vue | 3 +-
.../src/widgets/WidgetNotifications.vue | 5 +-
.../frontend/src/widgets/WidgetPhotos.vue | 3 +-
packages/frontend/src/widgets/WidgetRss.vue | 19 +-
.../frontend/src/widgets/WidgetRssTicker.vue | 21 +-
.../frontend/src/widgets/WidgetTimeline.vue | 16 +-
.../frontend/src/widgets/WidgetTrends.vue | 3 +-
.../frontend/src/widgets/WidgetUserList.vue | 5 +-
.../src/widgets/server-metric/index.vue | 5 +-
18 files changed, 176 insertions(+), 180 deletions(-)
diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue
index 962bcaf7e9..0f450e0abc 100644
--- a/packages/frontend/src/components/MkContainer.vue
+++ b/packages/frontend/src/components/MkContainer.vue
@@ -1,26 +1,32 @@
<template>
-<div class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }">
- <header v-if="showHeader" ref="header">
- <div class="title"><slot name="header"></slot></div>
- <div class="sub">
- <slot name="func"></slot>
- <button v-if="foldable" class="_button" @click="() => showBody = !showBody">
+<div class="_panel" :class="[$style.root, { [$style.naked]: naked, [$style.thin]: thin, [$style.hideHeader]: !showHeader, [$style.scrollable]: scrollable, [$style.closed]: !showBody }]">
+ <header v-if="showHeader" ref="header" :class="$style.header">
+ <div :class="$style.title">
+ <span :class="$style.titleIcon"><slot name="icon"></slot></span>
+ <slot name="header"></slot>
+ </div>
+ <div :class="$style.headerSub">
+ <slot name="func" :button-style-class="$style.headerButton"></slot>
+ <button v-if="foldable" :class="$style.headerButton" class="_button" @click="() => showBody = !showBody">
<template v-if="showBody"><i class="ti ti-chevron-up"></i></template>
<template v-else><i class="ti ti-chevron-down"></i></template>
</button>
</div>
</header>
<Transition
- :name="$store.state.animation ? 'container-toggle' : ''"
+ :enter-active-class="$store.state.animation ? $style.transition_toggle_enterActive : ''"
+ :leave-active-class="$store.state.animation ? $style.transition_toggle_leaveActive : ''"
+ :enter-from-class="$store.state.animation ? $style.transition_toggle_enterFrom : ''"
+ :leave-to-class="$store.state.animation ? $style.transition_toggle_leaveTo : ''"
@enter="enter"
@after-enter="afterEnter"
@leave="leave"
@after-leave="afterLeave"
>
- <div v-show="showBody" ref="content" class="content" :class="{ omitted }">
+ <div v-show="showBody" ref="content" :class="[$style.content, { omitted }]">
<slot></slot>
- <button v-if="omitted" class="fade _button" @click="() => { ignoreOmit = true; omitted = false; }">
- <span>{{ $ts.showMore }}</span>
+ <button v-if="omitted" :class="$style.fade" class="_button" @click="() => { ignoreOmit = true; omitted = false; }">
+ <span :class="$style.fadeLabel">{{ $ts.showMore }}</span>
</button>
</div>
</Transition>
@@ -129,19 +135,18 @@ export default defineComponent({
});
</script>
-<style lang="scss" scoped>
-.container-toggle-enter-active, .container-toggle-leave-active {
+<style lang="scss" module>
+.transition_toggle_enterActive,
+.transition_toggle_leaveActive {
overflow-y: clip;
transition: opacity 0.5s, height 0.5s !important;
}
-.container-toggle-enter-from {
- opacity: 0;
-}
-.container-toggle-leave-to {
+.transition_toggle_enterFrom,
+.transition_toggle_leaveTo {
opacity: 0;
}
-.ukygtjoj {
+.root {
position: relative;
overflow: clip;
contain: content;
@@ -160,116 +165,93 @@ export default defineComponent({
}
}
- > header {
- position: sticky;
- top: var(--stickyTop, 0px);
- left: 0;
- color: var(--panelHeaderFg);
- background: var(--panelHeaderBg);
- border-bottom: solid 0.5px var(--panelHeaderDivider);
- z-index: 2;
- line-height: 1.4em;
-
- > .title {
- margin: 0;
- padding: 12px 16px;
-
- > ::v-deep(i) {
- margin-right: 6px;
- }
-
- &:empty {
- display: none;
+ &.thin {
+ > .header {
+ > .title {
+ padding: 8px 10px;
+ font-size: 0.9em;
}
}
+ }
+}
- > .sub {
- position: absolute;
- z-index: 2;
- top: 0;
- right: 0;
- height: 100%;
+.header {
+ position: sticky;
+ top: var(--stickyTop, 0px);
+ left: 0;
+ color: var(--panelHeaderFg);
+ background: var(--panelHeaderBg);
+ border-bottom: solid 0.5px var(--panelHeaderDivider);
+ z-index: 2;
+ line-height: 1.4em;
+}
- > ::v-deep(button) {
- width: 42px;
- height: 100%;
- }
- }
- }
+.title {
+ margin: 0;
+ padding: 12px 16px;
- > .content {
- --stickyTop: 0px;
+ &:empty {
+ display: none;
+ }
+}
- &.omitted {
- position: relative;
- max-height: var(--maxHeight);
- overflow: hidden;
+.titleIcon {
+ margin-right: 6px;
+}
- > .fade {
- display: block;
- position: absolute;
- z-index: 10;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 64px;
- background: linear-gradient(0deg, var(--panel), var(--X15));
+.headerSub {
+ position: absolute;
+ z-index: 2;
+ top: 0;
+ right: 0;
+ height: 100%;
+}
- > span {
- display: inline-block;
- background: var(--panel);
- padding: 6px 10px;
- font-size: 0.8em;
- border-radius: 999px;
- box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
- }
+.headerButton {
+ width: 42px;
+ height: 100%;
+}
- &:hover {
- > span {
- background: var(--panelHighlight);
- }
- }
- }
- }
- }
+.content {
+ --stickyTop: 0px;
- &.thin {
- > header {
- > .title {
- padding: 8px 10px;
- font-size: 0.9em;
- }
- }
+ &.omitted {
+ position: relative;
+ max-height: var(--maxHeight);
+ overflow: hidden;
- > .content {
- }
- }
-}
+ > .fade {
+ display: block;
+ position: absolute;
+ z-index: 10;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 64px;
+ background: linear-gradient(0deg, var(--panel), var(--X15));
-@container (max-width: 380px) {
- .ukygtjoj {
- > header {
- > .title {
- padding: 8px 10px;
- font-size: 0.9em;
+ > .fadeLabel {
+ display: inline-block;
+ background: var(--panel);
+ padding: 6px 10px;
+ font-size: 0.8em;
+ border-radius: 999px;
+ box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
}
- }
- }
-}
-._forceContainerFull_ .ukygtjoj {
- > header {
- > .title {
- padding: 12px 16px !important;
+ &:hover {
+ > .fadeLabel {
+ background: var(--panelHighlight);
+ }
+ }
}
}
}
-._forceContainerFull_.ukygtjoj {
- > header {
- > .title {
- padding: 12px 16px !important;
- }
+@container (max-width: 380px) {
+ .title {
+ padding: 8px 10px;
+ font-size: 0.9em;
}
}
</style>
diff --git a/packages/frontend/src/pages/gallery/post.vue b/packages/frontend/src/pages/gallery/post.vue
index 30f63cf3aa..1ea9a72588 100644
--- a/packages/frontend/src/pages/gallery/post.vue
+++ b/packages/frontend/src/pages/gallery/post.vue
@@ -38,7 +38,8 @@
</div>
<MkAd :prefer="['horizontal', 'horizontal-big']"/>
<MkContainer :max-height="300" :foldable="true" class="other">
- <template #header><i class="ti ti-clock"></i> {{ i18n.ts.recentPosts }}</template>
+ <template #icon><i class="ti ti-clock"></i></template>
+ <template #header>{{ i18n.ts.recentPosts }}</template>
<MkPagination v-slot="{items}" :pagination="otherPostsPagination">
<div class="sdrarzaf">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>
diff --git a/packages/frontend/src/pages/page.vue b/packages/frontend/src/pages/page.vue
index 7f0871a5fb..ffb198ea1a 100644
--- a/packages/frontend/src/pages/page.vue
+++ b/packages/frontend/src/pages/page.vue
@@ -49,7 +49,8 @@
</div>
<MkAd :prefer="['horizontal', 'horizontal-big']"/>
<MkContainer :max-height="300" :foldable="true" class="other">
- <template #header><i class="ti ti-clock"></i> {{ i18n.ts.recentPosts }}</template>
+ <template #icon><i class="ti ti-clock"></i></template>
+ <template #header>{{ i18n.ts.recentPosts }}</template>
<MkPagination v-slot="{items}" :pagination="otherPostsPagination">
<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_margin"/>
</MkPagination>
diff --git a/packages/frontend/src/pages/user/index.activity.vue b/packages/frontend/src/pages/user/index.activity.vue
index 0cc1524663..8ff3374446 100644
--- a/packages/frontend/src/pages/user/index.activity.vue
+++ b/packages/frontend/src/pages/user/index.activity.vue
@@ -1,8 +1,9 @@
<template>
<MkContainer>
- <template #header><i class="ti ti-chart-line" style="margin-right: 0.5em;"></i>{{ $ts.activity }}</template>
- <template #func>
- <button class="_button" @click="showMenu">
+ <template #icon><i class="ti ti-chart-line"></i></template>
+ <template #header>{{ $ts.activity }}</template>
+ <template #func="{ buttonStyleClass }">
+ <button class="_button" :class="buttonStyleClass" @click="showMenu">
<i class="ti ti-dots"></i>
</button>
</template>
diff --git a/packages/frontend/src/pages/user/index.photos.vue b/packages/frontend/src/pages/user/index.photos.vue
index fd975b52bb..607082c1e4 100644
--- a/packages/frontend/src/pages/user/index.photos.vue
+++ b/packages/frontend/src/pages/user/index.photos.vue
@@ -1,19 +1,20 @@
<template>
<MkContainer :max-height="300" :foldable="true">
- <template #header><i class="ti ti-photo" style="margin-right: 0.5em;"></i>{{ $ts.images }}</template>
- <div class="ujigsodd">
+ <template #icon><i class="ti ti-photo"></i></template>
+ <template #header>{{ $ts.images }}</template>
+ <div :class="$style.root">
<MkLoading v-if="fetching"/>
- <div v-if="!fetching && images.length > 0" class="stream">
+ <div v-if="!fetching && images.length > 0" :class="$style.stream">
<MkA
v-for="image in images"
:key="image.note.id + image.file.id"
- class="img"
+ :class="$style.img"
:to="notePage(image.note)"
>
<ImgWithBlurhash :hash="image.file.blurhash" :src="thumbnail(image.file)" :title="image.file.name"/>
</MkA>
</div>
- <p v-if="!fetching && images.length == 0" class="empty">{{ $ts.nothing }}</p>
+ <p v-if="!fetching && images.length == 0" :class="$style.empty">{{ $ts.nothing }}</p>
</div>
</MkContainer>
</template>
@@ -73,30 +74,26 @@ onMounted(() => {
});
</script>
-<style lang="scss" scoped>
-.ujigsodd {
+<style lang="scss" module>
+.root {
padding: 8px;
+}
- > .stream {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
- grid-gap: 6px;
-
- > .img {
- height: 128px;
- border-radius: 6px;
- overflow: clip;
- }
- }
+.stream {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+ grid-gap: 6px;
+}
- > .empty {
- margin: 0;
- padding: 16px;
- text-align: center;
+.img {
+ height: 128px;
+ border-radius: 6px;
+ overflow: clip;
+}
- > i {
- margin-right: 4px;
- }
- }
+.empty {
+ margin: 0;
+ padding: 16px;
+ text-align: center;
}
</style>
diff --git a/packages/frontend/src/widgets/WidgetActivity.vue b/packages/frontend/src/widgets/WidgetActivity.vue
index 116da15b40..1834036789 100644
--- a/packages/frontend/src/widgets/WidgetActivity.vue
+++ b/packages/frontend/src/widgets/WidgetActivity.vue
@@ -1,7 +1,8 @@
<template>
<MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" class="mkw-activity">
- <template #header><i class="ti ti-chart-line"></i>{{ i18n.ts._widgets.activity }}</template>
- <template #func><button class="_button" @click="toggleView()"><i class="ti ti-selector"></i></button></template>
+ <template #icon><i class="ti ti-chart-line"></i></template>
+ <template #header>{{ i18n.ts._widgets.activity }}</template>
+ <template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="toggleView()"><i class="ti ti-selector"></i></button></template>
<div>
<MkLoading v-if="fetching"/>
diff --git a/packages/frontend/src/widgets/WidgetAiscript.vue b/packages/frontend/src/widgets/WidgetAiscript.vue
index dcc73db201..2e49a354ef 100644
--- a/packages/frontend/src/widgets/WidgetAiscript.vue
+++ b/packages/frontend/src/widgets/WidgetAiscript.vue
@@ -1,6 +1,7 @@
<template>
<MkContainer :show-header="widgetProps.showHeader" class="mkw-aiscript">
- <template #header><i class="ti ti-terminal-2"></i>{{ i18n.ts._widgets.aiscript }}</template>
+ <template #icon><i class="ti ti-terminal-2"></i></template>
+ <template #header>{{ i18n.ts._widgets.aiscript }}</template>
<div class="uylguesu _monospace">
<textarea v-model="widgetProps.script" placeholder="(1 + 1)"></textarea>
diff --git a/packages/frontend/src/widgets/WidgetClicker.vue b/packages/frontend/src/widgets/WidgetClicker.vue
index 168f05bccd..66c3fbd9d2 100644
--- a/packages/frontend/src/widgets/WidgetClicker.vue
+++ b/packages/frontend/src/widgets/WidgetClicker.vue
@@ -1,6 +1,7 @@
<template>
<MkContainer :show-header="widgetProps.showHeader" class="mkw-clicker">
- <template #header><i class="ti ti-cookie"></i>Clicker</template>
+ <template #icon><i class="ti ti-cookie"></i></template>
+ <template #header>Clicker</template>
<MkClickerGame/>
</MkContainer>
</template>
diff --git a/packages/frontend/src/widgets/WidgetFederation.vue b/packages/frontend/src/widgets/WidgetFederation.vue
index 23f7cd4411..ea82b0c12d 100644
--- a/packages/frontend/src/widgets/WidgetFederation.vue
+++ b/packages/frontend/src/widgets/WidgetFederation.vue
@@ -1,6 +1,7 @@
<template>
<MkContainer :show-header="widgetProps.showHeader" :foldable="foldable" :scrollable="scrollable" class="mkw-federation">
- <template #header><i class="ti ti-whirl"></i>{{ i18n.ts._widgets.federation }}</template>
+ <template #icon><i class="ti ti-whirl"></i></template>
+ <template #header>{{ i18n.ts._widgets.federation }}</template>
<div class="wbrkwalb">
<MkLoading v-if="fetching"/>
diff --git a/packages/frontend/src/widgets/WidgetMemo.vue b/packages/frontend/src/widgets/WidgetMemo.vue
index 1cc0e10bba..d5d96165c7 100644
--- a/packages/frontend/src/widgets/WidgetMemo.vue
+++ b/packages/frontend/src/widgets/WidgetMemo.vue
@@ -1,6 +1,7 @@
<template>
<MkContainer :show-header="widgetProps.showHeader" class="mkw-memo">
- <template #header><i class="ti ti-note"></i>{{ i18n.ts._widgets.memo }}</template>
+ <template #icon><i class="ti ti-note"></i></template>
+ <template #header>{{ i18n.ts._widgets.memo }}</template>
<div class="otgbylcu">
<textarea v-model="text" :placeholder="i18n.ts.placeholder" @input="onChange"></textarea>
diff --git a/packages/frontend/src/widgets/WidgetNotifications.vue b/packages/frontend/src/widgets/WidgetNotifications.vue
index e697209444..89f3114b85 100644
--- a/packages/frontend/src/widgets/WidgetNotifications.vue
+++ b/packages/frontend/src/widgets/WidgetNotifications.vue
@@ -1,7 +1,8 @@
<template>
<MkContainer :style="`height: ${widgetProps.height}px;`" :show-header="widgetProps.showHeader" :scrollable="true" class="mkw-notifications">
- <template #header><i class="ti ti-bell"></i>{{ i18n.ts.notifications }}</template>
- <template #func><button class="_button" @click="configureNotification()"><i class="ti ti-settings"></i></button></template>
+ <template #icon><i class="ti ti-bell"></i></template>
+ <template #header>{{ i18n.ts.notifications }}</template>
+ <template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="configureNotification()"><i class="ti ti-settings"></i></button></template>
<div>
<XNotifications :include-types="widgetProps.includingTypes"/>
diff --git a/packages/frontend/src/widgets/WidgetPhotos.vue b/packages/frontend/src/widgets/WidgetPhotos.vue
index 65d1de1385..4e55bb9927 100644
--- a/packages/frontend/src/widgets/WidgetPhotos.vue
+++ b/packages/frontend/src/widgets/WidgetPhotos.vue
@@ -1,6 +1,7 @@
<template>
<MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" :class="$style.root" :data-transparent="widgetProps.transparent ? true : null" class="mkw-photos">
- <template #header><i class="ti ti-camera"></i>{{ i18n.ts._widgets.photos }}</template>
+ <template #icon><i class="ti ti-camera"></i></template>
+ <template #header>{{ i18n.ts._widgets.photos }}</template>
<div class="">
<MkLoading v-if="fetching"/>
diff --git a/packages/frontend/src/widgets/WidgetRss.vue b/packages/frontend/src/widgets/WidgetRss.vue
index 554413cd1e..a25bd67aae 100644
--- a/packages/frontend/src/widgets/WidgetRss.vue
+++ b/packages/frontend/src/widgets/WidgetRss.vue
@@ -1,16 +1,17 @@
<template>
<MkContainer :show-header="widgetProps.showHeader" class="mkw-rss">
- <template #header><i class="ti ti-rss"></i>RSS</template>
- <template #func><button class="_button" @click="configure"><i class="ti ti-settings"></i></button></template>
+ <template #icon><i class="ti ti-rss"></i></template>
+ <template #header>RSS</template>
+ <template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="configure"><i class="ti ti-settings"></i></button></template>
<div class="ekmkgxbj">
<MkLoading v-if="fetching"/>
- <div class="_fullinfo" v-else-if="(!items || items.length === 0) && widgetProps.showHeader">
+ <div v-else-if="(!items || items.length === 0) && widgetProps.showHeader" class="_fullinfo">
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
<div>{{ i18n.ts.nothing }}</div>
</div>
<div v-else :class="$style.feed">
- <a v-for="item in items" :class="$style.item" :href="item.link" :key="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a>
+ <a v-for="item in items" :key="item.link" :class="$style.item" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a>
</div>
</div>
</MkContainer>
@@ -74,11 +75,11 @@ const tick = () => {
if (document.visibilityState === 'hidden' && rawItems.value.length !== 0) return;
window.fetch(fetchEndpoint.value, {})
- .then(res => res.json())
- .then(feed => {
- rawItems.value = feed.items ?? [];
- fetching.value = false;
- });
+ .then(res => res.json())
+ .then(feed => {
+ rawItems.value = feed.items ?? [];
+ fetching.value = false;
+ });
};
watch(() => fetchEndpoint, tick);
diff --git a/packages/frontend/src/widgets/WidgetRssTicker.vue b/packages/frontend/src/widgets/WidgetRssTicker.vue
index 2620ff4eb0..a7488f4ca2 100644
--- a/packages/frontend/src/widgets/WidgetRssTicker.vue
+++ b/packages/frontend/src/widgets/WidgetRssTicker.vue
@@ -1,7 +1,8 @@
<template>
<MkContainer :naked="widgetProps.transparent" :show-header="widgetProps.showHeader" class="mkw-rss-ticker">
- <template #header><i class="ti ti-rss"></i>RSS</template>
- <template #func><button class="_button" @click="configure"><i class="ti ti-settings"></i></button></template>
+ <template #icon><i class="ti ti-rss"></i></template>
+ <template #header>RSS</template>
+ <template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="configure"><i class="ti ti-settings"></i></button></template>
<div :class="$style.feed">
<div v-if="fetching" :class="$style.loading">
@@ -10,7 +11,7 @@
<div v-else>
<Transition :name="$style.change" mode="default" appear>
<MarqueeText :key="key" :duration="widgetProps.duration" :reverse="widgetProps.reverse">
- <span v-for="item in items" :class="$style.item" :key="item.link">
+ <span v-for="item in items" :key="item.link" :class="$style.item">
<a :class="$style.link" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span :class="$style.divider"></span>
</span>
</MarqueeText>
@@ -86,7 +87,7 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
const rawItems = ref([]);
const items = computed(() => {
- const newItems = rawItems.value.slice(0, widgetProps.maxEntries)
+ const newItems = rawItems.value.slice(0, widgetProps.maxEntries);
if (widgetProps.shuffle) {
shuffle(newItems);
}
@@ -106,12 +107,12 @@ const tick = () => {
if (document.visibilityState === 'hidden' && rawItems.value.length !== 0) return;
window.fetch(fetchEndpoint.value, {})
- .then(res => res.json())
- .then(feed => {
- rawItems.value = feed.items ?? [];
- fetching.value = false;
- key++;
- });
+ .then(res => res.json())
+ .then(feed => {
+ rawItems.value = feed.items ?? [];
+ fetching.value = false;
+ key++;
+ });
};
watch(() => fetchEndpoint, tick);
diff --git a/packages/frontend/src/widgets/WidgetTimeline.vue b/packages/frontend/src/widgets/WidgetTimeline.vue
index 5bd626cd0e..8618dbc2ea 100644
--- a/packages/frontend/src/widgets/WidgetTimeline.vue
+++ b/packages/frontend/src/widgets/WidgetTimeline.vue
@@ -1,14 +1,16 @@
<template>
<MkContainer :show-header="widgetProps.showHeader" :style="`height: ${widgetProps.height}px;`" :scrollable="true" class="mkw-timeline">
+ <template #icon>
+ <i v-if="widgetProps.src === 'home'" class="ti ti-home"></i>
+ <i v-else-if="widgetProps.src === 'local'" class="ti ti-planet"></i>
+ <i v-else-if="widgetProps.src === 'social'" class="ti ti-rocket"></i>
+ <i v-else-if="widgetProps.src === 'global'" class="ti ti-whirl"></i>
+ <i v-else-if="widgetProps.src === 'list'" class="ti ti-list"></i>
+ <i v-else-if="widgetProps.src === 'antenna'" class="ti ti-antenna"></i>
+ </template>
<template #header>
<button class="_button" @click="choose">
- <i v-if="widgetProps.src === 'home'" class="ti ti-home"></i>
- <i v-else-if="widgetProps.src === 'local'" class="ti ti-planet"></i>
- <i v-else-if="widgetProps.src === 'social'" class="ti ti-rocket"></i>
- <i v-else-if="widgetProps.src === 'global'" class="ti ti-whirl"></i>
- <i v-else-if="widgetProps.src === 'list'" class="ti ti-list"></i>
- <i v-else-if="widgetProps.src === 'antenna'" class="ti ti-antenna"></i>
- <span style="margin-left: 8px;">{{ widgetProps.src === 'list' ? widgetProps.list.name : widgetProps.src === 'antenna' ? widgetProps.antenna.name : $t('_timelines.' + widgetProps.src) }}</span>
+ <span>{{ widgetProps.src === 'list' ? widgetProps.list.name : widgetProps.src === 'antenna' ? widgetProps.antenna.name : $t('_timelines.' + widgetProps.src) }}</span>
<i :class="menuOpened ? 'ti ti-chevron-up' : 'ti ti-chevron-down'" style="margin-left: 8px;"></i>
</button>
</template>
diff --git a/packages/frontend/src/widgets/WidgetTrends.vue b/packages/frontend/src/widgets/WidgetTrends.vue
index e500448167..94849fdba4 100644
--- a/packages/frontend/src/widgets/WidgetTrends.vue
+++ b/packages/frontend/src/widgets/WidgetTrends.vue
@@ -1,6 +1,7 @@
<template>
<MkContainer :show-header="widgetProps.showHeader" class="mkw-trends">
- <template #header><i class="ti ti-hash"></i>{{ i18n.ts._widgets.trends }}</template>
+ <template #icon><i class="ti ti-hash"></i></template>
+ <template #header>{{ i18n.ts._widgets.trends }}</template>
<div class="wbrkwala">
<MkLoading v-if="fetching"/>
diff --git a/packages/frontend/src/widgets/WidgetUserList.vue b/packages/frontend/src/widgets/WidgetUserList.vue
index 9ffbf0d8e3..1d9f8751f0 100644
--- a/packages/frontend/src/widgets/WidgetUserList.vue
+++ b/packages/frontend/src/widgets/WidgetUserList.vue
@@ -1,7 +1,8 @@
<template>
<MkContainer :show-header="widgetProps.showHeader" class="mkw-userList">
- <template #header><i class="ti ti-users"></i>{{ list ? list.name : i18n.ts._widgets.userList }}</template>
- <template #func><button class="_button" @click="configure()"><i class="ti ti-settings"></i></button></template>
+ <template #icon><i class="ti ti-users"></i></template>
+ <template #header>{{ list ? list.name : i18n.ts._widgets.userList }}</template>
+ <template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="configure()"><i class="ti ti-settings"></i></button></template>
<div :class="$style.root">
<div v-if="widgetProps.listId == null" class="init">
diff --git a/packages/frontend/src/widgets/server-metric/index.vue b/packages/frontend/src/widgets/server-metric/index.vue
index bc3fca6fc1..b7537e1957 100644
--- a/packages/frontend/src/widgets/server-metric/index.vue
+++ b/packages/frontend/src/widgets/server-metric/index.vue
@@ -1,7 +1,8 @@
<template>
<MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent">
- <template #header><i class="ti ti-server"></i>{{ i18n.ts._widgets.serverMetric }}</template>
- <template #func><button class="_button" @click="toggleView()"><i class="ti ti-selector"></i></button></template>
+ <template #icon><i class="ti ti-server"></i></template>
+ <template #header>{{ i18n.ts._widgets.serverMetric }}</template>
+ <template #func="{ buttonStyleClass }"><button class="_button" :class="buttonStyleClass" @click="toggleView()"><i class="ti ti-selector"></i></button></template>
<div v-if="meta" class="mkw-serverMetric">
<XCpuMemory v-if="widgetProps.view === 0" :connection="connection" :meta="meta"/>
--
GitLab