thi-sjsu-project/theia
0
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

add keyframes

Browse Source
This commit is contained in:
thetek 2024-05-22 23:08:21 +02:00
parent e868d8cdba
commit f52e3e9723
1 changed files with 138 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
src/components/Element/Complex/ApproveDenyButtonElement.tsx
View File

@ -1,3 +1,4 @@
import { useState } from 'react';
import type { ApproveDenyButtonElement as ApproveDenyButtonElementType } from 'src/types/element';
type ApproveDenyButtonElementProps = {
@ -14,18 +15,147 @@ const SIZES = {
fontSize: 28 / 472,
} as const;
type KeyframeParameters = {
bigCircleRadius: number,
bigCircleGradientStart: number,
bigCircleGradientEnd: number,
smallTurqoiseCirclePosition: number,
smallTurqoiseCircleOpacity: number,
tinyDotOpacity: number,
approveButtonPosition: number,
approveButtonOpacity: number,
denyButtonPosition: number,
denyButtonOpacity: number,
};
const INITIAL_KEYFRAME: KeyframeParameters = {
bigCircleRadius: SIZES.bigCircle,
bigCircleGradientStart: 0x646464,
bigCircleGradientEnd: 0x646464,
smallTurqoiseCirclePosition: 0.5,
smallTurqoiseCircleOpacity: 1,
tinyDotOpacity: 0.8,
approveButtonPosition: 1,
approveButtonOpacity: 1,
denyButtonPosition: 0,
denyButtonOpacity: 1,
} as const;
const KEYFRAMES_APPROVE = [
{
"time": 0,
"params": INITIAL_KEYFRAME,
},
{
"time": 1,
"params": {
bigCircleRadius: SIZES.bigCircle,
bigCircleGradientStart: 0x646464,
bigCircleGradientEnd: 0x00C007,
smallTurqoiseCirclePosition: 0.5,
smallTurqoiseCircleOpacity: 1,
tinyDotOpacity: 0.8,
approveButtonPosition: 1,
approveButtonOpacity: 1,
denyButtonPosition: 0,
denyButtonOpacity: 1,
},
},
{
"time": 1.5,
"params": {
bigCircleRadius: SIZES.bigCircle,
bigCircleGradientStart: 0x00C007,
bigCircleGradientEnd: 0x00C007,
smallTurqoiseCirclePosition: 1,
smallTurqoiseCircleOpacity: 1,
tinyDotOpacity: 0,
approveButtonPosition: 0.5,
approveButtonOpacity: 1,
denyButtonPosition: 0,
denyButtonOpacity: 0,
},
},
{
"time": 2,
"params": {
bigCircleRadius: SIZES.bigCircle,
bigCircleGradientStart: 0x00C007,
bigCircleGradientEnd: 0x00C007,
smallTurqoiseCirclePosition: 1,
smallTurqoiseCircleOpacity: 0,
tinyDotOpacity: 0,
approveButtonPosition: 0.5,
approveButtonOpacity: 1,
denyButtonPosition: 0,
denyButtonOpacity: 0,
},
},
];
const KEYFRAMES_DENY = [
{
"time": 0,
"params": INITIAL_KEYFRAME,
},
{
"time": 1,
"params": {
bigCircleRadius: SIZES.bigCircle,
bigCircleGradientStart: 0x646464,
bigCircleGradientEnd: 0xBC2503,
smallTurqoiseCirclePosition: 0.5,
smallTurqoiseCircleOpacity: 1,
tinyDotOpacity: 0.8,
approveButtonPosition: 1,
approveButtonOpacity: 1,
denyButtonPosition: 0,
denyButtonOpacity: 1,
},
},
{
"time": 1.5,
"params": {
bigCircleRadius: SIZES.bigCircle,
bigCircleGradientStart: 0xBC2503,
bigCircleGradientEnd: 0xBC2503,
smallTurqoiseCirclePosition: 1,
smallTurqoiseCircleOpacity: 1,
tinyDotOpacity: 0,
approveButtonPosition: 1,
approveButtonOpacity: 0,
denyButtonPosition: 0.5,
denyButtonOpacity: 1,
},
},
{
"time": 2,
"params": {
bigCircleRadius: SIZES.bigCircle,
bigCircleGradientStart: 0xBC2503,
bigCircleGradientEnd: 0xBC2503,
smallTurqoiseCirclePosition: 1,
smallTurqoiseCircleOpacity: 0,
tinyDotOpacity: 0,
approveButtonPosition: 1,
approveButtonOpacity: 0,
denyButtonPosition: 0.5,
denyButtonOpacity: 1,
},
},
];
// keyframes
// - approve:
// - 0: pos turqoise circle center, gray background
// - 1: pos turqoise circle right of big circle, gray-green gradient background, arrows fade out
// - 2: pos turqoise circle right of entire button, "approve" in middle of button, button green
// - 3: no turqoise circle, "approve" in middle of button, button green, rest disappears
// - 3: no turqoise circle, "approve" in middle of button, button green, rest disappears
// - deny:
// - 0: pos turqoise circle center, gray background
// - 1: pos turqoise circle left of big circle, gray-red gradient background, arrows fade out
// - 2: pos turqoise circle left of entire button, "deny" in middle of button, button red
// - 3: no turqoise circle, "deny" in middle of button, button red
// - 0: pos turqoise circle center, gray background
// - 1: pos turqoise circle left of big circle, gray-red gradient background, arrows fade out
// - 2: pos turqoise circle left of entire button, "deny" in middle of button, button red
// - 3: no turqoise circle, "deny" in middle of button, button red
const ApproveDenyButtonElement = ({
element,
@ -35,6 +165,8 @@ const ApproveDenyButtonElement = ({
const headerStyle = { fontSize: w * SIZES.fontSize, height: h - w * SIZES.button, lineHeight: `${h - w * SIZES.button - 2}px` };
const buttonStyle = { fontSize: w * SIZES.fontSize, height: w * SIZES.button - 2, lineHeight: `${w * SIZES.button - 2}px`, width: w * SIZES.sideLabel };
const [state, setState] = useState(INITIAL_KEYFRAME);
return (
<div
id={id}