Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-01-31 10:31:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add generating animation and fix robot corrupted robot garage load

Browse Source
This commit is contained in:
Reckless_Satoshi 2023-04-24 06:43:21 -07:00
parent 7e47fb60bf
commit e4c1089b46
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
3 changed files with 42 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/RobotAvatar/index.tsx
View File

@ -50,6 +50,8 @@ const RobotAvatar: React.FC<Props> = ({
? theme.palette.mode === 'dark' ? theme.palette.mode === 'dark'
? 'loadingAvatarDark' ? 'loadingAvatarDark'
: 'loadingAvatar' : 'loadingAvatar'
: theme.palette.mode === 'dark'
? 'generatingAvatarDark'
: 'generatingAvatar'; : 'generatingAvatar';
useEffect(() => { useEffect(() => {

1
frontend/src/models/Garage.model.ts
View File

@ -28,7 +28,6 @@ class Garage {
delete = () => { delete = () => {
this.slots = [emptySlot]; this.slots = [emptySlot];
systemClient.deleteItem('garage'); systemClient.deleteItem('garage');
this.save();
}; };
updateRobot: (robot: Robot, index: number) => void = (robot, index) => { updateRobot: (robot: Robot, index: number) => void = (robot, index) => {

43
frontend/static/css/index.css
View File

@ -176,7 +176,7 @@ input[type='number'] {
} }
} }
@keyframes animatedBackground { @keyframes animatedLoadingBackground {
from { from {
background-position: 0 0; background-position: 0 0;
} }
@ -185,6 +185,15 @@ input[type='number'] {
} }
} }
@keyframes animatedGeneratingBackground {
from {
background-position: 0 0;
}
to {
background-position: 0 200px;
}
}
.loadingAvatar { .loadingAvatar {
background-size: 100%; background-size: 100%;
border-radius: 50%; border-radius: 50%;
@ -199,7 +208,7 @@ input[type='number'] {
); );
background-position: 0px 0px; background-position: 0px 0px;
background-repeat: repeat; background-repeat: repeat;
animation: animatedBackground 5s linear infinite; animation: animatedLoadingBackground 5s linear infinite;
} }
.loadingAvatarDark { .loadingAvatarDark {
@ -216,7 +225,7 @@ input[type='number'] {
); );
background-position: 0px 0px; background-position: 0px 0px;
background-repeat: repeat; background-repeat: repeat;
animation: animatedBackground 5s linear infinite; animation: animatedLoadingBackground 5s linear infinite;
} }
.generatingAvatar { .generatingAvatar {
@ -225,4 +234,32 @@ input[type='number'] {
outline: 2px solid #555; outline: 2px solid #555;
outline-offset: -2px; outline-offset: -2px;
filter: dropShadow(1px 1px 1px #000000); filter: dropShadow(1px 1px 1px #000000);
background-image: linear-gradient(
0deg,
#ffffff00 0%,
#dbdbdb93 40%,
#f7f7f791 60%,
#ffffff00 100%
);
background-position: 0px 0px;
background-repeat: repeat;
animation: animatedGeneratingBackground 5s linear infinite;
}
.generatingAvatarDark {
background-size: 100%;
border-radius: 50%;
outline: 2px solid #555;
outline-offset: -2px;
filter: dropShadow(1px 1px 1px #000000);
background-image: linear-gradient(
0deg,
#6e6e6e00 0%,
#14141479 40%,
#14141479 60%,
#6e6e6e00 100%
);
background-position: 0px 0px;
background-repeat: repeat;
animation: animatedGeneratingBackground 5s linear infinite;
} }