{ setShowContent(true); }}
+ onMouseLeave={() => { setShowContent(false); }}
+ >
+
+ {icon &&
);
+}
\ No newline at end of file
diff --git a/src/components/actions/actions/RadioAction.jsx b/src/components/actions/actions/RadioAction.jsx
new file mode 100644
index 0000000..533d1fd
--- /dev/null
+++ b/src/components/actions/actions/RadioAction.jsx
@@ -0,0 +1,40 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { formatShortcut } from "../../../features/utils/string.js";
+import styles from "../Actions.module.css";
+import { faCircleDot } from "@fortawesome/free-solid-svg-icons";
+import { useState } from "react";
+import { faCircle } from "@fortawesome/free-regular-svg-icons";
+
+/**
+ * @param {object} props
+ * @param {string} props.actionId
+ * @param {{
+ * label: string,
+ * shortcut: string[]
+ * }[]} props.options
+ * @param {number} props.initialIndex
+ * @param {Function} props.onTrigger
+ */
+export function RadioAction({ actionId, options, initialIndex, onTrigger }) {
+ const [activeIndex, setActiveIndex] = useState(initialIndex ?? 0);
+
+ return ({label}
+ +
+ {children}
+
+
+ {options.map(({ label, shortcut }, index) =>
+
+ )}
+
);
+}
\ No newline at end of file
diff --git a/src/components/actions/actions/ToggleAction.jsx b/src/components/actions/actions/ToggleAction.jsx
new file mode 100644
index 0000000..06456b2
--- /dev/null
+++ b/src/components/actions/actions/ToggleAction.jsx
@@ -0,0 +1,26 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { formatShortcut } from "../../../features/utils/string.js";
+import styles from "../Actions.module.css";
+import { useState } from "react";
+import { faSquare } from "@fortawesome/free-regular-svg-icons";
+import { faSquareCheck } from "@fortawesome/free-solid-svg-icons";
+
+export function ToggleAction({ actionId, label, shortcut, initialValue, onTrigger }) {
+ const [active, setActive] = useState(initialValue ?? false);
+
+ return ();
+}
\ No newline at end of file
diff --git a/src/components/applications/file-explorer/FileExplorer.jsx b/src/components/applications/file-explorer/FileExplorer.jsx
index 72c7ea3..26da32f 100644
--- a/src/components/applications/file-explorer/FileExplorer.jsx
+++ b/src/components/applications/file-explorer/FileExplorer.jsx
@@ -217,7 +217,10 @@ export function FileExplorer({ startPath, app, modalsManager }) {
showHidden={showHidden}
onClickFile={(event, file) => {
event.preventDefault();
- windowsManager.openFile(file, { mode: "view" });
+ const options = {};
+ if (file.extension === "md")
+ options.mode = "view";
+ windowsManager.openFile(file, options);
}}
onClickFolder={(event, folder) => {
changeDirectory(folder.linkedPath ?? folder.name);
diff --git a/src/components/applications/file-explorer/FileExplorer.module.css b/src/components/applications/file-explorer/FileExplorer.module.css
index 661fe83..f63b470 100644
--- a/src/components/applications/file-explorer/FileExplorer.module.css
+++ b/src/components/applications/file-explorer/FileExplorer.module.css
@@ -122,6 +122,8 @@
}
.Main {
+ --scale: inherit !important;
+
position: relative;
flex: 1;
display: flex;
diff --git a/src/components/applications/file-explorer/directory-list/DirectoryList.jsx b/src/components/applications/file-explorer/directory-list/DirectoryList.jsx
index f7c3441..3ad524d 100644
--- a/src/components/applications/file-explorer/directory-list/DirectoryList.jsx
+++ b/src/components/applications/file-explorer/directory-list/DirectoryList.jsx
@@ -63,15 +63,11 @@ export function DirectoryList({ directory, showHidden = false, folderClassName,
};
document.addEventListener("mousemove", onMoveRectSelect);
- document.addEventListener("pointermove", onMoveRectSelect);
document.addEventListener("mouseup", onStopRectSelect);
- document.addEventListener("pointerup", onStopRectSelect);
return () => {
document.removeEventListener("mousemove", onMoveRectSelect);
- document.removeEventListener("pointermove", onMoveRectSelect);
document.removeEventListener("mouseup", onStopRectSelect);
- document.removeEventListener("pointerup", onStopRectSelect);
};
});
@@ -140,7 +136,6 @@ export function DirectoryList({ directory, showHidden = false, folderClassName,
className={classNames.join(" ")}
onClick={clearSelection}
onMouseDown={onStartRectSelect}
- onPointerDown={onStartRectSelect}
{...props}
>
{rectSelectStart != null && rectSelectEnd != null
diff --git a/src/components/applications/file-explorer/directory-list/DirectoryList.module.css b/src/components/applications/file-explorer/directory-list/DirectoryList.module.css
index e25f190..49d0616 100644
--- a/src/components/applications/file-explorer/directory-list/DirectoryList.module.css
+++ b/src/components/applications/file-explorer/directory-list/DirectoryList.module.css
@@ -1,4 +1,6 @@
.Container {
+ --scale: 1rem;
+
position: relative;
width: 100%;
height: 100%;
diff --git a/src/components/desktop/Desktop.jsx b/src/components/desktop/Desktop.jsx
index c8ce8d3..79a6a34 100644
--- a/src/components/desktop/Desktop.jsx
+++ b/src/components/desktop/Desktop.jsx
@@ -7,7 +7,7 @@ import { useModals } from "../../hooks/modals/modals.js";
import { ModalsView } from "../modals/ModalsView.jsx";
import { useWindowsManager } from "../../hooks/windows/windowsManagerContext.js";
import { useContextMenu } from "../../hooks/modals/contextMenu.js";
-import { FALLBACK_WALLPAPER } from "../../constants/desktop.js";
+import { FALLBACK_ICON_SIZE, FALLBACK_WALLPAPER } from "../../constants/desktop.js";
import { reloadViewport } from "../../features/utils/browser.js";
import { useVirtualRoot } from "../../hooks/virtual-drive/virtualRootContext.js";
import { DirectoryList } from "../applications/file-explorer/directory-list/DirectoryList.jsx";
@@ -15,7 +15,12 @@ import { APPS, APP_NAMES } from "../../constants/applications.js";
import Vector2 from "../../features/math/vector2.js";
import { Actions } from "../actions/Actions.jsx";
import { ClickAction } from "../actions/actions/ClickAction.jsx";
-import { faArrowsRotate, faFolder, faPaintBrush, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faArrowsRotate, faEye, faFolder, faPaintBrush, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { ToggleAction } from "../actions/actions/ToggleAction.jsx";
+import { DropdownAction } from "../actions/actions/DropdownAction.jsx";
+import { RadioAction } from "../actions/actions/RadioAction.jsx";
+import { Divider } from "../actions/actions/Divider.jsx";
+import { isValidInteger } from "../../features/utils/number.js";
export const Desktop = memo(() => {
const settingsManager = useSettingsManager();
@@ -23,9 +28,26 @@ export const Desktop = memo(() => {
const [modalsManager, modals] = useModals();
const windowsManager = useWindowsManager();
const virtualRoot = useVirtualRoot();
+ const [showIcons, setShowIcons] = useState(false);
+ const [iconSize, setIconSize] = useState(FALLBACK_ICON_SIZE);
const { onContextMenu, ShortcutsListener } = useContextMenu({ modalsManager, Actions: (props) =>
{
onContextMenu={onContextMenu}
>
- {
event.preventDefault();
- const options = { mode: "view" };
- if (file.name === "info.md") {
+ const options = {};
+ if (file.name === "info.md")
options.size = new Vector2(575, 675);
- }
+ if (file.extension === "md")
+ options.mode = "view";
windowsManager.openFile(file, options);
}}
@@ -105,7 +138,7 @@ export const Desktop = memo(() => {
}}
onContextMenuFile={onContextMenuFile}
onContextMenuFolder={onContextMenuFolder}
- />
+ />}
{wallpaper
? 
: null
diff --git a/src/components/desktop/Desktop.module.css b/src/components/desktop/Desktop.module.css
index 3896d1f..1831f7e 100644
--- a/src/components/desktop/Desktop.module.css
+++ b/src/components/desktop/Desktop.module.css
@@ -18,8 +18,6 @@
}
.Content {
- --scale: 1rem;
-
position: absolute;
display: flex;
flex-direction: column;
diff --git a/src/constants/desktop.js b/src/constants/desktop.js
index 328a850..bc68cad 100644
--- a/src/constants/desktop.js
+++ b/src/constants/desktop.js
@@ -9,4 +9,5 @@ export const WALLPAPERS = [
"/assets/wallpapers/wave-abstract-wallpaper-teal.png",
];
-export const FALLBACK_WALLPAPER = WALLPAPERS[6];
\ No newline at end of file
+export const FALLBACK_WALLPAPER = WALLPAPERS[6];
+export const FALLBACK_ICON_SIZE = 1;
\ No newline at end of file
diff --git a/src/features/settings/settings.js b/src/features/settings/settings.js
index c6c87ca..02f982b 100644
--- a/src/features/settings/settings.js
+++ b/src/features/settings/settings.js
@@ -1,6 +1,8 @@
import { VirtualFile } from "../virtual-drive/virtualFile.js";
import { VirtualRoot } from "../virtual-drive/virtualRoot.js";
+const PARENT_NODE = "options";
+
export class Settings {
xmlDoc = null;
@@ -112,8 +114,13 @@ export class Settings {
if (await this.isMissingXmlDoc())
return;
- if (this.xmlDoc.getElementsByTagName(key)?.[0])
+ if (this.xmlDoc.getElementsByTagName(key).length > 0) {
this.xmlDoc.getElementsByTagName(key)[0].textContent = value;
+ } else if (this.xmlDoc.getElementsByTagName(PARENT_NODE).length > 0) {
+ const newOption = this.xmlDoc.createElement(key);
+ newOption.textContent = value;
+ this.xmlDoc.getElementsByTagName(PARENT_NODE)[0].appendChild(newOption);
+ }
await this.write();
}
diff --git a/src/features/utils/number.js b/src/features/utils/number.js
new file mode 100644
index 0000000..b2015fb
--- /dev/null
+++ b/src/features/utils/number.js
@@ -0,0 +1,3 @@
+export function isValidInteger(number) {
+ return (parseInt(number) || parseInt(number) === 0);
+}
\ No newline at end of file
diff --git a/src/hooks/utils/screen.js b/src/hooks/utils/screen.js
index 1524028..7b0dbbe 100644
--- a/src/hooks/utils/screen.js
+++ b/src/hooks/utils/screen.js
@@ -1,4 +1,5 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { TASKBAR_HEIGHT } from "../../constants/taskBar.js";
/**
* @returns {[number, number]}
@@ -17,4 +18,46 @@ export function useScreenDimensions() {
}, []);
return [screenWidth, screenHeight];
+}
+
+/**
+ * @param {object} props
+ * @param {boolean} props.avoidTaskbar
+ * @returns {{
+ * ref,
+ * initiated: boolean,
+ * alignLeft: boolean,
+ * alignTop: boolean
+ * }}
+ */
+export function useScreenBounds({ avoidTaskbar = true }) {
+ const ref = useRef(null);
+ const [initiated, setInitiated] = useState(false);
+ const [alignLeft, setAlignLeft] = useState(false);
+ const [alignTop, setAlignTop] = useState(false);
+ const [screenWidth, screenHeight] = useScreenDimensions();
+
+ useEffect(() => {
+ if (ref.current == null || screenWidth == null || screenHeight == null)
+ return;
+
+ const rect = ref.current.getBoundingClientRect();
+ const maxX = screenWidth;
+ let maxY = screenHeight;
+
+ if (avoidTaskbar)
+ maxY -= TASKBAR_HEIGHT;
+
+ const isOverflowingRight = (rect.x + rect.width > maxX);
+ const isOverflowingBottom = (rect.y + rect.height > maxY);
+
+ if (isOverflowingRight)
+ setAlignLeft(true);
+ if (isOverflowingBottom)
+ setAlignTop(true);
+
+ setInitiated(true);
+ }, [alignLeft, avoidTaskbar, screenHeight, screenWidth]);
+
+ return { ref, initiated, alignLeft, alignTop };
}
\ No newline at end of file