From d9de96ea7fcca9ec3ed75caac56fd0b3f9dccfb5 Mon Sep 17 00:00:00 2001 From: Darin Kelkhoff Date: Thu, 25 Jul 2024 08:36:13 -0500 Subject: [PATCH 1/6] Make whole top-right bar display:none at under md breakpoints --- src/qqq/components/horseshoe/NavBar.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/qqq/components/horseshoe/NavBar.tsx b/src/qqq/components/horseshoe/NavBar.tsx index bcd1e07..24e3f94 100644 --- a/src/qqq/components/horseshoe/NavBar.tsx +++ b/src/qqq/components/horseshoe/NavBar.tsx @@ -25,6 +25,7 @@ import Autocomplete from "@mui/material/Autocomplete"; import Icon from "@mui/material/Icon"; import IconButton from "@mui/material/IconButton"; import ListItemIcon from "@mui/material/ListItemIcon"; +import {Theme} from "@mui/material/styles"; import TextField from "@mui/material/TextField"; import Toolbar from "@mui/material/Toolbar"; import React, {useContext, useEffect, useRef, useState} from "react"; @@ -225,6 +226,19 @@ function NavBar({absolute, light, isMini}: Props): JSX.Element const breadcrumbTitle = fullPathToLabel(fullPath, route[route.length - 1]); + /////////////////////////////////////////////////////////////////////////////////////////////// + // set the right-half of the navbar up so that below the 'md' breakpoint, it just disappears // + /////////////////////////////////////////////////////////////////////////////////////////////// + const navbarRowRight = (theme: Theme, {isMini}: any) => + { + return { + [theme.breakpoints.down("md")]: { + display: "none", + }, + ...navbarRow(theme, isMini) + } + }; + return ( {isMini ? null : ( - navbarRow(theme, {isMini})}> + navbarRowRight(theme, {isMini})}> {renderHistory()} From 97bab5797433aa66dd8ff88bfaaff8be7a69610c Mon Sep 17 00:00:00 2001 From: Darin Kelkhoff Date: Thu, 25 Jul 2024 08:37:37 -0500 Subject: [PATCH 2/6] Re-do css on tables, to do the whole table as divs with display: grid --- .../components/widgets/tables/DataTable.tsx | 236 +++++++++--------- .../tables/cells/DataTableBodyCell.tsx | 2 +- .../tables/cells/DataTableHeadCell.tsx | 9 +- 3 files changed, 119 insertions(+), 128 deletions(-) diff --git a/src/qqq/components/widgets/tables/DataTable.tsx b/src/qqq/components/widgets/tables/DataTable.tsx index d039c2a..1cb35c9 100644 --- a/src/qqq/components/widgets/tables/DataTable.tsx +++ b/src/qqq/components/widgets/tables/DataTable.tsx @@ -321,137 +321,133 @@ function DataTable({ innerBoxStyle = {overflowY: "auto", scrollbarGutter: "stable"}; } + /////////////////////////////////////////////////////////////////////////////////// + // note - at one point, we had the table's sx including: whiteSpace: "nowrap"... // + /////////////////////////////////////////////////////////////////////////////////// return - +
{ includeHead && ( - - {headerGroups.map((headerGroup: any, i: number) => ( - - {headerGroup.headers.map((column: any) => ( - column.type !== "hidden" && ( - - {column.render("header")} - - ) - ))} - - ))} - + headerGroups.map((headerGroup: any, i: number) => ( + headerGroup.headers.map((column: any) => ( + column.type !== "hidden" && ( + + {column.render("header")} + + ) + )) + )) ) } - - {rows.map((row: any, key: any) => + {rows.map((row: any, key: any) => + { + prepareRow(row); + + let overrideNoEndBorder = false; + + ////////////////////////////////////////////////////////////////////////////////// + // don't do an end-border on nested rows - unless they're the last one in a set // + ////////////////////////////////////////////////////////////////////////////////// + if (row.depth > 0) { - prepareRow(row); - - let overrideNoEndBorder = false; - - ////////////////////////////////////////////////////////////////////////////////// - // don't do an end-border on nested rows - unless they're the last one in a set // - ////////////////////////////////////////////////////////////////////////////////// - if (row.depth > 0) + overrideNoEndBorder = true; + if (key + 1 < rows.length && rows[key + 1].depth == 0) { - overrideNoEndBorder = true; - if (key + 1 < rows.length && rows[key + 1].depth == 0) - { - overrideNoEndBorder = false; - } + overrideNoEndBorder = false; } + } - /////////////////////////////////////// - // don't do end-border on the footer // - /////////////////////////////////////// - if (isFooter) - { - overrideNoEndBorder = true; - } + /////////////////////////////////////// + // don't do end-border on the footer // + /////////////////////////////////////// + if (isFooter) + { + overrideNoEndBorder = true; + } - let background = "initial"; - if (isFooter) - { - background = "#EEEEEE"; - } - else if (row.depth > 0 || row.isExpanded) - { - background = "#FAFAFA"; - } + let background = "initial"; + if (isFooter) + { + background = "#EEEEEE"; + } + else if (row.depth > 0 || row.isExpanded) + { + background = "#FAFAFA"; + } - return ( - - {row.cells.map((cell: any) => ( - cell.column.type !== "hidden" && ( - - { - cell.column.type === "default" && ( - cell.value && "number" === typeof cell.value ? ( - {cell.value.toLocaleString()} - ) : ({cell.render("Cell")}) - ) - } - { - cell.column.type === "htmlAndTooltip" && ( - - - - {parse(cell.value)} - - - - ) - } - { - cell.column.type === "html" && ( - {parse(cell.value ?? "")} - ) - } - { - cell.column.type === "composite" && ( - - - - ) - } - { - cell.column.type === "block" && ( - - - - ) - } - { - cell.column.type === "image" && row.values["imageTotal"] && ( - - ) - } - { - cell.column.type === "image" && !row.values["imageTotal"] && ( - - ) - } - { - (cell.column.id === "__expander") && cell.render("cell") - } - - ) - ))} - - ); - })} - - + return ( + row.cells.map((cell: any) => ( + cell.column.type !== "hidden" && ( + + { + cell.column.type === "default" && ( + cell.value && "number" === typeof cell.value ? ( + {cell.value.toLocaleString()} + ) : ({cell.render("Cell")}) + ) + } + { + cell.column.type === "htmlAndTooltip" && ( + + + + {parse(cell.value)} + + + + ) + } + { + cell.column.type === "html" && ( + {parse(cell.value ?? "")} + ) + } + { + cell.column.type === "composite" && ( + + + + ) + } + { + cell.column.type === "block" && ( + + + + ) + } + { + cell.column.type === "image" && row.values["imageTotal"] && ( + + ) + } + { + cell.column.type === "image" && !row.values["imageTotal"] && ( + + ) + } + { + (cell.column.id === "__expander") && cell.render("cell") + } + + ) + )) + ); + })}
; } diff --git a/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx b/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx index 5f22d53..2e13d22 100644 --- a/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx +++ b/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx @@ -36,7 +36,7 @@ function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element { return ( ({ borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`, - "&:nth-of-type(1)": { - paddingLeft: "1rem" - }, - "&:last-child": { - paddingRight: "1rem" - }, + position: "sticky", top: 0, background: "white" })} > Date: Thu, 25 Jul 2024 09:27:53 -0500 Subject: [PATCH 3/6] Re-do css on table skeleton, per changes in the included DataTable*Cell components --- .../components/widgets/tables/TableCard.tsx | 46 ++++++------------- 1 file changed, 15 insertions(+), 31 deletions(-) diff --git a/src/qqq/components/widgets/tables/TableCard.tsx b/src/qqq/components/widgets/tables/TableCard.tsx index cdfcaba..2240fb2 100644 --- a/src/qqq/components/widgets/tables/TableCard.tsx +++ b/src/qqq/components/widgets/tables/TableCard.tsx @@ -93,41 +93,25 @@ function TableCard({noRowsFoundHTML, data, rowsPerPage, hidePaginationDropdown, /> : noRowsFoundHTML ? - - { - noRowsFoundHTML ? ( - parse(noRowsFoundHTML) - ) : "No rows found" - } + + {noRowsFoundHTML ? (parse(noRowsFoundHTML)) : "No rows found"} : - - - - {Array(8).fill(0).map((_, i) => - - - - )} - - - - {Array(5).fill(0).map((_, i) => - - {Array(8).fill(0).map((_, j) => - - - - )} - - )} - +
+ {Array(8).fill(0).map((_, i) => + + + + )} + {Array(5).fill(0).map((_, i) => + Array(8).fill(0).map((_, j) => + + + + ) + )}
} From 3fa017e8b98f18319e111c9b3ce0283144339870 Mon Sep 17 00:00:00 2001 From: Darin Kelkhoff Date: Thu, 25 Jul 2024 09:28:28 -0500 Subject: [PATCH 4/6] Update selector and widths per css change --- .../selenium/tests/DashboardTableWidgetExportTest.java | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/DashboardTableWidgetExportTest.java b/src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/DashboardTableWidgetExportTest.java index 23ad722..61e737e 100755 --- a/src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/DashboardTableWidgetExportTest.java +++ b/src/test/java/com/kingsrook/qqq/frontend/materialdashboard/selenium/tests/DashboardTableWidgetExportTest.java @@ -56,8 +56,8 @@ public class DashboardTableWidgetExportTest extends QBaseSeleniumTest "label": "Sample Table Widget", "footerHTML": "Updated at 2023-10-17 09:11:38 AM CDT", "columns": [ - { "type": "html", "header": "Id", "accessor": "id", "width": "1%" }, - { "type": "html", "header": "Name", "accessor": "name", "width": "99%" } + { "type": "html", "header": "Id", "accessor": "id", "width": "30px" }, + { "type": "html", "header": "Name", "accessor": "name", "width": "1fr" } ], "rows": [ { "id": "1", "name": "Homer S." }, @@ -83,7 +83,7 @@ public class DashboardTableWidgetExportTest extends QBaseSeleniumTest // assert that the table widget rendered its header and some contents // //////////////////////////////////////////////////////////////////////// qSeleniumLib.waitForSelectorContaining("#SampleTableWidget h6", "Sample Table Widget"); - qSeleniumLib.waitForSelectorContaining("#SampleTableWidget table a", "Homer S."); + qSeleniumLib.waitForSelectorContaining("#SampleTableWidget a", "Homer S."); qSeleniumLib.waitForSelectorContaining("#SampleTableWidget div", "Updated at 2023-10-17 09:11:38 AM CDT"); ///////////////////////////// From e604f47231d0f48f87ecbeea0b6e6bddef905852 Mon Sep 17 00:00:00 2001 From: Darin Kelkhoff Date: Fri, 26 Jul 2024 10:34:18 -0500 Subject: [PATCH 5/6] Fixes for data table css redo (a z-index on headers, and use background color (as sx prop) in body cells --- .../components/widgets/tables/cells/DataTableBodyCell.tsx | 8 +++++--- .../components/widgets/tables/cells/DataTableHeadCell.tsx | 3 ++- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx b/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx index 2e13d22..7623de3 100644 --- a/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx +++ b/src/qqq/components/widgets/tables/cells/DataTableBodyCell.tsx @@ -19,7 +19,7 @@ * along with this program. If not, see . */ -import Box from "@mui/material/Box"; +import {Box} from "@mui/material"; import {Theme} from "@mui/material/styles"; import colors from "qqq/assets/theme/base/colors"; import {ReactNode} from "react"; @@ -30,9 +30,10 @@ interface Props children: ReactNode; noBorder?: boolean; align?: "left" | "right" | "center"; + sx?: any; } -function DataTableBodyCell({noBorder, align, children}: Props): JSX.Element +function DataTableBodyCell({noBorder, align, sx, children}: Props): JSX.Element { return ( ({ borderBottom: `${borderWidth[1]} solid ${colors.grayLines.main}`, - position: "sticky", top: 0, background: "white" + position: "sticky", top: 0, background: "white", + zIndex: 1 // so if body rows scroll behind it, they don't show through })} > Date: Mon, 12 Aug 2024 12:09:29 -0500 Subject: [PATCH 6/6] CE-1555: updates 'accordian' behavior of tables --- src/qqq/components/widgets/tables/DataTable.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/qqq/components/widgets/tables/DataTable.tsx b/src/qqq/components/widgets/tables/DataTable.tsx index 1cb35c9..34772ce 100644 --- a/src/qqq/components/widgets/tables/DataTable.tsx +++ b/src/qqq/components/widgets/tables/DataTable.tsx @@ -19,15 +19,12 @@ */ import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData"; -import {tooltipClasses, TooltipProps} from "@mui/material"; +import {Box, tooltipClasses, TooltipProps} from "@mui/material"; import Autocomplete from "@mui/material/Autocomplete"; -import Box from "@mui/material/Box"; import Icon from "@mui/material/Icon"; import {styled} from "@mui/material/styles"; import Table from "@mui/material/Table"; -import TableBody from "@mui/material/TableBody"; import TableContainer from "@mui/material/TableContainer"; -import TableRow from "@mui/material/TableRow"; import Tooltip from "@mui/material/Tooltip"; import parse from "html-react-parser"; import colors from "qqq/assets/theme/base/colors"; @@ -166,7 +163,7 @@ function DataTable({ })} > {/* float this icon to keep it "out of the flow" - in other words, to keep it from making the row taller than it otherwise would be... */} - {row.isExpanded ? "expand_less" : "chevron_right"} + {row.isExpanded ? "expand_less" : "chevron_left"} ) : null, }, @@ -312,7 +309,7 @@ function DataTable({ { boxStyle = isFooter ? {borderTop: `0.0625rem solid ${colors.grayLines.main};`, backgroundColor: "#EEEEEE"} - : {flexGrow: 1, overflowY: "scroll", scrollbarGutter: "stable", marginBottom: "-1px"}; + : {height: fixedHeight ? `${fixedHeight}px` : "auto", flexGrow: 1, overflowY: "scroll", scrollbarGutter: "stable", marginBottom: "-1px"}; } let innerBoxStyle = {}; @@ -453,7 +450,7 @@ function DataTable({ } return ( - + {entriesPerPage && ((hidePaginationDropdown !== undefined && !hidePaginationDropdown) || canSearch) ? ( {entriesPerPage && (hidePaginationDropdown === undefined || !hidePaginationDropdown) && (