monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2024-09-22 08:16:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

account button transition to loading circle is now animated

Browse source
This commit is contained in:
Miodec 2022-09-02 00:00:33 +02:00
parent 52b6b5429e
commit 76ee885a04
3 changed files with 93 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend/src/styles/nav.scss
View file

@ -17,7 +17,9 @@
margin-left: 0.25rem;
}
.icon {
.icon,
.loading,
.user {
width: 1.25rem;
height: 1.25rem;
// background: red;
@ -27,12 +29,18 @@
&.account {
position: relative;
.icon,
.loading,
.user,
.avatar {
grid-column: 1/2;
grid-row: 1/2;
}
.loading,
.user {
// margin-top: 0.1rem;
}
.levelAndBar {
transition: 0.125s;
}

93
frontend/src/ts/elements/account-button.ts
View file

@ -11,23 +11,87 @@ export function skipXpBreakdown(): void {
skipBreakdown = true;
}
export function loading(truefalse: boolean): void {
if (truefalse) {
if (usingAvatar) {
$("#top #menu .account .avatar").addClass("hidden");
$("#top #menu .account .icon").removeClass("hidden");
}
$("#top #menu .account .icon").html(
'<i class="fas fa-fw fa-spin fa-circle-notch"></i>'
);
export function loading(state: boolean): void {
if (state) {
$("#top #menu .account").css("opacity", 1).css("pointer-events", "none");
} else {
if (usingAvatar) {
$("#top #menu .account .avatar").removeClass("hidden");
$("#top #menu .account .icon").addClass("hidden");
$("#top #menu .account .loading").css("opacity", 1).removeClass("hidden");
$("#top #menu .account .avatar")
.stop(true, true)
.css({ opacity: 1 })
.animate(
{
opacity: 0,
},
100,
() => {
$("#top #menu .account .avatar").addClass("hidden");
}
);
} else {
$("#top #menu .account .loading")
.stop(true, true)
.removeClass("hidden")
.css({ opacity: 0 })
.animate(
{
opacity: 1,
},
100
);
$("#top #menu .account .user")
.stop(true, true)
.css({ opacity: 1 })
.animate(
{
opacity: 0,
},
100,
() => {
$("#top #menu .account .user").addClass("hidden");
}
);
}
$("#top #menu .account .icon").html('<i class="fas fa-fw fa-user"></i>');
} else {
$("#top #menu .account").css("opacity", 1).css("pointer-events", "auto");
if (usingAvatar) {
$("#top #menu .account .loading").css("opacity", 1).addClass("hidden");
$("#top #menu .account .avatar")
.stop(true, true)
.removeClass("hidden")
.css({ opacity: 0 })
.animate(
{
opacity: 1,
},
100
);
} else {
$("#top #menu .account .loading")
.stop(true, true)
.css({ opacity: 1 })
.animate(
{
opacity: 0,
},
100,
() => {
$("#top #menu .account .loading").addClass("hidden");
}
);
$("#top #menu .account .user")
.stop(true, true)
.removeClass("hidden")
.css({ opacity: 0 })
.animate(
{
opacity: 1,
},
100
);
}
}
}
@ -55,11 +119,12 @@ export async function update(
);
usingAvatar = true;
$("#top #menu .account .icon").addClass("hidden");
$("#top #menu .account .user").addClass("hidden");
$("#top #menu .account .avatar").removeClass("hidden");
}
} else {
$("#top #menu .account .avatar").addClass("hidden");
$("#top #menu .account .user").removeClass("hidden");
}
Misc.swapElements(
$("#menu .textButton.login"),

5
frontend/static/html/top.html
View file

@ -106,7 +106,10 @@
onclick="this.blur();"
router-link
>
<div class="icon">
<div class="loading hidden">
<i class="fas fa-fw fa-spin fa-circle-notch"></i>
</div>
<div class="user">
<i class="fas fa-fw fa-user"></i>
</div>
<div class="avatar hidden"></div>