idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-23 16:59:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): fullscreen view for irc announce logs (#994)

Browse source 
* fullscreen view for announce logs

* cleanup functions and classes

* some css touches

---------

Co-authored-by: Fabricio Silva <hi@fabricio.dev>
This commit is contained in:
martylukyy 2023-07-21 17:24:43 +02:00 • committed by GitHub
parent 2358ea143e
commit 72bb2ddadb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 37 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

40
web/src/screens/settings/Irc.tsx
View file

@ -612,6 +612,21 @@ export const Events = ({ network, channel }: EventsProps) => {
const [settings] = SettingsContext.use();
const messagesEndRef = useRef<HTMLDivElement>(null);
const [isFullscreen, toggleFullscreen] = useToggle(false);
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === "Escape" && isFullscreen) {
toggleFullscreen();
}
};
window.addEventListener("keydown", handleKeyDown);
return () => {
window.removeEventListener("keydown", handleKeyDown);
};
}, [isFullscreen, toggleFullscreen]);
const [logs, setLogs] = useState<IrcEvent[]>([]);
@ -661,11 +676,30 @@ export const Events = ({ network, channel }: EventsProps) => {
}, [settings]);
return (
<div className="dark:bg-gray-800 rounded-lg shadow-lg p-1.5">
<div
className={classNames(
"dark:bg-gray-800 rounded-lg shadow-lg p-2",
isFullscreen ? "fixed top-0 left-0 w-screen h-screen z-50" : ""
)}
>
<div className="flex relative">
<button
className={classNames(
"dark:bg-gray-800 p-2 absolute top-2 right-2 mr-2 bg-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 hover:cursor-pointer rounded-md"
)}
onClick={toggleFullscreen}
>
{isFullscreen
? <span className="flex items-center"><ArrowsPointingInIcon className="w-5 h-5"/></span>
: <span className="flex items-center"><ArrowsPointingOutIcon className="w-5 h-5"/></span>}
</button>
</div>
<div className="overflow-y-auto px-2 rounded-lg min-w-full aspect-[2/1] bg-gray-100 dark:bg-gray-900 overflow-auto">
<div
className={classNames(
"overflow-y-auto rounded-lg min-w-full bg-gray-100 dark:bg-gray-900 overflow-auto",
isFullscreen ? "max-w-full h-full p-2 border-gray-300 dark:border-gray-700" : "px-2 py-1 aspect-[2/1]"
)}
>
{logs.map((entry, idx) => (
<div
key={idx}