fired transitions run animation once
This commit is contained in:
parent
0ba4fd4cae
commit
29808a683c
6 changed files with 34 additions and 14 deletions
|
|
@ -6,9 +6,10 @@ import "./BottomPanel.css";
|
|||
import head from "../head.svg" ;
|
||||
import { usePersistentState } from "@/util/persistent_state";
|
||||
import { PersistentDetails } from "./PersistentDetails";
|
||||
import { DigitalWatch } from "@/Plant/DigitalWatch/DigitalWatch";
|
||||
|
||||
export function BottomPanel(props: {errors: TraceableError[]}) {
|
||||
const [greeting, setGreeting] = useState(<><b><img src={head} style={{transform: "scaleX(-1)"}}/> "Welcome to StateBuddy, buddy!"</b></>);
|
||||
const [greeting, setGreeting] = useState(<><b><img src={head} style={{transform: "scaleX(-1)"}}/> "Welcome to StateBuddy, buddy!"</b><br/></>);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
|
|
@ -17,7 +18,8 @@ export function BottomPanel(props: {errors: TraceableError[]}) {
|
|||
}, []);
|
||||
|
||||
return <div className="toolbar bottom">
|
||||
<>{greeting}</>
|
||||
{greeting}
|
||||
<DigitalWatch alarm={true} light={true} h={12} m={30} s={33}/>
|
||||
{props.errors.length > 0 &&
|
||||
<div className="errorStatus">
|
||||
<PersistentDetails initiallyOpen={false} localStorageKey="errorsExpanded">
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import { Dispatch, ReactElement, SetStateAction, useState, KeyboardEvent } from "react";
|
||||
import { Dispatch, ReactElement, SetStateAction, useState, KeyboardEvent, useEffect, useRef } from "react";
|
||||
|
||||
import { parse as parseLabel } from "../statecharts/label_parser";
|
||||
|
||||
export function TextDialog(props: {setModal: Dispatch<SetStateAction<ReactElement|null>>, text: string, done: (newText: string|undefined) => void}) {
|
||||
const [text, setText] = useState(props.text);
|
||||
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
if (e.key === "Enter") {
|
||||
if (!e.shiftKey) {
|
||||
|
|
@ -19,19 +20,19 @@ export function TextDialog(props: {setModal: Dispatch<SetStateAction<ReactElemen
|
|||
e.stopPropagation();
|
||||
}
|
||||
|
||||
let error = "";
|
||||
let parseError = "";
|
||||
try {
|
||||
const parsed = parseLabel(text);
|
||||
parseLabel(text);
|
||||
} catch (e) {
|
||||
// @ts-ignore
|
||||
error = e.message;
|
||||
parseError = e.message;
|
||||
}
|
||||
|
||||
return <div onKeyDown={onKeyDown} style={{padding: 4}}>
|
||||
Text label:<br/>
|
||||
<textarea autoFocus style={{fontFamily: 'Roboto', width:'calc(100%-10px)', height: 60}} onChange={e=>setText(e.target.value)} value={text}/>
|
||||
<textarea autoFocus style={{fontFamily: 'Roboto', width: 400, height: 60}} onChange={e=>setText(e.target.value)} value={text} onFocus={e => e.target.select()}/>
|
||||
<br/>
|
||||
<span style={{color: 'var(--error-color)'}}>{error}</span><br/>
|
||||
<span style={{color: 'var(--error-color)'}}>{parseError}</span><br/>
|
||||
<p><kbd>Enter</kbd> to confirm. <kbd>Esc</kbd> to cancel.
|
||||
</p>
|
||||
(Tip: <kbd>Shift</kbd>+<kbd>Enter</kbd> to insert newline.)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue