why do buttons hate me

This commit is contained in:
ThatOneCalculator 2022-11-07 12:27:45 -08:00
parent 804dbb5b6a
commit 47e23b5be7
2 changed files with 11 additions and 9 deletions

View file

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

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('/');"> <button class="button home _button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/'); updateButtonState();">
<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')"> <button class="button notifications _button" @click="mainRouter.push('/my/notifications'); updateButtonState();">
<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')"> <button class="button messaging _button" @click="mainRouter.push('/my/messaging'); updateButtonState();">
<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,28 +133,30 @@ const menuIndicated = computed(() => {
return false; return false;
}); });
function updateButtonState(): void { function updateButtonState(): string {
let routerState = window.location.pathname; let routerState = window.location.pathname;
if (routerState === '/') { if (routerState === '/') {
buttonAnimIndex.value = 0; buttonAnimIndex.value = 0;
return; return routerState;
} }
if (routerState.includes('/my/notifications')) { if (routerState.includes('/my/notifications')) {
buttonAnimIndex.value = 1; buttonAnimIndex.value = 1;
return; return routerState;
} }
if (routerState.includes('/my/messaging')) { if (routerState.includes('/my/messaging')) {
buttonAnimIndex.value = 2; buttonAnimIndex.value = 2;
return; return routerState;
} }
buttonAnimIndex.value = 3; buttonAnimIndex.value = 3;
return routerState;
} }
updateButtonState(); updateButtonState();
mainRouter.on('change', () => { mainRouter.on('change', () => {
drawerMenuShowing.value = false; drawerMenuShowing.value = false;
updateButtonState(); const newState = updateButtonState();
console.log(newState);
}); });
document.documentElement.style.overflowY = 'scroll'; document.documentElement.style.overflowY = 'scroll';