Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: toggle button for expand log section on modal troubleshoot (#3130)

Browse Source
This commit is contained in:
Faisal Amir 2024-07-08 20:02:36 +07:00 committed by Louis
parent 28608099c5
commit d175dea05a
No known key found for this signature in database
GPG Key ID: 44FA9F4D33C37DE2
1 changed files with 78 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
web/containers/ModalTroubleShoot/index.tsx
View File

@ -1,7 +1,8 @@
import { useState } from 'react' import { useState } from 'react'
import { Modal } from '@janhq/joi' import { Button, Modal } from '@janhq/joi'
import { atom, useAtom } from 'jotai' import { atom, useAtom } from 'jotai'
import { Maximize2 } from 'lucide-react'
import { twMerge } from 'tailwind-merge' import { twMerge } from 'tailwind-merge'
import ServerLogs from '@/containers/ServerLogs' import ServerLogs from '@/containers/ServerLogs'
@ -17,6 +18,7 @@ const ModalTroubleShooting = () => {
modalTroubleShootingAtom modalTroubleShootingAtom
) )
const [isTabActive, setIsTabActivbe] = useState(0) const [isTabActive, setIsTabActivbe] = useState(0)
const [showLogFullSize, setshowLogFullSize] = useState(false)
return ( return (
<Modal <Modal
@ -26,14 +28,15 @@ const ModalTroubleShooting = () => {
title="Troubleshooting Assistance" title="Troubleshooting Assistance"
content={ content={
<div className="flex h-full w-full flex-col overflow-hidden text-sm"> <div className="flex h-full w-full flex-col overflow-hidden text-sm">
<div className="flex-shrink-0"> <div className="mb-3 flex-shrink-0">
<p className="text-[hsla(var(--text-secondary)] mt-2 pr-3 leading-relaxed"> <p className="text-[hsla(var(--text-secondary)] mt-2 pr-3 leading-relaxed">
{`We're here to help! Your report is crucial for debugging and shaping {`We're here to help! Your report is crucial for debugging and shaping
the next version. Here’s how you can report & get further support:`} the next version. Here’s how you can report & get further support:`}
</p> </p>
</div> </div>
<div className="my-3 rounded-lg border border-[hsla(var(--app-border))] p-4 shadow"> {!showLogFullSize && (
<div className="mb-3 rounded-lg border border-[hsla(var(--app-border))] p-4 shadow">
<h2 className="font-semibold">Step 1</h2> <h2 className="font-semibold">Step 1</h2>
<p className="text-[hsla(var(--text-secondary)] mt-1"> <p className="text-[hsla(var(--text-secondary)] mt-1">
Follow our&nbsp; Follow our&nbsp;
@ -47,8 +50,15 @@ const ModalTroubleShooting = () => {
&nbsp;for step-by-step solutions. &nbsp;for step-by-step solutions.
</p> </p>
</div> </div>
)}
<div className="rounded-lg border border-[hsla(var(--app-border))] pb-2 pt-4 shadow"> <div
className={twMerge(
'rounded-lg border border-[hsla(var(--app-border))] pb-2 shadow',
!showLogFullSize && 'pt-4'
)}
>
{!showLogFullSize && (
<div className="px-4"> <div className="px-4">
<h2 className="font-semibold">Step 2</h2> <h2 className="font-semibold">Step 2</h2>
<p className="text-[hsla(var(--text-secondary)] mt-1"> <p className="text-[hsla(var(--text-secondary)] mt-1">
@ -72,13 +82,22 @@ const ModalTroubleShooting = () => {
> >
Discord Discord
</a> </a>
&nbsp;& send it to #🆘|get-help channel for further support. &nbsp;& send it to #🆘|get-help channel for further
support.
</p> </p>
</li> </li>
</ul> </ul>
</div> </div>
<div className="relative flex h-full w-full flex-col pt-4"> )}
<div className="border-y border-[hsla(var(--app-border))] px-4 py-2 ">
<div
className={twMerge('relative flex h-full w-full flex-col pt-4')}
>
<div
className={twMerge(
'border-y border-[hsla(var(--app-border))] px-4 py-2'
)}
>
<ul className="inline-flex space-x-2 rounded-lg px-1"> <ul className="inline-flex space-x-2 rounded-lg px-1">
{logOption.map((name, i) => { {logOption.map((name, i) => {
return ( return (
@ -103,7 +122,20 @@ const ModalTroubleShooting = () => {
})} })}
</ul> </ul>
</div> </div>
<div className="max-h-[160px] overflow-y-auto"> <div
className={twMerge(
'max-h-[180px] overflow-y-auto',
showLogFullSize && 'max-h-[400px]'
)}
>
<Button
theme="icon"
className="absolute right-4 top-20"
autoFocus={false}
onClick={() => setshowLogFullSize(!showLogFullSize)}
>
<Maximize2 size={14} />
</Button>
<div <div
className={twMerge('hidden', isTabActive === 0 && 'block')} className={twMerge('hidden', isTabActive === 0 && 'block')}
> >