From 4677057beed13062bbac3d2af79563bfbe4df1ae Mon Sep 17 00:00:00 2001 From: stacksmash76 <98354295+stacksmash76@users.noreply.github.com> Date: Sat, 11 Jun 2022 19:11:42 +0200 Subject: [PATCH] fix(web): mobile ux improvements (#296) * fix(ListboxFilter): Added z-index in order to properly render dropdown box. fix(ReleaseTable): Added flex-direction: column to wrap on mobile devices (otherwise it's set to row) feat(DownloadClientSettingsListItem): Made it possible to toggle client state directly, without opening the update form. * fix(TitleCell): Improved responsiveness across all relevant screen selectors. * fix(FilterDetails): Fixed incorrect overflow property ordering. --- web/src/components/data-table/Cells.tsx | 2 +- web/src/screens/filters/details.tsx | 152 ++++++++++---------- web/src/screens/releases/Filters.tsx | 2 +- web/src/screens/releases/ReleaseTable.tsx | 2 +- web/src/screens/settings/DownloadClient.tsx | 31 +++- 5 files changed, 105 insertions(+), 84 deletions(-) diff --git a/web/src/components/data-table/Cells.tsx b/web/src/components/data-table/Cells.tsx index bff2d09..04b6308 100644 --- a/web/src/components/data-table/Cells.tsx +++ b/web/src/components/data-table/Cells.tsx @@ -17,7 +17,7 @@ export const AgeCell = ({ value }: CellProps) => ( export const TitleCell = ({ value }: CellProps) => (
{value} diff --git a/web/src/screens/filters/details.tsx b/web/src/screens/filters/details.tsx index 6d28251..bf4add4 100644 --- a/web/src/screens/filters/details.tsx +++ b/web/src/screens/filters/details.tsx @@ -223,84 +223,82 @@ export default function FilterDetails() {
-
-
-
- -
- - - {({ values, dirty, resetForm }) => ( -
- - } /> - } /> - } /> - } /> - } - /> - - - - - )} -
+
+
+
+ + + {({ values, dirty, resetForm }) => ( +
+ + } /> + } /> + } /> + } /> + } + /> + + + + + )} +
diff --git a/web/src/screens/releases/Filters.tsx b/web/src/screens/releases/Filters.tsx index e18490d..6f5a425 100644 --- a/web/src/screens/releases/Filters.tsx +++ b/web/src/screens/releases/Filters.tsx @@ -49,7 +49,7 @@ const ListboxFilter = ({ leaveTo="opacity-0" > {children} diff --git a/web/src/screens/releases/ReleaseTable.tsx b/web/src/screens/releases/ReleaseTable.tsx index b428bff..924239f 100644 --- a/web/src/screens/releases/ReleaseTable.tsx +++ b/web/src/screens/releases/ReleaseTable.tsx @@ -181,7 +181,7 @@ export const ReleaseTable = () => { // Render the UI for your table return (
-
+
{headerGroups.map((headerGroup) => headerGroup.headers.map((column) => ( column.Filter ? ( diff --git a/web/src/screens/settings/DownloadClient.tsx b/web/src/screens/settings/DownloadClient.tsx index 189cc2a..1f2c049 100644 --- a/web/src/screens/settings/DownloadClient.tsx +++ b/web/src/screens/settings/DownloadClient.tsx @@ -1,11 +1,13 @@ import { useToggle } from "../../hooks/hooks"; import { Switch } from "@headlessui/react"; -import { useQuery } from "react-query"; +import { useMutation, useQuery, useQueryClient } from "react-query"; import { classNames } from "../../utils"; import { DownloadClientAddForm, DownloadClientUpdateForm } from "../../forms"; import { EmptySimple } from "../../components/emptystates"; import { APIClient } from "../../api/APIClient"; import { DownloadClientTypeNameMap } from "../../domain/constants"; +import toast from "react-hot-toast"; +import Toast from "../../components/notifications/Toast"; interface DLSettingsItemProps { client: DownloadClient; @@ -15,14 +17,35 @@ interface DLSettingsItemProps { function DownloadClientSettingsListItem({ client, idx }: DLSettingsItemProps) { const [updateClientIsOpen, toggleUpdateClient] = useToggle(false); + const queryClient = useQueryClient(); + const mutation = useMutation( + (client: DownloadClient) => APIClient.download_clients.update(client), + { + onSuccess: () => { + queryClient.invalidateQueries(["downloadClients"]); + toast.custom((t) => ); + } + } + ); + + const onToggleMutation = (newState: boolean) => { + mutation.mutate({ + ...client, + enabled: newState + }); + }; + return ( - - +