danvics/ProzillaOS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated desktop context menu

Browse source
This commit is contained in:
Prozilla 2024-06-11 18:39:22 +02:00
parent 00b82c6548
commit 9cad04edcd
No known key found for this signature in database
GPG key ID: 5858DFE71CAF31EE
9 changed files with 124 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -14,7 +14,7 @@
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=4">
<link rel="manifest" href="/site.webmanifest?v=4">
<link rel="mask-icon" href="/safari-pinned-tab.svg?v=4" color="#4cdfff">
<link rel="shortcut icon" href="/favicon.ico?v=4">
<link rel="shortcut icon" type="image/x-icon" href="https://os.prozilla.dev/favicon.ico?">
<meta name="apple-mobile-web-app-title" content="ProzillaOS">
<meta name="application-name" content="ProzillaOS">
<meta name="msapplication-TileColor" content="#0d1114">
@ -70,8 +70,6 @@
]
}
</script>
<!-- Inserted tags -->
</head>
<body>
<noscript>You need to enable JavaScript to run ProzillaOS.</noscript>

23
src/components/actions/Actions.tsx
View file

@ -9,7 +9,7 @@ export interface ActionProps {
label?: string;
icon?: string | object;
shortcut?: string[];
onTrigger?: (event: Event, triggerParams: unknown, ...args: unknown[]) => void;
onTrigger?: (event?: Event, triggerParams?: unknown, ...args: unknown[]) => void;
children?: ReactNode;
}
@ -40,8 +40,8 @@ export function Actions({ children, className, onAnyTrigger, triggerParams, avoi
const options = {};
const shortcuts = {};
let actionId = 0;
const iterateOverChildren = (children: ReactNode): ReactNode => {
let actionId = 0;
const newChildren = Children.map(children, (child) => {
if (!isValidElement(child))
return child;
@ -49,25 +49,30 @@ export function Actions({ children, className, onAnyTrigger, triggerParams, avoi
actionId++;
const { label, shortcut, onTrigger } = child.props as ActionProps;
const onTriggerOverride = (event: Event, ...args: unknown[]) => {
onAnyTrigger?.(event, triggerParams, ...args);
onTrigger?.(event, triggerParams, ...args);
};
// Register shortcut
if (label != null && onTrigger != null) {
options[actionId] = onTrigger;
options[actionId] = onTriggerOverride;
if (shortcut != null)
shortcuts[actionId] = shortcut;
}
if (isListener) {
// Prevent listener from rendering
if (isListener)
return iterateOverChildren((child.props as ActionProps).children);
}
return cloneElement(child, {
...child.props,
actionId,
children: iterateOverChildren((child.props as ActionProps).children),
onTrigger: (event, ...args) => {
onAnyTrigger?.(event, triggerParams, ...args);
onTrigger?.(event, triggerParams, ...args);
}
onTrigger: onTriggerOverride
} as ActionProps);
});

4
src/components/desktop/Desktop.module.css
View file

@ -18,9 +18,11 @@
}
.Content {
--direction: column;
position: absolute;
display: flex;
flex-direction: column;
flex-direction: var(--direction);
flex-wrap: wrap;
align-content: flex-start;
justify-content: flex-start;

43
src/components/desktop/Desktop.tsx
View file

@ -5,7 +5,7 @@ import styles from "./Desktop.module.css";
import { useEffect } from "react";
import { useWindowsManager } from "../../hooks/windows/windowsManagerContext";
import { useContextMenu } from "../../hooks/modals/contextMenu";
import { FALLBACK_ICON_SIZE, FALLBACK_WALLPAPER } from "../../config/desktop.config";
import { FALLBACK_ICON_DIRECTION, FALLBACK_ICON_SIZE, FALLBACK_WALLPAPER } from "../../config/desktop.config";
import { reloadViewport } from "../../features/_utils/browser.utils";
import { useVirtualRoot } from "../../hooks/virtual-drive/virtualRootContext";
import { DirectoryList } from "../apps/file-explorer/directory-list/DirectoryList";
@ -13,7 +13,7 @@ import { APPS, APP_ICONS, APP_NAMES } from "../../config/apps.config";
import Vector2 from "../../features/math/vector2";
import { Actions } from "../actions/Actions";
import { ClickAction } from "../actions/actions/ClickAction";
import { faArrowsRotate, faEye, faFolder, faPaintBrush, faTerminal, faTrash } from "@fortawesome/free-solid-svg-icons";
import { faArrowsRotate, faCompress, faExpand, faEye, faFolder, faPaintBrush, faTerminal, faTrash } from "@fortawesome/free-solid-svg-icons";
import { ToggleAction } from "../actions/actions/ToggleAction";
import { DropdownAction } from "../actions/actions/DropdownAction";
import { RadioAction } from "../actions/actions/RadioAction";
@ -34,6 +34,7 @@ export const Desktop = memo(() => {
const virtualRoot = useVirtualRoot();
const [showIcons, setShowIcons] = useState(false);
const [iconSize, setIconSize] = useState(FALLBACK_ICON_SIZE);
const [iconDirection, setIconDirection] = useState(FALLBACK_ICON_DIRECTION);
const { openWindowedModal } = useWindowedModal();
const directory = virtualRoot.navigate("~/Desktop");
@ -47,7 +48,15 @@ export const Desktop = memo(() => {
}} options={[
{ label: "Small icons" },
{ label: "Medium icons" },
{ label: "Large icons" }
{ label: "Large icons" },
]}/>
<Divider/>
<RadioAction initialIndex={iconDirection} onTrigger={(event, params, value: string) => {
const settings = settingsManager.get(SettingsManager.VIRTUAL_PATHS.desktop);
void settings.set("icon-direction", value);
}} options={[
{ label: "Align vertically" },
{ label: "Align horizontally" },
]}/>
<Divider/>
<ToggleAction label="Show dekstop icons" initialValue={showIcons} onTrigger={() => {
@ -58,6 +67,25 @@ export const Desktop = memo(() => {
<ClickAction label="Reload" shortcut={["Control", "r"]} icon={faArrowsRotate} onTrigger={() => {
reloadViewport();
}}/>
<ClickAction
label={!document.fullscreenElement ? "Enter fullscreen" : "Exit fullscreen"}
shortcut={["F11"]}
icon={!document.fullscreenElement ? faExpand : faCompress}
onTrigger={() => {
if (windowsManager.isAnyFocused())
return;
if (!document.fullscreenElement) {
void document.body.requestFullscreen().catch((error) => {
console.error(error);
});
} else {
void document.exitFullscreen().catch((error) => {
console.error(error);
});
}
}}
/>
<ClickAction label="Change appearance" icon={faPaintBrush} onTrigger={() => {
windowsManager.open("settings", { tab: TABS.APPEARANCE });
}}/>
@ -122,6 +150,10 @@ export const Desktop = memo(() => {
if (isValidInteger(value))
setIconSize(parseInt(value));
});
void settings.get("icon-direction", (value) => {
if (isValidInteger(value))
setIconDirection(parseInt(value));
});
}, [settingsManager]);
const onError = () => {
@ -129,7 +161,7 @@ export const Desktop = memo(() => {
void settings.set("wallpaper", FALLBACK_WALLPAPER);
};
const iconScale = 1 + ((isValidInteger(iconSize) ? iconSize : FALLBACK_ICON_SIZE) - 1) / 4;
const iconScale = 1 + ((isValidInteger(iconSize) ? iconSize : FALLBACK_ICON_SIZE) - 1) / 5;
return (<>
<ShortcutsListener/>
@ -141,7 +173,8 @@ export const Desktop = memo(() => {
directory={directory as VirtualFolder}
className={styles.Content}
style={{
"--scale": `${iconScale}rem`
"--scale": `${iconScale}rem`,
"--direction": iconDirection == 1 ? "row" : "column"
}}
fileClassName={styles["Item"]}
folderClassName={styles["Item"]}

3
src/config/desktop.config.ts
View file

@ -11,4 +11,5 @@ export const WALLPAPERS = [
];
export const FALLBACK_WALLPAPER = WALLPAPERS[6];
export const FALLBACK_ICON_SIZE = 1;
export const FALLBACK_ICON_SIZE = 1;
export const FALLBACK_ICON_DIRECTION = 0; // 0: vertical, 1: horizontal

18
src/features/virtual-drive/root/defaultData.ts
View file

@ -79,11 +79,18 @@ export function loadDefaultData(virtualRoot: VirtualRoot) {
});
});
// Create files and folders based on repository tree
loadTree(virtualRoot);
}
// Create files and folders based on repository tree
function loadTree(virtualRoot: VirtualRoot) {
const excludedFiles = [
"/public/config/tree.json"
];
void fetch("/config/tree.json").then((response) =>
response.json()
).then(({ files, folders }: { files: string[], folders: string[] }) => {
folders.forEach((folderPath) => {
const lastSlashIndex = folderPath.lastIndexOf("/");
@ -100,11 +107,12 @@ export function loadDefaultData(virtualRoot: VirtualRoot) {
});
files.forEach((filePath) => {
if (excludedFiles.includes(filePath))
return;
const lastSlashIndex = filePath.lastIndexOf("/");
const callback = (virtualFile: VirtualFile) => {
console.log(virtualFile.absolutePath);
const virtualPath = virtualFile.absolutePath;
if (virtualPath.startsWith("/public/")) {
virtualFile.setSource(virtualPath.replace(/^\/public\//, "/"));
@ -126,6 +134,6 @@ export function loadDefaultData(virtualRoot: VirtualRoot) {
parentFolder.createFile(name, extension, callback);
});
}).catch(() => {
console.warn("Failed to fetch repository tree. Make sure the tree data is valid and up-to-date using 'npm run fetch'.");
console.warn("Failed to load repository tree. Make sure the tree data is valid and up-to-date using 'npm run fetch'.");
});
}

11
src/features/windows/windowsManager.ts
View file

@ -136,6 +136,17 @@ export default class WindowsManager {
return this.windows[windowId].isFocused;
}
isAnyFocused() {
let anyFocused = false;
Object.values(this.windows).forEach((window) => {
if (window.isFocused)
return anyFocused = true;
});
return anyFocused;
}
/**
* @param minimized - Leave as undefined to toggle the window's minimization state
*/

23
src/hooks/_utils/keyboard.ts
View file

@ -28,6 +28,9 @@ interface UseShortcutsParams {
useCategories?: boolean,
}
/**
* TO DO: rewrite to use a global shortcuts manager instead, to allow certain shortcuts to be prioritized and prevent conflicts
*/
export function useShortcuts({ options, shortcuts, useCategories = true }: UseShortcutsParams) {
const [activeKeys, setActiveKeys] = useState<string[]>([]);
@ -37,10 +40,6 @@ export function useShortcuts({ options, shortcuts, useCategories = true }: UseSh
const keys = [...activeKeys];
// Prevent alt-tabbing from messing with alt key registration
if (keys.includes("Alt") && !event.altKey)
removeFromArray("Alt", keys);
const checkGroup = (group: Record<string, string[]>, category?: string) => {
for (const [name, shortcut] of Object.entries(group)) {
let active = true;
@ -60,9 +59,9 @@ export function useShortcuts({ options, shortcuts, useCategories = true }: UseSh
continue;
if (category != null) {
(options?.[category]?.[name] as Function)?.();
(options?.[category]?.[name] as Function)?.(event);
} else {
(options?.[name] as Function)?.();
(options?.[name] as Function)?.(event);
}
}
};
@ -78,6 +77,18 @@ export function useShortcuts({ options, shortcuts, useCategories = true }: UseSh
setActiveKeys(keys);
}, [activeKeys, options, shortcuts, useCategories]);
useEffect(() => {
const onBlur = () => {
setActiveKeys([]);
};
document.addEventListener("blur", onBlur);
return () => {
document.removeEventListener("blur", onBlur);
};
}, []);
const onKeyDown = (event: KeyboardEvent) => {
const isRepeated = activeKeys.includes(event.key);
checkShortcuts(event, isRepeated);

26
src/tools/stage.ts
View file

@ -59,6 +59,23 @@ function generateCname() {
return DOMAIN;
}
function generateTemplate(html: string) {
const baseUrlRegex = /(?<=")https?:\/\/[a-z0-9-]+(\.)([a-zA-Z0-9-]+(\.))*[a-z]{2,3}\/(?=.*")/gi;
html = html.replaceAll(baseUrlRegex, BASE_URL);
const commentsRegex = /<!--.*?-->/g;
html = html.replaceAll(commentsRegex, "");
const emptyLinesRegex = /^\s*$\n/gm;
html = html.replaceAll(emptyLinesRegex, "");
const path = `${BUILD_DIR}/index.html`;
fs.writeFileSync(path, html, { flag: "w+" });
console.log(`- ${ANSI.fg.cyan}${path}${ANSI.reset}`);
return html;
}
/**
* To avoid GitHub pages rendering certain pages that are only defined by React router as a 404 page,
* we copy the content of our index file to the 404 page, letting React router properly handle routing on every page
@ -69,6 +86,9 @@ function generate404Page(template: string) {
console.log(`- ${ANSI.fg.cyan}${path}${ANSI.reset}`);
}
/**
* Add an HTML file for every app page so they can be properly crawled and indexed
*/
function generateAppPages(template: string) {
for (const [key, value] of Object.entries(APPS)) {
const appId = value;
@ -120,9 +140,13 @@ try {
});
console.log(`\n${ANSI.fg.yellow}Generating pages...${ANSI.reset}`);
const template = fs.readFileSync(PATHS.indexHtml, "utf-8");
const html = fs.readFileSync(PATHS.indexHtml, "utf-8");
const template = generateTemplate(html);
generate404Page(template);
generateAppPages(template);
console.log(`\n${ANSI.fg.green}✓ Staging complete${ANSI.reset}`);
} catch (error) {
console.error(error);