Merge pull request #95 from SFTtech/milo/ui-improvements

ui improvements
SFTtech · May 13, 2022 · b2c5dd2 · b2c5dd2
2 parents 9751e37 + 2de759d
commit b2c5dd2
Show file tree

Hide file tree

Showing 8 changed files with 274 additions and 99 deletions.
diff --git a/web/src/components/style/DisabledTextField.tsx b/web/src/components/style/DisabledTextField.tsx
@@ -1,4 +1,4 @@
-import { TextField, Theme } from "@mui/material";
+import { Checkbox, FormControlLabel, TextField, Theme } from "@mui/material";
 import { styled } from "@mui/styles";
 
 export const DisabledTextField = styled(TextField)(({ theme }: { theme: Theme }) => ({
@@ -7,3 +7,16 @@ export const DisabledTextField = styled(TextField)(({ theme }: { theme: Theme })
         WebkitTextFillColor: theme.palette.text.primary,
     },
 }));
+
+export const DisabledFormControlLabel = styled(FormControlLabel)(({ theme }: { theme: Theme }) => ({
+    "& .Mui-disabled": {
+        color: theme.palette.text.primary,
+        WebkitTextFillColor: theme.palette.text.primary,
+    },
+}));
+export const DisabledCheckbox = styled(Checkbox)(({ theme }: { theme: Theme }) => ({
+    "& .Mui-disabled": {
+        color: theme.palette.text.primary,
+        WebkitTextFillColor: theme.palette.text.primary,
+    },
+}));
diff --git a/web/src/components/style/Layout.tsx b/web/src/components/style/Layout.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Link as RouterLink } from "react-router-dom";
+import { Link as RouterLink, useLocation } from "react-router-dom";
 import { useRecoilValue } from "recoil";
 import { isAuthenticated } from "../../state/auth";
 import ListItemLink from "./ListItemLink";
@@ -50,6 +50,7 @@ export default function Layout({ group = null, children, ...props }) {
     const theme: Theme = useTheme();
     const dotsMenuOpen = Boolean(anchorEl);
     const cfg = useRecoilValue(config);
+    const location = useLocation();
 
     const [mobileOpen, setMobileOpen] = useState(true);
 
@@ -73,43 +74,66 @@ export default function Layout({ group = null, children, ...props }) {
             <Divider />
             {group != null && (
                 <List sx={{ pb: 0 }}>
-                    <ListItemLink to={`/groups/${group.id}/`}>
+                    <ListItemLink
+                        to={`/groups/${group.id}/`}
+                        selected={
+                            location.pathname === `/groups/${group.id}/` || location.pathname === `/groups/${group.id}`
+                        }
+                    >
                         <ListItemIcon>
                             <Paid />
                         </ListItemIcon>
                         <ListItemText primary="Transactions" />
                     </ListItemLink>
-                    <ListItemLink to={`/groups/${group.id}/balances`}>
+                    <ListItemLink
+                        to={`/groups/${group.id}/balances`}
+                        selected={location.pathname.startsWith(`/groups/${group.id}/balances`)}
+                    >
                         <ListItemIcon>
                             <BarChart />
                         </ListItemIcon>
                         <ListItemText primary="Balances" />
                     </ListItemLink>
-                    <ListItemLink to={`/groups/${group.id}/accounts`}>
+                    <ListItemLink
+                        to={`/groups/${group.id}/accounts`}
+                        selected={location.pathname.startsWith(`/groups/${group.id}/accounts`)}
+                    >
                         <ListItemIcon>
                             <AccountBalance />
                         </ListItemIcon>
                         <ListItemText primary="Accounts" />
                     </ListItemLink>
-                    <ListItemLink to={`/groups/${group.id}/detail`}>
+                    <ListItemLink
+                        to={`/groups/${group.id}/detail`}
+                        selected={location.pathname.startsWith(`/groups/${group.id}/detail`)}
+                    >
                         <ListItemIcon>
                             <AdminPanelSettings />
                         </ListItemIcon>
                         <ListItemText primary="Group Settings" />
                     </ListItemLink>
-                    <ListItemLink to={`/groups/${group.id}/members`}>
+                    <ListItemLink
+                        to={`/groups/${group.id}/members`}
+                        selected={location.pathname.startsWith(`/groups/${group.id}/members`)}
+                    >
                         <ListItemIcon>
                             <People />
                         </ListItemIcon>
                         <ListItemText primary="Group Members" />
                     </ListItemLink>
-                    <ListItemLink to={`/groups/${group.id}/invites`}>
+                    <ListItemLink
+                        to={`/groups/${group.id}/invites`}
+                        selected={location.pathname.startsWith(`/groups/${group.id}/invites`)}
+                    >
                         <ListItemIcon>
                             <Mail />
                         </ListItemIcon>
                         <ListItemText primary="Group Invites" />
                     </ListItemLink>
-                    <ListItemLink to={`/groups/${group.id}/log`}>
+                    <ListItemLink
+                        to={`/groups/${group.id}/log`}
+                        selected={location.pathname.startsWith(`/groups/${group.id}/log`)}
+                    >
                         <ListItemIcon>
                             <Message />
                         </ListItemIcon>

diff --git a/web/src/components/style/SidebarGroupList.tsx b/web/src/components/style/SidebarGroupList.tsx
@@ -12,6 +12,16 @@ export default function SidebarGroupList({ group = null }) {
     const isGuest = useRecoilValue(isGuestUser);
     const [showGroupCreationModal, setShowGroupCreationModal] = useState(false);
 
+    const openGroupCreateModal = () => {
+        setShowGroupCreationModal(true);
+    };
+
+    const closeGroupCreateModal = (evt, reason) => {
+        if (reason !== "backdropClick") {
+            setShowGroupCreationModal(false);
+        }
+    };
+
     return (
         <>
             <List sx={{ pt: 0 }}>
@@ -26,16 +36,14 @@ export default function SidebarGroupList({ group = null }) {
                 {!isGuest && (
                     <ListItem sx={{ padding: 0 }}>
                         <Grid container justifyContent="center">
-                            <IconButton size="small" onClick={() => setShowGroupCreationModal(true)}>
+                            <IconButton size="small" onClick={openGroupCreateModal}>
                                 <Add />
                             </IconButton>
                         </Grid>
                     </ListItem>
                 )}
             </List>
-            {!isGuest && (
-                <GroupCreateModal show={showGroupCreationModal} onClose={() => setShowGroupCreationModal(false)} />
-            )}
+            {!isGuest && <GroupCreateModal show={showGroupCreationModal} onClose={closeGroupCreateModal} />}
         </>
     );
 }
diff --git a/web/src/components/transactions/TransactionList.tsx b/web/src/components/transactions/TransactionList.tsx
@@ -123,12 +123,20 @@ export default function TransactionList({ group }) {
                 <TransferCreateModal
                     group={group}
                     show={showTransferCreateDialog}
-                    onClose={() => setShowTransferCreateDialog(false)}
+                    onClose={(evt, reason) => {
+                        if (reason !== "backdropClick") {
+                            setShowTransferCreateDialog(false);
+                        }
+                    }}
                 />
                 <PurchaseCreateModal
                     group={group}
                     show={showPurchaseCreateDialog}
-                    onClose={() => setShowPurchaseCreateDialog(false)}
+                    onClose={(evt, reason) => {
+                        if (reason !== "backdropClick") {
+                            setShowPurchaseCreateDialog(false);
+                        }
+                    }}
                 />
             </MobilePaper>
             {userPermissions.can_write && (
@@ -143,12 +151,14 @@ export default function TransactionList({ group }) {
                 >
                     <SpeedDialAction
                         icon={<ShoppingCart />}
-                        tooltipTitle="Create Purchase"
+                        tooltipTitle="Purchase"
+                        tooltipOpen
                         onClick={() => setShowPurchaseCreateDialog(true)}
                     />
                     <SpeedDialAction
                         icon={<CompareArrows />}
-                        tooltipTitle="Create Transfer"
+                        tooltipTitle="Transfer"
+                        tooltipOpen
                         onClick={() => setShowTransferCreateDialog(true)}
                     />
                 </SpeedDial>

diff --git a/web/src/components/transactions/purchase/PurchaseItems.tsx b/web/src/components/transactions/purchase/PurchaseItems.tsx
@@ -564,7 +564,7 @@ export default function PurchaseItems({ group, transaction }: PropTypes) {
                                       !position.is_empty && (
                                           <TableRow hover key={position.id}>
                                               <TableCell>{position.name}</TableCell>
-                                              <TableCell align="right" style={{ width: 80 }}>
+                                              <TableCell align="right" style={{ minWidth: 80 }}>
                                                   {position.price.toFixed(2)} {transaction.currency_symbol}
                                               </TableCell>
                                               {positionAccounts.map((accountID) => (

diff --git a/web/src/pages/accounts/AccountList.tsx b/web/src/pages/accounts/AccountList.tsx
@@ -110,19 +110,23 @@ export default function AccountList({ group }) {
         setShowPersonalAccountEditModal(true);
     };
 
-    const closeAccountEdit = () => {
-        setShowPersonalAccountEditModal(false);
-        setAccountToEdit(null);
+    const closeAccountEdit = (evt, reason) => {
+        if (reason !== "backdropClick") {
+            setShowPersonalAccountEditModal(false);
+            setAccountToEdit(null);
+        }
     };
 
     const openClearingAccountEdit = (account) => {
         setClearingAccountToEdit(account);
         setShowClearingAccountEditModal(true);
     };
 
-    const closeClearingAccountEdit = () => {
-        setShowClearingAccountEditModal(false);
-        setClearingAccountToEdit(null);
+    const closeClearingAccountEdit = (evt, reason) => {
+        if (reason !== "backdropClick") {
+            setShowClearingAccountEditModal(false);
+            setClearingAccountToEdit(null);
+        }
     };
 
     const confirmDeleteAccount = () => {
@@ -260,7 +264,11 @@ export default function AccountList({ group }) {
                                 </Grid>
                                 <CreateAccountModal
                                     show={showPersonalAccountCreationModal}
-                                    onClose={() => setShowPersonalAccountCreationModal(false)}
+                                    onClose={(evt, reason) => {
+                                        if (reason !== "backdropClick") {
+                                            setShowPersonalAccountCreationModal(false);
+                                        }
+                                    }}
                                     group={group}
                                 />
                                 <EditAccountModal
@@ -343,7 +351,11 @@ export default function AccountList({ group }) {
                                 </Grid>
                                 <CreateClearingAccountModal
                                     show={showClearingAccountCreationModal}
-                                    onClose={() => setShowClearingAccountCreationModal(false)}
+                                    onClose={(evt, reason) => {
+                                        if (reason !== "backdropClick") {
+                                            setShowClearingAccountCreationModal(false);
+                                        }
+                                    }}
                                     initialValues={clearingAccountToCopy}
                                     group={group}
                                 />
@@ -371,12 +383,14 @@ export default function AccountList({ group }) {
                     >
                         <SpeedDialAction
                             icon={<PersonalAccountIcon />}
-                            tooltipTitle="Create Personal Account"
+                            tooltipTitle="Personal"
+                            tooltipOpen
                             onClick={() => setShowPersonalAccountCreationModal(true)}
                         />
                         <SpeedDialAction
                             icon={<ClearingAccountIcon />}
-                            tooltipTitle="Create Clearing Account"
+                            tooltipTitle="Clearing"
+                            tooltipOpen
                             onClick={openCreateDialog}
                         />
                     </SpeedDial>

diff --git a/web/src/pages/groups/GroupList.tsx b/web/src/pages/groups/GroupList.tsx
@@ -35,6 +35,16 @@ export default function GroupList() {
         setGroupToDelete(null);
     };
 
+    const openGroupCreateModal = () => {
+        setShowGroupCreationModal(true);
+    };
+
+    const closeGroupCreateModal = (evt, reason) => {
+        if (reason !== "backdropClick") {
+            setShowGroupCreationModal(false);
+        }
+    };
+
     return (
         <MobilePaper>
             <Typography component="h3" variant="h5">
@@ -74,11 +84,11 @@ export default function GroupList() {
             {!isGuest && (
                 <>
                     <Grid container justifyContent="center">
-                        <IconButton color="primary" onClick={() => setShowGroupCreationModal(true)}>
+                        <IconButton color="primary" onClick={openGroupCreateModal}>
                             <Add />
                         </IconButton>
                     </Grid>
-                    <GroupCreateModal show={showGroupCreationModal} onClose={() => setShowGroupCreationModal(false)} />
+                    <GroupCreateModal show={showGroupCreationModal} onClose={closeGroupCreateModal} />
                 </>
             )}
             <GroupDeleteModal