[feature]: Select on text areas to toggle settings mode ( body or title)

capblack222 · Feb 20, 2021 · 1049393 · 1049393
1 parent 8bb22cf
commit 1049393
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 13 deletions.
diff --git a/src/pages/Editor/containers/editContext.js b/src/pages/Editor/containers/editContext.js
@@ -37,8 +37,14 @@ const EditContextProvider = (props) => {
     Blank2: "blank2.jpg",
   };
 
-  const isBodyHandler = () => {
-    setIsBody(!isBody);
+  const isBodyHandler = (e) => {
+
+    if(e.target.classList.contains('id-body')){
+      setIsBody(true);
+    }else{
+      setIsBody(false);
+    }
+
   };
 
   const pageSrcHandler = (e) => {

diff --git a/src/pages/Editor/sections/OutputComponent/Output.js b/src/pages/Editor/sections/OutputComponent/Output.js
@@ -25,7 +25,8 @@ const OutputComponent = () => {
           </div>
           <textarea
             type="text"
-            className={classes.titleInput}
+            className={`${classes.titleInput} id-title`}
+            onClick={editContext.isBodyHandler}
             placeholder="Welcome to your Doc2Pen"
             style={{
               fontSize: `${editContext.headValues.headSize}px`,
@@ -41,8 +42,9 @@ const OutputComponent = () => {
           <textarea
             type="text"
             value={pageText}
+            onClick={editContext.isBodyHandler}
             onChange={e => setPageText(e.target.value)}
-            className={classes.contentInput}
+            className={`${classes.contentInput} id-body`}
             id="show-text"
             placeholder="Paste your content here! You can type it too, but we know people."
             style={{

diff --git a/src/pages/Editor/sections/Settings/Settings.js b/src/pages/Editor/sections/Settings/Settings.js
@@ -16,11 +16,11 @@ const Settings = () => {
             type="checkbox"
             name="heading"
             value={editContext.isBody}
-            id="heading"
+            id="title-heading"
             onClick={editContext.isBodyHandler}
-            className={`d-none`}
+            className={`id-title d-none`}
           />
-          <label for="heading" style={{ color: editContext.isBody && "#f0f7ff" }}>
+          <label for="title-heading" style={{ color: editContext.isBody && "#f0f7ff" }}>
             Title
           </label>
         </div>
@@ -29,11 +29,11 @@ const Settings = () => {
             type="checkbox"
             name="heading"
             value={editContext.isBody}
-            id="heading"
+            id="body-heading"
             onClick={editContext.isBodyHandler}
-            className={`d-none`}
+            className={`id-body d-none `}
           />
-          <label for="heading" style={{ color: !editContext.isBody && "#f0f7ff" }}>
+          <label for="body-heading" style={{ color: !editContext.isBody && "#f0f7ff" }}>
             Body
           </label>
         </div>
@@ -58,9 +58,11 @@ const Settings = () => {
           <Dropdown name="Change Sheet" type="page" items={["Ruled1", "Ruled2", "OnlyMargin", "Blank1", "Blank2"]} />
 
           <div className={styles.vSeparator}></div>
-
-          <label className={styles.downloadBtn} htmlFor="import">Import File</label>
-          <input id="import" style={{display:"none"}} type="file" onChange={editContext.importTxt}></input>
+
+          <label className={styles.downloadBtn} htmlFor="import">
+            Import File
+          </label>
+          <input id="import" style={{ display: "none" }} type="file" onChange={editContext.importTxt}></input>
           <div className={styles.vSeparator}></div>
 
           <button className={styles.downloadBtn} onClick={editContext.downloadImg}>