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

refactor: ⚗️ try `active-class`

This commit is contained in:
ThatOneCalculator 2022-11-07 12:41:47 -08:00
parent 972a6a10aa
commit 2d58b6307b
2 changed files with 15 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "calckey", "name": "calckey",
"version": "12.119.0-calc.9.18", "version": "12.119.0-calc.9.19",
"codename": "aqua", "codename": "aqua",
"repository": { "repository": {
"type": "git", "type": "git",

51
packages/client/src/ui/universal.vue
View File

@ -24,17 +24,17 @@
<i class="ph-list-bold ph-lg"></i><span v-if="menuIndicated" class="indicator"><i class="ph-circle-fill"></i></span> <i class="ph-list-bold ph-lg"></i><span v-if="menuIndicated" class="indicator"><i class="ph-circle-fill"></i></span>
</div> </div>
</button> </button>
<button class="button home _button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/'); updateButtonState();"> <button class="button home _button" active-class="active" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')">
<div class="button-wrapper" :class="buttonAnimIndex === 0 ? 'on' : ''"> <div class="button-wrapper" :class="buttonAnimIndex === 0 ? 'on' : ''">
<i class="ph-house-bold ph-lg"></i> <i class="ph-house-bold ph-lg"></i>
</div> </div>
</button> </button>
<button class="button notifications _button" @click="mainRouter.push('/my/notifications'); updateButtonState();"> <button class="button notifications _button" active-class="active" @click="mainRouter.push('/my/notifications')">
<div class="button-wrapper" :class="buttonAnimIndex === 1 ? 'on' : ''"> <div class="button-wrapper" :class="buttonAnimIndex === 1 ? 'on' : ''">
<i class="ph-bell-bold ph-lg"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="ph-circle-fill"></i></span> <i class="ph-bell-bold ph-lg"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="ph-circle-fill"></i></span>
</div> </div>
</button> </button>
<button class="button messaging _button" @click="mainRouter.push('/my/messaging'); updateButtonState();"> <button class="button messaging _button" active-class="active" @click="mainRouter.push('/my/messaging')">
<div class="button-wrapper" :class="buttonAnimIndex === 2 ? 'on' : ''"> <div class="button-wrapper" :class="buttonAnimIndex === 2 ? 'on' : ''">
<i class="ph-chats-teardrop-bold ph-lg"></i><span v-if="$i?.hasUnreadMessagingMessage" class="indicator"><i class="ph-circle-fill"></i></span> <i class="ph-chats-teardrop-bold ph-lg"></i><span v-if="$i?.hasUnreadMessagingMessage" class="indicator"><i class="ph-circle-fill"></i></span>
</div> </div>
@ -133,31 +133,7 @@ const menuIndicated = computed(() => {
return false; return false;
}); });
function updateButtonState(): string { mainRouter.on('change', () => (drawerMenuShowing.value = false));
let routerState = window.location.pathname;
if (routerState === '/') {
buttonAnimIndex.value = 0;
return routerState;
}
if (routerState.includes('/my/notifications')) {
buttonAnimIndex.value = 1;
return routerState;
}
if (routerState.includes('/my/messaging')) {
buttonAnimIndex.value = 2;
return routerState;
}
buttonAnimIndex.value = 3;
return routerState;
}
updateButtonState();
mainRouter.on('change', () => {
drawerMenuShowing.value = false;
const newState = updateButtonState();
console.log(newState);
});
document.documentElement.style.overflowY = 'scroll'; document.documentElement.style.overflowY = 'scroll';
@ -182,7 +158,7 @@ onMounted(() => {
function createScrollStopListener(element: Window, callback: TimerHandler, timeout: number): () => void { function createScrollStopListener(element: Window, callback: TimerHandler, timeout: number): () => void {
let handle = 0; let handle = 0;
const onScroll = () => { const onScroll = (): void => {
if (handle) { if (handle) {
clearTimeout(handle); clearTimeout(handle);
} }
@ -396,6 +372,15 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
} }
> .button-wrapper { > .button-wrapper {
&.on {
background-color: var(--accentedBg);
width: 100%;
border-radius: 999px;
transform: translateY(-0.5em);
transition: all 0.3s ease-in-out;
}
> .indicator { > .indicator {
position: absolute; position: absolute;
top: 0; top: 0;
@ -406,14 +391,6 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
} }
} }
> .button-wrapper.on {
background-color: var(--accentedBg);
width: 100%;
border-radius: 999px;
transform: translateY(-0.5em);
transition: all 0.3s ease-in-out;
}
&:not(:last-child) { &:not(:last-child) {
margin-right: 12px; margin-right: 12px;
} }