classicy 0.5.4 → 0.5.6

package/src/SystemFolder/SystemResources/Desktop/MenuBar/Widgets/Time/ClassicyDesktopMenuWidgetTime.tsx

@@ -1,141 +0,0 @@
-import './ClassicyDesktopMenuWidgetTime.scss'
-import '@/SystemFolder/SystemResources/Menu/ClassicyMenu.scss'
-import {useAppManager, useAppManagerDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
-import classNames from 'classnames'
-import appIcon from 'img/icons/control-panels/date-time-manager/date-time-manager.png'
-import React, {useEffect, useState} from 'react'
-
-export const ClassicyDesktopMenuWidgetTime: React.FC = ({}) => {
-    const desktopContext = useAppManager()
-    const desktopEventDispatch = useAppManagerDispatch()
-
-    const {show, militaryTime, displaySeconds, displayPeriod, displayDay, displayLongDay, flashSeparators} =
-        desktopContext.System.Manager.DateAndTime
-
-    const [showingTime, setShowingTime] = useState(true)
-
-    const [time, setTime] = useState({
-        year: new Date(desktopContext.System.Manager.DateAndTime.dateTime).getFullYear(),
-        month: new Date(desktopContext.System.Manager.DateAndTime.dateTime).getMonth(),
-        date: new Date(desktopContext.System.Manager.DateAndTime.dateTime).getDate(),
-        day: new Date(desktopContext.System.Manager.DateAndTime.dateTime).getUTCDay(),
-        minutes: new Date(desktopContext.System.Manager.DateAndTime.dateTime).getUTCMinutes(),
-        hours: new Date(desktopContext.System.Manager.DateAndTime.dateTime).getUTCHours(),
-        seconds: new Date(desktopContext.System.Manager.DateAndTime.dateTime).getUTCSeconds(),
-        period: new Date(desktopContext.System.Manager.DateAndTime.dateTime).getUTCHours() > 12 ? ' PM' : ' AM',
-    })
-
-    const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
-
-    useEffect(() => {
-        const intervalId = setInterval(() => {
-            const date = new Date(desktopContext.System.Manager.DateAndTime.dateTime)
-            date.setSeconds(date.getSeconds() + 1)
-            desktopEventDispatch({
-                type: 'ClassicyManagerDateTimeSet',
-                dateTime: date,
-            })
-
-            const localDate = new Date(date.toISOString())
-            localDate.setHours(
-                localDate.getHours() + parseInt(desktopContext.System.Manager.DateAndTime.timeZoneOffset)
-            )
-            setTime({
-                year: localDate.getFullYear(),
-                month: localDate.getMonth(),
-                date: localDate.getDate(),
-                day: localDate.getDay(),
-                minutes: localDate.getMinutes(),
-                hours: localDate.getHours() === 0 ? 12 : localDate.getHours(),
-                seconds: localDate.getSeconds(),
-                period: localDate.getHours() < 12 ? ' AM' : ' PM',
-            })
-        }, 1000)
-
-        return () => clearInterval(intervalId)
-    }, [])
-
-    const convertToTwoDigit = (num: number) => {
-        return num.toLocaleString('en-US', {
-            minimumIntegerDigits: 2,
-        })
-    }
-
-    const convertTo12HourPeriod = (num: number) => {
-        if (num > 12) {
-            return num - 12
-        }
-        if (num == 0) {
-            return 12
-        }
-        return num
-    }
-
-    const toBlink = () => {
-        if (flashSeparators) {
-            return "textBlinker"
-        }
-
-        return
-    }
-
-    const openDateTimeManager = () => {
-        desktopEventDispatch({
-            type: 'ClassicyAppOpen',
-            app: {
-                id: 'DateAndTimeManager.app',
-                name: 'Date and Time Manager',
-                icon: appIcon,
-            },
-        })
-    }
-
-    return (
-        <>
-            {show && (
-                <li
-                    className={classNames(
-                        "classicyMenuItem",
-                        "classicyMenuItemNoImage",
-                        "classicyDesktopMenuTime"
-                    )}
-                    onDoubleClick={openDateTimeManager}
-                    onClick={() => {setShowingTime(!showingTime)}}
-                >
-                    {showingTime ? (
-                        <div>
-                            {displayDay && (
-                                <span className={"classicyDesktopMenuTimeSeparatorRight"}>
-                            {displayLongDay ? daysOfWeek[time.day] : daysOfWeek[time.day].slice(0, 3)}
-                        </span>
-                            )}
-                            <span>
-                                {" "}
-                                {militaryTime ? convertToTwoDigit(time.hours) : convertTo12HourPeriod(time.hours)}
-                            </span>
-                            <span>
-                        <span className={displaySeconds ? '' : toBlink()}>:</span>
-                                {convertToTwoDigit(time.minutes)}
-                    </span>
-                            {displaySeconds && (
-                                <>
-                                    <span className={toBlink()}>:</span>
-                                    <span>{convertToTwoDigit(time.seconds)}</span>
-                                </>
-                            )}
-                            {!militaryTime && displayPeriod && (
-                                <span className={"classicyDesktopMenuTimeSeparatorLeft"}>
-                                    {time.period}
-                                </span>
-                            )}
-                        </div>
-                    ) : (
-                        <div>
-                            <span> {time.month}/{time.day}/{time.year}</span>
-                        </div>
-                    )}
-                </li>
-            )}
-        </>
-    )
-}

package/src/SystemFolder/SystemResources/Disclosure/ClassicyDisclosure.scss

@@ -1,88 +0,0 @@
-@use '../../ControlPanels/AppearanceManager/styles/appearance';
-
-.classicyDisclosure {
-  padding: 0;
-}
-
-.classicyDisclosureHeader {
-  display: flex;
-  flex-direction: row;
-  padding: calc(var(--window-padding-size));
-}
-
-.classicyDisclosureInner {
-  padding: calc(var(--window-padding-size));
-}
-
-.classicyDisclosureInnerOpen {
-  display: block;
-  height: 100%;
-}
-
-.classicyDisclosureInnerClose {
-  display: none;
-  height: 0;
-  opacity: 0;
-}
-
-.classicyDisclosureTriangle {
-  width: calc(var(--window-control-size) + var(--window-padding-size));
-  height: calc(var(--window-control-size) + var(--window-padding-size));
-  margin-left: calc(var(--window-control-size) / -2);
-  transition-timing-function: steps(4, end);
-  transition-duration: 0.125s;
-  transition-property: all;
-}
-
-.classicyDisclosureTriangleHighlight {
-  fill: var(--color-theme-02);
-}
-
-.classicyDisclosureTriangleShadow {
-  fill: var(--color-theme-04);
-}
-
-.classicyDisclosureTriangleInner {
-  fill: var(--color-theme-03);
-}
-
-.classicyDisclosureTriangleDropShadow {
-  opacity: 0.33;
-  color: var(--color-black);
-}
-
-.classicyDisclosureTriangleOutline {
-  color: var(--color-black);
-}
-
-.classicyDisclosureTriangleRightOpen {
-  transform: rotate(90deg);
-}
-
-.classicyDisclosureTriangleRightClosed {
-  transform: rotate(0);
-}
-
-.classicyDisclosureTriangleLeftOpen {
-  transform: rotate(90deg);
-}
-
-.classicyDisclosureTriangleLeftClosed {
-  transform: rotate(180deg);
-}
-
-.classicyDisclosureTriangleUpOpen {
-  transform: rotate(90deg);
-}
-
-.classicyDisclosureTriangleUpClosed {
-  transform: rotate(270deg);
-}
-
-.classicyDisclosureTriangleDownClosed {
-  transform: rotate(90deg);
-}
-
-.classicyDisclosureTriangleDownOpen {
-  transform: rotate(270deg);
-}

package/src/SystemFolder/SystemResources/Disclosure/ClassicyDisclosure.tsx

@@ -1,88 +0,0 @@
-import {ClassicyControlLabel} from '@/SystemFolder/SystemResources/ControlLabel/ClassicyControlLabel'
-import './ClassicyDisclosure.scss'
-import classNames from 'classnames'
-import React, { useState } from 'react'
-import {useAnalytics} from 'use-analytics'
-
-type ClassicyDisclosureTriangleDirections = 'up' | 'right' | 'down' | 'left'
-
-type ClassicyDisclosureProps = {
-    direction?: ClassicyDisclosureTriangleDirections
-    label?: string
-    children?: any
-}
-
-export const ClassicyDisclosure: React.FC<ClassicyDisclosureProps> = (
-    { direction = 'right', label = '', children }
-) => {
-    const [open, setOpen] = useState(false)
-    const {track} = useAnalytics()
-    const analyticsArgs = {type: "ClassicyLabel", label}
-
-    const triangleClassOpenName =
-        'classicyDisclosureTriangle' +
-        direction.charAt(0).toUpperCase() +
-        direction.slice(1) +
-        (open ? 'Open' : 'Closed')
-
-    function handleKeyPress(e: React.KeyboardEvent<HTMLDivElement>) {
-        switch (e.key) {
-            case 'Enter':
-            case ' ': {
-                track('click', {expanded: !open, ...analyticsArgs})
-                setOpen(!open)
-            }
-        }
-    }
-
-    return (
-        <div className={classNames("classicyDisclosure")}>
-            <div
-                className={"classicyDisclosureHeader"}
-                onClick={() => {
-                    track('click', {expanded: !open, ...analyticsArgs})
-                    setOpen(!open)
-                }}
-                tabIndex={0}
-                onKeyDown={(e) => handleKeyPress(e)}
-            >
-                <svg
-                    id="a"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 6.44 11.12"
-                    className={classNames(
-                        "classicyDisclosureTriangle",
-                        triangleClassOpenName
-                    )}
-                >
-                    <polygon
-                        className={"classicyDisclosureTriangleDropShadow"}
-                        points="6.44 6.05 1.17 1.07 .93 11.12 6.44 6.05"
-                    />
-                    <polygon
-                        className={"classicyDisclosureTriangleOutline"}
-                        points="5.68 5.34 0 0 0 10.68 5.68 5.34"
-                    />
-                    <polygon
-                        className={"classicyDisclosureTriangleHighlight"}
-                        points="4.79 5.34 .76 1.82 .76 8.86 4.79 5.34"
-                    />
-                    <polygon
-                        className={"classicyDisclosureTriangleInner"}
-                        points="4.79 5.34 1.27 3.42 1.29 8.43 4.79 5.34"
-                    />
-                    <polygon
-                        className={"classicyDisclosureTriangleShadow"}
-                        points=".76 8.29 .76 8.86 4.79 5.34 4.47 5.05 .76 8.29"
-                    />
-                </svg>
-                <ClassicyControlLabel label={label}/>
-            </div>
-            <div className={classNames(
-                "classicyDisclosureInner", open ? "classicyDisclosureInnerOpen" : "classicyDisclosureInnerClose"
-            )}>
-                {children}
-            </div>
-        </div>
-    )
-}

package/src/SystemFolder/SystemResources/File/ClassicyFileBrowser.tsx

@@ -1,56 +0,0 @@
-import { ClassicyFileSystem } from '@/SystemFolder/SystemResources/File/ClassicyFileSystem'
-import React, {useRef} from 'react'
-import {ClassicyFileBrowserViewIcons} from '@/SystemFolder/SystemResources/File/ClassicyFileBrowserViewIcons'
-import {ClassicyFileBrowserViewTable} from '@/SystemFolder/SystemResources/File/ClassicyFileBrowserViewTable'
-
-type ClassicyFileBrowserProps = {
-    fs: ClassicyFileSystem
-    path: string
-    appId: string
-    display?: 'icons' | 'list'
-    dirOnClickFunc?: any
-    fileOnClickFunc?: any
-}
-
-export const ClassicyFileBrowser: React.FC<ClassicyFileBrowserProps> = ({
-    fs,
-    display = 'icons',
-    path,
-    appId,
-    dirOnClickFunc = () => {},
-    fileOnClickFunc = () => {},
-}) => {
-    const holderRef = useRef<HTMLDivElement>(null)
-
-    return (
-        <div style={{ position: 'absolute', width: '100%', height: '100%' }}>
-            {(() => {
-                switch (display) {
-                    case 'list':
-                        return (
-                            <ClassicyFileBrowserViewTable
-                                fileOnClickFunc={fileOnClickFunc}
-                                dirOnClickFunc={dirOnClickFunc}
-                                fs={fs}
-                                path={path}
-                                appId={appId}
-                                iconSize={18}
-                                holderRef={holderRef}
-                            />
-                        )
-                    default:
-                        return (
-                            <ClassicyFileBrowserViewIcons
-                                fileOnClickFunc={fileOnClickFunc}
-                                dirOnClickFunc={dirOnClickFunc}
-                                fs={fs}
-                                path={path}
-                                appId={appId}
-                                holderRef={holderRef}
-                            />
-                        )
-                }
-            })()}
-        </div>
-    )
-}

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

@@ -1,47 +0,0 @@
-import { ClassicyTheme } from '@/SystemFolder/ControlPanels/AppearanceManager/ClassicyAppearance'
-import { getIconSize } from '@/SystemFolder/SystemResources/Desktop/ClassicyDesktopIconContext'
-import directoryIcon from 'img/icons/system/folders/directory.png'
-import fileIcon from 'img/icons/system/files/file.png'
-
-export const capitalizeFirst = (s: string) => {
-    return s && String(s[0]).toUpperCase() + String(s).slice(1)
-}
-
-export const iconImageByType = (byType: string) => {
-    switch (byType) {
-        case 'directory': {
-            return directoryIcon
-        }
-        default: {
-            return fileIcon
-        }
-    }
-}
-
-export const createGrid = (
-    iconSize: number,
-    iconPadding: number,
-    containerMeasure: [number, number]
-): [number, number] => {
-    return [
-        Math.floor(containerMeasure[0] / (iconSize * 2 + iconPadding)),
-        Math.floor(containerMeasure[1] / (iconSize * 2 + iconPadding)),
-    ]
-}
-
-export const getGridPosition = (i: number, grid: [number, number]): [number, number] => {
-    return [i % grid[0], Math.floor(i / grid[0])]
-}
-
-export const cleanupIcon = (
-    theme: ClassicyTheme,
-    iconIndex: number,
-    iconTotal: number,
-    containerMeasure: [number, number]
-): [number, number] => {
-    const [iconSize, iconPadding] = getIconSize(theme)
-    let grid = createGrid(iconSize, iconTotal, containerMeasure)
-    const [startX, startY] = getGridPosition(iconIndex, grid)
-
-    return [iconPadding + Math.floor(iconSize * 2 * startX), iconPadding + Math.floor(iconSize * 2 * startY)]
-}

package/src/SystemFolder/SystemResources/File/ClassicyFileBrowserViewIcons.tsx

@@ -1,90 +0,0 @@
-import {useAppManager} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
-import {cleanupIcon, iconImageByType} from '@/SystemFolder/SystemResources/File/ClassicyFileBrowserUtils'
-import {ClassicyFileSystem} from '@/SystemFolder/SystemResources/File/ClassicyFileSystem'
-import {ClassicyFileSystemEntryMetadata} from "@/SystemFolder/SystemResources/File/ClassicyFileSystemModel";
-import {ClassicyIcon} from '@/SystemFolder/SystemResources/Icon/ClassicyIcon'
-import React, {RefObject, useEffect, useState} from 'react'
-
-export type ClassicyFileBrowserViewIconsProps = {
-    fs: ClassicyFileSystem
-    path: string
-    appId: string
-    dirOnClickFunc?: (path: string) => void
-    fileOnClickFunc?: (path: string) => void
-    holderRef?: RefObject<HTMLDivElement | null>
-}
-
-
-type iconType = {
-    appId: string;
-    name: string;
-    invisible: any;
-    icon: any;
-    onClickFunc: () => void | (() => void);
-    holder: React.RefObject<HTMLDivElement | null>;
-    initialPosition: any
-}
-
-export const ClassicyFileBrowserViewIcons: React.FC<ClassicyFileBrowserViewIconsProps> = (
-    {fs, path, appId, dirOnClickFunc, fileOnClickFunc, holderRef}) => {
-    const desktopContext = useAppManager()
-
-    const [items, setItems] = useState<iconType[]>([])
-
-    const openFileOrFolder = (properties: ClassicyFileSystemEntryMetadata, path: string, filename: string) => {
-        switch (properties['_type']) {
-            case 'directory': {
-                if (dirOnClickFunc) {
-                    return dirOnClickFunc(path + ':' + filename)
-                }
-                break
-            }
-            case 'file': {
-                if (fileOnClickFunc) {
-                    return fileOnClickFunc(path + ':' + filename)
-                }
-                break
-            }
-        }
-    }
-
-    useEffect(() => {
-        if (!holderRef?.current) {
-            return
-        }
-
-        const containerMeasure: [number, number] = [
-            holderRef.current.getBoundingClientRect().width,
-            holderRef.current.getBoundingClientRect().height,
-        ]
-        const directoryListing: ClassicyFileSystemEntryMetadata | {} = fs.filterByType(path, ['file', 'directory'])
-
-        let icons: iconType[] = []
-
-        Object.entries(directoryListing).forEach(([filename, properties], index) => {
-            icons.push({
-                appId: appId,
-                name: filename,
-                invisible: properties['_invisible'],
-                icon: properties['_icon'] || iconImageByType(properties['_type']),
-                onClickFunc: () => openFileOrFolder(properties, path, filename),
-                holder: holderRef,
-                initialPosition: cleanupIcon(
-                    desktopContext.System.Manager.Appearance.activeTheme,
-                    index,
-                    Object.entries(directoryListing).length,
-                    containerMeasure
-                ),
-            })
-        })
-        setItems((_) => [...icons])
-    }, [path, fs, desktopContext.System.Manager.Appearance.activeTheme, holderRef])
-
-    return (
-        <div style={{position: 'absolute', width: '100%', height: '100%'}} ref={holderRef}>
-            {items.map((item) => {
-                return <ClassicyIcon {...item} key={item.name}/>
-            })}
-        </div>
-    )
-}

package/src/SystemFolder/SystemResources/File/ClassicyFileBrowserViewTable.scss

@@ -1,92 +0,0 @@
-@use '../../ControlPanels/AppearanceManager/styles/appearance';
-
-.resizer {
-  position: absolute;
-  z-index: 500;
-  top: 0;
-  right: 0;
-  width: 15px;
-  height: 100%;
-  cursor: col-resize;
-
-  &:hover {
-  }
-}
-
-.isResizing {
-}
-
-
-.classicyFileBrowserViewTableContainer {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background: var(--color-system-01);
-}
-
-.classicyFileBrowserViewTable {
-  font-family: var(--body-font);
-  font-weight: 100;
-  width: 100%;
-  table-layout: auto;
-  border-collapse: collapse;
-}
-
-.classicyFileBrowserViewTableHeader {
-  position: sticky;
-  top: 0;
-  border: none !important;
-}
-
-.classicyFileBrowserViewTableContent {
-  font-size: calc(var(--ui-font-size) * 0.8);
-  font-weight: normal;
-}
-
-.classicyFileBrowserViewTableColumnHeader {
-  font-size: calc(var(--ui-font-size) * 0.8);
-  font-weight: normal;
-  font-stretch: condensed;
-
-  position: relative;
-  padding: var(--window-padding-size);
-
-  @include appearance.platinumWindowBoxShadow;
-}
-
-.classicyFileBrowserViewTableColumnHeaderSelected {
-  @include appearance.platinumWindowHeaderBorderDepressed;
-  background-color: var(--color-system-04);
-}
-
-.classicyFileBrowserViewTableColumnHeaderGroup {
-  background: var(--color-system-03);
-}
-
-.classicyFileBrowserViewTableRow {
-  border-top: 1px solid var(--color-white);
-  border-bottom: 1px solid var(--color-white);
-}
-
-.classicyFileBrowserViewTableRowIcon {
-  margin: calc(var(--desktop-icon-size) / 16);
-}
-
-.classicyFileBrowserViewTableRowIconLabel {
-  padding: calc(var(--desktop-icon-size) / 16);
-}
-
-.classicyFileBrowserViewTableRowSelected td:first-of-type div span {
-  color: var(--color-white);
-  background: var(--color-system-07);
-}
-
-.classicyFileBrowserViewTableRowSelected td:first-of-type div img {
-  filter: contrast(0.75) brightness(0.5);
-}
-
-.classicyFileBrowserViewTableRowContainer {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-}