natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Hopefully fix performance of topbar nav (#9631) 

Co-authored-by: Freeplay <Freeplay@duck.com>
Reviewed-on: https://codeberg.org/calckey/calckey/pulls/9631
Co-authored-by: Free <freeplay@duck.com>
Co-committed-by: Free <freeplay@duck.com>
This commit is contained in:
Free 2023-02-13 18:57:33 +00:00 committed by Kainoa Kanter
parent 48b53428d0
commit 4e84d45a20
1 changed files with 19 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/client/src/components/global/MkPageHeader.vue
View File

@ -144,6 +144,7 @@ onMounted(() => {
calcBg(); calcBg();
globalEvents.on('themeChanged', calcBg); globalEvents.on('themeChanged', calcBg);
watch(() => [props.tab, props.tabs], () => { watch(() => [props.tab, props.tabs], () => {
nextTick(() => { nextTick(() => {
const tabEl = tabRefs[props.tab]; const tabEl = tabRefs[props.tab];
@ -153,10 +154,14 @@ onMounted(() => {
setTimeout(() => { setTimeout(() => {
const parentRect = tabsEl.getBoundingClientRect(); const parentRect = tabsEl.getBoundingClientRect();
const rect = tabEl.getBoundingClientRect(); const rect = tabEl.getBoundingClientRect();
const tabSizeX = tabEl.scrollWidth;
const left = (rect.left - parentRect.left + tabsEl?.scrollLeft); const left = (rect.left - parentRect.left + tabsEl?.scrollLeft);
tabHighlightEl.style.width = rect.width + 'px'; tabEl.style = "--width: " + tabSizeX + "px";
tabHighlightEl.style.left = left + 'px'; tabHighlightEl.style.width = tabSizeX + 'px';
tabsEl?.scrollTo({left: left - 60, behavior: "smooth"}); tabHighlightEl.style.transform = 'translateX(' + left + 'px)';
window.requestAnimationFrame(() => {
tabsEl?.scrollTo({left: left - 60, behavior: "smooth"});
})
}, 200); }, 200);
} }
}); });
@ -189,7 +194,6 @@ 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); height: var(--height);
&.thin { &.thin {
@ -348,6 +352,7 @@ onUnmounted(() => {
font-size: 1em; font-size: 1em;
overflow-x: auto; overflow-x: auto;
white-space: nowrap; white-space: nowrap;
contain: strict;
> .tab { > .tab {
display: inline-flex; display: inline-flex;
@ -357,7 +362,9 @@ onUnmounted(() => {
height: 100%; height: 100%;
font-weight: normal; font-weight: normal;
opacity: 0.7; opacity: 0.7;
transition: color .2s, opacity .2s; width: 38px;
overflow: hidden;
transition: color .2s, opacity .2s, width .2s;
&:hover { &:hover {
opacity: 1; opacity: 1;
@ -367,29 +374,28 @@ onUnmounted(() => {
opacity: 1; opacity: 1;
color: var(--accent); color: var(--accent);
font-weight: 600; font-weight: 600;
width: var(--width);
}
&:not(.active) > .title {
opacity: 0;
} }
> .icon + .title { > .icon + .title {
margin-left: 8px; margin-left: 8px;
} }
> .title { > .title {
transition: font-size .2s, opacity .2s .15s; transition: font-size .2s, opacity .2s;
}
&:not(.active) > .title {
font-size: 0;
opacity: 0;
margin-inline: 0;
transition: font-size .2s, opacity .1s;
} }
} }
> .highlight { > .highlight {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0;
height: 3px; height: 3px;
background: var(--accent); background: var(--accent);
border-radius: 999px; border-radius: 999px;
transition: width .2s, left .2s; transition: width .2s, transform .2s;
transition-timing-function: cubic-bezier(0,0,0,1.2); transition-timing-function: cubic-bezier(0,0,0,1.2);
pointer-events: none; pointer-events: none;
} }