From 89b582890b00d0303cf809f0ddf55601bcc69e34 Mon Sep 17 00:00:00 2001 From: Ajay krishna Date: Thu, 16 Jan 2025 15:22:15 +0530 Subject: [PATCH 1/2] listing table styles update --- .../CustomComponents/InputDropdown.tsx | 2 +- .../CustomComponents/NoDataFound.tsx | 2 +- .../ReusableProcessTableRow.tsx | 2 +- .../CustomComponents/TableFooter.tsx | 16 ++++-- .../src/components/SvgIcons/index.tsx | 54 +++++++++++++++---- forms-flow-theme/scss/_button.scss | 10 +--- forms-flow-theme/scss/_forms.scss | 10 +++- forms-flow-theme/scss/_table.scss | 20 +++++-- 8 files changed, 84 insertions(+), 32 deletions(-) diff --git a/forms-flow-components/src/components/CustomComponents/InputDropdown.tsx b/forms-flow-components/src/components/CustomComponents/InputDropdown.tsx index c3d0fd0a3..5e71fd916 100644 --- a/forms-flow-components/src/components/CustomComponents/InputDropdown.tsx +++ b/forms-flow-components/src/components/CustomComponents/InputDropdown.tsx @@ -49,7 +49,7 @@ export const InputDropdown: React.FC = ({ onBlurDropDown }) => { const { t } = useTranslation(); - const primaryColor = StyleServices.getCSSVariable('primary'); + const primaryColor = StyleServices.getCSSVariable('--ff-primary'); const [isDropdownOpen, setIsDropdownOpen] = useState(false); const [inputValue, setInputValue] = useState(selectedOption || ''); const [filteredItems, setFilteredItems] = useState([]); diff --git a/forms-flow-components/src/components/CustomComponents/NoDataFound.tsx b/forms-flow-components/src/components/CustomComponents/NoDataFound.tsx index 44d228f0e..6901b701c 100644 --- a/forms-flow-components/src/components/CustomComponents/NoDataFound.tsx +++ b/forms-flow-components/src/components/CustomComponents/NoDataFound.tsx @@ -8,7 +8,7 @@ export const NoDataFound: React.FC = () => { - {t("Nothing is found. Please try again.")} + {t("Nothing is found based on your search query. Please try again.")} diff --git a/forms-flow-components/src/components/CustomComponents/ReusableProcessTableRow.tsx b/forms-flow-components/src/components/CustomComponents/ReusableProcessTableRow.tsx index a9b9aec73..a773f787e 100644 --- a/forms-flow-components/src/components/CustomComponents/ReusableProcessTableRow.tsx +++ b/forms-flow-components/src/components/CustomComponents/ReusableProcessTableRow.tsx @@ -22,7 +22,7 @@ export const ReusableProcessTableRow: React.FC = ({ item, return ( - {item.name} + {item.name} {item.processKey} diff --git a/forms-flow-components/src/components/CustomComponents/TableFooter.tsx b/forms-flow-components/src/components/CustomComponents/TableFooter.tsx index 05848a6a6..5d7768651 100644 --- a/forms-flow-components/src/components/CustomComponents/TableFooter.tsx +++ b/forms-flow-components/src/components/CustomComponents/TableFooter.tsx @@ -2,8 +2,8 @@ import React from "react"; import { useTranslation } from "react-i18next"; import Pagination from "react-js-pagination"; import { Dropdown } from "react-bootstrap"; -import { DownArrowIcon } from "../SvgIcons/index"; - +import { DownArrowIcon, AngleLeftIcon, AngleRightIcon } from "../SvgIcons/index"; +import { StyleServices } from "@formsflow/service"; interface PageOption { value: number; text: string; @@ -32,10 +32,10 @@ export const TableFooter: React.FC = ({
- + {t("Showing")} {limit * activePage - (limit - 1)} {t("to")}  {Math.min(limit * activePage, totalCount)} {t("of")}  - {totalCount} {t("results")} + {totalCount}
@@ -51,6 +51,12 @@ export const TableFooter: React.FC = ({ itemClass="page-item" linkClass="page-link" onChange={handlePageChange} + prevPageText={ + {}}/> + } + nextPageText={ + {}} /> + } /> @@ -66,6 +72,7 @@ export const TableFooter: React.FC = ({ data-testid="page-limit-dropdown-toggle" > {limit} + {pageOptions.map((option) => ( @@ -80,7 +87,6 @@ export const TableFooter: React.FC = ({ ))} - diff --git a/forms-flow-components/src/components/SvgIcons/index.tsx b/forms-flow-components/src/components/SvgIcons/index.tsx index 52d4a934c..b2c7b5583 100644 --- a/forms-flow-components/src/components/SvgIcons/index.tsx +++ b/forms-flow-components/src/components/SvgIcons/index.tsx @@ -372,21 +372,20 @@ export const IButton = ({ color = grayColor, ...props }) => ( ); -export const DownArrowIcon = ({ color = grayColor, ...props }) => ( +export const DownArrowIcon = ({ color = baseColor, ...props }) => ( ); @@ -453,6 +452,26 @@ export const AngleRightIcon = ({ color = baseColor, onClick, ...props }) => ( ); +export const AngleLeftIcon = ({ color = baseColor, onClick, ...props }) => ( + + + +); + + export const UploadIcon = ({ color = baseColor, ...props }) => ( ( ); +export const SortIcon = ({ color = grayColor, ...props }) => ( + + + +); \ No newline at end of file diff --git a/forms-flow-theme/scss/_button.scss b/forms-flow-theme/scss/_button.scss index 6d6b6b652..2683578ba 100644 --- a/forms-flow-theme/scss/_button.scss +++ b/forms-flow-theme/scss/_button.scss @@ -473,15 +473,7 @@ $btn-font-weight: bold; min-width: $dropdown-btn-size !important; min-height: $dropdown-btn-size !important; margin: 0 !important; - - &:hover, - &:active, - &:focus { - color: $black-color !important; - background-color: $gray-000 !important; - font-weight: $btn-font-weight; - outline: transparent !important; - } + gap: var(--spacer-075) !important;; } .dropdown-toggle { diff --git a/forms-flow-theme/scss/_forms.scss b/forms-flow-theme/scss/_forms.scss index 589419daf..658d76cfd 100644 --- a/forms-flow-theme/scss/_forms.scss +++ b/forms-flow-theme/scss/_forms.scss @@ -124,7 +124,7 @@ select option:hover { font-size: var(--font-size-xs); font-weight: var(--font-weight-sm); line-height: var(--text-line-height); - padding: var(--spacer-050) var(--spacer-200) var(--spacer-050) var(--spacer-100) !important; + padding: var(--spacer-075) var(--spacer-100) !important; height: 2.063rem; @@ -140,6 +140,14 @@ select option:hover { border: 1px solid var(--ff-gray-800); background-color: var(--ff-gray-100) !important; } + &::placeholder { + color: var(--ff-gray-300) !important; + font-size: var(--font-size-sm) !important; + font-weight: var(--font-weight-sm); + } + &:focus::placeholder { + color: var(--ff-gray-300) !important; + } } .search-box-icon { diff --git a/forms-flow-theme/scss/_table.scss b/forms-flow-theme/scss/_table.scss index 050664c06..e1e2a9627 100644 --- a/forms-flow-theme/scss/_table.scss +++ b/forms-flow-theme/scss/_table.scss @@ -8,7 +8,7 @@ $status-radius: 50%; .custom-tables-wrapper { height: auto; - max-height: calc(100vh - 6.8rem); + max-height: calc(100vh - 4rem); overflow-y: auto; overflow-x: hidden; border-radius: $tr-th-border-radius !important; @@ -21,10 +21,9 @@ $status-radius: 50%; border-spacing: 0 !important; border-radius: var(--radius-0150) !important; - th, td { vertical-align: middle !important; - padding: var(--spacer-125) var(--spacer-150) !important; + padding: var(--spacer-050) var(--spacer-125) !important; font-size: var(--font-size-xs) !important; } @@ -34,7 +33,8 @@ $status-radius: 50%; width: 100%; z-index: 2; background-color: var(--ff-white); - + font-size: var(--font-size-xs) !important; + vertical-align: middle !important; // Table Header Styles th { width: $th-width; @@ -42,6 +42,7 @@ $status-radius: 50%; top: 0; z-index: $th-z-index-default; background-color: inherit; + padding: var(--spacer-100) var(--spacer-125) !important; &:first-child, &:last-child { @@ -183,7 +184,6 @@ $status-radius: 50%; text-align: inherit; display: flex; align-items: center; - justify-content: space-between; width: 100%; } .text-ellipsis { @@ -208,3 +208,13 @@ $status-radius: 50%; } } } +//table header sortIcon rotation +.arrow-up { + transform: rotate(0deg); + transition: transform 0.3s ease; +} + +.arrow-down { + transform: rotate(180deg); + transition: transform 0.3s ease; +} From dbc581170c35e774956ff71b9b56d39fd7b663c2 Mon Sep 17 00:00:00 2001 From: Ajay krishna Date: Fri, 17 Jan 2025 22:44:32 +0530 Subject: [PATCH 2/2] sonar issue fix --- .../src/components/CustomComponents/TableFooter.tsx | 1 - forms-flow-theme/scss/_button.scss | 2 +- forms-flow-theme/scss/_table.scss | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/forms-flow-components/src/components/CustomComponents/TableFooter.tsx b/forms-flow-components/src/components/CustomComponents/TableFooter.tsx index 5d7768651..f2262c093 100644 --- a/forms-flow-components/src/components/CustomComponents/TableFooter.tsx +++ b/forms-flow-components/src/components/CustomComponents/TableFooter.tsx @@ -3,7 +3,6 @@ import { useTranslation } from "react-i18next"; import Pagination from "react-js-pagination"; import { Dropdown } from "react-bootstrap"; import { DownArrowIcon, AngleLeftIcon, AngleRightIcon } from "../SvgIcons/index"; -import { StyleServices } from "@formsflow/service"; interface PageOption { value: number; text: string; diff --git a/forms-flow-theme/scss/_button.scss b/forms-flow-theme/scss/_button.scss index 2683578ba..f300becf4 100644 --- a/forms-flow-theme/scss/_button.scss +++ b/forms-flow-theme/scss/_button.scss @@ -473,7 +473,7 @@ $btn-font-weight: bold; min-width: $dropdown-btn-size !important; min-height: $dropdown-btn-size !important; margin: 0 !important; - gap: var(--spacer-075) !important;; + gap: var(--spacer-075) !important; } .dropdown-toggle { diff --git a/forms-flow-theme/scss/_table.scss b/forms-flow-theme/scss/_table.scss index e1e2a9627..915ab9aab 100644 --- a/forms-flow-theme/scss/_table.scss +++ b/forms-flow-theme/scss/_table.scss @@ -8,7 +8,7 @@ $status-radius: 50%; .custom-tables-wrapper { height: auto; - max-height: calc(100vh - 4rem); + max-height: calc(100vh - 5.2rem); overflow-y: auto; overflow-x: hidden; border-radius: $tr-th-border-radius !important;