monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

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)); -webkit-backdrop-filter: var(--blur, blur(15px));
backdrop-filter: var(--blur, blur(15px)); backdrop-filter: var(--blur, blur(15px));
border-bottom: solid 0.5px var(--divider); border-bottom: solid 0.5px var(--divider);
contain: strict;
height: var(--height);
&.thin { &.thin {
--height: 45px; --height: 45px;

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

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

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

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

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

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

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

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