Fix: Add Full Screen mode and update Tabs syntax#128
Conversation
pr.mp4Hi @ubaidsk ,you can check this out ! |
ubaidsk
left a comment
There was a problem hiding this comment.
I tested this on Edge, Safari, and Brave browsers. It works like a charm. There are no console errors as well. Thank you so much for implementing this. Could you please remove the following code comments? I think they are not necessary.
Once these review comments are addressed, I think this would be good to merge!
components/TextBox.js
Outdated
| @@ -1,13 +1,34 @@ | |||
| import { Button, Tabs, Dropdown, Menu, Space } from "antd"; | |||
| import { Button, Tabs, Dropdown, Menu, Space } from "antd"; // Restored Menu | |||
There was a problem hiding this comment.
| import { Button, Tabs, Dropdown, Menu, Space } from "antd"; // Restored Menu | |
| import { Button, Tabs, Dropdown, Menu, Space } from "antd"; |
components/TextBox.js
Outdated
| import { DownOutlined, PlayCircleOutlined } from "@ant-design/icons"; | ||
| import { DownOutlined, PlayCircleOutlined,FullscreenOutlined,FullscreenExitOutlined} from "@ant-design/icons"; | ||
| import { useIsMobile } from "./useIsMobile"; | ||
| import React, { useState, useEffect } from 'react'; // Added useEffect |
There was a problem hiding this comment.
| import React, { useState, useEffect } from 'react'; // Added useEffect | |
| import React, { useState, useEffect } from 'react'; |
components/TextBox.js
Outdated
| const isMobile = useIsMobile(); // ADDED THIS | ||
| // ADDED THIS FUNCTION | ||
| const [isFullScreen, setIsFullScreen] = useState(false); |
There was a problem hiding this comment.
| const isMobile = useIsMobile(); // ADDED THIS | |
| // ADDED THIS FUNCTION | |
| const [isFullScreen, setIsFullScreen] = useState(false); | |
| const isMobile = useIsMobile(); | |
| const [isFullScreen, setIsFullScreen] = useState(false); |
components/TextBox.js
Outdated
| <Tabs | ||
| tabBarExtraContent={extraOperations} | ||
| style={{ height: "100%" }} | ||
| items={tabItems} // UPDATED TO MODERN SYNTAX |
There was a problem hiding this comment.
| items={tabItems} // UPDATED TO MODERN SYNTAX | |
| items={tabItems} |
8a47826 to
ba67dd4
Compare
ba67dd4 to
e55338b
Compare
|
I have addressed the feedback and removed all internal comments/notes from the code. Ready for final review! CC: @ubaidsk |
ubaidsk
left a comment
There was a problem hiding this comment.
LGTM, thank you for fixing this, great work!
This PR adds a responsive Full Screen mode to provide a distraction-free environment for users. It also updates the Tabs and Dropdown components to use the modern items and menu props to resolve console deprecation warnings.
steps:
Fullscreen Toggle: The page successfully enters a distraction-free fullscreen mode when you click the button, removing browser menus and the URL bar as requested.
State Management: The button correctly updates from "Fullscreen" to "Exit Fullscreen" once the mode is active, providing clear user feedback.
Responsive Layout: In the mobile view (around 0:20 in the video), the button intelligently collapses to show only the icon, preventing header clutter while maintaining the "Run" text.
Exit Modes: The application accurately handles exiting fullscreen through both the button click and the browser's native Esc key.
Closes #113