graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-23 16:33:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(client): use css modules

Browse source
This commit is contained in:
syuilo 2023-01-15 08:30:29 +09:00
parent c1b6378951
commit d23aa94b41
18 changed files with 182 additions and 186 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

114
packages/frontend/src/components/MkContainer.vue
View file

@ -1,26 +1,32 @@
<template> <template>
<div class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !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"> <header v-if="showHeader" ref="header" :class="$style.header">
<div class="title"><slot name="header"></slot></div> <div :class="$style.title">
<div class="sub"> <span :class="$style.titleIcon"><slot name="icon"></slot></span>
<slot name="func"></slot> <slot name="header"></slot>
<button v-if="foldable" class="_button" @click="() => showBody = !showBody"> </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-if="showBody"><i class="ti ti-chevron-up"></i></template>
<template v-else><i class="ti ti-chevron-down"></i></template> <template v-else><i class="ti ti-chevron-down"></i></template>
</button> </button>
</div> </div>
</header> </header>
<Transition <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" @enter="enter"
@after-enter="afterEnter" @after-enter="afterEnter"
@leave="leave" @leave="leave"
@after-leave="afterLeave" @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> <slot></slot>
<button v-if="omitted" class="fade _button" @click="() => { ignoreOmit = true; omitted = false; }"> <button v-if="omitted" :class="$style.fade" class="_button" @click="() => { ignoreOmit = true; omitted = false; }">
<span>{{ $ts.showMore }}</span> <span :class="$style.fadeLabel">{{ $ts.showMore }}</span>
</button> </button>
</div> </div>
</Transition> </Transition>
@ -129,19 +135,18 @@ export default defineComponent({
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.container-toggle-enter-active, .container-toggle-leave-active { .transition_toggle_enterActive,
.transition_toggle_leaveActive {
overflow-y: clip; overflow-y: clip;
transition: opacity 0.5s, height 0.5s !important; transition: opacity 0.5s, height 0.5s !important;
} }
.container-toggle-enter-from { .transition_toggle_enterFrom,
opacity: 0; .transition_toggle_leaveTo {
}
.container-toggle-leave-to {
opacity: 0; opacity: 0;
} }
.ukygtjoj { .root {
position: relative; position: relative;
overflow: clip; overflow: clip;
contain: content; contain: content;
@ -160,7 +165,17 @@ export default defineComponent({
} }
} }
> header { &.thin {
> .header {
> .title {
padding: 8px 10px;
font-size: 0.9em;
}
}
}
}
.header {
position: sticky; position: sticky;
top: var(--stickyTop, 0px); top: var(--stickyTop, 0px);
left: 0; left: 0;
@ -169,35 +184,35 @@ export default defineComponent({
border-bottom: solid 0.5px var(--panelHeaderDivider); border-bottom: solid 0.5px var(--panelHeaderDivider);
z-index: 2; z-index: 2;
line-height: 1.4em; line-height: 1.4em;
}
> .title { .title {
margin: 0; margin: 0;
padding: 12px 16px; padding: 12px 16px;
> ::v-deep(i) {
margin-right: 6px;
}
&:empty { &:empty {
display: none; display: none;
} }
} }
> .sub { .titleIcon {
margin-right: 6px;
}
.headerSub {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
top: 0; top: 0;
right: 0; right: 0;
height: 100%; height: 100%;
}
> ::v-deep(button) { .headerButton {
width: 42px; width: 42px;
height: 100%; height: 100%;
} }
}
}
> .content { .content {
--stickyTop: 0px; --stickyTop: 0px;
&.omitted { &.omitted {
@ -215,7 +230,7 @@ export default defineComponent({
height: 64px; height: 64px;
background: linear-gradient(0deg, var(--panel), var(--X15)); background: linear-gradient(0deg, var(--panel), var(--X15));
> span { > .fadeLabel {
display: inline-block; display: inline-block;
background: var(--panel); background: var(--panel);
padding: 6px 10px; padding: 6px 10px;
@ -225,51 +240,18 @@ export default defineComponent({
} }
&:hover { &:hover {
> span { > .fadeLabel {
background: var(--panelHighlight); background: var(--panelHighlight);
} }
} }
} }
} }
}
&.thin {
> header {
> .title {
padding: 8px 10px;
font-size: 0.9em;
}
}
> .content {
}
}
} }
@container (max-width: 380px) { @container (max-width: 380px) {
.ukygtjoj { .title {
> header {
> .title {
padding: 8px 10px; padding: 8px 10px;
font-size: 0.9em; font-size: 0.9em;
} }
}
}
}
._forceContainerFull_ .ukygtjoj {
> header {
> .title {
padding: 12px 16px !important;
}
}
}
._forceContainerFull_.ukygtjoj {
> header {
> .title {
padding: 12px 16px !important;
}
}
} }
</style> </style>

3
packages/frontend/src/pages/gallery/post.vue
View file

@ -38,7 +38,8 @@
</div> </div>
<MkAd :prefer="['horizontal', 'horizontal-big']"/> <MkAd :prefer="['horizontal', 'horizontal-big']"/>
<MkContainer :max-height="300" :foldable="true" class="other"> <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"> <MkPagination v-slot="{items}" :pagination="otherPostsPagination">
<div class="sdrarzaf"> <div class="sdrarzaf">
<MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/> <MkGalleryPostPreview v-for="post in items" :key="post.id" :post="post" class="post"/>

3
packages/frontend/src/pages/page.vue
View file

@ -49,7 +49,8 @@
</div> </div>
<MkAd :prefer="['horizontal', 'horizontal-big']"/> <MkAd :prefer="['horizontal', 'horizontal-big']"/>
<MkContainer :max-height="300" :foldable="true" class="other"> <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"> <MkPagination v-slot="{items}" :pagination="otherPostsPagination">
<MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_margin"/> <MkPagePreview v-for="page in items" :key="page.id" :page="page" class="_margin"/>
</MkPagination> </MkPagination>

7
packages/frontend/src/pages/user/index.activity.vue
View file

@ -1,8 +1,9 @@
<template> <template>
<MkContainer> <MkContainer>
<template #header><i class="ti ti-chart-line" style="margin-right: 0.5em;"></i>{{ $ts.activity }}</template> <template #icon><i class="ti ti-chart-line"></i></template>
<template #func> <template #header>{{ $ts.activity }}</template>
<button class="_button" @click="showMenu"> <template #func="{ buttonStyleClass }">
<button class="_button" :class="buttonStyleClass" @click="showMenu">
<i class="ti ti-dots"></i> <i class="ti ti-dots"></i>
</button> </button>
</template> </template>

31
packages/frontend/src/pages/user/index.photos.vue
View file

@ -1,19 +1,20 @@
<template> <template>
<MkContainer :max-height="300" :foldable="true"> <MkContainer :max-height="300" :foldable="true">
<template #header><i class="ti ti-photo" style="margin-right: 0.5em;"></i>{{ $ts.images }}</template> <template #icon><i class="ti ti-photo"></i></template>
<div class="ujigsodd"> <template #header>{{ $ts.images }}</template>
<div :class="$style.root">
<MkLoading v-if="fetching"/> <MkLoading v-if="fetching"/>
<div v-if="!fetching && images.length > 0" class="stream"> <div v-if="!fetching && images.length > 0" :class="$style.stream">
<MkA <MkA
v-for="image in images" v-for="image in images"
:key="image.note.id + image.file.id" :key="image.note.id + image.file.id"
class="img" :class="$style.img"
:to="notePage(image.note)" :to="notePage(image.note)"
> >
<ImgWithBlurhash :hash="image.file.blurhash" :src="thumbnail(image.file)" :title="image.file.name"/> <ImgWithBlurhash :hash="image.file.blurhash" :src="thumbnail(image.file)" :title="image.file.name"/>
</MkA> </MkA>
</div> </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> </div>
</MkContainer> </MkContainer>
</template> </template>
@ -73,30 +74,26 @@ onMounted(() => {
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" module>
.ujigsodd { .root {
padding: 8px; padding: 8px;
}
> .stream { .stream {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
grid-gap: 6px; grid-gap: 6px;
}
> .img { .img {
height: 128px; height: 128px;
border-radius: 6px; border-radius: 6px;
overflow: clip; overflow: clip;
} }
}
> .empty { .empty {
margin: 0; margin: 0;
padding: 16px; padding: 16px;
text-align: center; text-align: center;
> i {
margin-right: 4px;
}
}
} }
</style> </style>

5
packages/frontend/src/widgets/WidgetActivity.vue
View file

@ -1,7 +1,8 @@
<template> <template>
<MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" class="mkw-activity"> <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 #icon><i class="ti ti-chart-line"></i></template>
<template #func><button class="_button" @click="toggleView()"><i class="ti ti-selector"></i></button></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> <div>
<MkLoading v-if="fetching"/> <MkLoading v-if="fetching"/>

3
packages/frontend/src/widgets/WidgetAiscript.vue
View file

@ -1,6 +1,7 @@
<template> <template>
<MkContainer :show-header="widgetProps.showHeader" class="mkw-aiscript"> <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"> <div class="uylguesu _monospace">
<textarea v-model="widgetProps.script" placeholder="(1 + 1)"></textarea> <textarea v-model="widgetProps.script" placeholder="(1 + 1)"></textarea>

3
packages/frontend/src/widgets/WidgetClicker.vue
View file

@ -1,6 +1,7 @@
<template> <template>
<MkContainer :show-header="widgetProps.showHeader" class="mkw-clicker"> <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/> <MkClickerGame/>
</MkContainer> </MkContainer>
</template> </template>

3
packages/frontend/src/widgets/WidgetFederation.vue
View file

@ -1,6 +1,7 @@
<template> <template>
<MkContainer :show-header="widgetProps.showHeader" :foldable="foldable" :scrollable="scrollable" class="mkw-federation"> <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"> <div class="wbrkwalb">
<MkLoading v-if="fetching"/> <MkLoading v-if="fetching"/>

3
packages/frontend/src/widgets/WidgetMemo.vue
View file

@ -1,6 +1,7 @@
<template> <template>
<MkContainer :show-header="widgetProps.showHeader" class="mkw-memo"> <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"> <div class="otgbylcu">
<textarea v-model="text" :placeholder="i18n.ts.placeholder" @input="onChange"></textarea> <textarea v-model="text" :placeholder="i18n.ts.placeholder" @input="onChange"></textarea>

5
packages/frontend/src/widgets/WidgetNotifications.vue
View file

@ -1,7 +1,8 @@
<template> <template>
<MkContainer :style="`height: ${widgetProps.height}px;`" :show-header="widgetProps.showHeader" :scrollable="true" class="mkw-notifications"> <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 #icon><i class="ti ti-bell"></i></template>
<template #func><button class="_button" @click="configureNotification()"><i class="ti ti-settings"></i></button></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> <div>
<XNotifications :include-types="widgetProps.includingTypes"/> <XNotifications :include-types="widgetProps.includingTypes"/>

3
packages/frontend/src/widgets/WidgetPhotos.vue
View file

@ -1,6 +1,7 @@
<template> <template>
<MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent" :class="$style.root" :data-transparent="widgetProps.transparent ? true : null" class="mkw-photos"> <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=""> <div class="">
<MkLoading v-if="fetching"/> <MkLoading v-if="fetching"/>

9
packages/frontend/src/widgets/WidgetRss.vue
View file

@ -1,16 +1,17 @@
<template> <template>
<MkContainer :show-header="widgetProps.showHeader" class="mkw-rss"> <MkContainer :show-header="widgetProps.showHeader" class="mkw-rss">
<template #header><i class="ti ti-rss"></i>RSS</template> <template #icon><i class="ti ti-rss"></i></template>
<template #func><button class="_button" @click="configure"><i class="ti ti-settings"></i></button></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"> <div class="ekmkgxbj">
<MkLoading v-if="fetching"/> <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"/> <img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
<div>{{ i18n.ts.nothing }}</div> <div>{{ i18n.ts.nothing }}</div>
</div> </div>
<div v-else :class="$style.feed"> <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>
</div> </div>
</MkContainer> </MkContainer>

9
packages/frontend/src/widgets/WidgetRssTicker.vue
View file

@ -1,7 +1,8 @@
<template> <template>
<MkContainer :naked="widgetProps.transparent" :show-header="widgetProps.showHeader" class="mkw-rss-ticker"> <MkContainer :naked="widgetProps.transparent" :show-header="widgetProps.showHeader" class="mkw-rss-ticker">
<template #header><i class="ti ti-rss"></i>RSS</template> <template #icon><i class="ti ti-rss"></i></template>
<template #func><button class="_button" @click="configure"><i class="ti ti-settings"></i></button></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 :class="$style.feed">
<div v-if="fetching" :class="$style.loading"> <div v-if="fetching" :class="$style.loading">
@ -10,7 +11,7 @@
<div v-else> <div v-else>
<Transition :name="$style.change" mode="default" appear> <Transition :name="$style.change" mode="default" appear>
<MarqueeText :key="key" :duration="widgetProps.duration" :reverse="widgetProps.reverse"> <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> <a :class="$style.link" :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span :class="$style.divider"></span>
</span> </span>
</MarqueeText> </MarqueeText>
@ -86,7 +87,7 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
const rawItems = ref([]); const rawItems = ref([]);
const items = computed(() => { const items = computed(() => {
const newItems = rawItems.value.slice(0, widgetProps.maxEntries) const newItems = rawItems.value.slice(0, widgetProps.maxEntries);
if (widgetProps.shuffle) { if (widgetProps.shuffle) {
shuffle(newItems); shuffle(newItems);
} }

8
packages/frontend/src/widgets/WidgetTimeline.vue
View file

@ -1,14 +1,16 @@
<template> <template>
<MkContainer :show-header="widgetProps.showHeader" :style="`height: ${widgetProps.height}px;`" :scrollable="true" class="mkw-timeline"> <MkContainer :show-header="widgetProps.showHeader" :style="`height: ${widgetProps.height}px;`" :scrollable="true" class="mkw-timeline">
<template #header> <template #icon>
<button class="_button" @click="choose">
<i v-if="widgetProps.src === 'home'" class="ti ti-home"></i> <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 === 'local'" class="ti ti-planet"></i>
<i v-else-if="widgetProps.src === 'social'" class="ti ti-rocket"></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 === 'global'" class="ti ti-whirl"></i>
<i v-else-if="widgetProps.src === 'list'" class="ti ti-list"></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> <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> </template>
<template #header>
<button class="_button" @click="choose">
<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> <i :class="menuOpened ? 'ti ti-chevron-up' : 'ti ti-chevron-down'" style="margin-left: 8px;"></i>
</button> </button>
</template> </template>

3
packages/frontend/src/widgets/WidgetTrends.vue
View file

@ -1,6 +1,7 @@
<template> <template>
<MkContainer :show-header="widgetProps.showHeader" class="mkw-trends"> <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"> <div class="wbrkwala">
<MkLoading v-if="fetching"/> <MkLoading v-if="fetching"/>

5
packages/frontend/src/widgets/WidgetUserList.vue
View file

@ -1,7 +1,8 @@
<template> <template>
<MkContainer :show-header="widgetProps.showHeader" class="mkw-userList"> <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 #icon><i class="ti ti-users"></i></template>
<template #func><button class="_button" @click="configure()"><i class="ti ti-settings"></i></button></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 :class="$style.root">
<div v-if="widgetProps.listId == null" class="init"> <div v-if="widgetProps.listId == null" class="init">

5
packages/frontend/src/widgets/server-metric/index.vue
View file

@ -1,7 +1,8 @@
<template> <template>
<MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent"> <MkContainer :show-header="widgetProps.showHeader" :naked="widgetProps.transparent">
<template #header><i class="ti ti-server"></i>{{ i18n.ts._widgets.serverMetric }}</template> <template #icon><i class="ti ti-server"></i></template>
<template #func><button class="_button" @click="toggleView()"><i class="ti ti-selector"></i></button></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"> <div v-if="meta" class="mkw-serverMetric">
<XCpuMemory v-if="widgetProps.view === 0" :connection="connection" :meta="meta"/> <XCpuMemory v-if="widgetProps.view === 0" :connection="connection" :meta="meta"/>