Merge pull request #125 from MaxCunningham19/Massimiliano/bugs-and-im…

…provements Massimiliano / Bugs and improvements
MaxCunningham19 · Apr 11, 2023 · a6f5c7e · a6f5c7e
2 parents ece953e + 0ee2fd8
commit a6f5c7e
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 8 deletions.
diff --git a/client/src/components/Editor.js b/client/src/components/Editor.js
@@ -35,6 +35,12 @@ export const Editor = ({ blocks, onValidateClick, forwardedRef, validateAll }) =
               toggleMode={toggleMode}
             /> 
           }
+          { (showMistakeBar && isCompact) &&
+            <div className={styles["guideline-compact"]} />
+          }
+          { (showMistakeBar && !isCompact) &&
+            <div className={styles["guideline-expand"]} />
+          }
         </div>
       </section>
     </>

diff --git a/client/src/components/Editor.module.css b/client/src/components/Editor.module.css
@@ -7,6 +7,7 @@
         composes: Editor;
         display: flex;
         flex-direction: row;
+        overflow: auto;
     }
 
 .Carousel {
@@ -15,7 +16,26 @@
 }
 
 
-.SideMistakeBar{
-    flex-grow: 1;
+.SideMistakeBar {
+    position: absolute;
+    flex-grow: 0;
+    align-self: flex-start;  
+    right: 0;
+    margin-right: 3px;
 }
 
+
+    .guideline-compact {
+        margin-top: 2rem;
+        width: 50px;
+        height: 100%;
+        flex-shrink: 0;
+    }
+
+    .guideline-expand {
+        margin-top: 2rem;
+        width: 350px;
+        height: 100%;
+        flex-shrink: 0;
+    }
+
diff --git a/client/src/components/Header.js b/client/src/components/Header.js
@@ -113,12 +113,12 @@ export const Header = ({
                     percWidth="7%"
                     percHeight="7%"
                     message={message}
-                    messageStyle="header-loading"
+                    messageStyle="header-loading" 
                   />
                 }
                 </div>
                 <div className={styles['action-container']}>
-                  <Button onClick={handleOnClickSaveAll} buttonStyle="actionbar-save" text="Save all"></Button>
+                  <Button onClick={handleOnClickSaveAll} buttonStyle="actionbar-save" text="Save All"></Button>
                   <Button onClick={handleOnClickValidateAll} buttonStyle="actionbar-validate" text="Spellcheck"></Button>
                 </div>
               </>

diff --git a/client/src/components/SideMistakeBar.module.css b/client/src/components/SideMistakeBar.module.css
@@ -1,11 +1,12 @@
 .container {
+  composes: SideMistakeBar from "./Editor.module.css";
   display: grid;
   grid-template-rows: 50px 280px;
   grid-template-columns: 350px;
   grid-template-areas: 
     "title"
     "body";
-  position: relative;
+  position: absolute;
   background-color: var(--mistake-bar-dark);
   color: var(--text-dark);
   flex-direction: column;
@@ -144,13 +145,15 @@
 
 
 .compact-container {
+  composes: SideMistakeBar from "./Editor.module.css";
   display: flex;
   flex-direction: column;
   margin-top: 2rem;
   width: 50px;
   height: fit-content;
   background-color: var(--text-dark);
   font-weight: bold;
+
 }
 
   .compact-button {

diff --git a/client/src/components/TextBox.js b/client/src/components/TextBox.js
@@ -6,6 +6,7 @@ import { ReactComponent as CloseIcon } from "../icons/close.svg"
 import { ReactComponent as ValidateOutline } from "../icons/validate-outline.svg"
 import { ReactComponent as Save } from "../icons/save.svg"
 import { MistakeHighlighter } from './MistakeHighlighter'
+import ReactLoading from 'react-loading'
 import axios from 'axios'
 
 export const TextBox = ({
@@ -29,13 +30,17 @@ export const TextBox = ({
     const [isValidated, setIsValidated] = useState(false)
     const textAreaRef = useRef()
     const [uniqueId, setUniqueId] = useState("")
+    const [loadValidate, setLoadValidate] = useState(false)
+    const [loadSave, setLoadSave] = useState(false)
 
     useEffect(() => {
       setUniqueId(() => uniqueid)
     }, [uniqueid])
 
     const handleOnValidateClick = () => {
       onValidateClick()
+      setLoadValidate(() => true)
+      setTimeout(() => setLoadValidate(() => false), 3750)
       setTimeout(() => setIsValidated(() => true), 500)
     }
 
@@ -65,6 +70,8 @@ export const TextBox = ({
     }
 
     const onSaveClick = (e, id) => {
+      setLoadSave(() => true)
+      setTimeout(() => setLoadSave(() => false), 1000)
       const newContent = textAreaRef.current.innerText
       if (uniqueId === undefined) postBlock(newContent)
       else putBlock(newContent)
@@ -150,14 +157,20 @@ export const TextBox = ({
                 <Button 
                   buttonStyle="icon-single-textbox" 
                   onClick={(e) => handleOnValidateClick(e, uniqueid)}
-                  icon={<ValidateOutline className={styles['icon-single-textbox-icon-active']} />}
+                  icon={(!loadValidate) 
+                    ? <ValidateOutline className={styles['icon-single-textbox-icon-active']}/> 
+                    : <ReactLoading type={"spin"} color={"#F37A32"} height={"20px"} width={"20px"} />
+                  }
                 />
               )}
               {(onFocus && !document.untracked) && (
                 <Button 
                   buttonStyle="icon-single-textbox" 
                   onClick={(e) => onSaveClick(e, id)}
-                  icon={<Save className={styles['icon-single-textbox-icon-passive']} />}
+                  icon={(!loadSave) 
+                    ? <Save className={styles['icon-single-textbox-icon-passive']} />
+                    : <ReactLoading type={"spin"} color={"#8BA3CC"} height={"20px"} width={"20px"} />
+                  }
                 />
               )}
             </div>

diff --git a/client/src/pages/EditorPage.js b/client/src/pages/EditorPage.js
@@ -19,7 +19,7 @@ export function EditorPage() {
     const handleOnValidateAll = () => {
       setTimeout(() => updateBlocks(), 500)
       setTimeout(() => checkDocument(), 1000)
-      setTimeout(() => setValidateAll(true), 3500)
+      setTimeout(() => setValidateAll(true), 2500)
     }
 
     const handleOnValidateBlock = (e, id) => {