diff --git a/.env b/.env index 4e613c9..7a39d6f 100644 --- a/.env +++ b/.env @@ -1 +1 @@ -NEXT_PUBLIC_BASE_PATH="/platinum" +NEXT_PUBLIC_BASE_PATH="" diff --git a/README.md b/README.md index 5753c08..50fa499 100644 --- a/README.md +++ b/README.md @@ -145,28 +145,28 @@ You will need Node.js v20.11 or higher. You will also need the `yarn` package ma ## Component Organization * `` - * `` - * `` - * `` + * `` + * `` + * `` * `` - * `` - * `` - * `` - * `` + * `` + * `` + * `` + * `` * `` ## Events -* `PlatinumDesktop` +* `ClassicyDesktop` * `PlatinumDesktopClick` * `PlatinumDesktopDrag` -* `PlatinumSoundPlay` +* `ClassicySoundPlay` * `PlatinumAlertSosumi` * `PlatinumAlertWildEep` * `PlatinumAlertndigo` * `PlatinumBeep` - * `PlatinumBoot` + * `ClassicyBoot` * `PlatinumButtonClickDown` * `PlatinumButtonClickUp` * `PlatinumInputRadioClickDown` @@ -191,19 +191,19 @@ You will need Node.js v20.11 or higher. You will also need the `yarn` package ma * `PlatinumWindowZoomMaximize` * `PlatinumWindowZoomMinimize` -* `PlatinumDesktopIcon` +* `ClassicyDesktopIcon` * `PlatinumDesktopClick` * `PlatinumDesktopAltClick` * `PlatinumDesktopDoubleClick` * `PlatinumDesktopDrag` -* `PlatinumApp` +* `ClassicyApp` * `PlatinumAppOpen` * `PlatinumAppClose` * `PlatinumAppHide` * `PlatinumAppFocus` -* `PlatinumWindow` +* `ClassicyWindow` * `PlatinumWindowOpen` * `PlatinumWindowClose` * `PlatinumWindowZoom` @@ -214,7 +214,7 @@ You will need Node.js v20.11 or higher. You will also need the `yarn` package ma * `PlatinumWindowContentScroll` * `PlatinumWindowContentClick` -* `PlatinumMenu` +* `ClassicyMenu` * `PlatinumMenuHover` * `PlatinumMenuClick` * `PlatinumMenuChange` @@ -597,12 +597,12 @@ was the perfect tool for a Platinum project revamp. I sketched out the component structure as follows: -- `` +- `` - `` - ``: A Custom app - `` - - `` - - `` + - `` + - `` - `` - `` @@ -699,8 +699,8 @@ later. *The JSON contents of the `Bondi` theme.* Now that I had my components defined, I sketched them out quickly, just for structure. There really wasn't much to them, -but I needed a canvas to start working. I created a blank PlatinumDesktop, PlatinumDesktopIcon, PlatinumWindow and -PlatinumButton as a starting point, with no CSS. Then, I got to the hard, hard work. +but I needed a canvas to start working. I created a blank ClassicyDesktop, ClassicyDesktopIcon, ClassicyWindow and +ClassicyButton as a starting point, with no CSS. Then, I got to the hard, hard work. I first sketched out the components of a Platinum Window. I knew that this would be my most complicated component, so I hoped sketching it out would also help me identify pieces I could break down into smaller components, as well as get an @@ -715,7 +715,7 @@ to react to as a Window, and typed those up, too. | Name | Type | Required | Description | |------------------|-------|----------|-------------------------------------------------------------------------------------------------------------------------------------------------------------| | id | str | Yes | The ID of the window | -| appId | str | Yes | The ID of the PlatinumApp that the window belongs to. All windows must belong to an App (though, not all Apps must have Windows). | +| appId | str | Yes | The ID of the ClassicyApp that the window belongs to. All windows must belong to an App (though, not all Apps must have Windows). | | title | str | No | The Title Text to display in the windows's Title bar. | | icon | str | No | The Icon to show in the Title bar. | | hidden | bool | No | Whether the window is hidden or not. | @@ -766,7 +766,7 @@ CSS `calc()` function, I was able to get a tighter grip on the visual style. It continued to add components, as I had already established a good measurement system and ratios that were consistent throughout. -I created a shared SASS module that created CSS classes for all the themes, so that updating the PlatinumDesktop +I created a shared SASS module that created CSS classes for all the themes, so that updating the ClassicyDesktop component's class name would update all the child components. I created a SASS array of color values for each color theme; adding additional color or system themes is as easy as creating a new class and changing a few input variables to the `appearanceManagerTheme` mixin function. Then, any Component needs only use CSS variables in their styling to take @@ -795,10 +795,10 @@ multi-window environment is not very user-friendly if the Windows are fighting f me quite a while to wrap my head around all the things that were involved in basic window management. I needed to provide some basic system settings to all components: specifically, the color and sound themes. I also -needed to provide a place to store which PlatinumApp was active, which Window was active, and a place to store all the +needed to provide a place to store which ClassicyApp was active, which Window was active, and a place to store all the items in the Desktop Menu Bar, which will be shared by all Apps and Windows. -I chose to let the PlatinumDesktop component control which Window was currently active, and PlatinumApps and Windows +I chose to let the ClassicyDesktop component control which Window was currently active, and PlatinumApps and Windows could request a window become active by firing an event. At first, I fell unwittingly into a hole known as "prop drilling" by others, by passing large data structures as props through components. Most of the time, I was only passing them so they would be available to child components. At first, this kind of made sense, because as a backend developer, @@ -806,8 +806,8 @@ the idea of dependency injection is a real, but often ignored, pain. After too l this all wrong. I took a week away from the project, and started doing every tutorial I could find dealing with complex state and event reducers in React. -After my break and fresh insight, I rewrote the PlatinumDesktop component to use a shared context and an event reducer. -I then did the same thing to the PlatinumWindow component. I typed up a list of events I would need to react to. +After my break and fresh insight, I rewrote the ClassicyDesktop component to use a shared context and an event reducer. +I then did the same thing to the ClassicyWindow component. I typed up a list of events I would need to react to. | EventName | Description | |-------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| @@ -828,29 +828,29 @@ I then did the same thing to the PlatinumWindow component. I typed up a list of I also re-wrote the event handlers I had written for the Windows's control boxes, and took advantage of the event dispatcher. -Next, I decided that the PlatinumDesktop could also control Opening and Closing PlatinumApps, which would in turn -control its own windows. Opening a PlatinumApp also adds an entry to the `appSwitcherMenu` array, which keeps track of +Next, I decided that the ClassicyDesktop could also control Opening and Closing PlatinumApps, which would in turn +control its own windows. Opening a ClassicyApp also adds an entry to the `appSwitcherMenu` array, which keeps track of all the open apps and displays them in the Appication Switcher, the top-right component of the Desktop Menu. One of the other neat quirks of MacOS Classic and MacOS today is the top Desktop Menu Bar, whose contents changes based on the current, active window. The Menu Bar is considered contextually relevant to the active window the user is interacting with. This is in contrast to Windows TaskBar, which is contextually independent. -I decided to let windows attach a MenuBar to the event they fire when they become active, and let the PlatinumDesktop -and PlatinumDesktopMenuBar components use that state to render the menu. This took some time for me to wrap my head +I decided to let windows attach a MenuBar to the event they fire when they become active, and let the ClassicyDesktop +and ClassicyDesktopMenuBar components use that state to render the menu. This took some time for me to wrap my head around, being somewhat a newbie again to React, but eventually it became so elegant that I have almost taken it for granted. -I abstracted out as much even logic as possible into the deepest component I could. I knew that PlatinumWindow events -might need to bubble up to the PlatinumDesktop, but I also knew many PlatinumWindow events would need to go that high, +I abstracted out as much even logic as possible into the deepest component I could. I knew that ClassicyWindow events +might need to bubble up to the ClassicyDesktop, but I also knew many ClassicyWindow events would need to go that high, and could stay within the Window itself. While the events are structuarlly the same, I decided to setup discrete event dispatchers for components. I knew this means I would have to make two calls for some events. For instance, to handle a `PlatinumWindowFocus` event, first I need to notify the actual window it has been focused. This is important so that it could notify the windows' children of a change, and make any visual updates necessary, such -as applying a new "active" CSS class. Then, I need to let the PlatinumDesktop event handler also know the window was +as applying a new "active" CSS class. Then, I need to let the ClassicyDesktop event handler also know the window was been focused, so it can be set as the active window and raised to the top-most z-index. When handling this event in the -PlatinumWindow, I first dispatch a local `PlatinumWindowFocus` to the Window's event dispatcher. Then, using the same +ClassicyWindow, I first dispatch a local `PlatinumWindowFocus` to the Window's event dispatcher. Then, using the same payload, I dispatch the same `PlatinumWindowFocus` event to the Desktop event dispatcher. ### Demo Time @@ -862,10 +862,10 @@ sites, [theoldnet.com](https://theoldnet.com). I took a shot at building out a full App using the framework I'd setup. It looks something like below: ```other - - - - + + + - - + + ); } diff --git a/src/app/Applications/Demo/Demo.tsx b/src/app/Applications/Demo/Demo.tsx index 2dc581c..1e0ae1d 100644 --- a/src/app/Applications/Demo/Demo.tsx +++ b/src/app/Applications/Demo/Demo.tsx @@ -1,14 +1,14 @@ -import PlatinumApp from "@/app/SystemFolder/SystemResources/App/PlatinumApp"; -import {useDesktopDispatch} from "@/app/SystemFolder/SystemResources/AppManager/PlatinumAppManagerContext"; -import PlatinumButton from "@/app/SystemFolder/SystemResources/Button/PlatinumButton"; -import PlatinumCheckbox from "@/app/SystemFolder/SystemResources/Checkbox/PlatinumCheckbox"; -import PlatinumControlGroup from "@/app/SystemFolder/SystemResources/ControlGroup/PlatinumControlGroup"; -import PlatinumDisclosure from "@/app/SystemFolder/SystemResources/Disclosure/PlatinumDisclosure"; -import PlatinumInput from "@/app/SystemFolder/SystemResources/Input/PlatinumInput"; -import PlatinumPopUpMenu from "@/app/SystemFolder/SystemResources/PopUpMenu/PlatinumPopUpMenu"; -import PlatinumProgressBar from "@/app/SystemFolder/SystemResources/ProgressBar/PlatinumProgressBar"; -import PlatinumRadioInput from "@/app/SystemFolder/SystemResources/RadioInput/PlatinumRadioInput"; -import PlatinumWindow from "@/app/SystemFolder/SystemResources/Window/PlatinumWindow"; +import ClassicyApp from "@/app/SystemFolder/SystemResources/App/ClassicyApp"; +import {useDesktopDispatch} from "@/app/SystemFolder/SystemResources/AppManager/ClassicyAppManagerContext"; +import ClassicyButton from "@/app/SystemFolder/SystemResources/Button/ClassicyButton"; +import ClassicyCheckbox from "@/app/SystemFolder/SystemResources/Checkbox/ClassicyCheckbox"; +import ClassicyControlGroup from "@/app/SystemFolder/SystemResources/ControlGroup/ClassicyControlGroup"; +import ClassicyDisclosure from "@/app/SystemFolder/SystemResources/Disclosure/ClassicyDisclosure"; +import ClassicyInput from "@/app/SystemFolder/SystemResources/Input/ClassicyInput"; +import ClassicyPopUpMenu from "@/app/SystemFolder/SystemResources/PopUpMenu/ClassicyPopUpMenu"; +import ClassicyProgressBar from "@/app/SystemFolder/SystemResources/ProgressBar/ClassicyProgressBar"; +import ClassicyRadioInput from "@/app/SystemFolder/SystemResources/RadioInput/ClassicyRadioInput"; +import ClassicyWindow from "@/app/SystemFolder/SystemResources/Window/ClassicyWindow"; import React from "react"; const Demo: React.FC = () => { @@ -21,7 +21,7 @@ const Demo: React.FC = () => { const quitApp = () => { desktopEventDispatch({ - type: "PlatinumAppClose", + type: "ClassicyAppClose", app: { id: appId, title: appName, @@ -47,14 +47,14 @@ const Demo: React.FC = () => { return ( <> - - { modalWindow={true} appMenu={appMenu} > - - - - - + + + - - - - - + + - - - - + +

HELLO!

- - Do Nothing - Quit - Disabled + + Do Nothing + Quit + Disabled - - + + ); } diff --git a/src/app/Applications/SimpleText/SimpleText.tsx b/src/app/Applications/SimpleText/SimpleText.tsx index 6ac8a57..7ee9416 100644 --- a/src/app/Applications/SimpleText/SimpleText.tsx +++ b/src/app/Applications/SimpleText/SimpleText.tsx @@ -1,7 +1,7 @@ -import PlatinumApp from "@/app/SystemFolder/SystemResources/App/PlatinumApp"; -import {useDesktopDispatch} from "@/app/SystemFolder/SystemResources/AppManager/PlatinumAppManagerContext"; -import PlatinumRichTextEditor from "@/app/SystemFolder/SystemResources/RichTextEditor/PlatinumRichTextEditor"; -import PlatinumWindow from "@/app/SystemFolder/SystemResources/Window/PlatinumWindow"; +import ClassicyApp from "@/app/SystemFolder/SystemResources/App/ClassicyApp"; +import {useDesktopDispatch} from "@/app/SystemFolder/SystemResources/AppManager/ClassicyAppManagerContext"; +import ClassicyRichTextEditor from "@/app/SystemFolder/SystemResources/RichTextEditor/ClassicyRichTextEditor"; +import ClassicyWindow from "@/app/SystemFolder/SystemResources/Window/ClassicyWindow"; import React from "react"; const SimpleText = () => { @@ -36,7 +36,7 @@ const SimpleText = () => { const quitApp = () => { desktopEventDispatch({ - type: "PlatinumAppClose", + type: "ClassicyAppClose", app: { id: appId, title: appName, @@ -61,21 +61,21 @@ const SimpleText = () => { ]; return ( - - - - - + + + ); } diff --git a/src/app/SystemFolder/ControlPanels/AppearanceManager/AppearanceManager.tsx b/src/app/SystemFolder/ControlPanels/AppearanceManager/AppearanceManager.tsx index b10b687..1edb4e7 100644 --- a/src/app/SystemFolder/ControlPanels/AppearanceManager/AppearanceManager.tsx +++ b/src/app/SystemFolder/ControlPanels/AppearanceManager/AppearanceManager.tsx @@ -1,14 +1,14 @@ "use client"; import {getTheme} from "@/app/SystemFolder/Appearance/PlatinumAppearance"; -import {PlatinumAboutWindow} from "@/app/SystemFolder/SystemResources/AboutWindow/PlatinumAboutWindow"; -import PlatinumApp from "@/app/SystemFolder/SystemResources/App/PlatinumApp"; -import {useDesktop, useDesktopDispatch,} from "@/app/SystemFolder/SystemResources/AppManager/PlatinumAppManagerContext"; -import PlatinumButton from "@/app/SystemFolder/SystemResources/Button/PlatinumButton"; -import PlatinumControlLabel from "@/app/SystemFolder/SystemResources/ControlLabel/PlatinumControlLabel"; -import PlatinumPopUpMenu from "@/app/SystemFolder/SystemResources/PopUpMenu/PlatinumPopUpMenu"; -import {useSound, useSoundDispatch,} from "@/app/SystemFolder/SystemResources/SoundManager/PlatinumSoundManagerContext"; -import PlatinumWindow from "@/app/SystemFolder/SystemResources/Window/PlatinumWindow"; +import {ClassicyAboutWindow} from "@/app/SystemFolder/SystemResources/AboutWindow/ClassicyAboutWindow"; +import ClassicyApp from "@/app/SystemFolder/SystemResources/App/ClassicyApp"; +import {useDesktop, useDesktopDispatch,} from "@/app/SystemFolder/SystemResources/AppManager/ClassicyAppManagerContext"; +import ClassicyButton from "@/app/SystemFolder/SystemResources/Button/ClassicyButton"; +import ClassicyControlLabel from "@/app/SystemFolder/SystemResources/ControlLabel/ClassicyControlLabel"; +import ClassicyPopUpMenu from "@/app/SystemFolder/SystemResources/PopUpMenu/ClassicyPopUpMenu"; +import {useSound, useSoundDispatch,} from "@/app/SystemFolder/SystemResources/SoundManager/ClassicySoundManagerContext"; +import ClassicyWindow from "@/app/SystemFolder/SystemResources/Window/ClassicyWindow"; import React from "react"; export const AppearanceManager: React.FC = () => { @@ -30,7 +30,7 @@ export const AppearanceManager: React.FC = () => { const switchTheme = (e) => { desktopEventDispatch({ - type: "PlatinumDesktopTheme", + type: "ClassicyDesktopTheme", activeTheme: e.target.value, }); loadSoundTheme(e.target.value); @@ -39,7 +39,7 @@ export const AppearanceManager: React.FC = () => { const loadSoundTheme = (themeName: string) => { const soundTheme = getTheme(themeName).sound; player({ - type: "PlatinumSoundLoad", + type: "ClassicySoundLoad", file: soundTheme.file, disabled: soundTheme.disabled, }); @@ -47,7 +47,7 @@ export const AppearanceManager: React.FC = () => { const quitApp = () => { desktopEventDispatch({ - type: "PlatinumAppClose", + type: "ClassicyAppClose", app: { id: appId, title: appName, @@ -85,19 +85,19 @@ export const AppearanceManager: React.FC = () => { const cleanupIcons = () => { desktopEventDispatch({ - type: "PlatinumDesktopIconCleanup", + type: "ClassicyDesktopIconCleanup", }); }; return ( - - { modalWindow={true} appMenu={appMenu} > - - + - Cleanup Icons - + Cleanup Icons + {showAbout && ( - { @@ -131,6 +131,6 @@ export const AppearanceManager: React.FC = () => { }} /> )} - + ); }; diff --git a/src/app/SystemFolder/ControlPanels/SoundManager/SoundManager.tsx b/src/app/SystemFolder/ControlPanels/SoundManager/SoundManager.tsx index 9bef242..fbea21f 100644 --- a/src/app/SystemFolder/ControlPanels/SoundManager/SoundManager.tsx +++ b/src/app/SystemFolder/ControlPanels/SoundManager/SoundManager.tsx @@ -1,19 +1,19 @@ "use client"; import soundManagerStyles from "@/app/SystemFolder/ControlPanels/SoundManager/SoundManager.module.scss"; -import {PlatinumAboutWindow} from "@/app/SystemFolder/SystemResources/AboutWindow/PlatinumAboutWindow"; -import PlatinumApp from "@/app/SystemFolder/SystemResources/App/PlatinumApp"; -import {useDesktopDispatch} from "@/app/SystemFolder/SystemResources/AppManager/PlatinumAppManagerContext"; -import PlatinumCheckbox from "@/app/SystemFolder/SystemResources/Checkbox/PlatinumCheckbox"; -import PlatinumControlGroup from "@/app/SystemFolder/SystemResources/ControlGroup/PlatinumControlGroup"; -import PlatinumControlLabel from "@/app/SystemFolder/SystemResources/ControlLabel/PlatinumControlLabel"; -import PlatinumDisclosure from "@/app/SystemFolder/SystemResources/Disclosure/PlatinumDisclosure"; +import {ClassicyAboutWindow} from "@/app/SystemFolder/SystemResources/AboutWindow/ClassicyAboutWindow"; +import ClassicyApp from "@/app/SystemFolder/SystemResources/App/ClassicyApp"; +import {useDesktopDispatch} from "@/app/SystemFolder/SystemResources/AppManager/ClassicyAppManagerContext"; +import ClassicyCheckbox from "@/app/SystemFolder/SystemResources/Checkbox/ClassicyCheckbox"; +import ClassicyControlGroup from "@/app/SystemFolder/SystemResources/ControlGroup/ClassicyControlGroup"; +import ClassicyControlLabel from "@/app/SystemFolder/SystemResources/ControlLabel/ClassicyControlLabel"; +import ClassicyDisclosure from "@/app/SystemFolder/SystemResources/Disclosure/ClassicyDisclosure"; import { - PlatinumSoundInfo, + ClassicySoundInfo, useSound, useSoundDispatch, -} from "@/app/SystemFolder/SystemResources/SoundManager/PlatinumSoundManagerContext"; -import PlatinumWindow from "@/app/SystemFolder/SystemResources/Window/PlatinumWindow"; +} from "@/app/SystemFolder/SystemResources/SoundManager/ClassicySoundManagerContext"; +import ClassicyWindow from "@/app/SystemFolder/SystemResources/Window/ClassicyWindow"; import React from "react"; export const SoundManager: React.FC = () => { @@ -33,7 +33,7 @@ export const SoundManager: React.FC = () => { const changeSounds = (e) => { setEnableAllSounds(!!e.target.checked); player({ - type: "PlatinumSoundDisable", + type: "ClassicySoundDisable", disabled: enableAllSounds ? [] : ["*"], }); }; @@ -41,7 +41,7 @@ export const SoundManager: React.FC = () => { const quitApp = () => { desktopEventDispatch({ - type: "PlatinumAppClose", + type: "ClassicyAppClose", app: { id: appId, title: appName, @@ -90,14 +90,14 @@ export const SoundManager: React.FC = () => { }; return ( - - { modalWindow={true} appMenu={appMenu} > - { onClick={changeSounds} checked={!playerState.disabled.includes("*")} /> - - + +
{getSoundLabelGroups().map((group: string) => ( - - {playerState.labels.map((item: PlatinumSoundInfo) => ( + + {playerState.labels.map((item: ClassicySoundInfo) => ( <> {item.group === group && ( - { )} ))} - + ))}
- - + + {showAbout && ( - { @@ -152,6 +152,6 @@ export const SoundManager: React.FC = () => { /> )} - + ); }; diff --git a/src/app/SystemFolder/Finder/Finder.tsx b/src/app/SystemFolder/Finder/Finder.tsx index 481c9d1..3e9d441 100644 --- a/src/app/SystemFolder/Finder/Finder.tsx +++ b/src/app/SystemFolder/Finder/Finder.tsx @@ -1,8 +1,8 @@ -import PlatinumApp from "@/app/SystemFolder/SystemResources/App/PlatinumApp"; -import {useDesktopDispatch} from "@/app/SystemFolder/SystemResources/AppManager/PlatinumAppManagerContext"; -import {PlatinumFileSystem} from "@/app/SystemFolder/SystemResources/File/FileSystem"; -import PlatinumFileBrowser from "@/app/SystemFolder/SystemResources/File/PlatinumFileBrowser"; -import PlatinumWindow from "@/app/SystemFolder/SystemResources/Window/PlatinumWindow"; +import ClassicyApp from "@/app/SystemFolder/SystemResources/App/ClassicyApp"; +import {useDesktopDispatch} from "@/app/SystemFolder/SystemResources/AppManager/ClassicyAppManagerContext"; +import ClassicyFileBrowser from "@/app/SystemFolder/SystemResources/File/ClassicyFileBrowser"; +import {ClassicyFileSystem} from "@/app/SystemFolder/SystemResources/File/ClassicyFileSystem"; +import ClassicyWindow from "@/app/SystemFolder/SystemResources/Window/ClassicyWindow"; import React from "react"; const Finder = () => { @@ -31,11 +31,11 @@ const Finder = () => { const emptyTrash = () => { desktopEventDispatch({ - type: "PlatinumFinderEmptyTrash", + type: "ClassicyFinderEmptyTrash", }); } - const fs = new PlatinumFileSystem(""); + const fs = new ClassicyFileSystem(""); const desktopEventDispatch = useDesktopDispatch(); React.useEffect(() => { @@ -43,7 +43,7 @@ const Finder = () => { Object.entries(drives).forEach(([a, b]) => { desktopEventDispatch({ - type: "PlatinumDesktopIconAdd", + type: "ClassicyDesktopIconAdd", app: { id: appId, name: a, @@ -53,7 +53,7 @@ const Finder = () => { }); desktopEventDispatch({ - type: "PlatinumDesktopIconAdd", + type: "ClassicyDesktopIconAdd", app: { id: "finder_trash", name: "Trash", @@ -68,31 +68,31 @@ const Finder = () => { openPaths.forEach((op, idx) => { let dir = fs.statDir(op); openWindows.push( - {dir["_count"]} items} + header={{dir["_count"]} items, {fs.formatSize(dir["_size"])}} onCloseFunc={closeFolder} > - - + ) }) return ( - {openWindows} - + ); } diff --git a/src/app/SystemFolder/Finder/FinderContext.tsx b/src/app/SystemFolder/Finder/FinderContext.tsx index 945cfee..62e1f89 100644 --- a/src/app/SystemFolder/Finder/FinderContext.tsx +++ b/src/app/SystemFolder/Finder/FinderContext.tsx @@ -1,49 +1,49 @@ -import {DefaultPlatinumFinderState, PlatinumFinderContextData} from "@/app/SystemFolder/Finder/FinderState"; +import {ClassicyFinderContextData, DefaultClassicyFinderState} from "@/app/SystemFolder/Finder/FinderState"; import React from 'react'; -export const PlatinumFinderContext = React.createContext(DefaultPlatinumFinderState); -export const PlatinumFinderDispatchContext = React.createContext(null); +export const ClassicyFinderContext = React.createContext(DefaultClassicyFinderState); +export const ClassicyFinderDispatchContext = React.createContext(null); -type PlatinumFinderProviderProps = { +type ClassicyFinderProviderProps = { children?: any } -export const PlatinumFinderProvider: React.FC = ({children}) => { +export const ClassicyFinderProvider: React.FC = ({children}) => { let finderState = typeof window !== 'undefined' - ? JSON.parse(localStorage.getItem('platinumFinderState')) || DefaultPlatinumFinderState - : DefaultPlatinumFinderState; + ? JSON.parse(localStorage.getItem('classicyFinderState')) || DefaultClassicyFinderState + : DefaultClassicyFinderState; - const [finder, dispatch] = React.useReducer(platinumFinderEventHandler, finderState); + const [finder, dispatch] = React.useReducer(classicyFinderEventHandler, finderState); React.useEffect(() => { - localStorage.setItem('platinumFinderState', JSON.stringify(finder)); + localStorage.setItem('classicyFinderState', JSON.stringify(finder)); }, [finder]) return ( - - + + {children} - - + + ); } export function useFinder() { - return React.useContext(PlatinumFinderContext); + return React.useContext(ClassicyFinderContext); } export function useFinderDispatch() { - return React.useContext(PlatinumFinderDispatchContext); + return React.useContext(ClassicyFinderDispatchContext); } -export const platinumFinderEventHandler = (ds: PlatinumFinderContextData, action) => { +export const classicyFinderEventHandler = (ds: ClassicyFinderContextData, action) => { switch (action.type) { - case "PlatinumFinderEmptyTrash": { + case "ClassicyFinderEmptyTrash": { // TODO: We need to decide how to reset the state here. break; } - case "PlatinumFinderOpenDirectory": { + case "ClassicyFinderOpenDirectory": { ds.openPaths = [...ds.openPaths, action.path]; break; } diff --git a/src/app/SystemFolder/Finder/FinderState.ts b/src/app/SystemFolder/Finder/FinderState.ts index 59ad2b3..0805308 100644 --- a/src/app/SystemFolder/Finder/FinderState.ts +++ b/src/app/SystemFolder/Finder/FinderState.ts @@ -1,8 +1,8 @@ -export type PlatinumFinderContextData = { +export type ClassicyFinderContextData = { openPaths: string[] } -export const DefaultPlatinumFinderState = { +export const DefaultClassicyFinderState = { openPaths: [] } diff --git a/src/app/SystemFolder/SystemResources/AboutWindow/PlatinumAboutWindow.tsx b/src/app/SystemFolder/SystemResources/AboutWindow/ClassicyAboutWindow.tsx similarity index 77% rename from src/app/SystemFolder/SystemResources/AboutWindow/PlatinumAboutWindow.tsx rename to src/app/SystemFolder/SystemResources/AboutWindow/ClassicyAboutWindow.tsx index cc4b431..35214a8 100644 --- a/src/app/SystemFolder/SystemResources/AboutWindow/PlatinumAboutWindow.tsx +++ b/src/app/SystemFolder/SystemResources/AboutWindow/ClassicyAboutWindow.tsx @@ -1,8 +1,8 @@ import appearanceManagerStyles from "@/app/SystemFolder/ControlPanels/AppearanceManager/AppearanceManager.module.scss"; -import PlatinumButton from "@/app/SystemFolder/SystemResources/Button/PlatinumButton"; -import PlatinumWindow from "@/app/SystemFolder/SystemResources/Window/PlatinumWindow"; +import ClassicyButton from "@/app/SystemFolder/SystemResources/Button/ClassicyButton"; +import ClassicyWindow from "@/app/SystemFolder/SystemResources/Window/ClassicyWindow"; -type PlatinumAboutWindowProps = { +type ClassicyAboutWindowProps = { appId: string; appName: string; appIcon: string; @@ -10,7 +10,7 @@ type PlatinumAboutWindowProps = { appMenu?: any; } -export const PlatinumAboutWindow: React.FC = ({ +export const ClassicyAboutWindow: React.FC = ({ appId, appName, appIcon, @@ -19,7 +19,7 @@ export const PlatinumAboutWindow: React.FC = ({ }) => { return ( - = ({ About

{appName}

Not Copyright 1998 Apple Computer, Inc.
- + OK - + - + ) } diff --git a/src/app/SystemFolder/SystemResources/App/PlatinumApp.tsx b/src/app/SystemFolder/SystemResources/App/ClassicyApp.tsx similarity index 88% rename from src/app/SystemFolder/SystemResources/App/PlatinumApp.tsx rename to src/app/SystemFolder/SystemResources/App/ClassicyApp.tsx index 1bab3a4..fdcf300 100644 --- a/src/app/SystemFolder/SystemResources/App/PlatinumApp.tsx +++ b/src/app/SystemFolder/SystemResources/App/ClassicyApp.tsx @@ -1,11 +1,11 @@ import {getTheme} from "@/app/SystemFolder/Appearance/PlatinumAppearance"; -import {useDesktop, useDesktopDispatch} from '@/app/SystemFolder/SystemResources/AppManager/PlatinumAppManagerContext'; -import {useSound} from "@/app/SystemFolder/SystemResources/SoundManager/PlatinumSoundManagerContext"; -import PlatinumWindow from "@/app/SystemFolder/SystemResources/Window/PlatinumWindow"; +import {useDesktop, useDesktopDispatch} from '@/app/SystemFolder/SystemResources/AppManager/ClassicyAppManagerContext'; +import {useSound} from "@/app/SystemFolder/SystemResources/SoundManager/ClassicySoundManagerContext"; +import ClassicyWindow from "@/app/SystemFolder/SystemResources/Window/ClassicyWindow"; import React from "react"; import {JSONTree} from 'react-json-tree'; -interface PlatinumAppProps { +interface ClassicyAppProps { id: string; name: string; icon: string; @@ -18,7 +18,7 @@ interface PlatinumAppProps { } -const PlatinumApp: React.FC = ({ +const ClassicyApp: React.FC = ({ id, icon, name, @@ -59,7 +59,7 @@ const PlatinumApp: React.FC = ({ const onFocus = () => { desktopEventDispatch({ - type: "PlatinumAppFocus", + type: "ClassicyAppFocus", app: {id: id}, }); } @@ -67,7 +67,7 @@ const PlatinumApp: React.FC = ({ React.useEffect(() => { if (!noDesktopIcon) { desktopEventDispatch({ - type: "PlatinumDesktopIconAdd", + type: "ClassicyDesktopIconAdd", app: { id: id, name: name, @@ -79,7 +79,7 @@ const PlatinumApp: React.FC = ({ if (debug) { let debugWindow = ( - = ({

soundPlayer

- + ); if (Array.isArray[children]) { @@ -116,4 +116,4 @@ const PlatinumApp: React.FC = ({ ); }; -export default PlatinumApp; +export default ClassicyApp; diff --git a/src/app/SystemFolder/SystemResources/App/PlatinumAppContext.ts b/src/app/SystemFolder/SystemResources/App/ClassicyAppContext.ts similarity index 69% rename from src/app/SystemFolder/SystemResources/App/PlatinumAppContext.ts rename to src/app/SystemFolder/SystemResources/App/ClassicyAppContext.ts index 6b9d0ff..8b038c7 100644 --- a/src/app/SystemFolder/SystemResources/App/PlatinumAppContext.ts +++ b/src/app/SystemFolder/SystemResources/App/ClassicyAppContext.ts @@ -1,10 +1,10 @@ import {createContext} from 'react'; export const defaultAppContext = {elements: {}, windows: {}}; -const PlatinumAppContext = createContext({ +const ClassicyAppContext = createContext({ appContext: defaultAppContext, setAppContext: (ctx) => { } }); -export default PlatinumAppContext; +export default ClassicyAppContext; diff --git a/src/app/SystemFolder/SystemResources/AppManager/PlatinumAppManagerContext.tsx b/src/app/SystemFolder/SystemResources/AppManager/ClassicyAppManagerContext.tsx similarity index 53% rename from src/app/SystemFolder/SystemResources/AppManager/PlatinumAppManagerContext.tsx rename to src/app/SystemFolder/SystemResources/AppManager/ClassicyAppManagerContext.tsx index c5f5330..6e076f2 100644 --- a/src/app/SystemFolder/SystemResources/AppManager/PlatinumAppManagerContext.tsx +++ b/src/app/SystemFolder/SystemResources/AppManager/ClassicyAppManagerContext.tsx @@ -1,59 +1,59 @@ -import PlatinumBoot from "@/app/SystemFolder/SystemResources/Boot/PlatinumBoot"; -import {platinumDesktopIconEventHandler} from "@/app/SystemFolder/SystemResources/Desktop/PlatinumDesktopIconContext"; +import ClassicyBoot from "@/app/SystemFolder/SystemResources/Boot/ClassicyBoot"; +import {classicyDesktopIconEventHandler} from "@/app/SystemFolder/SystemResources/Desktop/ClassicyDesktopIconContext"; import { - DefaultDesktopState, - PlatinumDesktopState -} from "@/app/SystemFolder/SystemResources/Desktop/PlatinumDesktopState"; + ClassicyDesktopState, + DefaultDesktopState +} from "@/app/SystemFolder/SystemResources/Desktop/ClassicyDesktopState"; import { - platinumWindowEventHandler -} from "@/app/SystemFolder/SystemResources/Desktop/PlatinumDesktopWindowManagerContext" + classicyWindowEventHandler +} from "@/app/SystemFolder/SystemResources/Desktop/ClassicyDesktopWindowManagerContext" import { - PlatinumSoundManagerProvider -} from "@/app/SystemFolder/SystemResources/SoundManager/PlatinumSoundManagerContext"; + ClassicySoundManagerProvider +} from "@/app/SystemFolder/SystemResources/SoundManager/ClassicySoundManagerContext"; import React, {createContext, Suspense, useContext, useReducer} from 'react'; -const PlatinumDesktopContext = createContext(null); -const PlatinumDesktopDispatchContext = createContext(null); +const ClassicyDesktopContext = createContext(null); +const ClassicyDesktopDispatchContext = createContext(null); -type PlatinumDesktopProviderProps = { +type ClassicyDesktopProviderProps = { children?: any } -export const PlatinumDesktopProvider: React.FC = ({children}) => { +export const ClassicyDesktopProvider: React.FC = ({children}) => { let desktopState = typeof window !== 'undefined' - ? JSON.parse(localStorage.getItem('platinumDesktopState')) || DefaultDesktopState + ? JSON.parse(localStorage.getItem('classicyDesktopState')) || DefaultDesktopState : DefaultDesktopState; - const [desktop, dispatch] = useReducer(platinumDesktopStateEventReducer, desktopState); + const [desktop, dispatch] = useReducer(classicyDesktopStateEventReducer, desktopState); React.useEffect(() => { - localStorage.setItem('platinumDesktopState', JSON.stringify(desktop)); + localStorage.setItem('classicyDesktopState', JSON.stringify(desktop)); }, [desktop]) return ( - }> - - - + }> + + + {children} - - - + + + ); } export function useDesktop() { - return useContext(PlatinumDesktopContext); + return useContext(ClassicyDesktopContext); } export function useDesktopDispatch() { - return useContext(PlatinumDesktopDispatchContext); + return useContext(ClassicyDesktopDispatchContext); } -export const platinumDesktopEventHandler = (ds: PlatinumDesktopState, action) => { +export const classicyDesktopEventHandler = (ds: ClassicyDesktopState, action) => { switch (action.type) { - case "PlatinumDesktopFocus": { - if ('e' in action && action.e.target.id === "platinumDesktop") { + case "ClassicyDesktopFocus": { + if ('e' in action && action.e.target.id === "classicyDesktop") { ds.activeWindow = ""; ds.activeApp = "finder.app"; ds.selectedDesktopIcons = []; @@ -68,31 +68,31 @@ export const platinumDesktopEventHandler = (ds: PlatinumDesktopState, action) => break; } - case "PlatinumDesktopDoubleClick": { + case "ClassicyDesktopDoubleClick": { break; } - case "PlatinumDesktopDrag": { + case "ClassicyDesktopDrag": { ds.selectBoxSize = [action.e.clientX - ds.selectBoxStart[0], action.e.clientY - ds.selectBoxStart[1]]; break; } - case "PlatinumDesktopStop": { + case "ClassicyDesktopStop": { ds.selectBox = false; ds.selectBoxStart = [0, 0]; ds.selectBoxSize = [0, 0]; break; } - case "PlatinumDesktopContextMenu": { + case "ClassicyDesktopContextMenu": { ds.showContextMenu = action.showContextMenu; if (action.contextMenu) { ds.contextMenu = action.contextMenu; } break; } - case "PlatinumDesktopTheme": { + case "ClassicyDesktopTheme": { ds.activeTheme = action.activeTheme; break; } - case "PlatinumDesktopLoadThemes": { + case "ClassicyDesktopLoadThemes": { ds.availableThemes = action.availableThemes; } } @@ -100,9 +100,9 @@ export const platinumDesktopEventHandler = (ds: PlatinumDesktopState, action) => }; -export const platinumAppEventHandler = (ds: PlatinumDesktopState, action) => { +export const classicyAppEventHandler = (ds: ClassicyDesktopState, action) => { switch (action.type) { - case "PlatinumAppOpen": { + case "ClassicyAppOpen": { const findIcon = ds.openApps.find((i) => i.id === action.app.id ); @@ -117,19 +117,19 @@ export const platinumAppEventHandler = (ds: PlatinumDesktopState, action) => { } break; } - case "PlatinumAppClose": { + case "ClassicyAppClose": { ds.openApps = ds.openApps.filter((oa) => oa.id !== action.app.id); ds.activeWindow = ""; break; } - case "PlatinumAppFocus": { + case "ClassicyAppFocus": { if (ds.activeApp !== action.app.id) { ds.activeWindow = action.window; } ds.activeApp = action.app.id; break; } - case "PlatinumAppActivate": { + case "ClassicyAppActivate": { ds.activeApp = action.app.id; break; } @@ -139,17 +139,17 @@ export const platinumAppEventHandler = (ds: PlatinumDesktopState, action) => { }; -export const platinumDesktopStateEventReducer = (ds: PlatinumDesktopState, action) => { +export const classicyDesktopStateEventReducer = (ds: ClassicyDesktopState, action) => { const startDs = ds; if ('type' in action) { - if (action.type.startsWith("PlatinumWindow")) { - ds = platinumWindowEventHandler(ds, action); - } else if (action.type.startsWith("PlatinumApp")) { - ds = platinumAppEventHandler(ds, action); - } else if (action.type.startsWith("PlatinumDesktopIcon")) { - ds = platinumDesktopIconEventHandler(ds, action); - } else if (action.type.startsWith("PlatinumDesktop")) { - ds = platinumDesktopEventHandler(ds, action); + if (action.type.startsWith("ClassicyWindow")) { + ds = classicyWindowEventHandler(ds, action); + } else if (action.type.startsWith("ClassicyApp")) { + ds = classicyAppEventHandler(ds, action); + } else if (action.type.startsWith("ClassicyDesktopIcon")) { + ds = classicyDesktopIconEventHandler(ds, action); + } else if (action.type.startsWith("ClassicyDesktop")) { + ds = classicyDesktopEventHandler(ds, action); } } if ('debug' in action) { diff --git a/src/app/SystemFolder/SystemResources/Boot/PlatinumBoot.module.scss b/src/app/SystemFolder/SystemResources/Boot/ClassicyBoot.module.scss similarity index 87% rename from src/app/SystemFolder/SystemResources/Boot/PlatinumBoot.module.scss rename to src/app/SystemFolder/SystemResources/Boot/ClassicyBoot.module.scss index 9b929aa..c482d49 100644 --- a/src/app/SystemFolder/SystemResources/Boot/PlatinumBoot.module.scss +++ b/src/app/SystemFolder/SystemResources/Boot/ClassicyBoot.module.scss @@ -1,4 +1,4 @@ -.platinumBoot { +.classicyBoot { position: absolute; top: 0; left: 0; diff --git a/src/app/SystemFolder/SystemResources/Boot/ClassicyBoot.tsx b/src/app/SystemFolder/SystemResources/Boot/ClassicyBoot.tsx new file mode 100644 index 0000000..191a1d1 --- /dev/null +++ b/src/app/SystemFolder/SystemResources/Boot/ClassicyBoot.tsx @@ -0,0 +1,15 @@ +import classicyBootStyles from "@/app/SystemFolder/SystemResources/Boot/ClassicyBoot.module.scss"; +import {useSoundDispatch} from "@/app/SystemFolder/SystemResources/SoundManager/ClassicySoundManagerContext"; +import classNames from "classnames"; +import React from "react"; + +const ClassicyBoot: React.FC = () => { + const player = useSoundDispatch(); + player({type: "ClassicySoundPlay", sound: "ClassicyBoot"}) + + return ( +
+ ); +}; + +export default ClassicyBoot; diff --git a/src/app/SystemFolder/SystemResources/Boot/PlatinumBoot.tsx b/src/app/SystemFolder/SystemResources/Boot/PlatinumBoot.tsx deleted file mode 100644 index 74518e3..0000000 --- a/src/app/SystemFolder/SystemResources/Boot/PlatinumBoot.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import platinumBootStyles from "@/app/SystemFolder/SystemResources/Boot/PlatinumBoot.module.scss"; -import {useSoundDispatch} from "@/app/SystemFolder/SystemResources/SoundManager/PlatinumSoundManagerContext"; -import classNames from "classnames"; -import React from "react"; - -const PlatinumBoot: React.FC = () => { - const player = useSoundDispatch(); - player({type: "PlatinumSoundPlay", sound: "PlatinumBoot"}) - - return ( -
- ); -}; - -export default PlatinumBoot; diff --git a/src/app/SystemFolder/SystemResources/Button/PlatinumButton.module.scss b/src/app/SystemFolder/SystemResources/Button/ClassicyButton.module.scss similarity index 89% rename from src/app/SystemFolder/SystemResources/Button/PlatinumButton.module.scss rename to src/app/SystemFolder/SystemResources/Button/ClassicyButton.module.scss index 6c639b6..e2f5a8a 100644 --- a/src/app/SystemFolder/SystemResources/Button/PlatinumButton.module.scss +++ b/src/app/SystemFolder/SystemResources/Button/ClassicyButton.module.scss @@ -1,6 +1,6 @@ @use "../../Appearance/styles/appearance"; -.platinumButton { +.classicyButton { font-family: var(--ui-font); font-size: var(--ui-font-size); @@ -16,7 +16,7 @@ } -.platinumButtonDefault { +.classicyButtonDefault { font-family: var(--ui-font); font-size: var(--ui-font-size); @@ -31,7 +31,7 @@ } } -.platinumButtonShapeSquare { +.classicyButtonShapeSquare { width: calc(var(--window-control-size) * 4); padding: calc(var(--window-padding-size) * 2); border-radius: 0; @@ -42,12 +42,12 @@ } } -.platinumButtonSmall { +.classicyButtonSmall { font-size: calc(var(--ui-font-size) / 2); border-radius: calc(var(--window-padding-size) / 2); } -.platinumButtonShapeSquare.platinumButtonSmall { +.classicyButtonShapeSquare.classicyButtonSmall { width: calc(var(--window-control-size) * 2) !important; height: calc(var(--window-control-size) * 2) !important; padding: calc(var(--window-padding-size) * .5); diff --git a/src/app/SystemFolder/SystemResources/Button/PlatinumButton.tsx b/src/app/SystemFolder/SystemResources/Button/ClassicyButton.tsx similarity index 64% rename from src/app/SystemFolder/SystemResources/Button/PlatinumButton.tsx rename to src/app/SystemFolder/SystemResources/Button/ClassicyButton.tsx index 2c7cd2f..17b030b 100644 --- a/src/app/SystemFolder/SystemResources/Button/PlatinumButton.tsx +++ b/src/app/SystemFolder/SystemResources/Button/ClassicyButton.tsx @@ -1,9 +1,9 @@ -import platinumButtonStyles from "@/app/SystemFolder/SystemResources/Button/PlatinumButton.module.scss"; -import {useSoundDispatch} from "@/app/SystemFolder/SystemResources/SoundManager/PlatinumSoundManagerContext"; +import classicyButtonStyles from "@/app/SystemFolder/SystemResources/Button/ClassicyButton.module.scss"; +import {useSoundDispatch} from "@/app/SystemFolder/SystemResources/SoundManager/ClassicySoundManagerContext"; import classNames from "classnames"; import React from "react"; -type PlatinumButtonProps = { +type ClassicyButtonProps = { isDefault?: boolean; disabled?: boolean; onClick?: any; @@ -13,7 +13,7 @@ type PlatinumButtonProps = { buttonType?: "button" | "submit" | "reset"; } -const PlatinumButton: React.FC = ({ +const ClassicyButton: React.FC = ({ isDefault = false, buttonType = "button", buttonShape = "rectangle", @@ -30,18 +30,18 @@ const PlatinumButton: React.FC = ({ role={buttonType} className={ classNames( - platinumButtonStyles.platinumButton, - isDefault ? platinumButtonStyles.platinumButtonDefault : "", - buttonShape === "square" ? platinumButtonStyles.platinumButtonShapeSquare : "", - buttonSize === "small" ? platinumButtonStyles.platinumButtonSmall : "" + classicyButtonStyles.classicyButton, + isDefault ? classicyButtonStyles.classicyButtonDefault : "", + buttonShape === "square" ? classicyButtonStyles.classicyButtonShapeSquare : "", + buttonSize === "small" ? classicyButtonStyles.classicyButtonSmall : "" ) } onClick={onClick} onMouseDown={() => { - player({type: "PlatinumSoundPlay", sound: "PlatinumButtonClickDown"}) + player({type: "ClassicySoundPlay", sound: "ClassicyButtonClickDown"}) }} onMouseUp={() => { - player({type: "PlatinumSoundPlay", sound: "PlatinumButtonClickUp"}) + player({type: "ClassicySoundPlay", sound: "ClassicyButtonClickUp"}) }} disabled={disabled}> {children} @@ -49,4 +49,4 @@ const PlatinumButton: React.FC = ({ ); }; -export default PlatinumButton; +export default ClassicyButton; diff --git a/src/app/SystemFolder/SystemResources/Checkbox/PlatinumCheckbox.module.scss b/src/app/SystemFolder/SystemResources/Checkbox/ClassicyCheckbox.module.scss similarity index 92% rename from src/app/SystemFolder/SystemResources/Checkbox/PlatinumCheckbox.module.scss rename to src/app/SystemFolder/SystemResources/Checkbox/ClassicyCheckbox.module.scss index 45a26c7..76682d7 100644 --- a/src/app/SystemFolder/SystemResources/Checkbox/PlatinumCheckbox.module.scss +++ b/src/app/SystemFolder/SystemResources/Checkbox/ClassicyCheckbox.module.scss @@ -1,11 +1,11 @@ @use "../../Appearance/styles/appearance"; -.PlatinumCheckboxGroup { - padding: calc(var(--window-border-size) * 2); +.ClassicyCheckboxGroup { display: flex; + padding: calc(var(--window-border-size) * 2); } -.PlatinumCheckbox { +.ClassicyCheckbox { width: calc(var(--window-control-size)); height: var(--window-control-size); margin: var(--window-border-size); @@ -49,18 +49,18 @@ } -.PlatinumCheckboxLabel { +.ClassicyCheckboxLabel { font-family: var(--ui-font); font-size: var(--ui-font-size); height: var(--window-control-size); margin-left: calc(var(--window-control-size) / 2); } -.PlatinumCheckboxLabelDisabled { +.ClassicyCheckboxLabelDisabled { color: var(--color-system-05); } -.PlatinumCheckboxDefault { +.ClassicyCheckboxDefault { &:checked, &:active { &:after { font-family: var(--ui-font); @@ -74,7 +74,7 @@ } } -.PlatinumCheckboxMixed { +.ClassicyCheckboxMixed { &:checked { &:after { font-family: var(--ui-font); diff --git a/src/app/SystemFolder/SystemResources/Checkbox/ClassicyCheckbox.tsx b/src/app/SystemFolder/SystemResources/Checkbox/ClassicyCheckbox.tsx new file mode 100644 index 0000000..f302681 --- /dev/null +++ b/src/app/SystemFolder/SystemResources/Checkbox/ClassicyCheckbox.tsx @@ -0,0 +1,48 @@ +import classicyCheckboxStyles from "@/app/SystemFolder/SystemResources/Checkbox/ClassicyCheckbox.module.scss"; +import ClassicyControlLabel from "@/app/SystemFolder/SystemResources/ControlLabel/ClassicyControlLabel"; +import classNames from "classnames"; +import React from "react"; + +type ClassicyCheckboxProps = { + id: string; + name: string; + checked?: boolean; + mixed?: boolean; + isDefault?: boolean; + disabled?: boolean; + onClick?: any; + label?: string; +} +const ClassicyCheckbox: React.FC = ( + { + id, + name, + checked, + mixed, + isDefault, + disabled, + onClick, + label + } +) => { + + return ( + +
+ +
+ + ); +}; +export default ClassicyCheckbox; + diff --git a/src/app/SystemFolder/SystemResources/Checkbox/PlatinumCheckbox.tsx b/src/app/SystemFolder/SystemResources/Checkbox/PlatinumCheckbox.tsx deleted file mode 100644 index ff5b016..0000000 --- a/src/app/SystemFolder/SystemResources/Checkbox/PlatinumCheckbox.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import PlatinumCheckboxStyles from "@/app/SystemFolder/SystemResources/Checkbox/PlatinumCheckbox.module.scss"; -import PlatinumControlLabel from "@/app/SystemFolder/SystemResources/ControlLabel/PlatinumControlLabel"; -import classNames from "classnames"; -import React from "react"; - -type PlatinumCheckboxProps = { - id: string; - name: string; - checked?: boolean; - mixed?: boolean; - isDefault?: boolean; - disabled?: boolean; - onClick?: any; - label?: string; -} -const PlatinumCheckbox: React.FC = ( - { - id, - name, - checked, - mixed, - isDefault, - disabled, - onClick, - label - } -) => { - - return ( - -
- -
- - ); -}; -export default PlatinumCheckbox; - diff --git a/src/app/SystemFolder/SystemResources/ContextualMenu/PlatinumContextualMenu.module.scss b/src/app/SystemFolder/SystemResources/ContextualMenu/ClassicyContextualMenu.module.scss similarity index 85% rename from src/app/SystemFolder/SystemResources/ContextualMenu/PlatinumContextualMenu.module.scss rename to src/app/SystemFolder/SystemResources/ContextualMenu/ClassicyContextualMenu.module.scss index 0f639a9..24576b7 100644 --- a/src/app/SystemFolder/SystemResources/ContextualMenu/PlatinumContextualMenu.module.scss +++ b/src/app/SystemFolder/SystemResources/ContextualMenu/ClassicyContextualMenu.module.scss @@ -1,6 +1,6 @@ @use "../../Appearance/styles/appearance"; -.platinumContextMenuWrapper { +.classicyContextMenuWrapper { position: fixed; z-index: 900; display: inline-block; diff --git a/src/app/SystemFolder/SystemResources/ContextualMenu/ClassicyContextualMenu.tsx b/src/app/SystemFolder/SystemResources/ContextualMenu/ClassicyContextualMenu.tsx new file mode 100644 index 0000000..edecb18 --- /dev/null +++ b/src/app/SystemFolder/SystemResources/ContextualMenu/ClassicyContextualMenu.tsx @@ -0,0 +1,23 @@ +import classicyContextMenuStyles + from "@/app/SystemFolder/SystemResources/ContextualMenu/ClassicyContextualMenu.module.scss"; +import ClassicyMenu, {ClassicyMenuItem} from "@/app/SystemFolder/SystemResources/Menu/ClassicyMenu"; +import classicyMenuStyles from "@/app/SystemFolder/SystemResources/Menu/ClassicyMenu.module.scss"; +import React from "react"; + +interface ClassicyMenuProps { + position: number[]; + menuItems: ClassicyMenuItem[]; +} + +const ClassicyContextualMenu: React.FC = ({menuItems, position}) => { + + return ( +
+ +
+ ) +}; + +export default ClassicyContextualMenu; + diff --git a/src/app/SystemFolder/SystemResources/ContextualMenu/PlatinumContextualMenu.tsx b/src/app/SystemFolder/SystemResources/ContextualMenu/PlatinumContextualMenu.tsx deleted file mode 100644 index 80f9c0d..0000000 --- a/src/app/SystemFolder/SystemResources/ContextualMenu/PlatinumContextualMenu.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import platinumContextMenuStyles - from "@/app/SystemFolder/SystemResources/ContextualMenu/PlatinumContextualMenu.module.scss"; -import PlatinumMenu, {PlatinumMenuItem} from "@/app/SystemFolder/SystemResources/Menu/PlatinumMenu"; -import platinumMenuStyles from "@/app/SystemFolder/SystemResources/Menu/PlatinumMenu.module.scss"; -import React from "react"; - -interface PlatinumMenuProps { - position: number[]; - menuItems: PlatinumMenuItem[]; -} - -const PlatinumContextualMenu: React.FC = ({menuItems, position}) => { - - return ( -
- -
- ) -}; - -export default PlatinumContextualMenu; - diff --git a/src/app/SystemFolder/SystemResources/ControlGroup/PlatinumControlGroup.module.scss b/src/app/SystemFolder/SystemResources/ControlGroup/ClassicyControlGroup.module.scss similarity index 72% rename from src/app/SystemFolder/SystemResources/ControlGroup/PlatinumControlGroup.module.scss rename to src/app/SystemFolder/SystemResources/ControlGroup/ClassicyControlGroup.module.scss index a029787..120e361 100644 --- a/src/app/SystemFolder/SystemResources/ControlGroup/PlatinumControlGroup.module.scss +++ b/src/app/SystemFolder/SystemResources/ControlGroup/ClassicyControlGroup.module.scss @@ -1,19 +1,20 @@ @use "../../Appearance/styles/appearance"; @use "../../Appearance/styles/assets"; -.platinumControlGroup { +.classicyControlGroup { margin: calc(var(--window-padding-size) / 3); } -.platinumControlGroupNoColumns { + +.classicyControlGroupNoColumns { columns: 1; } -.platinumControlGroupColumns { +.classicyControlGroupColumns { flex-grow: 1; columns: 2; } -.platinumControlGroupLegend { +.classicyControlGroupLegend { font-family: var(--ui-font); font-size: calc(var(--ui-font-size) * .75); margin-top: calc(var(--ui-font-size) * -1); diff --git a/src/app/SystemFolder/SystemResources/ControlGroup/ClassicyControlGroup.tsx b/src/app/SystemFolder/SystemResources/ControlGroup/ClassicyControlGroup.tsx new file mode 100644 index 0000000..8bbf4f4 --- /dev/null +++ b/src/app/SystemFolder/SystemResources/ControlGroup/ClassicyControlGroup.tsx @@ -0,0 +1,24 @@ +import classicyControlGroupStyles + from "@/app/SystemFolder/SystemResources/ControlGroup/ClassicyControlGroup.module.scss"; +import classNames from "classnames"; +import React from "react"; + +const ClassicyControlGroup = ({label = "", columns = false, children}) => { + return ( +
+ {label !== "" && + {label} + } +
+ {children} +
+
+ ); +}; +export default ClassicyControlGroup; + diff --git a/src/app/SystemFolder/SystemResources/ControlGroup/PlatinumControlGroup.tsx b/src/app/SystemFolder/SystemResources/ControlGroup/PlatinumControlGroup.tsx deleted file mode 100644 index 93613a6..0000000 --- a/src/app/SystemFolder/SystemResources/ControlGroup/PlatinumControlGroup.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import platinumControlGroupStyles - from "@/app/SystemFolder/SystemResources/ControlGroup/PlatinumControlGroup.module.scss"; -import React from "react"; -import classNames from "classnames"; - -const PlatinumControlGroup = ({label = "", columns = false, children}) => { - return ( -
- {label !== "" && - {label} - } -
- {children} -
-
- ); -}; -export default PlatinumControlGroup; - diff --git a/src/app/SystemFolder/SystemResources/ControlLabel/PlatinumControlLabel.module.scss b/src/app/SystemFolder/SystemResources/ControlLabel/ClassicyControlLabel.module.scss similarity index 70% rename from src/app/SystemFolder/SystemResources/ControlLabel/PlatinumControlLabel.module.scss rename to src/app/SystemFolder/SystemResources/ControlLabel/ClassicyControlLabel.module.scss index 4cf964d..263d076 100644 --- a/src/app/SystemFolder/SystemResources/ControlLabel/PlatinumControlLabel.module.scss +++ b/src/app/SystemFolder/SystemResources/ControlLabel/ClassicyControlLabel.module.scss @@ -1,18 +1,18 @@ -.platinumControlLabel { +.classicyControlLabel { font-family: var(--ui-font); font-size: var(--ui-font-size); height: var(--window-control-size); user-select: none; } -.platinumControlLabelDisabled { +.classicyControlLabelDisabled { color: var(--color-system-05); } -.platinumControlLabelLeft { +.classicyControlLabelLeft { margin-left: calc(var(--window-control-size) / 2); } -.platinumControlLabelRight { +.classicyControlLabelRight { margin-right: calc(var(--window-control-size) / 2); } diff --git a/src/app/SystemFolder/SystemResources/ControlLabel/PlatinumControlLabel.tsx b/src/app/SystemFolder/SystemResources/ControlLabel/ClassicyControlLabel.tsx similarity index 66% rename from src/app/SystemFolder/SystemResources/ControlLabel/PlatinumControlLabel.tsx rename to src/app/SystemFolder/SystemResources/ControlLabel/ClassicyControlLabel.tsx index ba6386d..04aa64c 100644 --- a/src/app/SystemFolder/SystemResources/ControlLabel/PlatinumControlLabel.tsx +++ b/src/app/SystemFolder/SystemResources/ControlLabel/ClassicyControlLabel.tsx @@ -1,9 +1,9 @@ -import platinumControlLabelStyles - from "@/app/SystemFolder/SystemResources/ControlLabel/PlatinumControlLabel.module.scss"; +import classicyControlLabelStyles + from "@/app/SystemFolder/SystemResources/ControlLabel/ClassicyControlLabel.module.scss"; import classNames from "classnames"; import React from "react"; -interface PlatinumControlLabelProps { +interface ClassicyControlLabelProps { labelFor?: string; label?: string; disabled?: boolean; @@ -13,21 +13,21 @@ interface PlatinumControlLabelProps { children?: any; } -const PlatinumControlLabel: React.FC = ({ +const ClassicyControlLabel: React.FC = ({ labelFor = "", label = "", disabled = false, direction = "left", icon, iconSize, - children + children }) => { const getDirectionClass = (direction: string) => { if (direction === "right") { - return platinumControlLabelStyles.platinumControlLabelRight; + return classicyControlLabelStyles.classicyControlLabelRight; } - return platinumControlLabelStyles.platinumControlLabelLeft; + return classicyControlLabelStyles.classicyControlLabelLeft; } const imageSize = (size: string) => { @@ -42,7 +42,11 @@ const PlatinumControlLabel: React.FC = ({ if (label !== "") { return ( -
+
{icon && ( {label}/ )} @@ -51,8 +55,8 @@ const PlatinumControlLabel: React.FC = ({