UI updates continued
This commit is contained in:
Darren Clarke
parent
2b9672fedf
commit
6a0cc58f60
24 changed files with 1209 additions and 306 deletions
|
|
@ -4,7 +4,7 @@ import { Sidebar } from "./Sidebar";
|
|||
export const Layout = ({ children }) => (
|
||||
<Grid container direction="row">
|
||||
<Sidebar open />
|
||||
<Grid item sx={{ ml: "300px", width: "100%", height: "100vh" }}>
|
||||
<Grid item sx={{ ml: "270px", width: "100%", height: "100vh" }}>
|
||||
{children}
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,15 @@
|
|||
import { FC } from "react";
|
||||
import { FC, useState } from "react";
|
||||
import {
|
||||
Box,
|
||||
Grid,
|
||||
Typography,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemButton,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
ListItemSecondaryAction,
|
||||
Drawer,
|
||||
Accordion,
|
||||
AccordionSummary,
|
||||
AccordionDetails,
|
||||
Collapse,
|
||||
} from "@mui/material";
|
||||
import {
|
||||
FeaturedPlayList as FeaturedPlayListIcon,
|
||||
|
|
@ -20,53 +19,119 @@ import {
|
|||
Cottage as CottageIcon,
|
||||
Settings as SettingsIcon,
|
||||
} from "@mui/icons-material";
|
||||
import { useRouter } from "next/router";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import LinkLogo from "public/link-logo-small.png";
|
||||
|
||||
const MenuItem = ({ name, href, Icon, iconSize, indent = 0 }: any) => (
|
||||
<Link href={href} passHref>
|
||||
<ListItem button sx={{ p: 0, pb: 2, pr: indent * 5 }}>
|
||||
<ListItemIcon
|
||||
sx={{
|
||||
color: `white`,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
const openWidth = 270;
|
||||
const closedWidth = 100;
|
||||
|
||||
const MenuItem = ({
|
||||
name,
|
||||
href,
|
||||
Icon,
|
||||
iconSize,
|
||||
inset = false,
|
||||
selected = false,
|
||||
badge,
|
||||
}: any) => (
|
||||
<Link href={href}>
|
||||
<ListItemButton
|
||||
sx={{ p: 0, mb: 1, bl: iconSize === 0 ? "1px solid white" : "inherit" }}
|
||||
selected={selected}
|
||||
>
|
||||
{iconSize > 0 ? (
|
||||
<ListItemIcon
|
||||
sx={{
|
||||
width: iconSize,
|
||||
height: iconSize,
|
||||
mr: 0.5,
|
||||
color: `white`,
|
||||
minWidth: 0,
|
||||
mr: 2,
|
||||
}}
|
||||
>
|
||||
{iconSize > 0 && <Icon />}
|
||||
<Box
|
||||
sx={{
|
||||
width: iconSize,
|
||||
height: iconSize,
|
||||
mr: 0.5,
|
||||
mt: "-4px",
|
||||
}}
|
||||
>
|
||||
<Icon />
|
||||
</Box>
|
||||
</ListItemIcon>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
width: 30,
|
||||
height: "28px",
|
||||
position: "relative",
|
||||
ml: "9px",
|
||||
mr: "1px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "1px",
|
||||
height: "56px",
|
||||
backgroundColor: "white",
|
||||
position: "absolute",
|
||||
left: "3px",
|
||||
top: "-10px",
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
width: "42px",
|
||||
height: "42px",
|
||||
position: "absolute",
|
||||
top: "-27px",
|
||||
left: "3px",
|
||||
border: "solid 1px #fff",
|
||||
borderColor: "transparent transparent transparent #fff",
|
||||
borderRadius: "60px",
|
||||
rotate: "-35deg",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<ListItemText
|
||||
primary={
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{
|
||||
color: "#fff !important",
|
||||
fontSize: 14,
|
||||
fontFamily: "Roboto",
|
||||
fontWeight: 400,
|
||||
marginLeft: "12px",
|
||||
marginTop: "-1px",
|
||||
textDecoration: "none !important",
|
||||
">a": {
|
||||
textDecoration: "none !important",
|
||||
},
|
||||
"a:visited": {
|
||||
textDecoration: "none !important",
|
||||
},
|
||||
border: 0,
|
||||
}}
|
||||
>
|
||||
{name}
|
||||
</Typography>
|
||||
}
|
||||
/>
|
||||
</ListItemIcon>
|
||||
</ListItem>
|
||||
)}
|
||||
<ListItemText
|
||||
inset={inset}
|
||||
primary={
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{
|
||||
fontSize: 16,
|
||||
fontFamily: "Roboto",
|
||||
fontWeight: "bold",
|
||||
border: 0,
|
||||
textAlign: "left",
|
||||
}}
|
||||
>
|
||||
{name}
|
||||
</Typography>
|
||||
}
|
||||
/>
|
||||
{badge && (
|
||||
<ListItemSecondaryAction>
|
||||
<Typography
|
||||
color="textSecondary"
|
||||
variant="body1"
|
||||
className="badge"
|
||||
sx={{
|
||||
backgroundColor: "#FFB620",
|
||||
color: "black !important",
|
||||
borderRadius: 10,
|
||||
px: 1,
|
||||
fontSize: 12,
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
{badge}
|
||||
</Typography>
|
||||
</ListItemSecondaryAction>
|
||||
)}
|
||||
</ListItemButton>
|
||||
</Link>
|
||||
);
|
||||
|
||||
|
|
@ -74,115 +139,299 @@ interface SidebarProps {
|
|||
open: boolean;
|
||||
}
|
||||
|
||||
export const Sidebar: FC<SidebarProps> = ({ open }) => (
|
||||
<Drawer
|
||||
sx={{ width: 300, flexShrink: 0 }}
|
||||
variant="permanent"
|
||||
anchor="left"
|
||||
open={open}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
width: 300,
|
||||
border: 0,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Grid
|
||||
container
|
||||
direction="column"
|
||||
justifyContent="space-between"
|
||||
wrap="nowrap"
|
||||
sx={{ backgroundColor: "#25272A", height: "100%", p: 2 }}
|
||||
export const Sidebar: FC<SidebarProps> = ({ open }) => {
|
||||
const { pathname } = useRouter();
|
||||
console.log({ pathname });
|
||||
return (
|
||||
<Drawer
|
||||
sx={{ width: open ? openWidth : closedWidth, flexShrink: 0 }}
|
||||
variant="permanent"
|
||||
anchor="left"
|
||||
open={open}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
width: open ? openWidth : closedWidth,
|
||||
border: 0,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Grid item>
|
||||
<Typography variant="h6" sx={{ fontSize: 12, color: "white" }}>
|
||||
Hello
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Typography variant="h2" sx={{ fontSize: 22, color: "white", mb: 1.5 }}>
|
||||
Agent/User
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Box sx={{ height: 1.5, width: "100%", backgroundColor: "white" }} />
|
||||
</Grid>
|
||||
<Grid item container direction="column" sx={{ mt: "6px" }} flexGrow={1}>
|
||||
<List component="nav">
|
||||
<MenuItem name="Home" href="/" Icon={CottageIcon} iconSize={20} />
|
||||
<Accordion
|
||||
<Grid
|
||||
container
|
||||
direction="column"
|
||||
justifyContent="space-between"
|
||||
wrap="nowrap"
|
||||
sx={{ backgroundColor: "#25272A", height: "100%", p: 2 }}
|
||||
>
|
||||
<Grid item container>
|
||||
<Grid item>
|
||||
<Box sx={{ width: "40px", height: "40px" }}>
|
||||
<Image
|
||||
src={LinkLogo}
|
||||
alt="Link logo"
|
||||
width={40}
|
||||
height={40}
|
||||
style={{
|
||||
objectFit: "cover",
|
||||
filter: "grayscale(100) brightness(100)",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
.
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Typography
|
||||
variant="h2"
|
||||
sx={{
|
||||
fontSize: 26,
|
||||
color: "white",
|
||||
fontWeight: 700,
|
||||
mt: 1,
|
||||
ml: 0.5,
|
||||
fontFamily: "Poppins",
|
||||
}}
|
||||
>
|
||||
CDR Link
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: "#25272A",
|
||||
border: 0,
|
||||
m: 0,
|
||||
p: 0,
|
||||
boxShadow: "none",
|
||||
mt: -1,
|
||||
mb: -1,
|
||||
height: "0.5px",
|
||||
width: "100%",
|
||||
backgroundColor: "#666",
|
||||
mb: 1,
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{ fontSize: 12, color: "#999", fontWeight: "bold" }}
|
||||
>
|
||||
Hello
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Typography
|
||||
variant="h2"
|
||||
sx={{ fontSize: 22, color: "white", mb: 1.5, fontWeight: "bold" }}
|
||||
>
|
||||
Nicholas
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Box
|
||||
sx={{ height: "0.5px", width: "100%", backgroundColor: "#666" }}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item container direction="column" sx={{ mt: "6px" }} flexGrow={1}>
|
||||
<List
|
||||
component="nav"
|
||||
sx={{
|
||||
a: {
|
||||
textDecoration: "none",
|
||||
|
||||
".MuiListItemButton-root": {
|
||||
p: 1,
|
||||
borderRadius: 2,
|
||||
"&:hover": {
|
||||
background: "#555",
|
||||
},
|
||||
".MuiTypography-root": {
|
||||
p: {
|
||||
color: "#999 !important",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
".badge": {
|
||||
p: { fontSize: 12, color: "black !important" },
|
||||
},
|
||||
},
|
||||
".Mui-selected": {
|
||||
background: "#444",
|
||||
color: "#fff !important",
|
||||
".MuiTypography-root": {
|
||||
p: {
|
||||
color: "#fff !important",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
".badge": {
|
||||
p: { fontSize: 12, color: "black !important" },
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<AccordionSummary sx={{ p: 0, m: 0 }}>
|
||||
<MenuItem
|
||||
name="My tickets"
|
||||
href="/assigned"
|
||||
Icon={FeaturedPlayListIcon}
|
||||
iconSize={20}
|
||||
/>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails sx={{ p: 0, mt: -2, ml: "20px" }}>
|
||||
<MenuItem
|
||||
name="Assigned"
|
||||
href="/assigned"
|
||||
Icon={FeaturedPlayListIcon}
|
||||
iconSize={0}
|
||||
/>
|
||||
<MenuItem
|
||||
name="Urgent"
|
||||
href="/urgent"
|
||||
Icon={FeaturedPlayListIcon}
|
||||
iconSize={0}
|
||||
/>
|
||||
<MenuItem
|
||||
name="Pending"
|
||||
href="/pending"
|
||||
Icon={FeaturedPlayListIcon}
|
||||
iconSize={0}
|
||||
/>
|
||||
<MenuItem
|
||||
name="Unassigned"
|
||||
href="/unassigned"
|
||||
Icon={FeaturedPlayListIcon}
|
||||
iconSize={0}
|
||||
/>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
<MenuItem
|
||||
name="Home"
|
||||
href="/"
|
||||
Icon={CottageIcon}
|
||||
iconSize={20}
|
||||
selected={pathname.endsWith("/")}
|
||||
/>
|
||||
<MenuItem
|
||||
name="Tickets"
|
||||
href="/tickets/assigned"
|
||||
Icon={FeaturedPlayListIcon}
|
||||
selected={pathname.startsWith("/tickets")}
|
||||
iconSize={20}
|
||||
/>
|
||||
|
||||
<MenuItem
|
||||
name="Leafcutter"
|
||||
href="/leafcutter"
|
||||
Icon={AnalyticsIcon}
|
||||
iconSize={20}
|
||||
/>
|
||||
<MenuItem
|
||||
name="Profile"
|
||||
href="/profile"
|
||||
Icon={PersonIcon}
|
||||
iconSize={20}
|
||||
/>
|
||||
<MenuItem
|
||||
name="Settings"
|
||||
href="/settings"
|
||||
Icon={SettingsIcon}
|
||||
iconSize={20}
|
||||
/>
|
||||
<MenuItem
|
||||
name="Logout"
|
||||
href="/logout"
|
||||
Icon={LogoutIcon}
|
||||
iconSize={20}
|
||||
/>
|
||||
</List>
|
||||
<Collapse
|
||||
in={pathname.startsWith("/tickets")}
|
||||
timeout="auto"
|
||||
unmountOnExit
|
||||
onClick={undefined}
|
||||
>
|
||||
<List component="div" disablePadding>
|
||||
<MenuItem
|
||||
name="Assigned"
|
||||
href="/tickets/assigned"
|
||||
Icon={FeaturedPlayListIcon}
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/tickets/assigned")}
|
||||
badge={3}
|
||||
/>
|
||||
<MenuItem
|
||||
name="Urgent"
|
||||
href="/tickets/urgent"
|
||||
Icon={FeaturedPlayListIcon}
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/tickets/urgent")}
|
||||
badge={1}
|
||||
/>
|
||||
<MenuItem
|
||||
name="Pending"
|
||||
href="/tickets/pending"
|
||||
Icon={FeaturedPlayListIcon}
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/tickets/pending")}
|
||||
badge={9}
|
||||
/>
|
||||
<MenuItem
|
||||
name="Unassigned"
|
||||
href="/tickets/unassigned"
|
||||
Icon={FeaturedPlayListIcon}
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/tickets/unnassigned")}
|
||||
badge={27}
|
||||
/>
|
||||
<MenuItem
|
||||
name="New Ticket UI"
|
||||
href="/tickets/181"
|
||||
Icon={SettingsIcon}
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/tickets/181")}
|
||||
/>
|
||||
</List>
|
||||
</Collapse>
|
||||
|
||||
<MenuItem
|
||||
name="Leafcutter"
|
||||
href="/leafcutter"
|
||||
Icon={AnalyticsIcon}
|
||||
iconSize={20}
|
||||
selected={pathname.endsWith("/leafcutter")}
|
||||
/>
|
||||
<Collapse
|
||||
in={pathname.startsWith("/leafcutter")}
|
||||
timeout="auto"
|
||||
unmountOnExit
|
||||
onClick={undefined}
|
||||
>
|
||||
<List component="div" disablePadding>
|
||||
<MenuItem
|
||||
name="Dashboard"
|
||||
href="/leafcutter"
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/leafcutter")}
|
||||
/>
|
||||
|
||||
<MenuItem
|
||||
name="Search and Create"
|
||||
href="/leafcutter/create"
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/leafcutter/create")}
|
||||
/>
|
||||
|
||||
<MenuItem
|
||||
name="Trends"
|
||||
href="/leafcutter/trends"
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/leafcutter/trends")}
|
||||
/>
|
||||
|
||||
<MenuItem
|
||||
name="FAQ"
|
||||
href="/leafcutter/faq"
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/leafcutter/faq")}
|
||||
/>
|
||||
|
||||
<MenuItem
|
||||
name="About"
|
||||
href="/leafcutter/about"
|
||||
Icon={AnalyticsIcon}
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/leafcutter/about")}
|
||||
/>
|
||||
</List>
|
||||
</Collapse>
|
||||
<MenuItem
|
||||
name="Profile"
|
||||
href="/profile"
|
||||
Icon={PersonIcon}
|
||||
iconSize={20}
|
||||
selected={pathname.endsWith("/profile")}
|
||||
/>
|
||||
<MenuItem
|
||||
name="Admin"
|
||||
href="/admin/zammad"
|
||||
Icon={SettingsIcon}
|
||||
iconSize={20}
|
||||
/>
|
||||
<Collapse
|
||||
in={pathname.startsWith("/admin/")}
|
||||
timeout="auto"
|
||||
unmountOnExit
|
||||
onClick={undefined}
|
||||
>
|
||||
<List component="div" disablePadding>
|
||||
<MenuItem
|
||||
name="Zammad Settings"
|
||||
href="/admin/zammad"
|
||||
Icon={FeaturedPlayListIcon}
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/admin/zammad")}
|
||||
/>
|
||||
<MenuItem
|
||||
name="Metamigo"
|
||||
href="/admin/metamigo"
|
||||
Icon={FeaturedPlayListIcon}
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/admin/metamigo")}
|
||||
/>
|
||||
<MenuItem
|
||||
name="Label Studio"
|
||||
href="/admin/label-studio"
|
||||
Icon={FeaturedPlayListIcon}
|
||||
iconSize={0}
|
||||
selected={pathname.endsWith("/admin/label-studio")}
|
||||
/>
|
||||
</List>
|
||||
</Collapse>
|
||||
|
||||
<MenuItem
|
||||
name="Logout"
|
||||
href="/logout"
|
||||
Icon={LogoutIcon}
|
||||
iconSize={20}
|
||||
/>
|
||||
</List>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Drawer>
|
||||
);
|
||||
</Drawer>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
79
components/TicketDetail.tsx
Normal file
79
components/TicketDetail.tsx
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
import { FC, useEffect } from "react";
|
||||
import { Grid, Box, Typography } from "@mui/material";
|
||||
import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
|
||||
import {
|
||||
MainContainer,
|
||||
ChatContainer,
|
||||
MessageList,
|
||||
Message,
|
||||
MessageInput,
|
||||
Conversation,
|
||||
ConversationHeader,
|
||||
} from "@chatscope/chat-ui-kit-react";
|
||||
|
||||
interface TicketDetailProps {
|
||||
ticket: any;
|
||||
articles: any[];
|
||||
}
|
||||
|
||||
export const TicketDetail: FC<TicketDetailProps> = ({ ticket, articles }) => {
|
||||
console.log({ here: "here", ticket });
|
||||
return (
|
||||
<MainContainer>
|
||||
<ChatContainer>
|
||||
<ConversationHeader>
|
||||
<ConversationHeader.Content>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
|
||||
textAlign: "center",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h5"
|
||||
sx={{ fontFamily: "Poppins", fontWeight: 700 }}
|
||||
>
|
||||
{ticket.title}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{ fontFamily: "Roboto", fontWeight: 400 }}
|
||||
>{`Ticket #${ticket.number} (created ${new Date(
|
||||
ticket.created_at
|
||||
).toLocaleDateString()})`}</Typography>
|
||||
</Box>
|
||||
</ConversationHeader.Content>
|
||||
</ConversationHeader>
|
||||
<MessageList>
|
||||
{articles.map((article: any) => (
|
||||
<Message
|
||||
className={
|
||||
article.internal
|
||||
? "internal-note"
|
||||
: article.sender === "Agent"
|
||||
? "outgoing-message"
|
||||
: "incoming-message"
|
||||
}
|
||||
model={{
|
||||
message: article.body.replace(/<div>*<br>*<div>/g, ""),
|
||||
sentTime: article.updated_at,
|
||||
sender: article.from,
|
||||
direction: article.sender === "Agent" ? "outgoing" : "incoming",
|
||||
position: "last",
|
||||
type: "html",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</MessageList>
|
||||
{/* <MessageInput
|
||||
placeholder="Type message here"
|
||||
sendOnReturnDisabled
|
||||
attachButton={false}
|
||||
sendButton={false}
|
||||
/> */}
|
||||
</ChatContainer>
|
||||
</MainContainer>
|
||||
);
|
||||
};
|
||||
75
components/TicketEdit.tsx
Normal file
75
components/TicketEdit.tsx
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
import { FC, useEffect } from "react";
|
||||
import { Grid, Box, Typography, TextField } from "@mui/material";
|
||||
import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
|
||||
import {
|
||||
MainContainer,
|
||||
ChatContainer,
|
||||
MessageList,
|
||||
Message,
|
||||
MessageInput,
|
||||
Conversation,
|
||||
ConversationHeader,
|
||||
} from "@chatscope/chat-ui-kit-react";
|
||||
|
||||
interface TicketEditProps {
|
||||
ticket: any;
|
||||
}
|
||||
|
||||
export const TicketEdit: FC<TicketEditProps> = ({ ticket }) => {
|
||||
return (
|
||||
<Box sx={{ height: "100vh", background: "#ddd", p: 2 }}>
|
||||
<Grid container direction="column" spacing={3}>
|
||||
<Grid item>
|
||||
<TextField
|
||||
label="Group"
|
||||
size="small"
|
||||
sx={{
|
||||
width: "100%",
|
||||
fieldset: { backgroundColor: "white" },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<TextField
|
||||
label="Owner"
|
||||
size="small"
|
||||
sx={{
|
||||
width: "100%",
|
||||
fieldset: { backgroundColor: "white" },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<TextField
|
||||
label="State"
|
||||
size="small"
|
||||
sx={{
|
||||
width: "100%",
|
||||
fieldset: { backgroundColor: "white" },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<TextField
|
||||
label="Priority"
|
||||
size="small"
|
||||
sx={{
|
||||
width: "100%",
|
||||
fieldset: { backgroundColor: "white" },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<TextField
|
||||
label="Tags"
|
||||
size="small"
|
||||
sx={{
|
||||
width: "100%",
|
||||
fieldset: { backgroundColor: "white" },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
|
@ -29,6 +29,9 @@ export const ZammadWrapper: FC<ZammadWrapperProps> = ({
|
|||
// @ts-ignore
|
||||
linkElement.contentDocument.querySelector("#navigation").style =
|
||||
"display: none";
|
||||
// @ts-ignore
|
||||
linkElement.contentDocument.querySelector("body").style =
|
||||
"font-family: Arial";
|
||||
|
||||
if (hideSidebar) {
|
||||
// @ts-ignore
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue