Skip to content

Commit

Permalink
UI-Enhancement -Table and button alignments. (#1566)
Browse files Browse the repository at this point in the history 
* Ui-Enhancement.

* testcase updated
  • Loading branch information
@Josephalexantony-aot
Josephalexantony-aot authored Aug 17, 2023
1 parent c051046 commit a58b68f
Show file tree
Hide file tree
Showing 8 changed files with 90 additions and 76 deletions.
3 changes: 2 additions & 1 deletion forms-flow-web/src/_tests_/test-components/test-form/list.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@ it("should render the list component without breaking", () => {
expect(screen.getByText("Test Form 007")).toBeInTheDocument();
expect(screen.getByText("Create Form")).toBeInTheDocument();
expect(screen.getByText("Upload Form")).toBeInTheDocument();
expect(screen.getByText("Download Form")).toBeInTheDocument();
const downloadFormText = screen.queryByText('Download Form');
downloadFormText ? expect(downloadFormText).toBeNull() : '';
});

it("Should dispatch the file upload hanlder with an empty list when clicking upload button", async () => {
Expand Down
5 changes: 4 additions & 1 deletion forms-flow-web/src/assets/styles/themes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,7 @@ $black:#000;
$light-blue: #4d61fc;
$light-grey: #f3f3f3;
$dark-blue: #1a5a96;

$blue: #001dff;
$gray: #b4b4b4;
$gray-100: #f8f9fa;
$gray-300: #dee2e6;
4 changes: 2 additions & 2 deletions forms-flow-web/src/components/Application/Application.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,6 @@
font-size: 14px;
}
.react-bootstrap-table {
min-height: 450px;
min-height: 434px;
overflow: auto;
}
}
36 changes: 19 additions & 17 deletions forms-flow-web/src/components/Footer/footer.scss
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,23 @@
@import "./../../assets/styles/themes.scss";

.footer {
border-top: 2px solid #e8e8ee;
padding-bottom: 15px;
padding-top: 15px;
position: fixed;
background-color: white;
bottom: 0;
height: 2.3rem; /* Footer height */
width:100%;
z-index: 999;
}
.text-align{
bottom: 10px;
}
@media (max-width: 768px) {
.footer{
width:100% !important;
border-top: 2px solid $gray-300;
padding-bottom: 15px;
padding-top: 15px;
position: fixed;
background-color: $gray-100;
bottom: 0;
height: 2.3rem; /* Footer height */
width:100%;
z-index: 999;
margin-top: 2px solid;
}
.text-align{
bottom: 10px;
}
}
@media (max-width: 768px) {
.footer{
width:100% !important;
}
}

4 changes: 2 additions & 2 deletions forms-flow-web/src/components/Form/FormOperations/FormOperations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const FormOperations = React.memo(({ formData }) => {

const submitNew = (
<button
className="btn btn-primary"
className="btn btn-primary mr-2"
onClick={() => submitNewForm(formData._id)}
>
<i className="fa fa-pencil mr-1" />
Expand All @@ -70,7 +70,7 @@ const FormOperations = React.memo(({ formData }) => {
);
const viewOrEdit = (
<button
className="btn btn-outline-primary"
className="btn btn-outline-primary mr-2"
onClick={() => viewOrEditForm(formData._id)}
>
<i className="fa fa-pencil-square-o mr-1" />
Expand Down
98 changes: 49 additions & 49 deletions forms-flow-web/src/components/Form/List.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -583,57 +583,11 @@ const List = React.memo((props) => {
</h3>
</div>
</div>
<div className="flex-item-right">
{isDesigner && (
<Link
to={`${redirectUrl}formflow/create`}
className="btn btn-primary btn-left btn-sm"
>
<i className="fa fa-plus fa-lg" />{" "}
<Translation>{(t) => t("Create Form")}</Translation>
</Link>
)}
{isDesigner && (
<>
<Button
className="btn btn-primary btn-sm form-btn pull-right btn-left"
onClick={uploadClick}
title={t("Upload json form only")}
>
<i className="fa fa-upload fa-lg" aria-hidden="true" />{" "}
{t("Upload Form")}{" "}
</Button>
<input
type="file"
value=''
className="d-none"
multiple={false}
accept=".json,application/json"
onChange={(e) => {
fileUploaded(e);
}}
ref={uploadFormNode}
/>
</>
)}
{isDesigner && (
<>
<button
className="btn btn-outline-primary pull-right btn-left "
onClick={downloadForms}
disabled={formCheckList.length === 0}
>
<i className="fa fa-download fa-lg" aria-hidden="true" />{" "}
{t("Download Form")}{" "}
</button>
</>
)}
</div>
</div>
<section className="custom-grid grid-forms">
<Errors errors={errors} />
<div className=" row mt-2 mx-2">
<div className="col" style={{ marginLeft: "5px", marginTop: "-18px" }}>
<div className="col" style={{ marginLeft: "15px", marginTop: "-18px" }}>
<div className="input-group">
<span
className="sort-span"
Expand Down Expand Up @@ -662,7 +616,7 @@ const List = React.memo((props) => {
}}
/>
</span>
<div className="form-outline ml-3">
<div className="form-outline ml-2">
<input
type="search"
id="form1"
Expand All @@ -682,7 +636,7 @@ const List = React.memo((props) => {
{showClearButton && (
<button
type="button"
className="btn btn-outline-primary ml-2"
className="btn btn-outline-primary search-clear ml-2"
onClick={() => onClear()}
>
<i className="fa fa-times"></i>
Expand Down Expand Up @@ -723,6 +677,52 @@ const List = React.memo((props) => {
)}
</div>
</div>
<div className="d-flex">
{isDesigner && (
<Link
to={`${redirectUrl}formflow/create`}
className="btn btn-primary btn-left btn-sm"
>
<i className="fa fa-plus fa-lg" />{" "}
<Translation>{(t) => t("Create Form")}</Translation>
</Link>
)}
{isDesigner && (
<>
<Button
className="btn btn-primary btn-sm form-btn pull-right btn-left"
onClick={uploadClick}
title={t("Upload json form only")}
>
<i className="fa fa-upload fa-lg" aria-hidden="true" />{" "}
{t("Upload Form")}{" "}
</Button>
<input
type="file"
value=''
className="d-none"
multiple={false}
accept=".json,application/json"
onChange={(e) => {
fileUploaded(e);
}}
ref={uploadFormNode}
/>
</>
)}
{isDesigner && (
<>
<button
className="btn btn-primary pull-right btn-left "
onClick={downloadForms}
disabled={formCheckList.length === 0}
>
<i className="fa fa-download fa-lg" aria-hidden="true" />{" "}
{ formCheckList.length !== 0 && t("Download Form")}{" "}
</button>
</>
)}
</div>
</div>
<ToolkitProvider
bootstrap4
Expand Down
13 changes: 10 additions & 3 deletions forms-flow-web/src/components/Form/List.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@

.custom-grid {
.col {
border-left: 1px solid #ced4da;
min-height: 50px;
text-align: start;
padding-top: 15px;
Expand All @@ -35,6 +34,10 @@
.h5 {
font-weight: 400 !important;
}

.select {
max-width: 105px !important;
}

.btn-link {
font-size: 16px !important;
Expand All @@ -61,8 +64,8 @@
}

.btn {
margin-right: 5px;
margin-top: 1px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 7px;
}
}
Expand Down Expand Up @@ -101,16 +104,20 @@
height: 30px;
white-space: nowrap;
}

.progress-bar {
background-color: #ff0000ab;
}

.fileupload-fail {
color: #f85757;
float: right;
font-weight: normal
}

/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 800px) {

.flex-item-right,
.flex-item-left {
flex: 100%;
Expand Down
3 changes: 2 additions & 1 deletion forms-flow-web/src/components/Form/constants/table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export const userColumns = () => [
const customDropUp = ({ options, currSizePerPage, onSizePerPageChange }) => {
return (
<DropdownButton
className="ml-2"
drop="down"
variant="secondary"
title={currSizePerPage}
Expand Down Expand Up @@ -92,7 +93,7 @@ const getpageList = (count) => {
};

const customTotal = (from, to, size) => (
<span className="react-bootstrap-table-pagination-total" role="main">
<span className="react-bootstrap-table-pagination-total ml-2" role="main">
<Translation>{(t) => t("Showing")}</Translation> {from}{" "}
<Translation>{(t) => t("to")}</Translation> {to}{" "}
<Translation>{(t) => t("of")}</Translation> {size} <Translation>{(t) => t("results")}</Translation>
Expand Down

0 comments on commit a58b68f

Please sign in to comment.