classicy 0.5.4 → 0.5.6

package/src/SystemFolder/SystemResources/Tabs/ClassicyTabs.scss

@@ -1,59 +0,0 @@
-@use '../../ControlPanels/AppearanceManager/styles/appearance';
-
-.classicyTabContainer {
-}
-
-.classicyTabsHolder {
-  border: var(--window-border-size) solid black;
-}
-
-.classicyButtonsHolder {
-  display: flex;
-  flex-direction: row;
-  margin-bottom: calc(var(--window-border-size) * -1);
-  margin-left: calc(var(--window-control-size) * 1);
-  gap: calc(var(--window-padding-size) * 2);
-}
-
-.classicyTabButton {
-  font-family: var(--ui-font), sans-serif;
-  font-size: var(--ui-font-size);
-  width: 99%;
-  height: calc(var(--window-control-size) * 2);
-  padding: calc(var(--window-padding-size) * 0.5) calc(var(--window-padding-size) * 3) calc(var(--window-padding-size) * 1) calc(var(--window-padding-size) * 3);
-  user-select: none;
-  border: none;
-  background-color: var(--color-system-04);
-  background-position: left bottom;
-  background-size: 100%;
-  mask-repeat: no-repeat;
-  mask-size: 100%;
-  mask-position: center center;
-  min-width: calc(var(--window-control-size) * 7);
-  text-wrap: nowrap;
-}
-
-.classicyTabButtonWrapper {
-  height: calc(var(--window-control-size) * 2);
-  border-top: var(--window-border-size) solid;
-  background-color: var(--color-system-07);
-  mask-repeat: no-repeat;
-  mask-size: calc(100% + var(--window-border-size) * 1);
-  mask-position: center bottom;
-}
-
-.classicyTabButtonActive {
-  border-bottom: none !important;
-  background-color: var(--color-system-02);
-}
-
-.classicyTabHiddenContent {
-  display: none;
-  padding: var(--window-padding-size);
-}
-
-.classicyTabActiveContent {
-  display: block;
-  padding: var(--window-padding-size);
-  background-color: var(--color-system-02);
-}

package/src/SystemFolder/SystemResources/Tabs/ClassicyTabs.tsx

@@ -1,77 +0,0 @@
-import './ClassicyTabs.scss'
-import {useSoundDispatch} from '@/SystemFolder/ControlPanels/SoundManager/ClassicySoundManagerContext'
-import tabMaskImageURL from 'img/ui/tab.svg'
-import React, {useState} from 'react'
-import {useAnalytics} from 'use-analytics'
-
-interface TabProps {
-    tabs: TabIndividual[]
-}
-
-interface TabIndividual {
-    title: string
-    children: any
-}
-
-export const ClassicyTabs: React.FC<TabProps> = ({tabs}) => {
-    const [activeTab, setActiveTab] = useState(0)
-    const player = useSoundDispatch()
-    const {track} = useAnalytics()
-    const analyticsArgs = {tabs: tabs.map((t) => t.title)}
-
-    const handleTabClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-        player({type: 'ClassicySoundPlay', sound: 'ClassicyTabClickUp'})
-        const tabId = parseInt((e.target as HTMLButtonElement).id)
-        track("click", {type: 'ClassicyTab', tabId, ...analyticsArgs})
-        setActiveTab(tabId)
-    }
-    const startTabClick = (e: React.MouseEvent<HTMLButtonElement>)=> {
-        player({type: 'ClassicySoundPlay', sound: 'ClassicyTabClickDown'})
-        const tabId = parseInt((e.target as HTMLButtonElement).id)
-        track("selected", {type: 'ClassicyTab', tabId, ...analyticsArgs})
-    }
-
-
-    return (
-        <div className={"classicyTabContainer"}>
-            <div className={"classicyButtonsHolder"}>
-                {tabs.map((tab, index) => {
-                    return (
-                        <div
-                            key={'button_' + index.toString()}
-                            className={"classicyTabButtonWrapper"}
-                            style={{maskImage: `url('${tabMaskImageURL}`}}
-                        >
-                            <button
-                                id={index.toString()}
-                                style={{maskImage: `url('${tabMaskImageURL}`}}
-                                className={
-                                    "classicyTabButton" +
-                                    ' ' +
-                                    (index == activeTab ? "classicyTabButtonActive" : '')
-                                }
-                                onMouseDown={startTabClick}
-                                onMouseUp={handleTabClick}
-                            >
-                                {tab.title}
-                            </button>
-                        </div>
-                    )
-                })}
-            </div>
-            <div className={"classicyTabsHolder"}>
-                {tabs.map((tab, index) => {
-                    return (
-                        <div
-                            id={index.toString()}
-                            key={index.toString()}
-                            className={index == activeTab ? "classicyTabActiveContent" : "classicyTabHiddenContent"}
-                        >
-                            {tab.children}
-                        </div>
-                    )
-                })}
-            </div>
-        </div>
-    )
-}

package/src/SystemFolder/SystemResources/Tabs/tab.svg

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 75.31 23.44">
-    <path d="M64.98,0H10.32c-1.3,0-2.46.84-2.89,2.09L0,23.44h75.31l-7.42-21.34c-.44-1.25-1.6-2.1-2.9-2.1,0,0-.01,0,0,0Z"/>
-</svg>

package/src/SystemFolder/SystemResources/TextEditor/ClassicyTextEditor.scss

@@ -1,18 +0,0 @@
-.classicyTextEditor {
-  overflow: hidden;
-  width: calc(100% - var(--window-padding-size));
-  height: calc(100% - var(--window-padding-size));
-  margin: 0;
-  padding: calc(var(--window-padding-size));
-  resize: none;
-  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);
-  }
-}

package/src/SystemFolder/SystemResources/TextEditor/ClassicyTextEditor.tsx

@@ -1,14 +0,0 @@
-import './ClassicyTextEditor.scss'
-import React from 'react'
-
-interface EditorProps {
-    content: string
-}
-
-const ClassicyTextEditor: React.FC<EditorProps> = ({ content }) => {
-    return (
-        <div>
-            <textarea className={"classicyTextEditor"}>{content}</textarea>
-        </div>
-    )
-}

package/src/SystemFolder/SystemResources/TimePicker/ClassicyTimePicker.scss

@@ -1,53 +0,0 @@
-@use '../../ControlPanels/AppearanceManager/styles/appearance';
-@use 'sass:list';
-
-.classicyTimePickerHolder {
-  display: flex;
-  align-items: baseline;
-  flex-direction: row;
-  width: calc(100% - var(--window-padding-size) * 2);
-  padding: var(--window-padding-size);
-  gap: 0;
-}
-
-.classicyTimePicker {
-  font-family: var(--ui-font), sans-serif;
-  font-size: var(--ui-font-size);
-  width: auto;
-  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);
-  display: flex;
-  align-items: baseline;
-  flex-direction: row;
-  background-color: var(--color-white);
-  margin-right: var(--window-padding-size);
-
-  input {
-    margin: 0;
-    padding: 0;
-    font-family: var(--ui-font), sans-serif;
-    box-shadow: none !important;
-    height: 100%;
-    margin-right: var(--window-padding-size);
-    text-align: right;
-    border: none;
-    outline: none;
-
-    height: calc(var(--window-control-size) * 1.5);
-
-    &:focus-visible {
-      outline: 0 !important;
-    }
-  }
-}
-
-.classicyTimePickerDefault {
-}
-
-.classicyTimePickerLabel {
-  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/TimePicker/ClassicyTimePicker.tsx

@@ -1,221 +0,0 @@
-import './ClassicyTimePicker.scss'
-import {ClassicyControlLabel} from '@/SystemFolder/SystemResources/ControlLabel/ClassicyControlLabel'
-import {ClassicyPopUpMenu} from '@/SystemFolder/SystemResources/PopUpMenu/ClassicyPopUpMenu'
-import classNames from 'classnames'
-import React, {ChangeEvent, KeyboardEvent, useState} from 'react'
-
-interface ClassicyTimePickerProps {
-    id: string
-    inputType?: 'text'
-    onChangeFunc?: any
-    labelTitle?: string
-    placeholder?: string
-    prefillValue?: Date
-    disabled?: boolean
-    isDefault?: boolean
-    ref?: any
-}
-
-export const ClassicyTimePicker: React.FC<ClassicyTimePickerProps> = React.forwardRef<
-    HTMLInputElement,
-    ClassicyTimePickerProps
->(function ClassicyTimePicker(
-    {id, inputType = 'text', labelTitle, placeholder, prefillValue, disabled = false, isDefault, onChangeFunc},
-    ref
-) {
-    if (!prefillValue) {
-        prefillValue = new Date()
-    }
-
-    const [selectedDate, setSelectedDate] = useState<Date>(prefillValue)
-    const [hour, setHour] = useState<string>(prefillValue.getHours().toString())
-    const [minutes, setMinutes] = useState<string>(prefillValue.getMinutes().toString())
-    const [seconds, setSeconds] = useState<string>(prefillValue.getSeconds().toString())
-    const [period, setPeriod] = useState<string>(prefillValue.getHours() < 12 ? 'am' : 'pm')
-
-    const handleDateChange = (date: Date) => {
-        onChangeFunc && onChangeFunc(date)
-    }
-
-    const handlePeriodChange = (e: ChangeEvent<HTMLInputElement>) => {
-        setPeriod(e.target.value)
-
-        let updatedDate = new Date(selectedDate)
-        let hours = parseInt(hour)
-
-        if (e.target.value == 'pm') {
-            hours += 12
-        }
-
-        if (hours >= 24) {
-            hours = 0
-        }
-
-        updatedDate.setHours(hours)
-        setSelectedDate(updatedDate)
-        handleDateChange(updatedDate)
-    }
-
-    const handleTimePartChange = (e: ChangeEvent<HTMLInputElement>, part: 'hour' | 'minutes' | 'seconds') => {
-        let inputValue = parseInt(e.currentTarget.value)
-        let updatedDate = new Date(selectedDate)
-
-        if (isNaN(inputValue)) {
-            return
-        }
-
-        switch (part) {
-            case 'hour':
-                if (inputValue < 1 || inputValue > 12) {
-                    return
-                }
-                if (period === 'pm') {
-                    inputValue = inputValue < 12 ? inputValue + 12 : inputValue
-                } else {
-                    inputValue = inputValue === 12 ? 0 : inputValue
-                }
-                updatedDate.setHours(inputValue)
-                setHour(e.currentTarget.value)
-                break
-            case 'minutes':
-                if (inputValue < 0 || inputValue > 59) {
-                    return
-                }
-                updatedDate.setMinutes(inputValue)
-                setMinutes(e.currentTarget.value)
-                break
-            case 'seconds':
-                if (inputValue < 0 || inputValue > 59) {
-                    return
-                }
-                updatedDate.setSeconds(inputValue)
-                setSeconds(e.currentTarget.value)
-                break
-        }
-
-        setSelectedDate(updatedDate)
-        handleDateChange(updatedDate)
-    }
-
-    const incrementTimePartChange = (e: KeyboardEvent<HTMLInputElement>, part: 'hour' | 'minutes' | 'seconds') => {
-        let updatedDate = new Date(selectedDate)
-        let modifier = 0
-
-        switch (e.key) {
-            case 'ArrowDown':
-                modifier = -1
-                break
-            case 'ArrowUp':
-                modifier = 1
-                break
-        }
-
-        switch (part) {
-            case 'hour':
-                let currentHour = parseInt(hour) + modifier
-                if (currentHour > 12 || currentHour <= 0) {
-                    return
-                }
-                updatedDate.setHours(currentHour)
-                setHour(currentHour.toString())
-                break
-            case 'minutes':
-                let currentMinutes = parseInt(minutes) + modifier
-                if (currentMinutes < 0 || currentMinutes > 59) {
-                    return
-                }
-                updatedDate.setMinutes(currentMinutes)
-                setMinutes(currentMinutes.toString())
-                break
-            case 'seconds':
-                let currentSeconds = parseInt(seconds) + modifier
-                if (currentSeconds < 0 || currentSeconds > 59) {
-                    return
-                }
-                updatedDate.setSeconds(currentSeconds)
-                setSeconds(currentSeconds.toString())
-                break
-        }
-
-        setSelectedDate(updatedDate)
-        handleDateChange(updatedDate)
-    }
-
-    return (
-        <div className={"classicyTimePickerHolder"}>
-            {labelTitle && (
-                <ClassicyControlLabel
-                    label={labelTitle}
-                    labelFor={id}
-                    direction={'left'}
-                    disabled={disabled}
-                ></ClassicyControlLabel>
-            )}
-            <div
-                className={classNames(
-                    "classicyTimePicker",
-                    isDefault ? "classicyTimePickerDefault" : ''
-                )}
-            >
-                <input
-                    id={id + '_hour'}
-                    tabIndex={0}
-                    name={id + '_hour'}
-                    type={inputType}
-                    ref={ref}
-                    disabled={disabled}
-                    placeholder={placeholder}
-                    onClick={(e) => e.currentTarget.select()}
-                    onChange={(e) => handleTimePartChange(e, 'hour')}
-                    onBlur={(e) => handleTimePartChange(e, 'hour')}
-                    onKeyDown={(e) => incrementTimePartChange(e, 'hour')}
-                    value={parseInt(hour) % 12 === 0 ? 12 : parseInt(hour) % 12}
-                    maxLength={2}
-                    style={{width: '50%'}}
-                ></input>
-                :
-                <input
-                    id={id + '_minutes'}
-                    tabIndex={0}
-                    name={id + '_minutes'}
-                    type={inputType}
-                    ref={ref}
-                    disabled={disabled}
-                    value={String(minutes)}
-                    onClick={(e) => e.currentTarget.select()}
-                    onChange={(e) => handleTimePartChange(e, 'minutes')}
-                    onBlur={(e) => handleTimePartChange(e, 'minutes')}
-                    onKeyDown={(e) => incrementTimePartChange(e, 'minutes')}
-                    maxLength={2}
-                    style={{width: '50%'}}
-                ></input>
-                :
-                <input
-                    id={id + '_seconds'}
-                    tabIndex={0}
-                    name={id + '_seconds'}
-                    type={inputType}
-                    ref={ref}
-                    disabled={disabled}
-                    value={String(seconds)}
-                    onClick={(e) => e.currentTarget.select()}
-                    onChange={(e) => handleTimePartChange(e, 'seconds')}
-                    onBlur={(e) => handleTimePartChange(e, 'seconds')}
-                    onKeyDown={(e) => incrementTimePartChange(e, 'seconds')}
-                    maxLength={2}
-                    style={{width: '50%'}}
-                ></input>
-            </div>
-            <ClassicyPopUpMenu
-                selected={period}
-                id={'am-pm'}
-                options={[
-                    {label: 'am', value: 'am'},
-                    {label: 'pm', value: 'pm'},
-                ]}
-                style={{minWidth: 'calc(var(--ui-font-size) * 4)'}}
-                onChangeFunc={handlePeriodChange}
-            ></ClassicyPopUpMenu>
-        </div>
-    )
-})