cheveguerra/whaticket-community
1
0
Fork 0
mirror of https://github.com/cheveguerra/whaticket-community.git synced 2026-04-20 20:59:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

improvement(style): better styles in contacts list

Browse Source
This commit is contained in:
canove
2020-08-31 12:01:28 -03:00
parent 04477783b4
commit daf4c1135b
1 changed files with 113 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/pages/Contacts/index.js
View File

@@ -33,10 +33,15 @@ import { i18n } from "../../translate/i18n";
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(theme => ({
mainContainer: { mainContainer: {
flex: 1, flex: 1,
// backgroundColor: "#eee",
padding: theme.spacing(2), padding: theme.spacing(2),
height: `calc(100% - 48px)`, height: `calc(100% - 48px)`,
},
contentWrapper: {
height: "100%",
overflowY: "hidden", overflowY: "hidden",
display: "flex",
flexDirection: "column",
}, },
contactsHeader: { contactsHeader: {
@@ -46,6 +51,7 @@ const useStyles = makeStyles(theme => ({
}, },
actionButtons: { actionButtons: {
flex: "none",
marginLeft: "auto", marginLeft: "auto",
"& > *": { "& > *": {
margin: theme.spacing(1), margin: theme.spacing(1),
@@ -53,16 +59,14 @@ const useStyles = makeStyles(theme => ({
}, },
mainPaper: { mainPaper: {
height: "87%", flex: 1,
padding: theme.spacing(2), padding: theme.spacing(2),
overflowY: "scroll", overflowY: "scroll",
"&::-webkit-scrollbar": { "&::-webkit-scrollbar": {
width: "8px", width: "8px",
height: "8px", height: "8px",
}, },
"&::-webkit-scrollbar-thumb": { "&::-webkit-scrollbar-thumb": {
// borderRadius: "2px",
boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)", boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
backgroundColor: "#e8e8e8", backgroundColor: "#e8e8e8",
}, },
@@ -107,11 +111,11 @@ const Contacts = () => {
useEffect(() => { useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL); const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
socket.on("contact", data => { socket.on("contact", data => {
if ((data.action === "update" || data.action === "create") && !loading) { if (data.action === "update" || data.action === "create") {
updateContacts(data.contact); updateContacts(data.contact);
} }
if (data.action === "delete" && !loading) { if (data.action === "delete") {
deleteContact(data.contactId); deleteContact(data.contactId);
} }
}); });
@@ -119,7 +123,7 @@ const Contacts = () => {
return () => { return () => {
socket.disconnect(); socket.disconnect();
}; };
}, [loading]); }, []);
const updateContacts = contact => { const updateContacts = contact => {
setContacts(prevState => { setContacts(prevState => {
@@ -221,6 +225,7 @@ const Contacts = () => {
? `${i18n.t("contacts.confirmationModal.deleteMessage")}` ? `${i18n.t("contacts.confirmationModal.deleteMessage")}`
: `${i18n.t("contacts.confirmationModal.importMessage")}`} : `${i18n.t("contacts.confirmationModal.importMessage")}`}
</ConfirmationModal> </ConfirmationModal>
<div className={classes.contentWrapper}>
<div className={classes.contactsHeader}> <div className={classes.contactsHeader}>
<Typography variant="h5" gutterBottom> <Typography variant="h5" gutterBottom>
{i18n.t("contacts.title")} {i18n.t("contacts.title")}
@@ -256,7 +261,7 @@ const Contacts = () => {
</Button> </Button>
</div> </div>
</div> </div>
<Paper className={classes.mainPaper}> <Paper className={classes.mainPaper} variant="outlined">
<Table size="small"> <Table size="small">
<TableHead> <TableHead>
<TableRow> <TableRow>
@@ -324,6 +329,7 @@ const Contacts = () => {
</TableFooter> </TableFooter>
</Table> </Table>
</Paper> </Paper>
</div>
</Container> </Container>
); );
}; };