classicy 0.5.4 → 0.5.5

package/src/SystemFolder/SystemResources/File/DefaultClassicyFileSystem.ts

@@ -1,111 +0,0 @@
-import { ClassicyFileSystemEntryFileType } from '@/SystemFolder/SystemResources/File/ClassicyFileSystemModel'
-import diskIcon from 'img/icons/system/drives/disk.png'
-import directoryIcon from 'img/icons/system/folders/directory.png'
-import macIcon from 'img/icons/system/mac.png'
-
-
-export const DefaultFSContent = {
-    'Macintosh HD': {
-        _type: ClassicyFileSystemEntryFileType.Drive,
-        _icon: diskIcon,
-        'Applications': {
-            _type: ClassicyFileSystemEntryFileType.Directory,
-            _icon: directoryIcon,
-            'TextEdit': {
-                _type: ClassicyFileSystemEntryFileType.File,
-                _mimeType: 'text/plain',
-                _data: 'File Contents',
-                _invisible: true,
-            },
-            'Calculator': {
-                _type: ClassicyFileSystemEntryFileType.File,
-                _mimeType: 'text/plain',
-                _data: 'File Contents',
-                _invisible: true,
-            },
-        },
-        'Library': {
-            _type: ClassicyFileSystemEntryFileType.Directory,
-            _icon: directoryIcon,
-            Extensions: {
-                _type: ClassicyFileSystemEntryFileType.File,
-                _icon: macIcon,
-                _mimeType: 'text/plain',
-                _data: 'File Contents',
-            },
-        },
-        'System Folder': {
-            _type: ClassicyFileSystemEntryFileType.Directory,
-            _icon: directoryIcon,
-            'Finder': {
-                _type: ClassicyFileSystemEntryFileType.File,
-                _mimeType: 'text/plain',
-                _data: 'File Contents',
-            },
-            'System': {
-                _type: ClassicyFileSystemEntryFileType.File,
-                _mimeType: 'text/plain',
-                _data: 'File Contents',
-            },
-        },
-        'Users': {
-            _type: ClassicyFileSystemEntryFileType.Directory,
-            _icon: directoryIcon,
-            'Guest': {
-                _type: ClassicyFileSystemEntryFileType.File,
-                _mimeType: 'text/plain',
-                _data: 'File Contents',
-            },
-            'Shared': {
-                _type: ClassicyFileSystemEntryFileType.File,
-                _mimeType: 'text/plain',
-                _data: 'File Contents',
-            },
-        },
-        'Utilities': {
-            _type: ClassicyFileSystemEntryFileType.Directory,
-            _icon: directoryIcon,
-            'Disk Utility.app': {
-                _type: ClassicyFileSystemEntryFileType.File,
-                _mimeType: 'text/plain',
-                _data: 'File Contents',
-            },
-            'Terminal.app': {
-                _type: ClassicyFileSystemEntryFileType.File,
-                _mimeType: 'text/plain',
-                _data: 'File Contents',
-            },
-        },
-        'Videos': {
-            _type: ClassicyFileSystemEntryFileType.Directory,
-            _icon: directoryIcon,
-            'BuckBunny.mov': {
-                _type: ClassicyFileSystemEntryFileType.File,
-                _creator: 'QuickTime',
-                _format: 'Video',
-                _mimeType: 'text/plain',
-                _data: JSON.stringify({
-                    url: 'https://cdn1.911realtime.org/transcoded/newsw/2001-09-11/NEWSW_20010911_040000_The_National.m3u8',
-                    name: 'Buck Bunny',
-                    options: {
-                        forceHLS: true,
-                        forceSafariHLS: false,
-                    },
-                    type: 'video',
-                }),
-            },
-            'Monkees.mp3': {
-                _type: ClassicyFileSystemEntryFileType.File,
-                _creator: 'QuickTime',
-                _format: 'Audio',
-                _mimeType: 'text/plain',
-                _data: JSON.stringify({
-                    url: 'http://www.samisite.com/sound/cropShadesofGrayMonkees.mp3',
-                    name: 'Monkees',
-                    type: 'audio',
-                    subtitlesUrl: `/test.srt`,
-                }),
-            },
-        },
-    },
-}

package/src/SystemFolder/SystemResources/Icon/ClassicyIcon.scss

@@ -1,119 +0,0 @@
-@use '../../ControlPanels/AppearanceManager/styles/appearance';
-@use '../../ControlPanels/AppearanceManager/styles/assets';
-@use 'sass:list';
-
-.classicyIcon {
-  position: absolute;
-  z-index: 10 !important;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  width: calc(var(--desktop-icon-size) * 2);
-  height: calc(var(--desktop-icon-size) * 2);
-  user-select: none;
-  text-align: center;
-  image-rendering: pixelated;
-  image-rendering: -moz-crisp-edges;
-  image-rendering: crisp-edges;
-
-  img {
-    width: var(--desktop-icon-size);
-    height: var(--desktop-icon-size);
-    margin: auto;
-    user-select: none;
-    user-drag: none;
-    -webkit-user-drag: none;
-  }
-
-  p {
-    font-family: var(--body-font), serif;
-    font-size: var(--desktop-icon-font-size);
-    width: fit-content;
-    margin-top: calc(var(--desktop-icon-font-size) / 4);
-    padding: calc(var(--desktop-icon-font-size) / 4);
-    color: black;
-    background: rgba(255, 255, 255, 0.5);
-  }
-}
-
-.classicyIconInvisible {
-  filter: opacity(0.45);
-}
-
-.classicyIconDragging {
-  z-index: 500 !important;
-  //margin: calc(var(--desktop-icon-size) * -4);
-  //padding: calc(var(--desktop-icon-size) * 4);
-  user-select: none;
-}
-
-.classicyIconMask {
-  width: calc(var(--desktop-icon-size) - var(--window-border-size) * 2);
-  height: calc(var(--desktop-icon-size) - var(--window-border-size) * 2);
-  margin: 0 auto;
-  mask-mode: alpha !important;
-  mask-size: calc(100% - var(--window-border-size)) !important;
-  mask-repeat: no-repeat !important;
-  @include appearance.theme-halftone(#000000, 7%);
-}
-
-.classicyIconMaskOuter {
-  width: calc(var(--desktop-icon-size) + var(--window-border-size));
-  height: calc(var(--desktop-icon-size) + var(--window-border-size));
-  margin: 0 auto;
-  background: black !important;
-  mask-mode: alpha !important;
-  mask-size: cover !important;
-  mask-repeat: no-repeat !important;
-}
-
-.classicyIconOpen {
-  z-index: 99;
-
-  .classicyIconMaskOuter {
-    .classicyIconMask {
-      backdrop-filter: grayscale(1) invert(1) brightness(1) !important;
-      background-blend-mode: overlay;
-
-      * {
-        opacity: 0;
-      }
-    }
-  }
-}
-
-.classicyIconActive {
-  .classicyIconMaskOuter {
-    img {
-      filter: brightness(50%);
-    }
-  }
-
-  p {
-    color: white;
-    background: rgba(0, 0, 0, 0.5);
-  }
-}
-
-.classicyIconActiveAndOpen {
-  z-index: 99;
-
-  .classicyIconMaskOuter {
-    background: black;
-    filter: brightness(-5);
-
-    .classicyIconMask {
-      filter: brightness(50%);
-      backdrop-filter: grayscale(1) invert(1) brightness(1) !important;
-
-      * {
-        opacity: 0;
-      }
-    }
-  }
-
-  p {
-    color: white;
-    background: rgba(0, 0, 0, 0.5);
-  }
-}

package/src/SystemFolder/SystemResources/Icon/ClassicyIcon.tsx

@@ -1,115 +0,0 @@
-import './ClassicyIcon.scss'
-import classNames from 'classnames'
-import React, {useRef, useState} from 'react'
-import {  useAnalytics } from 'use-analytics'
-
-interface ClassicyIconProps {
-    appId: string
-    name: string
-    icon: string
-    label?: string
-    initialPosition?: [number, number]
-    holder?: any
-    onClickFunc?: any
-    invisible?: boolean
-}
-
-export const ClassicyIcon: React.FC<ClassicyIconProps> = ({
-                                                              appId,
-                                                              name,
-                                                              icon,
-                                                              label,
-                                                              initialPosition = [0, 0],
-                                                              holder,
-                                                              onClickFunc,
-                                                              invisible = false,
-                                                          }) => {
-    const [position, setPosition] = useState<[number, number]>(initialPosition)
-    const [dragging, setDragging] = useState<boolean>(false)
-    const [active, setActive] = useState<boolean>(false)
-
-    const iconRef = useRef<HTMLDivElement>(null)
-
-    const id = appId + '.shortcut'
-
-    const { track } = useAnalytics()
-    const analyticsArgs = {type: "ClassicyIcon", appId,  name,  icon,  label}
-
-
-    const toggleFocus = () => {
-        track('focus', analyticsArgs)
-        setActive(!active)
-    }
-    const setFocus = (active: boolean) => {
-        track('focus', analyticsArgs)
-        setActive(active)
-    }
-
-    const clearFocus = () => {
-        track('blur', analyticsArgs)
-        setActive(false)
-    }
-
-    const doDoubleClick = () => {
-        if (onClickFunc) {
-            clearFocus()
-            onClickFunc()
-        }
-    }
-
-    const stopChangeIcon = () => {
-        setDragging(false)
-    }
-
-    const startDrag = () => {
-        setDragging(true)
-    }
-
-    const changeIcon = (e: React.MouseEvent<HTMLDivElement>) => {
-        if (dragging && iconRef.current) {
-            setFocus(true)
-            setPosition([
-                e.clientX -
-                holder.current.getBoundingClientRect().left -
-                iconRef.current.getBoundingClientRect().width / 2,
-                e.clientY -
-                holder.current.getBoundingClientRect().top -
-                iconRef.current.getBoundingClientRect().height / 2,
-            ])
-        }
-    }
-
-    return (
-        <div
-            ref={iconRef}
-            id={`${id}-${Math.random().toString(36).substring(2, 7)}`}
-            draggable={false}
-            className={classNames(
-                "classicyIcon",
-                dragging ? "classicyIconDragging" : '',
-                active ? "classicyIconActive" : ''
-            )}
-            style={{position: 'absolute', left: position[0] + 'px', top: position[1] + 'px'}}
-            onClick={toggleFocus}
-            onMouseDown={startDrag}
-            onMouseMove={changeIcon}
-            onMouseUp={stopChangeIcon}
-            onDoubleClick={doDoubleClick}
-        >
-            <div
-                className={classNames(
-                    "classicyIconMaskOuter",
-                    invisible ? "classicyIconInvisible" : ''
-                )}
-                style={{maskImage: `url(${icon})`}}
-            >
-                <div className={"classicyIconMask"} style={{mask: `url(${icon})`}}>
-                    <img src={icon} alt={name}/>
-                </div>
-            </div>
-            <p className={classNames(invisible ? "classicyIconInvisible" : '')}>
-                {label ? label : name}
-            </p>
-        </div>
-    )
-}

package/src/SystemFolder/SystemResources/Input/ClassicyInput.scss

@@ -1,38 +0,0 @@
-@use '../../ControlPanels/AppearanceManager/styles/appearance';
-@use 'sass:list';
-
-.classicyInputHolder {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  width: calc(100% - var(--window-padding-size) * 2);
-  padding: var(--window-padding-size);
-  column-gap: calc(var(--window-control-size) * 1);
-}
-
-.classicyInput {
-  font-family: var(--ui-font), sans-serif;
-  flex-grow: 1;
-  width: auto;
-  padding: calc(var(--window-padding-size) / 2);
-  border: var(--window-border-size) solid black;
-  box-shadow: calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) 0 0 var(--color-system-05),
-  calc(var(--window-border-size) * 1) calc(var(--window-border-size) * 1) 0 0 var(--color-system-04);
-
-  &:focus-visible {
-    border-radius: 2pt;
-    outline: 0 0 0 calc(var(--window-border-size) * 2) var(--color-outline) !important;
-    box-shadow: 0 0 0 calc(var(--window-border-size) * 2) var(--color-theme-04),
-    0 0 var(--window-border-size) calc(var(--window-border-size) * 2) var(--color-theme-04);
-  }
-}
-
-.classicyInputDefault {
-}
-
-.classicyInputLabel {
-  font-family: var(--ui-font), sans-serif;
-  font-size: var(--ui-font-size);
-  height: var(--window-control-size);
-  user-select: none;
-}

package/src/SystemFolder/SystemResources/Input/ClassicyInput.tsx

@@ -1,60 +0,0 @@
-import {ClassicyControlLabel} from '@/SystemFolder/SystemResources/ControlLabel/ClassicyControlLabel'
-import './ClassicyInput.scss'
-import classNames from 'classnames'
-import React, {ChangeEventHandler} from 'react'
-import {useAnalytics} from 'use-analytics'
-
-interface ClassicyInputProps {
-    id: string
-    inputType?: 'text'
-    onChangeFunc?: ChangeEventHandler<HTMLInputElement>
-    labelTitle?: string
-    placeholder?: string
-    prefillValue?: string
-    disabled?: boolean
-    isDefault?: boolean
-    ref?: any
-}
-
-export const ClassicyInput: React.FC<ClassicyInputProps> = React.forwardRef<HTMLInputElement, ClassicyInputProps>(
-    function ClassicyInput(
-        {id, inputType = 'text', labelTitle, placeholder, prefillValue, disabled = false, isDefault, onChangeFunc},
-        ref
-    ) {
-        const {track} = useAnalytics()
-        const analyticsArgs = {id, inputType, labelTitle, placeholder, prefillValue, disabled, isDefault}
-
-        const handleOnChangeFunc: ChangeEventHandler<HTMLInputElement> = (e) => {
-            track("selected", {...analyticsArgs, selected: e.target.value})
-            if (onChangeFunc) onChangeFunc(e)
-        }
-
-        return (
-            <div className={"classicyInputHolder"}>
-                {labelTitle && (
-                    <ClassicyControlLabel
-                        label={labelTitle}
-                        labelFor={id}
-                        direction={'left'}
-                        disabled={disabled}
-                    ></ClassicyControlLabel>
-                )}
-                <input
-                    id={id}
-                    tabIndex={0}
-                    onChange={handleOnChangeFunc}
-                    name={id}
-                    type={inputType}
-                    ref={ref}
-                    disabled={disabled}
-                    value={prefillValue}
-                    placeholder={placeholder}
-                    className={classNames(
-                        "classicyInput",
-                        isDefault ? "classicyInputDefault" : ''
-                    )}
-                ></input>
-            </div>
-        )
-    }
-)

package/src/SystemFolder/SystemResources/Menu/ClassicyMenu.scss

@@ -1,187 +0,0 @@
-@use 'sass:list';
-
-@use '../../ControlPanels/AppearanceManager/styles/appearance';
-@use '../../ControlPanels/AppearanceManager/styles/assets';
-
-.classicyMenuWrapper {
-  font-family: var(--ui-font), sans-serif;
-  font-size: var(--ui-font-size);
-  position: relative;
-  z-index: 5000;
-  display: flex;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  box-shadow: inset var(--window-border-size) var(--window-border-size) 0 0 var(--color-system-05),
-  calc(var(--window-border-size) * 2) calc(var(--window-border-size) * 2) 0 0 var(--color-black);
-}
-
-.classicyMenu {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  min-width: calc(var(--window-control-size) * 15);
-  margin: 0;
-  padding: var(--window-border-size);
-  @include appearance.platinumWindowBorder;
-  list-style: none;
-  background-color: var(--color-system-02);
-
-  hr {
-    margin: calc(var(--window-control-size) / 2) calc(var(--window-border-size) * 2);
-    border: var(--color-system-04) solid 1px;
-    box-shadow: 1px 1px 0 0 var(--color-system-01);
-  }
-
-  div {
-    ul {
-      li {
-        &:hover {
-          color: #fff;
-          background-color: var(--color-theme-04);
-
-          * {
-            display: flex !important;
-          }
-        }
-      }
-    }
-  }
-}
-
-.classicySubMenu {
-  position: absolute;
-  display: none;
-  flex-direction: column;
-  min-width: calc(var(--window-control-size) * 15);
-  @include appearance.platinumWindowBorder;
-  margin: 0 0 0 calc(var(--window-padding-size) * -1);
-  padding: var(--window-border-size);
-  list-style: none;
-  color: var(--color-black);
-  background: var(--color-system-02);
-  background-color: var(--color-system-02);
-
-  hr {
-    margin: calc(var(--window-control-size) / 2) calc(var(--window-border-size) * 2);
-    border: var(--color-system-04) solid 1px;
-    box-shadow: 1px 1px 0 0 var(--color-system-01);
-  }
-}
-
-.classicyContextSubMenu {
-  position: absolute;
-  left: 100%;
-  display: none;
-  flex-direction: column;
-  min-width: calc(var(--window-control-size) * 15);
-  @include appearance.platinumWindowBorder;
-  margin: calc(var(--window-padding-size) * -4) calc(var(--window-padding-size) * -2);
-  padding: var(--window-border-size);
-  list-style: none;
-  color: var(--color-black);
-  background: var(--color-system-02);
-  background-color: var(--color-system-02);
-
-  hr {
-    margin: calc(var(--window-control-size) / 2) calc(var(--window-border-size) * 2);
-    border: var(--color-system-04) solid 1px;
-    box-shadow: 1px 1px 0 0 var(--color-system-01);
-  }
-}
-
-.classicyMenuItem {
-  display: flex;
-  float: left;
-  align-items: center;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  height: calc(100% - var(--window-padding-size)) !important;
-  margin: 0;
-  padding: calc(var(--window-padding-size) / 2) var(--window-padding-size);
-
-  &:hover {
-    color: var(--color-white);
-    background-color: var(--color-theme-04);
-
-    div ul {
-      display: flex !important;
-    }
-  }
-
-  img {
-    width: calc(var(--window-control-size) * 1.25);
-    height: calc(var(--window-control-size) * 1.25);
-    margin-right: calc(var(--window-control-size) * 0.5);
-    user-select: none;
-    user-drag: none;
-  }
-
-  p {
-    display: flex;
-    float: left;
-    align-content: flex-start;
-    align-items: center;
-    margin: 0;
-    padding: 0;
-
-    a {
-      cursor: default !important;
-      text-decoration: none;
-      color: var(--color-black) !important;
-    }
-  }
-}
-
-.classicyMenuItemNoImage {
-  p {
-    padding-left: calc(var(--window-control-size) * 1.75) !important;
-  }
-}
-
-.classicyMenuItemDisabled {
-  &:hover {
-    color: var(--color-white);
-    background-color: transparent !important;
-  }
-
-  p {
-    color: var(--color-system-05);
-  }
-}
-
-.classicyMenuItemChildMenuIndicator {
-  &:after {
-    position: absolute;
-    right: var(--window-control-size);
-    width: 1em;
-    height: 1em;
-    content: ' ';
-    background-image: assets.$triangle;
-    background-repeat: no-repeat;
-    background-position: right center;
-  }
-}
-
-.classicyMenuItemKeyboardShortcut {
-  font-size: calc(var(--ui-font-size) * 0.75) !important;
-  line-height: 1.75;
-  padding-right: calc(var(--window-padding-size) / 2) !important;
-}
-
-.classicyMenuItemFlash {
-  -webkit-animation-name: classicyMenuItemFlashKeyframes;
-  animation-name: classicyMenuItemFlashKeyframes;
-  animation-duration: 1s;
-  animation-iteration-count: 1;
-}
-
-@keyframes classicyMenuItemFlashKeyframes {
-  0% { filter: invert(100%);}
-  20% { filter: invert(0);}
-  40% { filter: invert(100%);}
-  60% { filter: invert(0);}
-  80% { filter: invert(100%);}
-  100% { filter: invert(0);}
-}