diff --git a/packages/apps/browser/CHANGELOG.md b/packages/apps/browser/CHANGELOG.md index 51daba0..4423d49 100644 --- a/packages/apps/browser/CHANGELOG.md +++ b/packages/apps/browser/CHANGELOG.md @@ -1,5 +1,12 @@ # @prozilla-os/browser +## 1.1.1 + +### Patch Changes + +- Updated dependencies + - @prozilla-os/core@1.2.1 + ## 1.1.0 ### Minor Changes diff --git a/packages/apps/browser/package.json b/packages/apps/browser/package.json index 7c14f55..13bf852 100644 --- a/packages/apps/browser/package.json +++ b/packages/apps/browser/package.json @@ -1,7 +1,7 @@ { "name": "@prozilla-os/browser", "description": "A ProzillaOS application for browsing the internet.", - "version": "1.1.0", + "version": "1.1.1", "homepage": "https://os.prozilla.dev/browser", "author": { "name": "Prozilla", diff --git a/packages/apps/calculator/CHANGELOG.md b/packages/apps/calculator/CHANGELOG.md index a38b65a..558b8d4 100644 --- a/packages/apps/calculator/CHANGELOG.md +++ b/packages/apps/calculator/CHANGELOG.md @@ -1,5 +1,12 @@ # @prozilla-os/calculator +## 1.1.1 + +### Patch Changes + +- Updated dependencies + - @prozilla-os/core@1.2.1 + ## 1.1.0 ### Minor Changes diff --git a/packages/apps/calculator/package.json b/packages/apps/calculator/package.json index 4a56ad7..e0a1409 100644 --- a/packages/apps/calculator/package.json +++ b/packages/apps/calculator/package.json @@ -1,7 +1,7 @@ { "name": "@prozilla-os/calculator", "description": "A ProzillaOS application for making basic calculations.", - "version": "1.1.0", + "version": "1.1.1", "homepage": "https://os.prozilla.dev/calculator", "author": { "name": "Prozilla", diff --git a/packages/apps/file-explorer/CHANGELOG.md b/packages/apps/file-explorer/CHANGELOG.md index 79fa244..9ad2f4f 100644 --- a/packages/apps/file-explorer/CHANGELOG.md +++ b/packages/apps/file-explorer/CHANGELOG.md @@ -1,5 +1,12 @@ # @prozilla-os/file-explorer +## 1.1.1 + +### Patch Changes + +- Updated dependencies + - @prozilla-os/core@1.2.1 + ## 1.1.0 ### Minor Changes diff --git a/packages/apps/file-explorer/package.json b/packages/apps/file-explorer/package.json index 0c21d35..2814e35 100644 --- a/packages/apps/file-explorer/package.json +++ b/packages/apps/file-explorer/package.json @@ -1,7 +1,7 @@ { "name": "@prozilla-os/file-explorer", "description": "A standard ProzillaOS application for browsing files.", - "version": "1.1.0", + "version": "1.1.1", "homepage": "https://os.prozilla.dev/file-explorer", "author": { "name": "Prozilla", diff --git a/packages/apps/logic-sim/CHANGELOG.md b/packages/apps/logic-sim/CHANGELOG.md index 144d818..133e84d 100644 --- a/packages/apps/logic-sim/CHANGELOG.md +++ b/packages/apps/logic-sim/CHANGELOG.md @@ -1,5 +1,12 @@ # @prozilla-os/logic-sim +## 1.1.1 + +### Patch Changes + +- Updated dependencies + - @prozilla-os/core@1.2.1 + ## 1.1.0 ### Minor Changes diff --git a/packages/apps/logic-sim/package.json b/packages/apps/logic-sim/package.json index cd05d57..fb48e77 100644 --- a/packages/apps/logic-sim/package.json +++ b/packages/apps/logic-sim/package.json @@ -1,7 +1,7 @@ { "name": "@prozilla-os/logic-sim", "description": "A ProzillaOS application for simulating digital logic.", - "version": "1.1.0", + "version": "1.1.1", "homepage": "https://os.prozilla.dev/logic-sim", "author": { "name": "Prozilla", diff --git a/packages/apps/media-viewer/CHANGELOG.md b/packages/apps/media-viewer/CHANGELOG.md index 5016a2f..fecc064 100644 --- a/packages/apps/media-viewer/CHANGELOG.md +++ b/packages/apps/media-viewer/CHANGELOG.md @@ -1,5 +1,12 @@ # @prozilla-os/media-viewer +## 1.1.1 + +### Patch Changes + +- Updated dependencies + - @prozilla-os/core@1.2.1 + ## 1.1.0 ### Minor Changes diff --git a/packages/apps/media-viewer/package.json b/packages/apps/media-viewer/package.json index 47ed9c6..90416c8 100644 --- a/packages/apps/media-viewer/package.json +++ b/packages/apps/media-viewer/package.json @@ -1,7 +1,7 @@ { "name": "@prozilla-os/media-viewer", "description": "A ProzillaOS application for viewing different kinds of media.", - "version": "1.1.0", + "version": "1.1.1", "homepage": "https://os.prozilla.dev/media-viewer", "author": { "name": "Prozilla", diff --git a/packages/apps/settings/CHANGELOG.md b/packages/apps/settings/CHANGELOG.md index 3f06a5c..307cf42 100644 --- a/packages/apps/settings/CHANGELOG.md +++ b/packages/apps/settings/CHANGELOG.md @@ -1,5 +1,13 @@ # @prozilla-os/settings +## 1.1.1 + +### Patch Changes + +- Updated dependencies + - @prozilla-os/core@1.2.1 + - @prozilla-os/file-explorer@1.1.1 + ## 1.1.0 ### Minor Changes diff --git a/packages/apps/settings/package.json b/packages/apps/settings/package.json index 2a41138..e2a0e4e 100644 --- a/packages/apps/settings/package.json +++ b/packages/apps/settings/package.json @@ -1,7 +1,7 @@ { "name": "@prozilla-os/settings", "description": "A settings app for ProzillaOS.", - "version": "1.1.0", + "version": "1.1.1", "homepage": "https://os.prozilla.dev/settings", "author": { "name": "Prozilla", diff --git a/packages/apps/terminal/CHANGELOG.md b/packages/apps/terminal/CHANGELOG.md index 4bae74f..926cf7c 100644 --- a/packages/apps/terminal/CHANGELOG.md +++ b/packages/apps/terminal/CHANGELOG.md @@ -1,5 +1,12 @@ # @prozilla-os/terminal +## 1.1.2 + +### Patch Changes + +- Updated dependencies + - @prozilla-os/core@1.2.1 + ## 1.1.1 ### Patch Changes diff --git a/packages/apps/terminal/package.json b/packages/apps/terminal/package.json index a325d0a..cbc8039 100644 --- a/packages/apps/terminal/package.json +++ b/packages/apps/terminal/package.json @@ -1,7 +1,7 @@ { "name": "@prozilla-os/terminal", "description": "A terminal/shell application for ProzillaOS.", - "version": "1.1.1", + "version": "1.1.2", "homepage": "https://os.prozilla.dev/terminal", "author": { "name": "Prozilla", diff --git a/packages/apps/text-editor/CHANGELOG.md b/packages/apps/text-editor/CHANGELOG.md index e6f97c5..5a8f67f 100644 --- a/packages/apps/text-editor/CHANGELOG.md +++ b/packages/apps/text-editor/CHANGELOG.md @@ -1,5 +1,12 @@ # @prozilla-os/text-editor +## 1.1.1 + +### Patch Changes + +- Updated dependencies + - @prozilla-os/core@1.2.1 + ## 1.1.0 ### Minor Changes diff --git a/packages/apps/text-editor/package.json b/packages/apps/text-editor/package.json index e806b8a..d9e334c 100644 --- a/packages/apps/text-editor/package.json +++ b/packages/apps/text-editor/package.json @@ -1,7 +1,7 @@ { "name": "@prozilla-os/text-editor", "description": "A text editor application for ProzillaOS.", - "version": "1.1.0", + "version": "1.1.1", "homepage": "https://os.prozilla.dev/text-editor", "author": { "name": "Prozilla", diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 9ffaa42..a1d524b 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,5 +1,13 @@ # @prozilla-os/core +## 1.2.1 + +### Patch Changes + +- Added Pixel skin +- Updated dependencies + - @prozilla-os/skins@1.1.1 + ## 1.2.0 ### Minor Changes diff --git a/packages/core/package.json b/packages/core/package.json index b8540ac..a9e47fb 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,7 +1,7 @@ { "name": "@prozilla-os/core", "description": "A React component library written in TypeScript for building web-based operating systems, made by Prozilla.", - "version": "1.2.0", + "version": "1.2.1", "homepage": "https://os.prozilla.dev", "author": { "name": "Prozilla", diff --git a/packages/core/src/components/_utils/directory-list/ImagePreview.tsx b/packages/core/src/components/_utils/directory-list/ImagePreview.tsx index 19c80ad..eee09db 100644 --- a/packages/core/src/components/_utils/directory-list/ImagePreview.tsx +++ b/packages/core/src/components/_utils/directory-list/ImagePreview.tsx @@ -2,6 +2,7 @@ import { useState } from "react"; import styles from "./ImagePreview.module.css"; import { ReactSVG } from "react-svg"; import { useSystemManager } from "../../../hooks"; +import { VectorImage } from "../vector-image/VectorImage"; interface ImagePreviewProps { source: string; @@ -25,9 +26,7 @@ export function ImagePreview({ source, className, onError, ...props }: ImagePrev return (
{loadingFailed ? - : source.endsWith(".svg") - ? - : Preview + : }
); } \ No newline at end of file diff --git a/packages/core/src/components/_utils/index.ts b/packages/core/src/components/_utils/index.ts index 4869ca4..c24e5f4 100644 --- a/packages/core/src/components/_utils/index.ts +++ b/packages/core/src/components/_utils/index.ts @@ -6,5 +6,6 @@ export { ProgressBar } from "./progress-bar/ProgressBar"; export { HeaderMenu } from "./header-menu/HeaderMenu"; export { WebView } from "./web-view/WebView"; export { ImagePreview } from "./directory-list/ImagePreview"; +export { VectorImage as Image } from "./vector-image/VectorImage"; export type { OnSelectionChangeParams, FileEventHandler, FolderEventHandler } from "./directory-list/DirectoryList"; \ No newline at end of file diff --git a/packages/core/src/components/_utils/vector-image/VectorImage.tsx b/packages/core/src/components/_utils/vector-image/VectorImage.tsx new file mode 100644 index 0000000..7397d10 --- /dev/null +++ b/packages/core/src/components/_utils/vector-image/VectorImage.tsx @@ -0,0 +1,51 @@ +import { Vector2 } from "@prozilla-os/core"; +import { useEffect, useState } from "react"; +import { ReactSVG } from "react-svg"; + +interface ImageProps { + className?: string; + src?: string; + [key: string]: unknown; +} + +export function VectorImage({ className, src, ...props }: ImageProps) { + const [dimensions, setDimensions] = useState(Vector2.ZERO); + + useEffect(() => { + if (src == null) + return; + + const image = new Image(); + + image.onload = () => { + console.log(image); + setDimensions(new Vector2(image.naturalWidth, image.naturalHeight)); + }; + + image.src = src; + }, [src]); + + if (src?.endsWith(".svg")) { + return ; + } else { + return
+
+ + + + + +
+
; + } +} \ No newline at end of file diff --git a/packages/core/src/components/modals/_utils/WindowedModal.tsx b/packages/core/src/components/modals/_utils/WindowedModal.tsx index 970247f..53d9f08 100644 --- a/packages/core/src/components/modals/_utils/WindowedModal.tsx +++ b/packages/core/src/components/modals/_utils/WindowedModal.tsx @@ -8,6 +8,7 @@ import Draggable from "react-draggable"; import { ReactSVG } from "react-svg"; import utilStyles from "../../../styles/utils.module.css"; import { ModalProps } from "../ModalView"; +import { VectorImage } from "../../_utils/vector-image/VectorImage"; export function WindowedModal({ modal, params, children, ...props }: ModalProps) { const nodeRef = useRef(null); @@ -53,7 +54,7 @@ export function WindowedModal({ modal, params, children, ...props }: ModalProps) }} >
- diff --git a/packages/core/src/components/taskbar/app-icon/AppIcon.tsx b/packages/core/src/components/taskbar/app-icon/AppIcon.tsx index d4b8211..1a6622c 100644 --- a/packages/core/src/components/taskbar/app-icon/AppIcon.tsx +++ b/packages/core/src/components/taskbar/app-icon/AppIcon.tsx @@ -8,6 +8,7 @@ import { Actions } from "../../actions/Actions"; import { ClickAction } from "../../actions/actions/ClickAction"; import { WindowsManager } from "../../../features/windows/windowsManager"; import { useClassNames } from "../../../hooks"; +import { VectorImage } from "../../_utils/vector-image/VectorImage"; interface AppButtonProps { app: App; @@ -73,7 +74,7 @@ export const AppButton: FC = memo(({ app, windowsManager, active }} title={app.name} > - + ); }); \ No newline at end of file diff --git a/packages/core/src/components/taskbar/indicators/Battery.tsx b/packages/core/src/components/taskbar/indicators/Battery.tsx index 536b963..c56f132 100644 --- a/packages/core/src/components/taskbar/indicators/Battery.tsx +++ b/packages/core/src/components/taskbar/indicators/Battery.tsx @@ -4,6 +4,7 @@ import { useEffect, useState } from "react"; import styles from "./Battery.module.css"; import { UtilMenu } from "../menus/UtilMenu"; import { OutsideClickListener } from "../../../hooks/_utils/outsideClick"; +import { useClassNames } from "@prozilla-os/core"; type Battery = { charging: boolean | ((prevState: boolean) => boolean); @@ -93,7 +94,7 @@ export function Battery({ hideUtilMenus, showUtilMenu }: BatteryProps) { } return ( { updateShowMenu(false); }}> - diff --git a/packages/core/src/components/taskbar/indicators/Volume.tsx b/packages/core/src/components/taskbar/indicators/Volume.tsx index 6ac79bb..9e5574f 100644 --- a/packages/core/src/components/taskbar/indicators/Volume.tsx +++ b/packages/core/src/components/taskbar/indicators/Volume.tsx @@ -4,6 +4,7 @@ import { useEffect, useState } from "react"; import { OutsideClickListener } from "../../../hooks/_utils/outsideClick"; import { UtilMenu } from "../menus/UtilMenu"; import styles from "./Volume.module.css"; +import { useClassNames } from "@prozilla-os/core"; interface VolumeProps { hideUtilMenus: boolean; @@ -27,7 +28,7 @@ export function Volume({ hideUtilMenus, showUtilMenu }: VolumeProps) { }; return ( { updateShowMenu(false); }}> - diff --git a/packages/core/src/components/taskbar/menus/HomeMenu.tsx b/packages/core/src/components/taskbar/menus/HomeMenu.tsx index 33d4abf..f2f256f 100644 --- a/packages/core/src/components/taskbar/menus/HomeMenu.tsx +++ b/packages/core/src/components/taskbar/menus/HomeMenu.tsx @@ -8,6 +8,7 @@ import { useEffect, useState } from "react"; import { AppsConfig, closeViewport, Vector2 } from "../../../features"; import { useWindowsManager, useVirtualRoot, useKeyboardListener, useSystemManager, useClassNames } from "../../../hooks"; import { utilStyles } from "../../../styles"; +import { VectorImage } from "../../_utils/vector-image/VectorImage"; interface HomeMenuProps { active: boolean; @@ -123,7 +124,7 @@ export function HomeMenu({ active, setActive, search }: HomeMenuProps) { }} title={name} > - +

{name}

)} diff --git a/packages/core/src/components/taskbar/menus/SearchMenu.tsx b/packages/core/src/components/taskbar/menus/SearchMenu.tsx index 7379179..f88f7ec 100644 --- a/packages/core/src/components/taskbar/menus/SearchMenu.tsx +++ b/packages/core/src/components/taskbar/menus/SearchMenu.tsx @@ -6,6 +6,7 @@ import { useKeyboardListener } from "../../../hooks/_utils/keyboard"; import { App } from "../../../features/"; import { ReactSVG } from "react-svg"; import { useClassNames, useSystemManager } from "../../../hooks"; +import { VectorImage } from "../../_utils/vector-image/VectorImage"; interface SearchMenuProps { active: boolean; @@ -80,7 +81,7 @@ export function SearchMenu({ active, setActive, searchQuery, setSearchQuery, inp windowsManager?.open(id); }} > - +

{name}

)} diff --git a/packages/core/src/components/taskbar/menus/UtilMenu.tsx b/packages/core/src/components/taskbar/menus/UtilMenu.tsx index 8fa1a17..9feb9ef 100644 --- a/packages/core/src/components/taskbar/menus/UtilMenu.tsx +++ b/packages/core/src/components/taskbar/menus/UtilMenu.tsx @@ -16,8 +16,12 @@ export function UtilMenu({ active, setActive: _setActive, className, children }: if (className != null) classNames.push(className); + const modifiers = ["Util"]; + if (active) + modifiers.push("Active"); + return (
-
+
{children}
); diff --git a/packages/core/src/components/windows/WindowView.tsx b/packages/core/src/components/windows/WindowView.tsx index eca83f6..1b0cc78 100644 --- a/packages/core/src/components/windows/WindowView.tsx +++ b/packages/core/src/components/windows/WindowView.tsx @@ -1,7 +1,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import styles from "./WindowView.module.css"; import { faCircleRight, faExpand, faMinus, faWindowMaximize as fasWindowMaximize, faTimes, faXmark } from "@fortawesome/free-solid-svg-icons"; -import { ReactSVG } from "react-svg"; import { useWindowsManager } from "../../hooks/windows/windowsManagerContext"; import Draggable from "react-draggable"; import { CSSProperties, FC, memo, MouseEventHandler, useEffect, useRef, useState } from "react"; @@ -24,6 +23,7 @@ import { WindowFallbackView } from "./WindowFallbackView"; import { WindowOptions } from "../../features/windows/windowsManager"; import { ModalProps } from "../modals/ModalView"; import { useClassNames, useSystemManager } from "../../hooks"; +import { VectorImage } from "../_utils/vector-image/VectorImage"; export interface WindowProps extends WindowOptions { fullscreen?: boolean; @@ -176,7 +176,7 @@ export const WindowView: FC = memo(({ id, app, size, position, onIn focus(event as unknown as Event, true); }} > - diff --git a/packages/core/src/features/system/systemManager.ts b/packages/core/src/features/system/systemManager.ts index d2e55bb..0353ac5 100644 --- a/packages/core/src/features/system/systemManager.ts +++ b/packages/core/src/features/system/systemManager.ts @@ -76,15 +76,15 @@ export class SystemManager { private loadSkin() { const skin = this.skin; - if (skin.appIcons != null) { - const appIcons = skin.appIcons as { [key: string]: string }; - const appNames = skin.appNames as { [key: string]: string }; + if (skin.appIcons != null || skin.appNames != null) { + const appIcons = skin.appIcons as { [key: string]: string } ?? {}; + const appNames = skin.appNames as { [key: string]: string } ?? {}; this.appsConfig.apps.forEach((app) => { if (Object.keys(appIcons).includes(app.id)) app.setIconUrl(appIcons[app.id]); if (Object.keys(appNames).includes(app.id)) - app.setIconUrl(appNames[app.id]); + app.setName(appNames[app.id]); }); } diff --git a/packages/core/src/hooks/_utils/classNames.ts b/packages/core/src/hooks/_utils/classNames.ts index 9ca2e3e..12bf6e5 100644 --- a/packages/core/src/hooks/_utils/classNames.ts +++ b/packages/core/src/hooks/_utils/classNames.ts @@ -4,17 +4,32 @@ import { NAME } from "../../constants/branding.const"; /** * Generates static class name using BEM notation */ -export function useStaticClassName(block?: string, element?: string, modifier?: string) { +export function useStaticClassName(block?: string, element?: string, modifier?: string | string[]) { return useMemo(() => { if (block == null) return null; - let className = `${NAME}-${block}`; + let className = ""; - if (element != null) - className += `_${element}`; - if (modifier != null) - className += `--${modifier}`; + if (modifier == null || typeof modifier == "string") { + className = `${NAME}-${block}`; + + if (element != null) + className += `_${element}`; + if (modifier != null) + className += `--${modifier}`; + } else { + modifier?.forEach((mod) => { + className += ` ${NAME}-${block}`; + + if (element != null) + className += `_${element}`; + if (mod != null) + className += `--${mod}`; + }); + + className = className.trim(); + } return className; }, [block, element, modifier]); @@ -23,7 +38,7 @@ export function useStaticClassName(block?: string, element?: string, modifier?: /** * Combine clas names and an optional static class name */ -export function useClassNames(classNames: (string | undefined)[], block?: string, element?: string, modifier?: string) { +export function useClassNames(classNames: (string | undefined)[], block?: string, element?: string, modifier?: string | string[]) { const staticClassName = useStaticClassName(block, element, modifier); return useMemo(() => { diff --git a/packages/demo/public/assets/fonts/minecraftia/Minecraftia-Regular.ttf b/packages/demo/public/assets/fonts/minecraftia/Minecraftia-Regular.ttf new file mode 100644 index 0000000..7247ad7 Binary files /dev/null and b/packages/demo/public/assets/fonts/minecraftia/Minecraftia-Regular.ttf differ diff --git a/packages/demo/public/assets/fonts/minecraftia/readme.txt b/packages/demo/public/assets/fonts/minecraftia/readme.txt new file mode 100644 index 0000000..bc5ccf4 --- /dev/null +++ b/packages/demo/public/assets/fonts/minecraftia/readme.txt @@ -0,0 +1,7 @@ +The font file in this archive was created by Andrew Tyler www.AndrewTyler.net and font@andrewtyler.net + +Use at 12 or 24 px size with anti-alising off for best results. + + + + diff --git a/packages/demo/public/assets/skins/pixel/apps/icons/ball-maze.png b/packages/demo/public/assets/skins/pixel/apps/icons/ball-maze.png new file mode 100644 index 0000000..cbcdbed Binary files /dev/null and b/packages/demo/public/assets/skins/pixel/apps/icons/ball-maze.png differ diff --git a/packages/demo/public/assets/skins/pixel/apps/icons/browser.png b/packages/demo/public/assets/skins/pixel/apps/icons/browser.png new file mode 100644 index 0000000..51fb696 Binary files /dev/null and b/packages/demo/public/assets/skins/pixel/apps/icons/browser.png differ diff --git a/packages/demo/public/assets/skins/pixel/apps/icons/calculator.png b/packages/demo/public/assets/skins/pixel/apps/icons/calculator.png new file mode 100644 index 0000000..5d0e0e3 Binary files /dev/null and b/packages/demo/public/assets/skins/pixel/apps/icons/calculator.png differ diff --git a/packages/demo/public/assets/skins/pixel/apps/icons/file-explorer.png b/packages/demo/public/assets/skins/pixel/apps/icons/file-explorer.png new file mode 100644 index 0000000..0aa3965 Binary files /dev/null and b/packages/demo/public/assets/skins/pixel/apps/icons/file-explorer.png differ diff --git a/packages/demo/public/assets/skins/pixel/apps/icons/logic-sim.png b/packages/demo/public/assets/skins/pixel/apps/icons/logic-sim.png new file mode 100644 index 0000000..b322e49 Binary files /dev/null and b/packages/demo/public/assets/skins/pixel/apps/icons/logic-sim.png differ diff --git a/packages/demo/public/assets/skins/pixel/apps/icons/media-viewer.png b/packages/demo/public/assets/skins/pixel/apps/icons/media-viewer.png new file mode 100644 index 0000000..3a52103 Binary files /dev/null and b/packages/demo/public/assets/skins/pixel/apps/icons/media-viewer.png differ diff --git a/packages/demo/public/assets/skins/pixel/apps/icons/minesweeper.png b/packages/demo/public/assets/skins/pixel/apps/icons/minesweeper.png new file mode 100644 index 0000000..7d6e3d5 Binary files /dev/null and b/packages/demo/public/assets/skins/pixel/apps/icons/minesweeper.png differ diff --git a/packages/demo/public/assets/skins/pixel/apps/icons/settings.png b/packages/demo/public/assets/skins/pixel/apps/icons/settings.png new file mode 100644 index 0000000..6e7fae1 Binary files /dev/null and b/packages/demo/public/assets/skins/pixel/apps/icons/settings.png differ diff --git a/packages/demo/public/assets/skins/pixel/apps/icons/terminal.png b/packages/demo/public/assets/skins/pixel/apps/icons/terminal.png new file mode 100644 index 0000000..83467ef Binary files /dev/null and b/packages/demo/public/assets/skins/pixel/apps/icons/terminal.png differ diff --git a/packages/demo/public/assets/skins/pixel/apps/icons/text-editor.png b/packages/demo/public/assets/skins/pixel/apps/icons/text-editor.png new file mode 100644 index 0000000..7bf638f Binary files /dev/null and b/packages/demo/public/assets/skins/pixel/apps/icons/text-editor.png differ diff --git a/packages/demo/public/assets/skins/pixel/apps/icons/wordle.png b/packages/demo/public/assets/skins/pixel/apps/icons/wordle.png new file mode 100644 index 0000000..c2e1e96 Binary files /dev/null and b/packages/demo/public/assets/skins/pixel/apps/icons/wordle.png differ diff --git a/packages/demo/scripts/stage.ts b/packages/demo/scripts/stage.ts index 87767e6..7c79988 100644 --- a/packages/demo/scripts/stage.ts +++ b/packages/demo/scripts/stage.ts @@ -3,7 +3,7 @@ import { appsConfig } from "../src/config/apps.config"; import { ANSI } from "../../core/src/constants"; import { NAME, TAG_LINE } from "../src/config/branding.config"; import { BASE_URL, BUILD_DIR, DOMAIN } from "../src/config/deploy.config"; -import { skin } from "../src/config/skin.config"; +import { defaultSkin } from "../src/config/skin.config"; import { name } from "../package.json"; const PATHS = { @@ -17,7 +17,7 @@ function generateSitemapXml() { const date = new Date(); const lastModified = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`; - const images = skin.wallpapers.map((path) => ` + const images = defaultSkin.wallpapers.map((path) => ` ${BASE_URL.slice(0, -1) + path} ` diff --git a/packages/demo/src/Main.tsx b/packages/demo/src/Main.tsx index b8bafc6..a1fa4a0 100644 --- a/packages/demo/src/Main.tsx +++ b/packages/demo/src/Main.tsx @@ -1,11 +1,33 @@ -import { ReactElement } from "react"; +import { ReactElement, useEffect, useState } from "react"; import { Router } from "./router/Router"; -import { skin } from "./config/skin.config"; +import { defaultSkin } from "./config/skin.config"; import { NAME, TAG_LINE } from "./config/branding.config"; import { appsConfig } from "./config/apps.config"; -import { ProzillaOS } from "prozilla-os"; +import { getViewportParams, ProzillaOS } from "prozilla-os"; +import { macOsSkin, minimalSkin, pixelSkin } from "@prozilla-os/skins"; export function Main(): ReactElement { + const [skin, setSkin] = useState(defaultSkin); + + useEffect(() => { + const params = getViewportParams(); + + if (params.skin == null) + return; + + switch (params.skin) { + case "mac": + setSkin(macOsSkin); + break; + case "minimal": + setSkin(minimalSkin); + break; + case "pixel": + setSkin(pixelSkin); + break; + } + }, []); + return { + import("../../styles/skins/pixel.css"); + } +}); \ No newline at end of file diff --git a/packages/skins/src/main.ts b/packages/skins/src/main.ts index d964fba..8b83d73 100644 --- a/packages/skins/src/main.ts +++ b/packages/skins/src/main.ts @@ -1 +1 @@ -export { Skin, macOsSkin, minimalSkin } from "./core"; \ No newline at end of file +export * from "./core"; \ No newline at end of file diff --git a/packages/skins/src/styles/skins/macOs.css b/packages/skins/src/styles/skins/macOs.css index a250387..a1c3fd1 100644 --- a/packages/skins/src/styles/skins/macOs.css +++ b/packages/skins/src/styles/skins/macOs.css @@ -100,13 +100,28 @@ pointer-events: auto; } -.ProzillaOS-Taskbar_UtilIcons button { +.ProzillaOS-Taskbar_Indicator--Calendar { display: flex; + flex-direction: row; gap: 0.5rem; } -.ProzillaOS-Taskbar_UtilIcons button br { - display: none; +.ProzillaOS-Taskbar_UtilIcons > div { + position: relative; +} + +.ProzillaOS-Taskbar_UtilIcons > div > div { + top: 100%; + bottom: unset; +} + +.ProzillaOS-Taskbar_Menu--Util { + border-radius: var(--border-radius-1); + border-top-right-radius: 0; +} + +.ProzillaOS-Taskbar_UtilIcons > div > div > .ProzillaOS-Taskbar_Menu--Util:not(.ProzillaOS-Taskbar_Menu--Active) { + transform: translateY(-100px); } .ProzillaOS-Desktop .ProzillaOS-DirectoryList { diff --git a/packages/skins/src/styles/skins/pixel.css b/packages/skins/src/styles/skins/pixel.css new file mode 100644 index 0000000..d8851c7 --- /dev/null +++ b/packages/skins/src/styles/skins/pixel.css @@ -0,0 +1,37 @@ +:root { + --border-radius-0: 0; + --border-radius-1: 0; +} + +:root { + --body-font-family: "Minecraftia", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + /* --mono-font-family: "Minecraftia", source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; */ +} + +@font-face { + font-family: "Minecraftia"; + src: url("/assets/fonts/minecraftia/Minecraftia-Regular.ttf"); + font-display: swap; +} + +body { + font-smooth: never; + -webkit-font-smoothing : none; +} + +p, pre, input, a { + position: relative; + top: 0.25rem; + line-height: 1.6rem; +} + +p > a { + top: unset; +} + +.ProzillaOS-Taskbar_Indicator--Calendar > p { + font-size: 0.875rem; + line-height: 1.25rem; +} \ No newline at end of file