refactor: Update layout styles and improve KeyPressListener for better UI responsiveness and shortcut handling
This commit is contained in:
parent
95f118f8ee
commit
d6dceb400f
|
@ -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;
|
||||||
}
|
// }
|
||||||
|
// }
|
|
@ -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;
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue