Added window transformations
This commit is contained in:
Prozilla
parent
6f1b9fe148
commit
f39e663cd7
7 changed files with 85 additions and 28 deletions
22
package-lock.json
generated
22
package-lock.json
generated
|
|
@ -17,6 +17,7 @@
|
|||
"@testing-library/user-event": "^13.5.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-draggable": "^4.4.5",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-svg": "^16.1.18",
|
||||
"web-vitals": "^2.1.4"
|
||||
|
|
@ -6024,6 +6025,14 @@
|
|||
"wrap-ansi": "^7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/clsx": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
|
||||
"integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/co": {
|
||||
"version": "4.6.0",
|
||||
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
|
||||
|
|
@ -14556,6 +14565,19 @@
|
|||
"react": "^18.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-draggable": {
|
||||
"version": "4.4.5",
|
||||
"resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.5.tgz",
|
||||
"integrity": "sha512-OMHzJdyJbYTZo4uQE393fHcqqPYsEtkjfMgvCHr6rejT+Ezn4OZbNyGH50vv+SunC1RMvwOTSWkEODQLzw1M9g==",
|
||||
"dependencies": {
|
||||
"clsx": "^1.1.1",
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">= 16.3.0",
|
||||
"react-dom": ">= 16.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-error-overlay": {
|
||||
"version": "6.0.11",
|
||||
"resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
"@testing-library/user-event": "^13.5.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-draggable": "^4.4.5",
|
||||
"react-scripts": "5.0.1",
|
||||
"react-svg": "^16.1.18",
|
||||
"web-vitals": "^2.1.4"
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
width: 100%;
|
||||
height: var(--task-bar-height);
|
||||
background-color: var(--task-bar-color);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.Task-bar button {
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ export function Taskbar() {
|
|||
<button>
|
||||
<FontAwesomeIcon icon={faVolumeHigh}/>
|
||||
</button>
|
||||
<button>
|
||||
<button style={{ userSelect: "none" }}>
|
||||
{date.toLocaleString("en-US", {
|
||||
hour: "numeric",
|
||||
minute: "numeric",
|
||||
|
|
|
|||
|
|
@ -4,10 +4,13 @@
|
|||
}
|
||||
|
||||
.Window-container {
|
||||
position: absolute;
|
||||
background-color: var(--background-color-c);
|
||||
}
|
||||
|
||||
.Window-container.Maximized {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.Header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -4,37 +4,68 @@ import { faMinus, faXmark } from "@fortawesome/free-solid-svg-icons";
|
|||
import { faSquare } from "@fortawesome/free-regular-svg-icons";
|
||||
import { ReactSVG } from "react-svg";
|
||||
import { useWindowsManager } from "../hooks/WindowsManagerContext.js";
|
||||
import Draggable from "react-draggable";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
export function Window({ id, app, size, position, focused = false, minimized = false, maximized = false }) {
|
||||
export function Window({ id, app, size, position, focused = false, minimized = false }) {
|
||||
const windowsManager = useWindowsManager();
|
||||
const nodeRef = useRef(null);
|
||||
const [maximized, setMaximized] = useState(false);
|
||||
|
||||
const [screenWidth, setScreenWidth] = useState(100);
|
||||
const [screenHeight, setScreenHeight] = useState(100);
|
||||
|
||||
useEffect(() => {
|
||||
const resizeObserver = new ResizeObserver((event) => {
|
||||
setScreenWidth(event[0].contentBoxSize[0].inlineSize);
|
||||
setScreenHeight(event[0].contentBoxSize[0].blockSize);
|
||||
});
|
||||
|
||||
resizeObserver.observe(document.getElementById("root"));
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
key={id}
|
||||
className="Window-container"
|
||||
style={{
|
||||
width: size.x,
|
||||
height: size.y,
|
||||
left: position.x,
|
||||
top: position.y,
|
||||
<Draggable
|
||||
axis="both"
|
||||
handle=".Header"
|
||||
defaultPosition={{ x: position.x, y: position.y }}
|
||||
position={null}
|
||||
scale={1}
|
||||
bounds={{
|
||||
top: 0,
|
||||
bottom: screenHeight - 55,
|
||||
left: -size.x + 85,
|
||||
right: screenWidth - 5
|
||||
}}
|
||||
cancel="button"
|
||||
nodeRef={nodeRef}
|
||||
disabled={maximized}
|
||||
>
|
||||
<div className="Header">
|
||||
<ReactSVG className="Window-icon" src={process.env.PUBLIC_URL + `/media/applications/icons/${app.id}.svg`}/>
|
||||
<p>{app.name}</p>
|
||||
<button>
|
||||
<FontAwesomeIcon icon={faMinus}/>
|
||||
</button>
|
||||
<button>
|
||||
<FontAwesomeIcon icon={faSquare}/>
|
||||
</button>
|
||||
<button onClick={() => { windowsManager.close(id); }}>
|
||||
<FontAwesomeIcon icon={faXmark}/>
|
||||
</button>
|
||||
<div
|
||||
className={`Window-container ${maximized ? "Maximized" : ""}`}
|
||||
ref={nodeRef}
|
||||
style={{
|
||||
width: maximized ? screenWidth : size.x,
|
||||
height: maximized ? screenHeight : size.y,
|
||||
}}
|
||||
>
|
||||
<div className="Header">
|
||||
<ReactSVG className="Window-icon" src={process.env.PUBLIC_URL + `/media/applications/icons/${app.id}.svg`}/>
|
||||
<p>{app.name}</p>
|
||||
<button>
|
||||
<FontAwesomeIcon icon={faMinus}/>
|
||||
</button>
|
||||
<button onClick={() => setMaximized(!maximized)}>
|
||||
<FontAwesomeIcon icon={faSquare}/>
|
||||
</button>
|
||||
<button onClick={() => { windowsManager.close(id); }}>
|
||||
<FontAwesomeIcon icon={faXmark}/>
|
||||
</button>
|
||||
</div>
|
||||
<div className="Window-content">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="Window-content">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</Draggable>
|
||||
);
|
||||
}
|
||||
|
|
@ -51,7 +51,6 @@ export default class WindowsManager {
|
|||
let active = false;
|
||||
|
||||
Object.values(this.windows).forEach((window) => {
|
||||
console.log(window.app.id, appId);
|
||||
if (window.app.id === appId) {
|
||||
active = true;
|
||||
return;
|
||||
|
|
|
|||
Loading…
Reference in a new issue