From 341341e39e79e43eb8740f897e08d645f3085c74 Mon Sep 17 00:00:00 2001 From: Asiya-Bagwan Date: Tue, 21 May 2024 12:10:44 +0530 Subject: [PATCH] Add boxes above and left of first box; change input boxes color from grey to black --- .../FormBuilder/FormBuilder.component.css | 86 +++++++++---------- .../FormBuilder/FormBuilder.component.js | 66 ++++++++------ .../FormBuilder/ID/Id.component.css | 2 +- 3 files changed, 84 insertions(+), 70 deletions(-) diff --git a/src/components/AutoROIFormBuilder/FormBuilder/FormBuilder.component.css b/src/components/AutoROIFormBuilder/FormBuilder/FormBuilder.component.css index 0c0f9c0..8a1aa3f 100644 --- a/src/components/AutoROIFormBuilder/FormBuilder/FormBuilder.component.css +++ b/src/components/AutoROIFormBuilder/FormBuilder/FormBuilder.component.css @@ -1,8 +1,10 @@ -.area{ + + +.area { position: relative; width: 1300px; height: 690px; - background-color:white; + background-color: white; border: 1px solid #CCCCCC; margin: 0 auto; } @@ -12,70 +14,70 @@ margin-top: 10px; } -.tool-area{ +.tool-area { width: 130px; height: 690px; background-color: #bcbcbc; float: right; } - .box { - position:absolute; + position: absolute; background-color: white; display: flex; justify-content: center; align-items: center; font-size: 18px; border: 1px solid black; - margin: 2px + margin: 2px; } - .add-button { position: absolute; - height: 10px; - width: 10px; + height: 20px; /* Increased height for better visibility */ + width: 20px; /* Increased width for better visibility */ align-items: center; align-content: center; border: none; - line-height: 10px; /* Added line-height to vertically center the content */ - + line-height: 20px; /* Center the content vertically */ background-color: #27ae60; color: white; cursor: pointer; + opacity: 0; + z-index: 2; + transition: opacity 0.3s ease; +} + +.add-button:hover { + opacity: 1; } .right { top: 50%; left: 100%; - opacity: 0; - z-index: 2; - transform: translate(-50%, -50%); -} -.right:hover{ - opacity: 1; + transform: translate(0, -50%); } + .bottom { left: 50%; top: 100%; - opacity: 0; - z-index: 2; - transform: translate(-50%, -50%); + transform: translate(-50%, 0); } -.bottom:hover -{ - opacity: 1; +.left { + top: 50%; + right: 100%; + transform: translate(0, -50%); } +.top { + left: 50%; + bottom: 100%; + transform: translate(-50%, 0); +} - - - -#Draggable{ +#Draggable { background: rgba(1, 1, 1, 0.2); - cursor: col-resize; height: 100%; width: 5px; @@ -83,17 +85,16 @@ opacity: 0; left: 100%; z-index: 2; + transition: opacity 0.3s ease; } -#Draggable:hover{ +#Draggable:hover { opacity: 1; } - -#Draggable2{ +#Draggable2 { background: rgba(1, 1, 1, 0.2); - - cursor: col-resize; + cursor: row-resize; /* Changed to row-resize for vertical resizing */ height: 5px; width: 100%; position: absolute; @@ -101,16 +102,13 @@ opacity: 0; left: 0%; z-index: 2; + transition: opacity 0.3s ease; } -#Draggable2:hover{ +#Draggable2:hover { opacity: 1; } - - - - .circle { width: 16px; height: 16px; @@ -119,13 +117,13 @@ position: absolute; background-color: white; margin: 0; - top:0; - left:0; + top: 0; + left: 0; } -.omr-box{ + +.omr-box { width: 50px; display: flex; - font-size: 16px; cursor: move; } @@ -151,7 +149,7 @@ margin: 20px; border-radius: 5px; position: relative; - background-color: #CCCCCC; + background-color: #CCCCCC; color: #666666; cursor: not-allowed; } @@ -173,6 +171,7 @@ display: inline-flex; margin: 0px; } + .rotate { transform: rotate(-90deg); } @@ -182,3 +181,4 @@ + diff --git a/src/components/AutoROIFormBuilder/FormBuilder/FormBuilder.component.js b/src/components/AutoROIFormBuilder/FormBuilder/FormBuilder.component.js index 6a78a9d..00816c4 100644 --- a/src/components/AutoROIFormBuilder/FormBuilder/FormBuilder.component.js +++ b/src/components/AutoROIFormBuilder/FormBuilder/FormBuilder.component.js @@ -1,3 +1,4 @@ + import React, { useState } from "react"; import "./FormBuilder.component.css"; import DownloadPDF from "./DownloadPDF/DownloadPDF.component"; @@ -7,6 +8,7 @@ import FreeTextComponent from "./FreeText/FreeText.component"; import BlackDotComponent from "./BlackDot/BlackDot.component"; import EditableTableCell from "./EditableTabelCell/EditableTableCell.component"; import Dropdown from "../Dropdown/Dropdown.component"; + const FormBuilder = ({ handleDesignComplete, setActiveStep, @@ -19,21 +21,18 @@ const FormBuilder = ({ ]); const boundaryRef = React.useRef(null); - const [blackdots, setBlackdots] = useState([]); const [fieldOrder, setFieldOrder] = useState(1); const handleFormConfigSet = (json) => { - setFieldOrder((prevCount) => prevCount + 1) - setFormJson(json) - } + setFieldOrder((prevCount) => prevCount + 1); + setFormJson(json); + }; const updateSharedState = (newValue) => { setBlackdots(newValue); }; - // main table - const addbox = (oldbox, where) => { const newbox = { key: Date.now(), @@ -49,23 +48,26 @@ const FormBuilder = ({ if (where === "bottom") { newbox.x += oldbox.height; } + if (where === "left") { + newbox.y -= oldbox.width; + } + if (where === "top") { + newbox.x -= oldbox.height; + } setBoxes((prevBoxes) => [...prevBoxes, newbox]); }; + const removeDiv = (currentbox) => { - let newlist = []; - for (let i = 0; i < boxes.length; i++) { - if (currentbox.key === boxes[i].key) continue; - newlist.push(boxes[i]); - } + let newlist = boxes.filter((box) => box.key !== currentbox.key); setBoxes(newlist); }; - const [initialPos, setInitialPos] = React.useState(null); - const [initialSize, setInitialSize] = React.useState(null); + const [initialPos, setInitialPos] = useState(null); + const [initialSize, setInitialSize] = useState(null); const [isDesignComplete, setDesignComplete] = useState(false); - const options = ["Landscape", "Potrait"]; + const options = ["Landscape", "Portrait"]; const handleSelect = (option) => { setSelectedOption(option); @@ -73,19 +75,16 @@ const FormBuilder = ({ const initial = (e, box) => { let resizable = document.getElementsByClassName("box " + box.key)[0]; - setInitialPos(e.clientX); setInitialSize(resizable.offsetWidth); }; const resize = (e, box) => { let resizable = document.getElementsByClassName("box " + box.key)[0]; - resizable.style.width = `${ parseInt(initialSize) + parseInt(e.clientX - initialPos) }px`; let ne = parseInt(resizable.style.width); - ne = Math.floor(ne / 10); ne = ne * 10; if (box.y + ne > 1010) { @@ -97,13 +96,11 @@ const FormBuilder = ({ boxes[i].width = ne; } } - setBoxes(boxes); }; const initialdown = (e, box) => { let resizable = document.getElementsByClassName("box " + box.key)[0]; - setInitialPos(e.clientY); setInitialSize(resizable.offsetHeight); }; @@ -120,7 +117,6 @@ const FormBuilder = ({ ne = 670 - box.x; } resizable.style.height = `${ne}px`; - // let curr; for (let i = 0; i < boxes.length; i++) { if (boxes[i] === box) { boxes[i].height = ne; @@ -131,7 +127,7 @@ const FormBuilder = ({ const handleExportComplete = (dstImg, imgData) => { handleDesignComplete(dstImg, imgData, (isNoError) => { - if (typeof isNoError == "boolean") { + if (typeof isNoError === "boolean") { setDesignComplete(true); } }); @@ -153,14 +149,12 @@ const FormBuilder = ({ }} > -
initial(event, box)} onDrag={(event) => resize(event, box)} /> -
+ + +
))}
Form orientation:

📝

- - + +