feat(ui) minor UI improvements

Signed-off-by: Dan Selman <[email protected]>

src/AgreementData.tsx

@@ -12,7 +12,9 @@ function AgreementData() {
   }
 
   return <div className="column">
-    <h2>Data</h2>
+    <div className="tooltip"><h3>Data</h3>
+      <span className="tooltiptext">JSON data (an instance of the Concerto model) used to preview output from the template.</span>
+    </div>
     <MarkdownEditor value={agreementData} onChange={onChange}/>
   </div>;
 }

src/AgreementHtml.tsx

@@ -3,7 +3,9 @@ import useAppStore from './store';
 function AgreementHtml() {
   const agreementHtml = useAppStore((state) => state.agreementHtml)
   return <div className="column">
-    <h2>Agreement</h2>
+    <div className="tooltip"><h3>Output</h3>
+      <span className="tooltiptext">The result of merging the JSON data with the template. This is AgreementMark converted to HTML.</span>
+    </div>
     <div className="agreement" dangerouslySetInnerHTML={{ __html: agreementHtml }}/>
   </div>;
 }

src/App.css

@@ -12,17 +12,11 @@
   justify-content: center;
 }
 
-textarea {
-  border:1px solid #999999;
-  width:100%;
-  resize: none;
-  font-family: monospace;
-  min-height: 60vh;
-}
-
-.textwrapper
+.editorwrapper
 {
   margin-left: 20px;
+  border:1px solid #999999;
+  min-height: 60vh;
 }
 
 .column {
@@ -66,4 +60,53 @@ blockquote:before {
 }
 blockquote p {
   display: inline;
+}
+
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+}
+
+/* Tooltip text */
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+
+  /* Position the tooltip text - see examples below! */
+  position: absolute;
+  z-index: 1;
+}
+
+.tooltip .tooltiptext {
+  width: 200px;
+  top: 100%;
+  left: 50%; 
+  margin-left: -100px; /* Use half of the width (200/2 = 100), to center the tooltip */
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+
+.tooltip .tooltiptext::after {
+  content: " ";
+  position: absolute;
+  bottom: 100%;  /* At the top of the tooltip */
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent transparent black transparent;
+}
+
+a[target="_blank"]::after {
+  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
+  margin: 0 3px 0 5px;
 }

src/App.tsx

@@ -6,6 +6,8 @@ import Errors from './Errors';
 import TemplateMarkdown from './TemplateMarkdown';
 import TemplateModel from './TemplateModel';
 import useAppStore from './store';
+import Header from './Header';
+import Footer from './Footer';
 
 function App() {
   const rebuild = useAppStore((state) => state.rebuild);
@@ -16,17 +18,15 @@ function App() {
 
   return (
     <div>
-      <header className="App-header">
-        <img src='APLogo.png' height={50}/>
-        <h1>Template Playground</h1>
-      </header>
+      <Header/>
       <Errors/>
       <div className="row">
       <TemplateMarkdown/>
       <TemplateModel/>
       <AgreementData/>
       <AgreementHtml/>
       </div>
+      <Footer/>
     </div>
   );
 }

src/Footer.tsx

@@ -0,0 +1,13 @@
+import './App.css';
+
+function Footer() {
+  return (
+    <div>
+      <footer className="App-footer">
+        <a href="https://accordproject.org" target="_blank" rel="noopener noreferrer">Accord Project (a Linux Foundation Project)</a> <br/>
+      </footer>
+    </div>
+  );
+}
+
+export default Footer;

src/Header.tsx

@@ -0,0 +1,30 @@
+import './App.css';
+
+function Header() {
+  return (
+    <div>
+      <header className="App-header">
+        <div>
+          <div className="row">
+            <div className="column">
+                <img src='APLogo.png' height={50} />
+            </div>
+            <div className="column">
+              <h2>Template Playground</h2>
+            </div>
+            <div className="column">
+              <p></p>
+            </div>
+            <div className="column">
+              <a href="https://github.com/accordproject/template-engine/blob/main/README.md" target="_blank" rel="noopener noreferrer">Documentation</a> <br />
+              <a href="https://github.com/accordproject/template-playground/issues" target="_blank" rel="noopener noreferrer">Issues</a><br />
+              <a href="https://discord.gg/Zm99SKhhtA" target="_blank" rel="noopener noreferrer">Community</a>
+            </div>
+          </div>
+        </div>
+      </header>
+    </div >
+  );
+}
+
+export default Header;

src/MarkdownEditor.tsx

@@ -6,8 +6,8 @@ const options = {
 
 export default function MarkdownEditor( {value, onChange} : {value: string, onChange?: (value:string|undefined) => void} ) {
   return (
-    <div className="textwrapper">
-        <Editor options={ options } height="50vh" defaultValue={value} onChange={onChange}/>
+    <div className="editorwrapper">
+        <Editor options={ options } height="60vh" defaultValue={value} onChange={onChange}/>
     </div>
   );
 }

src/TemplateMarkdown.tsx

@@ -5,15 +5,17 @@ function TemplateMarkdown() {
   const templateMarkdown = useAppStore((state) => state.templateMarkdown)
   const setTemplateMarkdown = useAppStore((state) => state.setTemplateMarkdown)
 
-  function onChange(value: string|undefined) {
-    if(value) {
+  function onChange(value: string | undefined) {
+    if (value) {
       void setTemplateMarkdown(value);
     }
   }
 
   return <div className="column">
-    <h2>Template</h2>
-    <MarkdownEditor value={templateMarkdown} onChange={onChange}/>
+    <div className="tooltip"><h3>TemplateMark</h3>
+      <span className="tooltiptext">A natural language template with embedded variables, conditional sections and TypeScript code.</span>
+    </div>
+    <MarkdownEditor value={templateMarkdown} onChange={onChange} />
   </div>;
 }
 

src/TemplateModel.tsx

@@ -12,7 +12,9 @@ function TemplateModel() {
   }
 
   return <div className="column">
-    <h2>Model</h2>
+    <div className="tooltip"><h3>Concerto Model</h3>
+      <span className="tooltiptext">Defines the data model for the template and its logic.</span>
+    </div>
     <MarkdownEditor value={model} onChange={onChange}/>
   </div>;
 }