misc fixes

2025-08-07 04:12:11 +00:00 · 2024-04-15 13:23:33 +02:00
parent d0a86f7d5e
commit fb029e67f1
13 changed files with 46 additions and 38 deletions
--- a/src/frontend/src/components/buttons/SplitButton.css.ts
+++ b/src/frontend/src/components/buttons/SplitButton.css.ts
@@ -6,7 +6,8 @@ import { vars } from '../../theme';
 export const button = style({
  borderTopRightRadius: 0,
  borderBottomRightRadius: 0,
-  '&::before': {
+
+  ':before': {
    borderRadius: '0 !important'
  }
 });
--- a/src/frontend/src/components/details/DetailsImage.tsx
+++ b/src/frontend/src/components/details/DetailsImage.tsx
@@ -120,7 +120,7 @@ function UploadModal({
      >
        <Image
          src={imageUrl}
-          imageProps={{ onLoad: () => URL.revokeObjectURL(imageUrl) }}
+          onLoad={() => URL.revokeObjectURL(imageUrl)}
          radius="sm"
          height={75}
          fit="contain"
--- a/src/frontend/src/components/forms/fields/ApiFormField.tsx
+++ b/src/frontend/src/components/forms/fields/ApiFormField.tsx
@@ -230,16 +230,16 @@ export function ApiFormField({
            id={fieldId}
            value={numericalValue}
            error={error?.message}
-            formatter={(value) => {
-              let v: any = parseFloat(value);
+            /*formatter={(props: any) => {
+              let v: any = parseFloat(props.value);

              if (Number.isNaN(v) || !Number.isFinite(v)) {
-                return value;
+                return props.value;
              }

              return `${1 * v.toFixed()}`;
-            }}
-            precision={definition.field_type == 'integer' ? 0 : 10}
+            }}*/
+            decimalScale={definition.field_type == 'integer' ? 0 : 10}
            onChange={(value) => onChange(value)}
          />
        );
--- a/src/frontend/src/components/forms/fields/ChoiceField.tsx
+++ b/src/frontend/src/components/forms/fields/ChoiceField.tsx
@@ -64,7 +64,7 @@ export function ChoiceField({
      required={definition.required}
      disabled={definition.disabled}
      leftSection={definition.icon}
-      withinPortal={true}
+      comboboxProps={{ withinPortal: true }}
    />
  );
 }
--- a/src/frontend/src/components/forms/fields/RelatedModelField.tsx
+++ b/src/frontend/src/components/forms/fields/RelatedModelField.tsx
@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro';
-import { Input, useMantineTheme } from '@mantine/core';
+import { Input, darken, useMantineTheme } from '@mantine/core';
 import { useColorScheme, useDebouncedValue } from '@mantine/hooks';
 import { useId } from '@mantine/hooks';
 import { useQuery } from '@tanstack/react-query';
@@ -245,16 +245,16 @@ export function RelatedModelField({
    } else {
      colors = {
        neutral0: vars.colors.white,
-        neutral5: theme.fn.darken(theme.white, 0.05),
-        neutral10: theme.fn.darken(theme.white, 0.1),
-        neutral20: theme.fn.darken(theme.white, 0.2),
-        neutral30: theme.fn.darken(theme.white, 0.3),
-        neutral40: theme.fn.darken(theme.white, 0.4),
-        neutral50: theme.fn.darken(theme.white, 0.5),
-        neutral60: theme.fn.darken(theme.white, 0.6),
-        neutral70: theme.fn.darken(theme.white, 0.7),
-        neutral80: theme.fn.darken(theme.white, 0.8),
-        neutral90: theme.fn.darken(theme.white, 0.9),
+        neutral5: darken(vars.colors.white, 0.05),
+        neutral10: darken(vars.colors.white, 0.1),
+        neutral20: darken(vars.colors.white, 0.2),
+        neutral30: darken(vars.colors.white, 0.3),
+        neutral40: darken(vars.colors.white, 0.4),
+        neutral50: darken(vars.colors.white, 0.5),
+        neutral60: darken(vars.colors.white, 0.6),
+        neutral70: darken(vars.colors.white, 0.7),
+        neutral80: darken(vars.colors.white, 0.8),
+        neutral90: darken(vars.colors.white, 0.9),
        primary: vars.colors.primaryColors[7],
        primary25: vars.colors.primaryColors[4],
        primary50: vars.colors.primaryColors[5],
--- a/src/frontend/src/components/images/ApiImage.tsx
+++ b/src/frontend/src/components/images/ApiImage.tsx
@@ -11,10 +11,14 @@ import { useState } from 'react';

 import { api } from '../../App';

+interface ApiImageProps extends ImageProps {
+  onClick?: (event: any) => void;
+}
+
 /**
 * Construct an image container which will load and display the image
 */
-export function ApiImage(props: ImageProps) {
+export function ApiImage(props: ApiImageProps) {
  const [image, setImage] = useState<string>('');

  const [authorized, setAuthorized] = useState<boolean>(true);
--- a/src/frontend/src/components/items/GettingStartedCarousel.tsx
+++ b/src/frontend/src/components/items/GettingStartedCarousel.tsx
@@ -44,9 +44,8 @@ export function GettingStartedCarousel({

  return (
    <Carousel
-      slideSize="50%"
-      breakpoints={[{ maxWidth: 'sm', slideSize: '100%', slideGap: rem(2) }]}
-      slideGap="xl"
+      slideSize={{ base: '50%', sm: '100%' }}
+      slideGap={{ base: 'xl', sm: rem(2) }}
      align="start"
    >
      {slides}
--- a/src/frontend/src/main.css.ts
+++ b/src/frontend/src/main.css.ts
@@ -93,7 +93,7 @@ export const subLink = style({
  //       : vars.colors.gray[0]
  // })

-  '&:active': vars.activeStyles
+  ':active': vars.activeStyles
 });

 export const docHover = style({
@@ -145,7 +145,7 @@ export const tab = style({
  height: 38,
  backgroundColor: 'transparent',

-  '&:hover': {
+  ':hover': {
    backgroundColor:
      //theme.colorScheme === 'dark' ? vars.colors.dark[5] : vars.colors.gray[1]
      vars.colors.gray[1]
--- a/src/frontend/src/pages/Index/Scan.tsx
+++ b/src/frontend/src/pages/Index/Scan.tsx
@@ -406,7 +406,6 @@ function HistoryTable({
          <Checkbox
            checked={selection.includes(item.id)}
            onChange={() => toggleRow(item.id)}
-            transitionDuration={0}
          />
        </td>
        <td>
@@ -442,7 +441,6 @@ function HistoryTable({
                indeterminate={
                  selection.length > 0 && selection.length !== data.length
                }
-                transitionDuration={0}
              />
            </th>
            <th>
--- a/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AccountSettings/UserThemePanel.tsx
@@ -66,11 +66,13 @@ export function UserTheme({ height }: { height: number }) {
    { value: 'oval', label: t`oval` },
    { value: 'dots', label: t`dots` }
  ];
-  const [loader, setLoader] = useState<string>(theme.loader);
+  const [themeLoader, setThemeLoader] = useLocalState((state) => [
+    state.loader,
+    state.setLoader
+  ]);
  function changeLoader(value: string | null) {
    if (value === null) return;
-    setLoader(value);
-    useLocalState.setState({ loader: value });
+    setThemeLoader(value);
  }

  return (
@@ -133,10 +135,10 @@ export function UserTheme({ height }: { height: number }) {
              <Group align="center">
                <Select
                  data={loaderDate}
-                  value={loader}
+                  value={themeLoader}
                  onChange={changeLoader}
                />
-                <Loader type={loader} mah={18} />
+                <Loader type={themeLoader} mah={18} />
              </Group>
            </td>
          </tr>
--- a/src/frontend/src/states/LocalState.tsx
+++ b/src/frontend/src/states/LocalState.tsx
@@ -20,6 +20,7 @@ interface LocalStateProps {
  blackColor: string;
  radius: MantineSize | (string & {}) | number;
  loader: string;
+  setLoader: (value: string) => void;
  lastUsedPanels: Record<string, string>;
  setLastUsedPanel: (panelKey: string) => (value: string) => void;
  tableColumnNames: Record<string, Record<string, string>>;
@@ -56,6 +57,9 @@ export const useLocalState = create<LocalStateProps>()(
      blackColor: '#000',
      radius: 'xs',
      loader: 'oval',
+      setLoader(value) {
+        set({ loader: value });
+      },
      // panels
      lastUsedPanels: {},
      setLastUsedPanel: (panelKey) => (value) => {
--- a/src/frontend/src/tables/Column.tsx
+++ b/src/frontend/src/tables/Column.tsx
@@ -14,7 +14,7 @@ export type TableColumn<T = any> = {
  width?: number; // The width of the column
  noWrap?: boolean; // Whether the column should wrap
  ellipsis?: boolean; // Whether the column should be ellipsized
-  textAlignment?: 'left' | 'center' | 'right'; // The text alignment of the column
+  textAlign?: 'left' | 'center' | 'right'; // The text alignment of the column
  cellsStyle?: any; // The style of the cells in the column
  extra?: any; // Extra data to pass to the render function
 };
--- a/src/frontend/src/tables/InvenTreeTable.tsx
+++ b/src/frontend/src/tables/InvenTreeTable.tsx
@@ -633,10 +633,10 @@ export function InvenTreeTable<T = any>({
          />

          <DataTable
-            withBorder
+            withTableBorder
            striped
            highlightOnHover
-            loaderVariant="dots"
+            loaderType="dots"
            pinLastColumn={tableProps.rowActions != undefined}
            idAccessor={tableProps.idAccessor}
            minHeight={300}
@@ -663,11 +663,11 @@ export function InvenTreeTable<T = any>({
            onCellClick={tableProps.onCellClick}
            defaultColumnProps={{
              noWrap: true,
-              textAlignment: 'left',
-              cellsStyle: {
+              textAlign: 'left',
+              cellsStyle: () => (theme) => ({
                // TODO @SchrodingersGat : Need a better way of handling "wide" cells,
                overflow: 'hidden'
-              }
+              })
            }}
          />
        </Box>