Update jsx resources

OpenVoiceOS · Oct 6, 2023 · 9bd046c · 9bd046c
1 parent ee1c18b
commit 9bd046c
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 7 deletions.
diff --git a/ovos_gui/res/gui/react/SYSTEM_AnimatedImageFrame.jsx b/ovos_gui/res/gui/react/SYSTEM_AnimatedImageFrame.jsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { ContentElement } from "CORE/utils";
+
+function RenderPage(props) {
+	const skill_props = props.skillState;
+	console.log(skill_props)
+	return (
+		<div className="h-aligned-container text-center"
+			 style={{justifyContent: "center",
+				     alignItems: "center",
+			 		 left: "1%",
+			         right: "1%"}}>
+			<ContentElement
+				elementType="TextFrame"
+				id="title"
+				className="col-12 h2"
+				text={skill_props["title"] || null}
+				duration={2000}
+			/>
+			<ContentElement
+				elementType="ImageFrame"
+				id={"image"}
+				className="col-12"
+				src={skill_props["image"] || null}
+				duration={2000}
+			/>
+			<ContentElement
+				elementType="TextFrame"
+				className="col-12 h4"
+				text={skill_props["caption"] || null}
+				duration={2000}
+			/>
+		</div>
+	);
+}
+
+export default RenderPage
diff --git a/ovos_gui/res/gui/react/SYSTEM_ImageFrame.jsx b/ovos_gui/res/gui/react/SYSTEM_ImageFrame.jsx
@@ -5,7 +5,11 @@ function RenderPage(props) {
 	const skill_props = props.skillState;
 	console.log(skill_props)
 	return (
-		<div className="v-aligned-container row text-center">
+		<div className="h-aligned-container text-center"
+			 style={{justifyContent: "center",
+				     alignItems: "center",
+			 		 left: "1%",
+			         right: "1%"}}>
 			<ContentElement
 				elementType="TextFrame"
 				id="title"

diff --git a/ovos_gui/res/gui/react/SYSTEM_TextFrame.jsx b/ovos_gui/res/gui/react/SYSTEM_TextFrame.jsx
@@ -5,27 +5,29 @@ function RenderPage(props) {
 	const skill_props = props.skillState;
 	console.log(skill_props)
 	return (
-		<div className="v-aligned-container text-center">
-			<div className="v-aligned-container text-center">
+		<div className="h-aligned-container text-center"
+			 style={{justifyContent: "center",
+				     alignItems: "center",
+			 		 left: "1%",
+			         right: "1%"}}>
             <ContentElement
 				elementType={"TextFrame"}
 				id={"title"}
 				className={"col-12 h1"}
 				text={skill_props.title}
 				display={skill_props.display}
 				duration={15000}
+				// TODO: duration from config
 			/>
-			</div>
-			<div className="v-aligned-container text-center">
 			<ContentElement
 				elementType={"TextFrame"}
 				id={"text"}
 				className={"col-12 h3"}
 				text={skill_props.text}
 				display={skill_props.display}
-				duration={15000}
+				duration={150000}
+				// TODO: duration from config
 			/>
-			</div>
 		</div>
 	);
 }