This commit is contained in:
ThatOneCalculator 2022-11-06 23:49:08 -08:00
parent 4372f6b942
commit bf92109964
2 changed files with 24 additions and 8 deletions

View file

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

View file

@ -24,19 +24,19 @@
<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('/');">
<div class="button-wrapper"> <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')">
<div class="button-wrapper"> <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 widget _button" @click="mainRouter.push('/my/messaging')"> <button class="button widget _button" @click="mainRouter.push('/my/messaging')">
<div class="button-wrapper"> <div class="button-wrapper" :class="buttonAnimIndex === 2 ? 'on' : ''">
<i class="ph-chats-teardrop-bold ph-lg"></i> <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>
</button> </button>
<button class="button widget _button" @click="widgetsShowing = true"> <button class="button widget _button" @click="widgetsShowing = true">
@ -107,6 +107,22 @@ window.addEventListener('resize', () => {
isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD; isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
}); });
const props = defineProps<{
buttonAnimIndex: number;
}>();
watch($$(mainRouter.currentRoute.value.name), () => {
let routerState = mainRouter.currentRoute.value.name;
const bottomButtons = ['index', 'notifications', 'messaging'];
bottomButtons.forEach(i => {
if (routerState.includes(i)) {
props.buttonAnimIndex = bottomButtons.findIndex(e => e.includes(i))
}
});
}
);
let pageMetadata = $ref<null | ComputedRef<PageMetadata>>(); let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
const widgetsEl = $ref<HTMLElement>(); const widgetsEl = $ref<HTMLElement>();
const postButton = $ref<HTMLElement>(); const postButton = $ref<HTMLElement>();
@ -370,9 +386,9 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
transition: background 0.1s; transition: background 0.1s;
} }
> .button-wrapper:active { > .button-wrapper.on {
background-color: var(--accentedBg); background-color: var(--accentedBg);
width: 60%; width: 100%;
border-radius: 10px; border-radius: 10px;
transform: translateY(-0.5em); transform: translateY(-0.5em);
transition: all 0.2s; transition: all 0.2s;