161sh/trashposs
1
0
Fork 0
mirror of https://iceshrimp.dev/crimekillz/trashposs synced 2024-11-25 10:19:06 +01:00
Code Issues Projects Releases Packages Wiki Activity

fix: ♿ don't animate indicator dot if animation is off

Browse source 
Closes #10372
This commit is contained in:
ThatOneCalculator 2023-06-27 19:25:01 -07:00
parent ff9cba565f
commit 58d04ab669
7 changed files with 102 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/client/src/components/MkLaunchPad.vue
View file

@ -29,7 +29,12 @@
>
<i class="icon" :class="item.icon"></i>
<div class="text">{{ item.text }}</div>
<span v-if="item.indicate" class="indicator"
<span
v-if="item.indicate"
class="indicator"
:class="{
animateIndicator: $store.state.animation,
}"
><i class="ph-circle ph-fill"></i
></span>
</button>
@ -41,7 +46,12 @@
>
<i class="icon" :class="item.icon"></i>
<div class="text">{{ item.text }}</div>
<span v-if="item.indicate" class="indicator"
<span
v-if="item.indicate"
class="indicator"
:class="{
animateIndicator: $store.state.animation,
}"
><i class="ph-circle ph-fill"></i
></span>
</MkA>
@ -163,13 +173,16 @@ function close() {
left: 32px;
color: var(--indicator);
font-size: 8px;
animation: blink 1s infinite;
@media (max-width: 500px) {
top: 16px;
left: 16px;
}
}
> .animateIndicator {
animation: blink 1s infinite;
}
}
}

31
packages/client/src/components/MkMenu.vue
View file

@ -52,7 +52,12 @@
<span :style="item.textStyle || ''">{{
item.text
}}</span>
<span v-if="item.indicate" class="indicator"
<span
v-if="item.indicate"
class="indicator"
:class="{
animateIndicator: $store.state.animation,
}"
><i class="ph-circle ph-fill"></i
></span>
</MkA>
@ -74,7 +79,12 @@
<span :style="item.textStyle || ''">{{
item.text
}}</span>
<span v-if="item.indicate" class="indicator"
<span
v-if="item.indicate"
class="indicator"
:class="{
animateIndicator: $store.state.animation,
}"
><i class="ph-circle ph-fill"></i
></span>
</a>
@ -92,7 +102,12 @@
class="avatar"
disableLink
/><MkUserName :user="item.user" />
<span v-if="item.indicate" class="indicator"
<span
v-if="item.indicate"
class="indicator"
:class="{
animateIndicator: $store.state.animation,
}"
><i class="ph-circle ph-fill"></i
></span>
</button>
@ -158,7 +173,12 @@
<span :style="item.textStyle || ''">{{
item.text
}}</span>
<span v-if="item.indicate" class="indicator"
<span
v-if="item.indicate"
class="indicator"
:class="{
animateIndicator: $store.state.animation,
}"
><i class="ph-circle ph-fill"></i
></span>
</button>
@ -483,6 +503,9 @@ onBeforeUnmount(() => {
left: 13px;
color: var(--indicator);
font-size: 12px;
}
> .animateIndicator {
animation: blink 1s infinite;
}
}

9
packages/client/src/style.scss
View file

@ -710,6 +710,15 @@ hr {
transform: scale3d(1, 1, 1);
}
}
@keyframes blink {
0% {
opacity: 1;
}
100% {
opacity: 1;
}
}
}
._anime_bounce {

11
packages/client/src/ui/_common_/navbar-for-mobile.vue
View file

@ -62,6 +62,9 @@
<span
v-if="navbarItemDef[item].indicated"
class="indicator"
:class="{
animateIndicator: $store.state.animation,
}"
><i class="icon ph-circle ph-fill"></i
></span>
</component>
@ -82,7 +85,10 @@
class="icon ph-dots-three-outline ph-bold ph-lg ph-fw ph-lg"
></i
><span class="text">{{ i18n.ts.more }}</span>
<span v-if="otherMenuItemIndicated" class="indicator"
<span
v-if="otherMenuItemIndicated"
class="indicator"
:class="{ animateIndicator: $store.state.animation }"
><i class="icon ph-circle ph-fill"></i
></span>
</button>
@ -341,6 +347,9 @@ function more() {
left: 20px;
color: var(--navIndicator);
font-size: 8px;
}
> .animateIndicator {
animation: blink 1s infinite;
}

15
packages/client/src/ui/_common_/navbar.vue
View file

@ -66,6 +66,9 @@
<span
v-if="navbarItemDef[item].indicated"
class="indicator"
:class="{
animateIndicator: $store.state.animation,
}"
><i class="icon ph-circle ph-fill"></i
></span>
</component>
@ -88,6 +91,7 @@
updateAvailable
"
class="indicator"
:class="{ animateIndicator: $store.state.animation }"
></span
><i class="icon ph-door ph-bold ph-fw ph-lg"></i
><span class="text">{{ i18n.ts.controlPanel }}</span>
@ -102,7 +106,10 @@
class="icon ph-dots-three-outline ph-bold ph-fw ph-lg"
></i
><span class="text">{{ i18n.ts.more }}</span>
<span v-if="otherMenuItemIndicated" class="indicator"
<span
v-if="otherMenuItemIndicated"
class="indicator"
:class="{ animateIndicator: $store.state.animation }"
><i class="icon ph-circle ph-fill"></i
></span>
</button>
@ -419,6 +426,9 @@ function more(ev: MouseEvent) {
left: 20px;
color: var(--navIndicator);
font-size: 8px;
}
> .animateIndicator {
animation: blink 1s infinite;
}
@ -602,6 +612,9 @@ function more(ev: MouseEvent) {
left: 24px;
color: var(--navIndicator);
font-size: 8px;
}
> .animateIndicator {
animation: blink 1s infinite;
}

13
packages/client/src/ui/deck.vue
View file

@ -119,7 +119,10 @@
@click="drawerMenuShowing = true"
>
<i class="ph-list ph-bold ph-lg"></i
><span v-if="menuIndicated" class="indicator"
><span
v-if="menuIndicated"
class="indicator"
:class="{ animateIndicator: $store.state.animation }"
><i class="ph-circle ph-fill"></i
></span>
</button>
@ -136,7 +139,10 @@
@click="mainRouter.push('/my/notifications')"
>
<i class="ph-bell ph-bold ph-lg"></i
><span v-if="$i?.hasUnreadNotification" class="indicator"
><span
v-if="$i?.hasUnreadNotification"
class="indicator"
:class="{ animateIndicator: $store.state.animation }"
><i class="ph-circle ph-fill"></i
></span>
</button>
@ -551,6 +557,9 @@ async function deleteProfile() {
left: 0;
color: var(--indicator);
font-size: 16px;
}
> .animateIndicator {
animation: blink 1s infinite;
}

17
packages/client/src/ui/universal.vue
View file

@ -39,7 +39,10 @@
>
<div class="button-wrapper">
<i class="ph-list ph-bold ph-lg"></i
><span v-if="menuIndicated" class="indicator"
><span
v-if="menuIndicated"
class="indicator"
:class="{ animateIndicator: $store.state.animation }"
><i class="ph-circle ph-fill"></i
></span>
</div>
@ -74,7 +77,10 @@
:class="buttonAnimIndex === 1 ? 'on' : ''"
>
<i class="ph-bell ph-bold ph-lg"></i
><span v-if="$i?.hasUnreadNotification" class="indicator"
><span
v-if="$i?.hasUnreadNotification"
class="indicator"
:class="{ animateIndicator: $store.state.animation }"
><i class="ph-circle ph-fill"></i
></span>
</div>
@ -95,6 +101,7 @@
><span
v-if="$i?.hasUnreadMessagingMessage"
class="indicator"
:class="{ animateIndicator: $store.state.animation }"
><i class="ph-circle ph-fill"></i
></span>
</div>
@ -692,6 +699,9 @@ console.log(mainRouter.currentRoute.value.name);
left: 0;
color: var(--indicator);
font-size: 16px;
}
> .animateIndicator {
animation: blink 1s infinite;
}
}
@ -713,6 +723,9 @@ console.log(mainRouter.currentRoute.value.name);
left: 0;
color: var(--indicator);
font-size: 16px;
}
> .animateIndicator {
animation: blink 1s infinite;
}