From 355b4937da9a00aef24ecbec2a1f104fe1e92190 Mon Sep 17 00:00:00 2001 From: Matthias Mair Date: Tue, 3 Sep 2024 05:01:29 +0200 Subject: [PATCH] [PUI] Make actions recognisable (#8005) * Make dropdowns better recogniseable Closes https://github.com/invenhost/InvenTree/issues/98 * change to button with section * only draw border if needed * allign drowdowns in header * use light instead of subtle * refactor option dropdowns to reduce duplications --- .../src/components/buttons/AdminButton.tsx | 1 + .../src/components/items/ActionDropdown.tsx | 47 ++++++++++++++++--- src/frontend/src/pages/build/BuildDetail.tsx | 8 ++-- .../src/pages/company/CompanyDetail.tsx | 8 ++-- .../pages/company/ManufacturerPartDetail.tsx | 8 ++-- .../src/pages/company/SupplierPartDetail.tsx | 8 ++-- .../src/pages/part/CategoryDetail.tsx | 8 ++-- src/frontend/src/pages/part/PartDetail.tsx | 7 ++- .../pages/purchasing/PurchaseOrderDetail.tsx | 8 ++-- .../src/pages/sales/ReturnOrderDetail.tsx | 8 ++-- .../src/pages/sales/SalesOrderDetail.tsx | 8 ++-- .../src/pages/stock/LocationDetail.tsx | 13 ++--- src/frontend/src/pages/stock/StockDetail.tsx | 7 ++- .../src/tables/machine/MachineListTable.tsx | 9 ++-- 14 files changed, 79 insertions(+), 69 deletions(-) diff --git a/src/frontend/src/components/buttons/AdminButton.tsx b/src/frontend/src/components/buttons/AdminButton.tsx index 7adfe73f72..0b59e0be9e 100644 --- a/src/frontend/src/components/buttons/AdminButton.tsx +++ b/src/frontend/src/components/buttons/AdminButton.tsx @@ -80,6 +80,7 @@ export default function AdminButton(props: AdminButtonProps) { tooltip={t`Open in admin interface`} hidden={!enabled} onClick={openAdmin} + tooltipAlignment="bottom" /> ); } diff --git a/src/frontend/src/components/items/ActionDropdown.tsx b/src/frontend/src/components/items/ActionDropdown.tsx index 48603c880c..aca665ffd6 100644 --- a/src/frontend/src/components/items/ActionDropdown.tsx +++ b/src/frontend/src/components/items/ActionDropdown.tsx @@ -1,6 +1,6 @@ import { t } from '@lingui/macro'; import { - ActionIcon, + Button, Indicator, IndicatorProps, Menu, @@ -8,7 +8,9 @@ import { } from '@mantine/core'; import { modals } from '@mantine/modals'; import { + IconChevronDown, IconCopy, + IconDotsVertical, IconEdit, IconLink, IconQrcode, @@ -42,13 +44,15 @@ export function ActionDropdown({ tooltip, actions, disabled = false, - hidden = false + hidden = false, + noindicator = false }: { icon: ReactNode; tooltip: string; actions: ActionDropdownItem[]; disabled?: boolean; hidden?: boolean; + noindicator?: boolean; }) { const hasActions = useMemo(() => { return actions.some((action) => !action.hidden); @@ -66,16 +70,25 @@ export function ActionDropdown({ - @@ -110,6 +123,26 @@ export function ActionDropdown({ ) : null; } +export function OptionsActionDropdown({ + actions = [], + tooltip = t`Options`, + hidden = false +}: { + actions: ActionDropdownItem[]; + tooltip?: string; + hidden?: boolean; +}) { + return ( + } + tooltip={tooltip} + actions={actions} + hidden={hidden} + noindicator + /> + ); +} + // Dropdown menu for barcode actions export function BarcodeActionDropdown({ model, diff --git a/src/frontend/src/pages/build/BuildDetail.tsx b/src/frontend/src/pages/build/BuildDetail.tsx index 694a78643f..576e2095be 100644 --- a/src/frontend/src/pages/build/BuildDetail.tsx +++ b/src/frontend/src/pages/build/BuildDetail.tsx @@ -4,7 +4,6 @@ import { IconChecklist, IconClipboardCheck, IconClipboardList, - IconDots, IconInfoCircle, IconList, IconListCheck, @@ -25,12 +24,12 @@ import { DetailsImage } from '../../components/details/DetailsImage'; import { ItemDetailsGrid } from '../../components/details/ItemDetails'; import NotesEditor from '../../components/editors/NotesEditor'; import { - ActionDropdown, BarcodeActionDropdown, CancelItemAction, DuplicateItemAction, EditItemAction, - HoldItemAction + HoldItemAction, + OptionsActionDropdown } from '../../components/items/ActionDropdown'; import InstanceDetail from '../../components/nav/InstanceDetail'; import { PageDetail } from '../../components/nav/PageDetail'; @@ -474,9 +473,8 @@ export default function BuildDetail() { items={[build.pk]} enableReports />, - } actions={[ EditItemAction({ onClick: () => editBuild.open(), diff --git a/src/frontend/src/pages/company/CompanyDetail.tsx b/src/frontend/src/pages/company/CompanyDetail.tsx index 77e1f75f49..33a55984f9 100644 --- a/src/frontend/src/pages/company/CompanyDetail.tsx +++ b/src/frontend/src/pages/company/CompanyDetail.tsx @@ -3,7 +3,6 @@ import { Grid, Skeleton, Stack } from '@mantine/core'; import { IconBuildingFactory2, IconBuildingWarehouse, - IconDots, IconInfoCircle, IconMap2, IconNotes, @@ -25,9 +24,9 @@ import { DetailsImage } from '../../components/details/DetailsImage'; import { ItemDetailsGrid } from '../../components/details/ItemDetails'; import NotesEditor from '../../components/editors/NotesEditor'; import { - ActionDropdown, DeleteItemAction, - EditItemAction + EditItemAction, + OptionsActionDropdown } from '../../components/items/ActionDropdown'; import { Breadcrumb } from '../../components/nav/BreadcrumbList'; import InstanceDetail from '../../components/nav/InstanceDetail'; @@ -302,9 +301,8 @@ export default function CompanyDetail(props: Readonly) { const companyActions = useMemo(() => { return [ , - } actions={[ EditItemAction({ hidden: !user.hasChangeRole(UserRoles.purchase_order), diff --git a/src/frontend/src/pages/company/ManufacturerPartDetail.tsx b/src/frontend/src/pages/company/ManufacturerPartDetail.tsx index d1120c32f9..64265c2f55 100644 --- a/src/frontend/src/pages/company/ManufacturerPartDetail.tsx +++ b/src/frontend/src/pages/company/ManufacturerPartDetail.tsx @@ -2,7 +2,6 @@ import { t } from '@lingui/macro'; import { Grid, Skeleton, Stack } from '@mantine/core'; import { IconBuildingWarehouse, - IconDots, IconInfoCircle, IconList, IconNotes, @@ -17,10 +16,10 @@ import { DetailsImage } from '../../components/details/DetailsImage'; import { ItemDetailsGrid } from '../../components/details/ItemDetails'; import NotesEditor from '../../components/editors/NotesEditor'; import { - ActionDropdown, DeleteItemAction, DuplicateItemAction, - EditItemAction + EditItemAction, + OptionsActionDropdown } from '../../components/items/ActionDropdown'; import InstanceDetail from '../../components/nav/InstanceDetail'; import { PageDetail } from '../../components/nav/PageDetail'; @@ -236,9 +235,8 @@ export default function ManufacturerPartDetail() { model={ModelType.manufacturerpart} pk={manufacturerPart.pk} />, - } actions={[ DuplicateItemAction({ hidden: !user.hasAddRole(UserRoles.purchase_order), diff --git a/src/frontend/src/pages/company/SupplierPartDetail.tsx b/src/frontend/src/pages/company/SupplierPartDetail.tsx index 2f536ce93d..d0471cb125 100644 --- a/src/frontend/src/pages/company/SupplierPartDetail.tsx +++ b/src/frontend/src/pages/company/SupplierPartDetail.tsx @@ -2,7 +2,6 @@ import { t } from '@lingui/macro'; import { Grid, Skeleton, Stack } from '@mantine/core'; import { IconCurrencyDollar, - IconDots, IconInfoCircle, IconNotes, IconPackages, @@ -18,11 +17,11 @@ import { DetailsImage } from '../../components/details/DetailsImage'; import { ItemDetailsGrid } from '../../components/details/ItemDetails'; import NotesEditor from '../../components/editors/NotesEditor'; import { - ActionDropdown, BarcodeActionDropdown, DeleteItemAction, DuplicateItemAction, - EditItemAction + EditItemAction, + OptionsActionDropdown } from '../../components/items/ActionDropdown'; import InstanceDetail from '../../components/nav/InstanceDetail'; import { PageDetail } from '../../components/nav/PageDetail'; @@ -272,9 +271,8 @@ export default function SupplierPartDetail() { hash={supplierPart.barcode_hash} perm={user.hasChangeRole(UserRoles.purchase_order)} />, - } actions={[ DuplicateItemAction({ hidden: !user.hasAddRole(UserRoles.purchase_order), diff --git a/src/frontend/src/pages/part/CategoryDetail.tsx b/src/frontend/src/pages/part/CategoryDetail.tsx index 2f0c8f6ada..69c0180ca7 100644 --- a/src/frontend/src/pages/part/CategoryDetail.tsx +++ b/src/frontend/src/pages/part/CategoryDetail.tsx @@ -2,7 +2,6 @@ import { t } from '@lingui/macro'; import { Group, LoadingOverlay, Skeleton, Stack, Text } from '@mantine/core'; import { IconCategory, - IconDots, IconInfoCircle, IconListDetails, IconSitemap @@ -14,9 +13,9 @@ import AdminButton from '../../components/buttons/AdminButton'; import { DetailsField, DetailsTable } from '../../components/details/Details'; import { ItemDetailsGrid } from '../../components/details/ItemDetails'; import { - ActionDropdown, DeleteItemAction, - EditItemAction + EditItemAction, + OptionsActionDropdown } from '../../components/items/ActionDropdown'; import { ApiIcon } from '../../components/items/ApiIcon'; import InstanceDetail from '../../components/nav/InstanceDetail'; @@ -212,9 +211,8 @@ export default function CategoryDetail() { const categoryActions = useMemo(() => { return [ , - } actions={[ EditItemAction({ hidden: !id || !user.hasChangeRole(UserRoles.part_category), diff --git a/src/frontend/src/pages/part/PartDetail.tsx b/src/frontend/src/pages/part/PartDetail.tsx index fb4763b54d..62fd19fdc1 100644 --- a/src/frontend/src/pages/part/PartDetail.tsx +++ b/src/frontend/src/pages/part/PartDetail.tsx @@ -15,7 +15,6 @@ import { IconCalendarStats, IconClipboardList, IconCurrencyDollar, - IconDots, IconInfoCircle, IconLayersLinked, IconList, @@ -51,7 +50,8 @@ import { BarcodeActionDropdown, DeleteItemAction, DuplicateItemAction, - EditItemAction + EditItemAction, + OptionsActionDropdown } from '../../components/items/ActionDropdown'; import { PlaceholderPanel } from '../../components/items/Placeholder'; import { StylishText } from '../../components/items/StylishText'; @@ -1030,9 +1030,8 @@ export default function PartDetail() { } ]} />, - } actions={[ DuplicateItemAction({ hidden: !user.hasAddRole(UserRoles.part), diff --git a/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx b/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx index 421ef4218c..91ead6b4c4 100644 --- a/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx +++ b/src/frontend/src/pages/purchasing/PurchaseOrderDetail.tsx @@ -1,7 +1,6 @@ import { t } from '@lingui/macro'; import { Accordion, Grid, Skeleton, Stack } from '@mantine/core'; import { - IconDots, IconInfoCircle, IconList, IconNotes, @@ -19,12 +18,12 @@ import { DetailsImage } from '../../components/details/DetailsImage'; import { ItemDetailsGrid } from '../../components/details/ItemDetails'; import NotesEditor from '../../components/editors/NotesEditor'; import { - ActionDropdown, BarcodeActionDropdown, CancelItemAction, DuplicateItemAction, EditItemAction, - HoldItemAction + HoldItemAction, + OptionsActionDropdown } from '../../components/items/ActionDropdown'; import { StylishText } from '../../components/items/StylishText'; import InstanceDetail from '../../components/nav/InstanceDetail'; @@ -408,9 +407,8 @@ export default function PurchaseOrderDetail() { items={[order.pk]} enableReports />, - } actions={[ EditItemAction({ hidden: !canEdit, diff --git a/src/frontend/src/pages/sales/ReturnOrderDetail.tsx b/src/frontend/src/pages/sales/ReturnOrderDetail.tsx index bf5ddbcfbc..5e8ff73937 100644 --- a/src/frontend/src/pages/sales/ReturnOrderDetail.tsx +++ b/src/frontend/src/pages/sales/ReturnOrderDetail.tsx @@ -1,7 +1,6 @@ import { t } from '@lingui/macro'; import { Accordion, Grid, Skeleton, Stack } from '@mantine/core'; import { - IconDots, IconInfoCircle, IconList, IconNotes, @@ -18,12 +17,12 @@ import { DetailsImage } from '../../components/details/DetailsImage'; import { ItemDetailsGrid } from '../../components/details/ItemDetails'; import NotesEditor from '../../components/editors/NotesEditor'; import { - ActionDropdown, BarcodeActionDropdown, CancelItemAction, DuplicateItemAction, EditItemAction, - HoldItemAction + HoldItemAction, + OptionsActionDropdown } from '../../components/items/ActionDropdown'; import { StylishText } from '../../components/items/StylishText'; import InstanceDetail from '../../components/nav/InstanceDetail'; @@ -409,9 +408,8 @@ export default function ReturnOrderDetail() { items={[order.pk]} enableReports />, - } actions={[ EditItemAction({ hidden: !user.hasChangeRole(UserRoles.return_order), diff --git a/src/frontend/src/pages/sales/SalesOrderDetail.tsx b/src/frontend/src/pages/sales/SalesOrderDetail.tsx index 2198652bd7..845eaee9c2 100644 --- a/src/frontend/src/pages/sales/SalesOrderDetail.tsx +++ b/src/frontend/src/pages/sales/SalesOrderDetail.tsx @@ -2,7 +2,6 @@ import { t } from '@lingui/macro'; import { Accordion, Grid, Skeleton, Stack } from '@mantine/core'; import { IconBookmark, - IconDots, IconInfoCircle, IconList, IconNotes, @@ -21,12 +20,12 @@ import { DetailsImage } from '../../components/details/DetailsImage'; import { ItemDetailsGrid } from '../../components/details/ItemDetails'; import NotesEditor from '../../components/editors/NotesEditor'; import { - ActionDropdown, BarcodeActionDropdown, CancelItemAction, DuplicateItemAction, EditItemAction, - HoldItemAction + HoldItemAction, + OptionsActionDropdown } from '../../components/items/ActionDropdown'; import { StylishText } from '../../components/items/StylishText'; import InstanceDetail from '../../components/nav/InstanceDetail'; @@ -449,9 +448,8 @@ export default function SalesOrderDetail() { items={[order.pk]} enableReports />, - } actions={[ EditItemAction({ hidden: !canEdit, diff --git a/src/frontend/src/pages/stock/LocationDetail.tsx b/src/frontend/src/pages/stock/LocationDetail.tsx index 8bf3ee6cc1..8eb9200982 100644 --- a/src/frontend/src/pages/stock/LocationDetail.tsx +++ b/src/frontend/src/pages/stock/LocationDetail.tsx @@ -1,11 +1,6 @@ import { t } from '@lingui/macro'; import { Group, Skeleton, Stack, Text } from '@mantine/core'; -import { - IconDots, - IconInfoCircle, - IconPackages, - IconSitemap -} from '@tabler/icons-react'; +import { IconInfoCircle, IconPackages, IconSitemap } from '@tabler/icons-react'; import { useMemo, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; @@ -18,7 +13,8 @@ import { ActionDropdown, BarcodeActionDropdown, DeleteItemAction, - EditItemAction + EditItemAction, + OptionsActionDropdown } from '../../components/items/ActionDropdown'; import { ApiIcon } from '../../components/items/ApiIcon'; import InstanceDetail from '../../components/nav/InstanceDetail'; @@ -331,9 +327,8 @@ export default function Stock() { } ]} />, - } actions={[ EditItemAction({ hidden: !id || !user.hasChangeRole(UserRoles.stock_location), diff --git a/src/frontend/src/pages/stock/StockDetail.tsx b/src/frontend/src/pages/stock/StockDetail.tsx index e787d210a4..5c6b9459e9 100644 --- a/src/frontend/src/pages/stock/StockDetail.tsx +++ b/src/frontend/src/pages/stock/StockDetail.tsx @@ -4,7 +4,6 @@ import { IconBookmark, IconBoxPadding, IconChecklist, - IconDots, IconHistory, IconInfoCircle, IconNotes, @@ -27,7 +26,8 @@ import { BarcodeActionDropdown, DeleteItemAction, DuplicateItemAction, - EditItemAction + EditItemAction, + OptionsActionDropdown } from '../../components/items/ActionDropdown'; import { StylishText } from '../../components/items/StylishText'; import InstanceDetail from '../../components/nav/InstanceDetail'; @@ -526,9 +526,8 @@ export default function StockDetail() { } ]} />, - } actions={[ DuplicateItemAction({ hidden: !user.hasAddRole(UserRoles.stock), diff --git a/src/frontend/src/tables/machine/MachineListTable.tsx b/src/frontend/src/tables/machine/MachineListTable.tsx index eabdc4300d..cabda32066 100644 --- a/src/frontend/src/tables/machine/MachineListTable.tsx +++ b/src/frontend/src/tables/machine/MachineListTable.tsx @@ -16,7 +16,7 @@ import { Title } from '@mantine/core'; import { notifications } from '@mantine/notifications'; -import { IconCheck, IconDots, IconRefresh } from '@tabler/icons-react'; +import { IconCheck, IconRefresh } from '@tabler/icons-react'; import { useQuery } from '@tanstack/react-query'; import { useCallback, useMemo, useState } from 'react'; import { useNavigate } from 'react-router-dom'; @@ -25,9 +25,9 @@ import { api } from '../../App'; import { AddItemButton } from '../../components/buttons/AddItemButton'; import { YesNoButton } from '../../components/buttons/YesNoButton'; import { - ActionDropdown, DeleteItemAction, - EditItemAction + EditItemAction, + OptionsActionDropdown } from '../../components/items/ActionDropdown'; import { InfoItem } from '../../components/items/InfoItem'; import { UnavailableIndicator } from '../../components/items/UnavailableIndicator'; @@ -255,9 +255,8 @@ function MachineDrawer({ Restart required )} - } actions={[ EditItemAction({ tooltip: t`Edit machine`,