update TableHeader styles

2025-12-29 00:16:39 +01:00 · 2021-08-27 15:11:33 +10:00
parent 87a8fe3093
commit 0151bd4ab4
5 changed files with 108 additions and 95 deletions
--- a/www/src/components/Table/HiddenFields.tsx
+++ b/www/src/components/Table/HiddenFields.tsx
@@ -121,7 +121,14 @@ export default function HiddenFields() {
      <MultiSelect
        TextFieldProps={{
          style: { display: "none" },
-          SelectProps: { open, MenuProps: { anchorEl: buttonRef.current } },
+          SelectProps: {
+            open,
+            MenuProps: {
+              anchorEl: buttonRef.current,
+              anchorOrigin: { vertical: "bottom", horizontal: "left" },
+              transformOrigin: { vertical: "top", horizontal: "left" },
+            },
+          },
        }}
        {...({
          AutocompleteProps: {
--- a/www/src/components/Table/TableHeader/ImportCsv.tsx
+++ b/www/src/components/Table/TableHeader/ImportCsv.tsx
@@ -26,7 +26,6 @@ import ImportIcon from "assets/icons/Import";

 import FileUploadIcon from "assets/icons/FileUpload";
 import CheckIcon from "@material-ui/icons/CheckCircle";
-import GoIcon from "assets/icons/Go";

 import ImportCsvWizard, {
  IImportCsvWizardProps,
@@ -34,11 +33,14 @@ import ImportCsvWizard, {

 const useStyles = makeStyles((theme) =>
  createStyles({
-    tabPanel: { padding: theme.spacing(4) },
+    tabPanel: {
+      padding: theme.spacing(3),
+      width: 400,
+      height: 200,
+    },
    continueButton: {
-      margin: theme.spacing(-2, 2.5, 4),
+      margin: theme.spacing(-2, "auto", 3),
      display: "flex",
-      marginLeft: "auto",
    },

    dropzone: {
@@ -250,7 +252,8 @@ export default function ImportCsv({ render, PopoverProps }: IImportCsvProps) {
              inputProps={{ minRows: 5 }}
              autoFocus
              fullWidth
-              label="Paste your CSV here"
+              label="Paste CSV Text"
+              placeholder="column, column, …"
              onChange={(e) => {
                if (csvData !== null) setCsvData(null);
                handlePaste(e.target.value);
@@ -271,7 +274,8 @@ export default function ImportCsv({ render, PopoverProps }: IImportCsvProps) {
              variant="filled"
              autoFocus
              fullWidth
-              label="Paste the link to the CSV file here"
+              label="Paste URL to CSV File"
+              placeholder="https://"
              onChange={(e) => {
                if (csvData !== null) setCsvData(null);
                handleUrl(e.target.value);
@@ -283,7 +287,7 @@ export default function ImportCsv({ render, PopoverProps }: IImportCsvProps) {
        </TabContext>

        <Button
-          endIcon={<GoIcon />}
+          variant="contained"
          disabled={!validCsv}
          className={classes.continueButton}
          onClick={() => setOpenWizard(true)}
--- a/www/src/components/Table/TableHeader/RowHeight.tsx
+++ b/www/src/components/Table/TableHeader/RowHeight.tsx
@@ -1,61 +1,62 @@
+import { useRef, useState } from "react";
+
 import {
  useTheme,
-  Tooltip,
  TextField,
  ListSubheader,
  MenuItem,
 } from "@material-ui/core";
 import RowHeightIcon from "assets/icons/RowHeight";

+import TableHeaderButton from "./TableHeaderButton";
 import { useFiretableContext } from "contexts/FiretableContext";

 export default function RowHeight() {
  const theme = useTheme();

+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
  const { tableActions, tableState } = useFiretableContext();

  const rowHeight = tableState?.config.rowHeight;
  const updateConfig = tableActions?.table.updateConfig;

+  console.log(buttonRef);
+
  return (
-    <Tooltip title="Row Height">
-      <TextField
+    <>
+      <TableHeaderButton
        disabled={!tableState || !tableActions}
+        title="Row Height"
+        icon={<RowHeightIcon />}
+        onClick={handleOpen}
+        ref={buttonRef}
+      />
+
+      <TextField
        select
        value={rowHeight ?? 43}
        onChange={(event) => {
          if (updateConfig) updateConfig("rowHeight", event.target.value);
        }}
-        size="small"
-        InputProps={{
-          disableUnderline: true,
-          sx: {
-            height: 32,
-            "&:hover": {
-              backgroundColor: theme.palette.action.hover + " !important",
-            },
-
-            "& .MuiSelect-select": {
-              padding: theme.spacing(0.5, 1) + " !important",
-            },
-            "& .MuiSelect-icon": { display: "none" },
-          },
-        }}
-        InputLabelProps={{ style: { display: "none" } }}
+        style={{ display: "none" }}
        SelectProps={{
-          displayEmpty: true,
-          renderValue: () => (
-            <RowHeightIcon
-              style={{ display: "block", color: theme.palette.secondary.main }}
-            />
-          ),
+          open: open,
+          onOpen: handleOpen,
+          onClose: handleClose,
          MenuProps: {
+            anchorEl: buttonRef.current,
+            anchorOrigin: { vertical: "bottom", horizontal: "right" },
+            transformOrigin: { vertical: "top", horizontal: "right" },
            style: { zIndex: theme.zIndex.tooltip },
          },
        }}
        label="Row Height"
        id="row-height-select"
-        hiddenLabel
      >
        <ListSubheader>Row Height</ListSubheader>
        <MenuItem value={37}>Short</MenuItem>
@@ -64,6 +65,6 @@ export default function RowHeight() {
        <MenuItem value={100}>Venti</MenuItem>
        <MenuItem value={150}>Trenta</MenuItem>
      </TextField>
-    </Tooltip>
+    </>
  );
 }
--- a/www/src/components/Table/TableHeader/TableHeaderButton.tsx
+++ b/www/src/components/Table/TableHeader/TableHeaderButton.tsx
@@ -1,3 +1,4 @@
+import { forwardRef } from "react";
 import { Tooltip, Button, ButtonProps } from "@material-ui/core";

 export interface ITableHeaderButtonProps extends Partial<ButtonProps> {
@@ -5,11 +6,10 @@ export interface ITableHeaderButtonProps extends Partial<ButtonProps> {
  icon: React.ReactNode;
 }

-export default function TableHeaderButton({
-  title,
-  icon,
-  ...props
-}: ITableHeaderButtonProps) {
+export const TableHeaderButton = forwardRef(function TableHeaderButton_(
+  { title, icon, ...props }: ITableHeaderButtonProps,
+  ref: React.Ref<HTMLButtonElement>
+) {
  return (
    <Tooltip title={title}>
      <Button
@@ -19,9 +19,12 @@ export default function TableHeaderButton({
        style={{ minWidth: 40, height: 32, padding: 0 }}
        aria-label={title}
        {...props}
+        ref={ref}
      >
        {icon}
      </Button>
    </Tooltip>
  );
-}
+});
+
+export default TableHeaderButton;
--- a/www/src/components/Table/TableHeader/index.tsx
+++ b/www/src/components/Table/TableHeader/index.tsx
@@ -42,13 +42,8 @@ const useStyles = makeStyles((theme) =>
      "& > *": { paddingTop: "0 !important" },
    },

-    // addRowIcon: {
-    // fontSize: "26px !important",
-    // marginTop: -1,
-    // marginBottom: -1,
-    // },
-
-    spacer: { minWidth: theme.spacing(8) },
+    spacer: { width: theme.spacing(2) },
+    midSpacer: { minWidth: theme.spacing(8) },
  })
 );

@@ -82,53 +77,50 @@ export default function TableHeader() {
    >
      {!isCollectionGroup() && (
        <Grid item>
-          <ButtonGroup
+          {/* <ButtonGroup
            variant="contained"
            aria-label="Split button"
            style={{ display: "flex" }}
+          > */}
+          <Button
+            onClick={() => {
+              const requiredFields = Object.values(columns)
+                .map((column) => {
+                  if (column.config.required) {
+                    return column.key;
+                  }
+                })
+                .filter((c) => c);
+              const initialVal = Object.values(columns).reduce(
+                (acc, column) => {
+                  if (column.config?.defaultValue?.type === "static") {
+                    return {
+                      ...acc,
+                      [column.key]: column.config.defaultValue.value,
+                    };
+                  } else if (column.config?.defaultValue?.type === "null") {
+                    return { ...acc, [column.key]: null };
+                  } else return acc;
+                },
+                {}
+              );
+              tableActions?.row.add(
+                {
+                  ...initialVal,
+                  _ft_updatedBy: firetableUser(currentUser),
+                  _ft_createdBy: firetableUser(currentUser),
+                },
+                requiredFields
+              );
+            }}
+            variant="contained"
+            color="primary"
+            startIcon={<AddRowIcon />}
+            // sx={{ pr: 1.5 }}
          >
-            <Button
-              onClick={() => {
-                const requiredFields = Object.values(columns)
-                  .map((column) => {
-                    if (column.config.required) {
-                      return column.key;
-                    }
-                  })
-                  .filter((c) => c);
-                const initialVal = Object.values(columns).reduce(
-                  (acc, column) => {
-                    if (column.config?.defaultValue?.type === "static") {
-                      return {
-                        ...acc,
-                        [column.key]: column.config.defaultValue.value,
-                      };
-                    } else if (column.config?.defaultValue?.type === "null") {
-                      return { ...acc, [column.key]: null };
-                    } else return acc;
-                  },
-                  {}
-                );
-                tableActions?.row.add(
-                  {
-                    ...initialVal,
-                    _ft_updatedBy: firetableUser(currentUser),
-                    _ft_createdBy: firetableUser(currentUser),
-                  },
-                  requiredFields
-                );
-              }}
-              color="primary"
-              startIcon={
-                <AddRowIcon
-                //  className={classes.addRowIcon}
-                />
-              }
-              sx={{ pr: 1.5 }}
-            >
-              Add Row
-            </Button>
-            <Button
+            Add Row
+          </Button>
+          {/* <Button
              // aria-controls={open ? 'split-button-menu' : undefined}
              // aria-expanded={open ? 'true' : undefined}
              // aria-label="select merge strategy"
@@ -137,12 +129,12 @@ export default function TableHeader() {
            >
              <ArrowDropDownIcon />
            </Button>
-          </ButtonGroup>
+          </ButtonGroup> */}
        </Grid>
      )}

      {/* Spacer */}
-      <Grid item />
+      <Grid item className={classes.spacer} />

      <Grid item>
        <HiddenFields />
@@ -151,14 +143,14 @@ export default function TableHeader() {
        <Filters />
      </Grid>

-      <Grid item xs className={classes.spacer} />
+      <Grid item xs className={classes.midSpacer} />

      <Grid item>
        <RowHeight />
      </Grid>

      {/* Spacer */}
-      <Grid item />
+      <Grid item className={classes.spacer} />

      {!isCollectionGroup() && (
        <Grid item>
@@ -170,6 +162,9 @@ export default function TableHeader() {
        <Export />
      </Grid>

+      {/* Spacer */}
+      <Grid item className={classes.spacer} />
+
      {userClaims?.roles?.includes("ADMIN") && (
        <Grid item>
          <Extensions />
@@ -189,6 +184,9 @@ export default function TableHeader() {
          </Grid>
        )}

+      {/* Spacer */}
+      <Grid item className={classes.spacer} />
+
      <Grid item>
        <TableSettings />
      </Grid>