refactor: Implement hidePlayer state in ControlsPlayer and SimulationPlayer for better UI control
This commit is contained in:
parent
304ccf134a
commit
8facad31bc
|
|
@ -10,6 +10,7 @@ const ControlsPlayer = () => {
|
|||
const { setIsPlaying } = usePlayButtonStore();
|
||||
const { activeModule } = useModuleStore();
|
||||
const [walkMode, setWalkMode] = useState(false);
|
||||
const [hidePlayer, setHidePlayer] = useState(false);
|
||||
|
||||
const changeCamMode = () => {
|
||||
setWalkMode(!walkMode);
|
||||
|
|
@ -17,12 +18,15 @@ const ControlsPlayer = () => {
|
|||
};
|
||||
return (
|
||||
<div className="controls-player-container">
|
||||
{!hidePlayer && (
|
||||
<div className="controls-left">
|
||||
<PlayIcon />
|
||||
<div className="label">Running {activeModule}...</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="controls-right">
|
||||
{!hidePlayer && (
|
||||
<div className="walkMode-wrapper">
|
||||
<WalkIcon />
|
||||
<InputToggle
|
||||
|
|
@ -32,22 +36,29 @@ const ControlsPlayer = () => {
|
|||
onClick={changeCamMode}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
id="controls-player-play-button"
|
||||
className="btn-wrapper"
|
||||
className={`btn-wrapper${hidePlayer ? " hide" : ""}`}
|
||||
onClick={() => setIsPlaying(false)}
|
||||
>
|
||||
<div className="icon">
|
||||
<ExitIcon />
|
||||
</div>
|
||||
Exit
|
||||
{!hidePlayer && "Exit"}
|
||||
</button>
|
||||
<div className="btn-wrapper">
|
||||
<button
|
||||
className={`btn-wrapper${hidePlayer ? " hide" : ""}`}
|
||||
id="hide-btn"
|
||||
onClick={() => {
|
||||
setHidePlayer(!hidePlayer);
|
||||
}}
|
||||
>
|
||||
<div className="icon">
|
||||
<EyeCloseIcon />
|
||||
</div>
|
||||
Hide
|
||||
</div>
|
||||
{!hidePlayer && "Hide"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import {
|
|||
DailyProductionIcon,
|
||||
EndIcon,
|
||||
ExpandIcon,
|
||||
EyeCloseIcon,
|
||||
HourlySimulationIcon,
|
||||
InfoIcon,
|
||||
MonthlyROI,
|
||||
|
|
@ -30,6 +31,7 @@ const SimulationPlayer: React.FC = () => {
|
|||
const sliderRef = useRef<HTMLDivElement>(null);
|
||||
const [expand, setExpand] = useState(true);
|
||||
const [playSimulation, setPlaySimulation] = useState(false);
|
||||
const [hidePlayer, setHidePlayer] = useState(false);
|
||||
|
||||
const { speed, setSpeed } = useAnimationPlaySpeed();
|
||||
const { setIsPlaying } = usePlayButtonStore();
|
||||
|
|
@ -161,10 +163,10 @@ const SimulationPlayer: React.FC = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="simulation-player-wrapper">
|
||||
<div className={`simulation-player-wrapper${hidePlayer ? " hide" : ""}`}>
|
||||
<div className={`simulation-player-container ${expand ? "open" : ""}`}>
|
||||
<div className="controls-container">
|
||||
{subModule === "analysis" && (
|
||||
{!hidePlayer && subModule === "analysis" && (
|
||||
<div className="production-details">
|
||||
{/* hourlySimulation */}
|
||||
<div className="hourly-wrapper production-wrapper">
|
||||
|
|
@ -213,7 +215,7 @@ const SimulationPlayer: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
{subModule !== "analysis" && (
|
||||
{!hidePlayer && subModule !== "analysis" && (
|
||||
<div className="header">
|
||||
<InfoIcon />
|
||||
{playSimulation
|
||||
|
|
@ -222,6 +224,7 @@ const SimulationPlayer: React.FC = () => {
|
|||
</div>
|
||||
)}
|
||||
<div className="controls-wrapper">
|
||||
{!hidePlayer && (
|
||||
<button
|
||||
id="simulation-reset-button"
|
||||
className="simulation-button-container"
|
||||
|
|
@ -232,6 +235,8 @@ const SimulationPlayer: React.FC = () => {
|
|||
<ResetIcon />
|
||||
Reset
|
||||
</button>
|
||||
)}
|
||||
{!hidePlayer && (
|
||||
<button
|
||||
id="simulation-play-button"
|
||||
className="simulation-button-container"
|
||||
|
|
@ -242,6 +247,7 @@ const SimulationPlayer: React.FC = () => {
|
|||
<PlayStopIcon />
|
||||
{playSimulation ? "Play" : "Stop"}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
id="simulation-reset-button"
|
||||
className="simulation-button-container"
|
||||
|
|
@ -250,7 +256,17 @@ const SimulationPlayer: React.FC = () => {
|
|||
}}
|
||||
>
|
||||
<ExitIcon />
|
||||
Exit
|
||||
{!hidePlayer && "Exit"}
|
||||
</button>
|
||||
<button
|
||||
id="simulation-reset-button"
|
||||
className="simulation-button-container"
|
||||
onClick={() => {
|
||||
setHidePlayer(!hidePlayer);
|
||||
}}
|
||||
>
|
||||
<EyeCloseIcon />
|
||||
{!hidePlayer && "Hide"}
|
||||
</button>
|
||||
{subModule === "analysis" && (
|
||||
<button
|
||||
|
|
@ -263,6 +279,7 @@ const SimulationPlayer: React.FC = () => {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
{!hidePlayer && (
|
||||
<div className="progresser-wrapper">
|
||||
<div className="time-displayer">
|
||||
<div className="start-time-wrappper">
|
||||
|
|
@ -356,7 +373,8 @@ const SimulationPlayer: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{subModule === "analysis" && (
|
||||
)}
|
||||
{!hidePlayer && subModule === "analysis" && (
|
||||
<div className="processDisplayer">
|
||||
<div className="start-displayer timmer">00:00</div>
|
||||
<div className="end-displayer timmer">24:00</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,16 @@
|
|||
z-index: 2;
|
||||
transform: translate(-50%, 0);
|
||||
width: 70vw;
|
||||
|
||||
transition: all 0.3s;
|
||||
&.hide {
|
||||
width: fit-content;
|
||||
.simulation-player-container
|
||||
.controls-container
|
||||
.simulation-button-container {
|
||||
width: 32px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
.simulation-player-container {
|
||||
background: var(--background-color);
|
||||
padding: 7px;
|
||||
|
|
@ -90,11 +99,12 @@
|
|||
@include flex-center;
|
||||
gap: 2px;
|
||||
padding: 4px 8px;
|
||||
min-width: 64px;
|
||||
width: 64px;
|
||||
background: var(--background-color);
|
||||
border-radius: #{$border-radius-extra-large};
|
||||
height: fit-content;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
outline: 1px solid var(--border-color);
|
||||
|
|
@ -357,7 +367,7 @@
|
|||
@include flex-center;
|
||||
justify-content: space-between;
|
||||
position: fixed;
|
||||
bottom: 40px;
|
||||
bottom: 32px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
color: var(--accent-color);
|
||||
|
|
@ -394,21 +404,23 @@
|
|||
}
|
||||
|
||||
.btn-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@include flex-center;
|
||||
gap: 2px;
|
||||
padding: 4px 8px;
|
||||
min-width: 64px;
|
||||
width: 64px;
|
||||
background: var(--background-color);
|
||||
border-radius: 20px;
|
||||
height: fit-content;
|
||||
cursor: pointer;
|
||||
transition: color .2s;
|
||||
transition: all 0.2s;
|
||||
outline: 1px solid transparent;
|
||||
&:hover {
|
||||
outline: 1px solid var(--border-color);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
&.hide{
|
||||
width: 32px;
|
||||
}
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@
|
|||
|
||||
.floating {
|
||||
// width: calc(var(--realTimeViz-container-width) * 0.2px);
|
||||
|
||||
// transform: scale(min(1, calc(var(--realTimeViz-container-width) / 1000)));
|
||||
|
||||
min-width: 230px;
|
||||
|
|
@ -63,7 +62,6 @@
|
|||
left: 50%;
|
||||
gap: 6px;
|
||||
border-radius: #{$border-radius-medium};
|
||||
|
||||
overflow: auto;
|
||||
max-width: calc(100% - 500px);
|
||||
z-index: 3;
|
||||
|
|
@ -71,6 +69,10 @@
|
|||
pointer-events: all;
|
||||
transition: all 0.3s linear;
|
||||
|
||||
&.bottom{
|
||||
bottom: var(--bottomWidth);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -118,7 +120,10 @@
|
|||
}
|
||||
|
||||
.zone-container.visualization-playing {
|
||||
bottom: 70px;
|
||||
bottom: 74px;
|
||||
&.bottom{
|
||||
bottom: var(--bottomWidth);
|
||||
}
|
||||
}
|
||||
|
||||
.zone-wrapper.bottom {
|
||||
|
|
|
|||
Loading…
Reference in New Issue