Skip to content

Commit

Permalink
HLM-6172 modal focus changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@siddhant-nawale-egov
siddhant-nawale-egov committed Jun 11, 2024
1 parent 6e5f3ac commit e59be5c
Show file tree
Hide file tree
Showing 7 changed files with 129 additions and 113 deletions.
4 changes: 2 additions & 2 deletions micro-ui/web/micro-ui-internals/packages/css/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@egovernments/digit-ui-css",
"version": "1.0.37-microplan",
"version": "1.0.38-microplan",
"license": "MIT",
"main": "dist/index.css",
"author": "Jagankumar <[email protected]>",
Expand Down Expand Up @@ -62,4 +62,4 @@
"digit-ui",
"css"
]
}
}
6 changes: 4 additions & 2 deletions micro-ui/web/micro-ui-internals/packages/css/src/components/microplanning.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2292,7 +2292,7 @@ $border-color: rgba(214, 213, 212, 1);

background: rgb(255, 255, 255);
}
th{
th {
padding: 0 0 0.4rem 0 !important;
}

Expand Down Expand Up @@ -2458,8 +2458,10 @@ $border-color: rgba(214, 213, 212, 1);
}
}
.popup-wrap-rest-unfocus {
}
.popup-wrap-rest-unfocus-active {
button:focus {
outline:none !important;
outline: none !important;
outline-offset: -0.125rem !important;
}
}
Expand Down
87 changes: 52 additions & 35 deletions ...ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/components/Hypothesis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const Hypothesis = ({

// States
const [editable, setEditable] = useState(true);
const [modal, setModal] = useState("none");
const [modal, setModalState] = useState("none");
const [assumptions, setAssumptions] = useState([]);
const [hypothesisAssumptionsList, setHypothesisAssumptionsList] = useState([]);
const [itemForDeletion, setItemForDeletion] = useState();
Expand All @@ -43,6 +43,22 @@ const Hypothesis = ({
});
}, []);

const setModal = (modalString) => {
var elements = document.querySelectorAll(".popup-wrap-rest-unfocus");
if (modalString === "none") {
elements.forEach(function (element) {
// Toggle the presence of the 'no-outline' class
element.classList.toggle("popup-wrap-rest-unfocus-active");
});
} else {
elements.forEach(function (element) {
// Toggle the presence of the 'no-outline' class
element.classList.toggle("popup-wrap-rest-unfocus-active");
});
}
setModalState(modalString);
};

// UseEffect to extract data on first render
useEffect(() => {
if (pages) {
Expand Down Expand Up @@ -147,7 +163,7 @@ const Hypothesis = ({
closeModal();
}, [itemForDeletion, deleteAssumptionHandler, setItemForDeletion, setAssumptions, setHypothesisAssumptionsList, closeModal, setToast, t]);

const sectionClass = `jk-header-btn-wrapper hypothesis-section ${editable ? "" : "non-editable-component"}`;
const sectionClass = `jk-header-btn-wrapper hypothesis-section ${editable ? "" : "non-editable-component"} popup-wrap-rest-unfocus `;
return (
<>
<div className={sectionClass}>
Expand All @@ -171,40 +187,7 @@ const Hypothesis = ({
<p>{t("ADD_ROW")}</p>
</button>
{/* delete conformation */}
<div className="popup-wrap-focus">
{modal === "delete-conformation" && (
<Modal
popupStyles={{ borderRadius: "0.25rem", width: "31.188rem" }}
popupModuleActionBarStyles={{
display: "flex",
flex: 1,
justifyContent: "flex-start",
width: "100%",
padding: "1rem",
}}
popupModuleMianStyles={{ padding: 0, margin: 0 }}
style={{
flex: 1,
height: "2.5rem",
border: `0.063rem solid ${PRIMARY_THEME_COLOR}`,
}}
headerBarMainStyle={{ padding: 0, margin: 0 }}
headerBarMain={<ModalHeading style={{ fontSize: "1.5rem" }} label={t("HEADING_DELETE_FILE_CONFIRMATION")} />}
actionCancelLabel={t("YES")}
actionCancelOnSubmit={deleteAssumptionHandlerCallback}
actionSaveLabel={t("NO")}
actionSaveOnSubmit={closeModal}
>
<div className="modal-body">
<p className="modal-main-body-p">{t("HYPOTHESIS_INSTRUCTIONS_DELETE_ENTRY_CONFIRMATION")}</p>
</div>
</Modal>
)}

{toast && toast.state === "error" && (
<Toast style={{ zIndex: "9999999" }} label={toast.message} isDleteBtn onClose={() => setToast(null)} type={"error"} />
)}
</div>
{/* might need it
{modal === "data-change-check" && (
<Modal
Expand Down Expand Up @@ -238,6 +221,40 @@ const Hypothesis = ({
</Modal>
)} */}
</div>
<div className="popup-wrap-focus">
{modal === "delete-conformation" && (
<Modal
popupStyles={{ borderRadius: "0.25rem", width: "31.188rem" }}
popupModuleActionBarStyles={{
display: "flex",
flex: 1,
justifyContent: "flex-start",
width: "100%",
padding: "1rem",
}}
popupModuleMianStyles={{ padding: 0, margin: 0 }}
style={{
flex: 1,
height: "2.5rem",
border: `0.063rem solid ${PRIMARY_THEME_COLOR}`,
}}
headerBarMainStyle={{ padding: 0, margin: 0 }}
headerBarMain={<ModalHeading style={{ fontSize: "1.5rem" }} label={t("HEADING_DELETE_FILE_CONFIRMATION")} />}
actionCancelLabel={t("YES")}
actionCancelOnSubmit={deleteAssumptionHandlerCallback}
actionSaveLabel={t("NO")}
actionSaveOnSubmit={closeModal}
>
<div className="modal-body">
<p className="modal-main-body-p">{t("HYPOTHESIS_INSTRUCTIONS_DELETE_ENTRY_CONFIRMATION")}</p>
</div>
</Modal>
)}

{toast && toast.state === "error" && (
<Toast style={{ zIndex: "9999999" }} label={toast.message} isDleteBtn onClose={() => setToast(null)} type={"error"} />
)}
</div>
</>
);
};
Expand Down
2 changes: 1 addition & 1 deletion ...-ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/components/Nagivator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,7 @@ const Navigator = memo((props) => {
)}

{/* Action bar */}
<ActionBar className={`${currentPage?.id === 0 ? "custom-action-bar-no-first-button" : "custom-action-bar"}`}>
<ActionBar className={`${currentPage?.id === 0 ? "custom-action-bar-no-first-button" : "custom-action-bar"} popup-wrap-rest-unfocus`}>
{/* Back button */}
{currentPage?.id > 0 && (
<Button
Expand Down
85 changes: 51 additions & 34 deletions ...ui/web/micro-ui-internals/packages/modules/hcm-microplanning/src/components/RuleEngine.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const RuleEngine = ({

// States
const [editable, setEditable] = useState(true);
const [modal, setModal] = useState("none");
const [modal, setModalState] = useState("none");
const [rules, setRules] = useState([]);
const [hypothesisAssumptionsList, setHypothesisAssumptionsList] = useState([]);
const [itemForDeletion, setItemForDeletion] = useState();
Expand All @@ -48,6 +48,22 @@ const RuleEngine = ({
});
}, []);

const setModal = (modalString) => {
var elements = document.querySelectorAll(".popup-wrap-rest-unfocus");
if (modalString === "none") {
elements.forEach(function (element) {
// Toggle the presence of the 'no-outline' class
element.classList.toggle("popup-wrap-rest-unfocus-active");
});
} else {
elements.forEach(function (element) {
// Toggle the presence of the 'no-outline' class
element.classList.toggle("popup-wrap-rest-unfocus-active");
});
}
setModalState(modalString);
};

// UseEffect to extract data on first render
useEffect(() => {
if (pages) {
Expand Down Expand Up @@ -215,7 +231,7 @@ const RuleEngine = ({
closeModal();
}, [itemForDeletion, deleteAssumptionHandler, setItemForDeletion, setRules, setOutputs, setInputs, closeModal, pureInputList]);

const sectionClass = `jk-header-btn-wrapper rule-engine-section ${editable ? "" : "non-editable-component"}`;
const sectionClass = `jk-header-btn-wrapper rule-engine-section ${editable ? "" : "non-editable-component"} popup-wrap-rest-unfocu`;
return (
<>
<div className={sectionClass}>
Expand Down Expand Up @@ -251,38 +267,7 @@ const RuleEngine = ({
{toast && toast.state === "warning" && (
<Toast style={{ zIndex: "9999999" }} label={toast.message} isDleteBtn onClose={() => setToast(null)} type="warning" />
)}
{/* delete conformation */}
<div className="popup-wrap-focus">
{modal === "delete-conformation" && (
<Modal
popupStyles={{ borderRadius: "0.25rem", width: "31.188rem" }}
popupModuleActionBarStyles={{
display: "flex",
flex: 1,
justifyContent: "flex-start",
width: "100%",
padding: "1rem",
}}
popupModuleMianStyles={{ padding: 0, margin: 0 }}
style={{
flex: 1,
backgroundColor: "white",
height: "2.5rem",
border: `0.063rem solid ${PRIMARY_THEME_COLOR}`,
}}
headerBarMainStyle={{ padding: 0, margin: 0 }}
headerBarMain={<ModalHeading style={{ fontSize: "1.5rem" }} label={t("HEADING_DELETE_FILE_CONFIRMATION")} />}
actionCancelLabel={t("YES")}
actionCancelOnSubmit={deleteAssumptionHandlerCallback}
actionSaveLabel={t("NO")}
actionSaveOnSubmit={closeModal}
>
<div className="modal-body">
<p className="modal-main-body-p">{t("RULE_ENGINE_INSTRUCTIONS_DELETE_ENTRY_CONFIRMATION")}</p>
</div>
</Modal>
)}
</div>

{/* // uncomment to activate data change save check
{modal === "data-change-check" && (
<Modal
Expand Down Expand Up @@ -315,6 +300,38 @@ const RuleEngine = ({
</Modal>
)} */}
</div>
{/* delete conformation */}
<div className="popup-wrap-focus">
{modal === "delete-conformation" && (
<Modal
popupStyles={{ borderRadius: "0.25rem", width: "31.188rem" }}
popupModuleActionBarStyles={{
display: "flex",
flex: 1,
justifyContent: "flex-start",
width: "100%",
padding: "1rem",
}}
popupModuleMianStyles={{ padding: 0, margin: 0 }}
style={{
flex: 1,
backgroundColor: "white",
height: "2.5rem",
border: `0.063rem solid ${PRIMARY_THEME_COLOR}`,
}}
headerBarMainStyle={{ padding: 0, margin: 0 }}
headerBarMain={<ModalHeading style={{ fontSize: "1.5rem" }} label={t("HEADING_DELETE_FILE_CONFIRMATION")} />}
actionCancelLabel={t("YES")}
actionCancelOnSubmit={deleteAssumptionHandlerCallback}
actionSaveLabel={t("NO")}
actionSaveOnSubmit={closeModal}
>
<div className="modal-body">
<p className="modal-main-body-p">{t("RULE_ENGINE_INSTRUCTIONS_DELETE_ENTRY_CONFIRMATION")}</p>
</div>
</Modal>
)}
</div>
</>
);
};
Expand Down
Loading

0 comments on commit e59be5c

Please sign in to comment.