refactor: Update layout styles and improve KeyPressListener for better UI responsiveness and shortcut handling

This commit is contained in:
Nalvazhuthi 2025-05-15 18:19:35 +05:30
parent 95f118f8ee
commit d6dceb400f
2 changed files with 55 additions and 37 deletions

View File

@ -70,15 +70,20 @@
position: relative; position: relative;
.icon { .icon {
width: 100%;
margin-bottom: 15px; margin-bottom: 15px;
text-align: center; text-align: center;
svg {
width: 100%;
}
} }
.value { .value {
margin-bottom: 15px; margin-bottom: 15px;
font-size: 16px; font-size: var(--font-size-small);
font-weight: 500; font-weight: 500;
color: var(--text-primary); color: var(--text-primary);
} }
@ -154,6 +159,7 @@
border-radius: 4px; border-radius: 4px;
svg { svg {
path { path {
fill: var(--background-color-accent); fill: var(--background-color-accent);
@ -185,9 +191,10 @@
} }
body.compare-layout-open { // body.compare-layout-open {
main { // main {
padding-right: 10px; // Adjust as needed // padding-right: 10px;
transition: padding 0.3s ease;
} // transition: padding 0.3s ease;
} // }
// }

View File

@ -12,7 +12,9 @@ import {
useToggleView, useToggleView,
useToolMode, useToolMode,
} from "../../store/builder/store"; } from "../../store/builder/store";
import useCameraModeStore, { usePlayButtonStore } from "../../store/usePlayButtonStore"; import useCameraModeStore, {
usePlayButtonStore,
} from "../../store/usePlayButtonStore";
import { detectModifierKeys } from "./detectModifierKeys"; import { detectModifierKeys } from "./detectModifierKeys";
import { useSelectedZoneStore } from "../../store/visualization/useZoneStore"; import { useSelectedZoneStore } from "../../store/visualization/useZoneStore";
@ -31,6 +33,7 @@ const KeyPressListener: React.FC = () => {
const { clearSelectedZone } = useSelectedZoneStore(); const { clearSelectedZone } = useSelectedZoneStore();
const { showShortcuts, setShowShortcuts } = useShortcutStore(); const { showShortcuts, setShowShortcuts } = useShortcutStore();
const { setWalkMode } = useCameraModeStore(); const { setWalkMode } = useCameraModeStore();
const { setIsVersionSaved } = useSaveVersion();
const isTextInput = (element: Element | null): boolean => const isTextInput = (element: Element | null): boolean =>
element instanceof HTMLInputElement || element instanceof HTMLInputElement ||
@ -179,6 +182,7 @@ const KeyPressListener: React.FC = () => {
setIsPlaying(false); setIsPlaying(false);
clearSelectedZone(); clearSelectedZone();
setShowShortcuts(false); setShowShortcuts(false);
setIsVersionSaved(false);
} }
if (keyCombination === "Ctrl+Shift+?") { if (keyCombination === "Ctrl+Shift+?") {
@ -199,7 +203,14 @@ const KeyPressListener: React.FC = () => {
window.addEventListener("keydown", handleKeyPress); window.addEventListener("keydown", handleKeyPress);
return () => window.removeEventListener("keydown", handleKeyPress); return () => window.removeEventListener("keydown", handleKeyPress);
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [activeModule, toggleUIRight, toggleUILeft, toggleView, showShortcuts, isPlaying]); }, [
activeModule,
toggleUIRight,
toggleUILeft,
toggleView,
showShortcuts,
isPlaying,
]);
return null; return null;
}; };