0xb00b5/firegex-traffic-viewer
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixes to Tooltip

Browse Source
This commit is contained in:
DomySh
2022-06-15 01:52:33 +02:00
parent c639b43448
commit 8ce85dc867
5 changed files with 16 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/Header/index.tsx
View File

@@ -77,7 +77,7 @@ function Header() {
const closeModal = () => {setOpen(false);} const closeModal = () => {setOpen(false);}
return <div id="header-page" className={style.header}> return <div id="header-page" className={style.header}>
<FloatingTooltip label="Home" transition="pop" transitionDuration={200} openDelay={1000} transitionTimingFunction="ease" color="dark" position="right" > <FloatingTooltip zIndex={0} label="Home" transition="pop" transitionDuration={200} openDelay={1000} transitionTimingFunction="ease" color="dark" position="right" >
<div style={{ width: 240, marginLeft: 'auto', marginRight: 'auto', padding:"40px", cursor: 'pointer' }}> <div style={{ width: 240, marginLeft: 'auto', marginRight: 'auto', padding:"40px", cursor: 'pointer' }}>
<Image src="/header-logo.png" alt="Firegex logo" onClick={()=>navigator("/")}/> <Image src="/header-logo.png" alt="Firegex logo" onClick={()=>navigator("/")}/>
</div> </div>
@@ -115,7 +115,7 @@ function Header() {
</Menu> </Menu>
<div style={{marginLeft:"20px"}}></div> <div style={{marginLeft:"20px"}}></div>
{ location.pathname !== "/"? { location.pathname !== "/"?
<Tooltip label="Home" position='left' transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="teal"> <Tooltip zIndex={0} label="Home" position='left' transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="teal">
<ActionIcon color="teal" style={{marginRight:"10px"}} <ActionIcon color="teal" style={{marginRight:"10px"}}
size="xl" radius="md" variant="filled" size="xl" radius="md" variant="filled"
onClick={()=>navigator("/")}> onClick={()=>navigator("/")}>
@@ -124,10 +124,10 @@ function Header() {
</Tooltip> </Tooltip>
:null} :null}
{ srv_id? { srv_id?
<Tooltip label="Add a new regex" position='left' transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue"> <Tooltip label="Add a new regex" zIndex={0} position='left' transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue">
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon> <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
</Tooltip> </Tooltip>
: <Tooltip label="Add a new service" position='left' transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue"> : <Tooltip label="Add a new service" zIndex={0} position='left' transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue">
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon> <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
</Tooltip> </Tooltip>
} }

2
frontend/src/components/RegexView/index.tsx
View File

@@ -43,7 +43,7 @@ function RegexView({ regexInfo }:{ regexInfo:RegexFilter }) {
<Text className={style.regex_text}> {regex_expr}</Text> <Text className={style.regex_text}> {regex_expr}</Text>
</Grid.Col> </Grid.Col>
<Grid.Col span={2}> <Grid.Col span={2}>
<Tooltip label="Delete regex" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="red"> <Tooltip label="Delete regex" zIndex={0} transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="red">
<ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"><BsTrashFill size={22} /></ActionIcon> <ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"><BsTrashFill size={22} /></ActionIcon>
</Tooltip> </Tooltip>
</Grid.Col> </Grid.Col>

6
frontend/src/components/ServiceRow/index.tsx
View File

@@ -108,14 +108,14 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
{additional_buttons} {additional_buttons}
{["pause","wait"].includes(service.status)? {["pause","wait"].includes(service.status)?
<Tooltip label="Stop service" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="orange"> <Tooltip label="Stop service" zIndex={0} transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="orange">
<ActionIcon color="yellow" loading={buttonLoading} <ActionIcon color="yellow" loading={buttonLoading}
onClick={()=>setStopModal(true)} size="xl" radius="md" variant="filled" onClick={()=>setStopModal(true)} size="xl" radius="md" variant="filled"
disabled={service.status === "stop"}> disabled={service.status === "stop"}>
<FaStop size="20px" /> <FaStop size="20px" />
</ActionIcon> </ActionIcon>
</Tooltip>: </Tooltip>:
<Tooltip label="Pause service" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="red"> <Tooltip label="Pause service" zIndex={0} transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="red">
<ActionIcon color="red" loading={buttonLoading} <ActionIcon color="red" loading={buttonLoading}
onClick={pauseService} size="xl" radius="md" variant="filled" onClick={pauseService} size="xl" radius="md" variant="filled"
disabled={service.status === "stop"}> disabled={service.status === "stop"}>
@@ -125,7 +125,7 @@ function ServiceRow({ service, onClick, additional_buttons }:{ service:Service,
} }
<Space w="md"/> <Space w="md"/>
<Tooltip label="Start service" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="teal"> <Tooltip label="Start service" transition="pop" zIndex={0} transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="teal">
<ActionIcon color="teal" size="xl" radius="md" onClick={startService} loading={buttonLoading} <ActionIcon color="teal" size="xl" radius="md" onClick={startService} loading={buttonLoading}
variant="filled" disabled={!["stop","pause"].includes(service.status)?true:false}> variant="filled" disabled={!["stop","pause"].includes(service.status)?true:false}>
<FaPlay size="20px" /> <FaPlay size="20px" />

17
frontend/src/pages/HomePage.tsx
View File

@@ -37,22 +37,15 @@ function HomePage() {
<LoadingOverlay visible={loader} /> <LoadingOverlay visible={loader} />
{services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{ {services.length > 0?services.map( srv => <ServiceRow service={srv} key={srv.id} onClick={()=>{
navigator("/"+srv.id) navigator("/"+srv.id)
}} />):<><Space h="xl"/> <Title className='center-flex' order={3}>No services found! Add one clicking the "+" button above</Title> }} />):<><Space h="xl"/> <Title className='center-flex' align='center' order={3}>No services found! Add one clicking the "+" button above</Title>
<Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" />
<div style={{ <div className='center-flex'>
display: 'flex', <Tooltip label="Add a new service" transition="pop" transitionDuration={200} openDelay={500} zIndex={0} transitionTimingFunction="ease" color="blue">
alignItems: 'center',
justifyContent: 'center',
}}>
<Tooltip label="Add a new service" transition="skew-down" transitionDuration={300} transitionTimingFunction="ease" color="blue">
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon> <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
</Tooltip> </Tooltip>
</div> </div>
</>} </>}
<AddNewService opened={open} onClose={closeModal} />
<Modal size="xl" title="Add a new service" opened={open} onClose={closeModal} closeOnClickOutside={false} centered>
<AddNewService closePopup={closeModal} />
</Modal>
</div> </div>
} }

6
frontend/src/pages/ServiceDetails.tsx
View File

@@ -84,11 +84,11 @@ function ServiceDetails() {
return <div> return <div>
<LoadingOverlay visible={loader} /> <LoadingOverlay visible={loader} />
<ServiceRow service={serviceInfo} additional_buttons={<> <ServiceRow service={serviceInfo} additional_buttons={<>
<Tooltip label="Delete service" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="red"> <Tooltip label="Delete service" zIndex={0} transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="red">
<ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"><BsTrashFill size={22} /></ActionIcon> <ActionIcon color="red" onClick={()=>setDeleteModal(true)} size="xl" radius="md" variant="filled"><BsTrashFill size={22} /></ActionIcon>
</Tooltip> </Tooltip>
<Space w="md"/> <Space w="md"/>
<Tooltip label="Change proxy port" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue"> <Tooltip label="Change proxy port" zIndex={0} transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue">
<ActionIcon color="blue" onClick={()=>setChangePortModal(true)} size="xl" radius="md" variant="filled"><BsArrowRepeat size={28} /></ActionIcon> <ActionIcon color="blue" onClick={()=>setChangePortModal(true)} size="xl" radius="md" variant="filled"><BsArrowRepeat size={28} /></ActionIcon>
</Tooltip> </Tooltip>
<Space w="md"/> <Space w="md"/>
@@ -99,7 +99,7 @@ function ServiceDetails() {
<Title className='center-flex' align='center' order={3}>No regex found for this service! Add one by clicking the "+" button</Title> <Title className='center-flex' align='center' order={3}>No regex found for this service! Add one by clicking the "+" button</Title>
<Space h="xl" /> <Space h="xl" /> <Space h="xl" /> <Space h="xl" />
<div className='center-flex'> <div className='center-flex'>
<Tooltip label="Add a new regex" transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue"> <Tooltip label="Add a new regex" zIndex={0} transition="pop" transitionDuration={200} openDelay={500} transitionTimingFunction="ease" color="blue">
<ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon> <ActionIcon color="blue" onClick={()=>setOpen(true)} size="xl" radius="md" variant="filled"><BsPlusLg size="20px" /></ActionIcon>
</Tooltip> </Tooltip>
</div> </div>