From 1cafe3ba8df810069660b6fc364ae56db858f4af Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Mon, 12 Jun 2023 12:07:18 +0300
Subject: [PATCH] add info msg
---
.../FillTheGapContainerComponent.js | 31 ++++++++++++++-----
1 file changed, 24 insertions(+), 7 deletions(-)
diff --git a/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js b/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js
index 355d78130..7374abb81 100644
--- a/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js
+++ b/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useRef, useState } from 'react';
import { WaxContext, ComponentPlugin, Icon } from 'wax-prosemirror-core';
import styled from 'styled-components';
import ContainerEditor from './ContainerEditor';
@@ -13,7 +13,7 @@ const FillTheGapContainerTool = styled.div`
border: 3px solid #f5f5f7;
border-bottom: none;
- span {
+ span:first-of-type {
position: relative;
top: 3px;
}
@@ -25,21 +25,32 @@ const FillTheGapWrapper = styled.div`
`;
const StyledIconAction = styled(Icon)`
- float: right;
position: relative;
- top: 2px;
right: 4px;
cursor: pointer;
height: 24px;
width: 24px;
`;
+const InfoMsg = styled.div`
+ border-radius: 4px;
+ display: none;
+ background: #535e76;
+ color: #fff;
+ padding-left: 4px;
+ padding-right: 4px;
+ position: relative;
+ top: 3px;
+`;
+
export default ({ node, view, getPos }) => {
const context = useContext(WaxContext);
const {
pmViews: { main },
} = context;
+ const infoMsgRef = useRef();
+ const [infoMsgIsOpen, setInfoMsgIsOpen] = useState(false);
const FillTheGapTool = ComponentPlugin('fillTheGap');
const customProps = main.props.customValues;
@@ -53,7 +64,13 @@ export default ({ node, view, getPos }) => {
const { feedback } = node.attrs;
const displayInfoMsg = () => {
- console.log('click');
+ if (infoMsgRef.current && !infoMsgIsOpen)
+ infoMsgRef.current.style.display = 'inline';
+
+ if (infoMsgRef.current && infoMsgIsOpen)
+ infoMsgRef.current.style.display = 'none';
+
+ setInfoMsgIsOpen(!infoMsgIsOpen);
};
return (
@@ -71,9 +88,9 @@ export default ({ node, view, getPos }) => {
>
<StyledIconAction name="help" />
</span>
- <span style={{ display: 'inline', position: 'absolute' }}>
+ <InfoMsg ref={infoMsgRef}>
enter answers seperated with a semi colon
- </span>
+ </InfoMsg>
</FillTheGapContainerTool>
)}
</div>
--
GitLab