SWREI/switched
0
0
Fork 0
Code

chore(client): rendering performance tweak a bit

Browse Source
This commit is contained in:
syuilo 2022-07-05 22:35:57 +09:00
parent 60710805d5
commit f66235f066
5 changed files with 34 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/components/global/page-header.vue
View File

@ -178,6 +178,8 @@ onUnmounted(() => {
-webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px));
border-bottom: solid 0.5px var(--divider);
contain: strict;
height: var(--height);
&.thin {
--height: 45px;

1
packages/client/src/components/ui/container.vue
View File

@ -144,6 +144,7 @@ export default defineComponent({
.ukygtjoj {
position: relative;
overflow: hidden; overflow: clip;
contain: content;
&.naked {
background: transparent !important;

1
packages/client/src/components/widgets.vue
View File

@ -113,6 +113,7 @@ export default defineComponent({
}
> .widget, .customize-container {
contain: content;
margin: var(--margin) 0;
&:first-of-type {

24
packages/client/src/ui/_common_/sidebar-for-mobile.vue
View File

@ -1,32 +1,32 @@
<template>
<div class="kmwsukvl">
<div>
<div class="body">
<button v-click-anime class="item _button account" @click="openAccountMenu">
<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
</button>
<MkA v-click-anime class="item index" active-class="active" to="/" exact>
<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
<i class="icon fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
</MkA>
<template v-for="item in menu">
<div v-if="item === '-'" class="divider"></div>
<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
<i class="icon fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
<span v-if="menuDef[item].indicated" class="indicator"><i class="icon fas fa-circle"></i></span>
</component>
</template>
<div class="divider"></div>
<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin">
<i class="fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
<i class="icon fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
</MkA>
<button v-click-anime class="item _button" @click="more">
<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
<span v-if="otherMenuItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
<i class="icon fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon fas fa-circle"></i></span>
</button>
<MkA v-click-anime class="item" active-class="active" to="/settings">
<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
<i class="icon fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
</MkA>
<button class="item _button post" data-cy-open-post-form @click="post">
<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
<i class="icon fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
</button>
</div>
</div>
@ -81,7 +81,7 @@ export default defineComponent({
$avatar-size: 32px;
$avatar-margin: 8px;
> div {
> .body {
> .divider {
margin: 16px 16px;
@ -102,12 +102,12 @@ export default defineComponent({
box-sizing: border-box;
color: var(--navFg);
> i {
> .icon {
position: relative;
width: 32px;
}
> i,
> .icon,
> .avatar {
margin-right: $avatar-margin;
}

35
packages/client/src/ui/_common_/sidebar.vue
View File

@ -1,32 +1,32 @@
<template>
<div class="mvcprjjd" :class="{ iconOnly }">
<div>
<div class="body">
<button v-click-anime class="item _button account" @click="openAccountMenu">
<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
</button>
<MkA v-click-anime class="item index" active-class="active" to="/" exact>
<i class="fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
<i class="icon fas fa-home fa-fw"></i><span class="text">{{ $ts.timeline }}</span>
</MkA>
<template v-for="item in menu">
<div v-if="item === '-'" class="divider"></div>
<component :is="menuDef[item].to ? 'MkA' : 'button'" v-else-if="menuDef[item] && (menuDef[item].show !== false)" v-click-anime class="item _button" :class="[item, { active: menuDef[item].active }]" active-class="active" :to="menuDef[item].to" v-on="menuDef[item].action ? { click: menuDef[item].action } : {}">
<i class="fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
<span v-if="menuDef[item].indicated" class="indicator"><i class="fas fa-circle"></i></span>
<i class="icon fa-fw" :class="menuDef[item].icon"></i><span class="text">{{ $ts[menuDef[item].title] }}</span>
<span v-if="menuDef[item].indicated" class="indicator"><i class="icon fas fa-circle"></i></span>
</component>
</template>
<div class="divider"></div>
<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime class="item" active-class="active" to="/admin">
<i class="fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
<i class="icon fas fa-door-open fa-fw"></i><span class="text">{{ $ts.controlPanel }}</span>
</MkA>
<button v-click-anime class="item _button" @click="more">
<i class="fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
<span v-if="otherMenuItemIndicated" class="indicator"><i class="fas fa-circle"></i></span>
<i class="icon fa fa-ellipsis-h fa-fw"></i><span class="text">{{ $ts.more }}</span>
<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon fas fa-circle"></i></span>
</button>
<MkA v-click-anime class="item" active-class="active" to="/settings">
<i class="fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
<i class="icon fas fa-cog fa-fw"></i><span class="text">{{ $ts.settings }}</span>
</MkA>
<button class="item _button post" data-cy-open-post-form @click="os.post">
<i class="fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
<i class="icon fas fa-pencil-alt fa-fw"></i><span class="text">{{ $ts.note }}</span>
</button>
</div>
</div>
@ -88,7 +88,7 @@ function more(ev: MouseEvent) {
width: $nav-width;
box-sizing: border-box;
> div {
> .body {
position: fixed;
top: 0;
left: 0;
@ -100,6 +100,7 @@ function more(ev: MouseEvent) {
overflow: auto;
overflow-x: clip;
background: var(--navBg);
contain: strict;
> .divider {
margin: 16px 16px;
@ -120,12 +121,12 @@ function more(ev: MouseEvent) {
box-sizing: border-box;
color: var(--navFg);
> i {
> .icon {
position: relative;
width: 32px;
}
> i,
> .icon,
> .avatar {
margin-right: $avatar-margin;
}
@ -230,7 +231,7 @@ function more(ev: MouseEvent) {
flex: 0 0 $nav-icon-only-width;
width: $nav-icon-only-width;
> div {
> .body {
width: $nav-icon-only-width;
> .divider {
@ -246,13 +247,13 @@ function more(ev: MouseEvent) {
font-size: $ui-font-size * 1.1;
line-height: initial;
> i,
> .icon,
> .avatar {
display: block;
margin: 0 auto;
}
> i {
> .icon {
opacity: 0.7;
}
@ -261,7 +262,7 @@ function more(ev: MouseEvent) {
}
&:hover, &.active {
> i, > .text {
> .icon, > .text {
opacity: 1;
}
}
@ -284,7 +285,7 @@ function more(ev: MouseEvent) {
&.post {
height: $nav-icon-only-width;
> i {
> .icon {
opacity: 1;
}
}