classicy 0.5.4 → 0.5.5

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

@@ -1,127 +0,0 @@
-import '@/SystemFolder/SystemResources/Menu/ClassicyMenu.scss'
-import {useAppManagerDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
-import {useSoundDispatch} from '@/SystemFolder/ControlPanels/SoundManager/ClassicySoundManagerContext'
-import classNames from 'classnames'
-import React from 'react'
-import {useAnalytics} from 'use-analytics'
-
-export interface ClassicyMenuItem {
-    id: string
-    title?: string
-    image?: string
-    disabled?: boolean
-    icon?: string
-    keyboardShortcut?: string
-    link?: string
-    event?: string
-    eventData?: any
-    onClickFunc?: any
-    menuChildren?: ClassicyMenuItem[]
-    className?: string
-}
-
-interface ClassicyMenuProps {
-    name: string
-    menuItems: ClassicyMenuItem[]
-    navClass?: string
-    subNavClass?: string
-    children?: any
-}
-
-export const ClassicyMenu: React.FC<ClassicyMenuProps> = ({name, menuItems, navClass, subNavClass, children}) => {
-    if (menuItems && menuItems.length > 0) {
-        return (
-            <div className={"classicyMenuWrapper"}>
-                <ul className={classNames(navClass)} key={name + '_menu'}>
-                    {menuItems.map((item: ClassicyMenuItem) => (
-                        <ClassicyMenuItem key={item?.id} menuItem={item} subNavClass={subNavClass || ""}/>
-                    ))}
-                    {children}
-                </ul>
-            </div>
-        )
-    }
-    return
-}
-
-export const ClassicyMenuItem: React.FC<{ menuItem: ClassicyMenuItem; subNavClass: string }> = ({
-                                                                                                    menuItem,
-                                                                                                    subNavClass
-                                                                                                }) => {
-    const player = useSoundDispatch()
-    const desktopDispatch = useAppManagerDispatch()
-
-    const {track} = useAnalytics()
-    const analyticsArgs = {
-        id: menuItem.id,
-        title: menuItem.title,
-        image: menuItem.image,
-        disabled: menuItem.disabled,
-        icon: menuItem.icon,
-        link: menuItem.link,
-        event: menuItem.event,
-        eventData: menuItem.eventData,
-        childrenCount: menuItem.menuChildren?.length,
-    }
-
-    const menuItemEventHandler = (menuItem: ClassicyMenuItem) => {
-        track("selected", {type: 'ClassicyMenuItem', ...analyticsArgs})
-        desktopDispatch({
-            type: menuItem.event,
-            ...menuItem.eventData,
-        })
-    }
-
-    return menuItem && menuItem.id === 'spacer' ? (<hr></hr>) : (
-        <li
-            id={menuItem.id}
-            key={menuItem.id}
-            onClick={() => {
-                if (menuItem.onClickFunc) {
-                    menuItem.onClickFunc()
-                } else if (menuItem.event && menuItem.eventData) {
-                    menuItemEventHandler(menuItem)
-                }
-            }}
-            onMouseOver={() => {
-                track("hover", {type: 'ClassicyMenuItem', ...analyticsArgs})
-                player({type: 'ClassicySoundPlay', sound: 'ClassicyMenuItemHover'})
-            }}
-            onMouseOut={() => {
-                player({type: 'ClassicySoundPlay', sound: 'ClassicyMenuItemClick'})
-            }}
-            className={classNames(
-                "classicyMenuItem",
-                !!menuItem.icon ? '' : "classicyMenuItemNoImage",
-                menuItem.className,
-                menuItem.disabled ? "classicyMenuItemDisabled" : '',
-                menuItem.menuChildren && menuItem.menuChildren.length > 0
-                    ? "classicyMenuItemChildMenuIndicator"
-                    : ''
-            )}
-        >
-            <>
-                <p>
-                    {menuItem.image && <img src={menuItem.image} alt={menuItem.title}/>}
-                    {!menuItem.image && menuItem.icon && <img src={menuItem.icon} alt={menuItem.title}/>}
-                    {menuItem.title}
-                </p>
-                {menuItem.keyboardShortcut && (
-                    <p
-                        className={"classicyMenuItemKeyboardShortcut"}
-                        dangerouslySetInnerHTML={{__html: menuItem.keyboardShortcut}}
-                    ></p>
-                )}
-            </>
-
-            {menuItem.menuChildren && menuItem.menuChildren.length > 0 && (
-                <ClassicyMenu
-                    name={menuItem.id + '_subitem'}
-                    menuItems={menuItem.menuChildren}
-                    subNavClass={subNavClass}
-                    navClass={subNavClass}
-                ></ClassicyMenu>
-            )}
-        </li>
-    )
-}

package/src/SystemFolder/SystemResources/PopUpMenu/ClassicyPopUpMenu.scss

@@ -1,122 +0,0 @@
-@use '../../ControlPanels/AppearanceManager/styles/assets';
-@use '../../ControlPanels/AppearanceManager/styles/appearance';
-
-.classicyPopUpMenuSmall {
-  width: calc(var(--window-control-size) * 2.5) !important;
-  min-width: auto !important;
-  min-height: auto !important;
-  aspect-ratio: 1.5/1;
-
-  select {
-    width: 90%;
-    opacity: 0 !important;
-  }
-
-  &:not(.select--multiple)::after {
-    height: 100% !important;
-    border-left: none !important;
-    box-shadow: none !important;
-    aspect-ratio: 1 / 1 !important;
-  }
-}
-
-.classicyPopUpMenuWrapper {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: center;
-  width: 100%;
-}
-
-.classicyPopUpMenu {
-  font-family: var(--ui-font), sans-serif;
-  font-size: .75em;
-  line-height: 1.1;
-
-  position: relative;
-
-  display: grid;
-
-  align-items: center;
-  height: calc(var(--window-control-size) * 2.125);
-
-  @include appearance.platinumWindowDepressable;
-  cursor: pointer;
-  user-select: none;
-
-  grid-template-areas: 'select';
-
-  &,
-  &::before,
-  &::after,
-  & *,
-  & *::before,
-  & *::after {
-    box-sizing: border-box;
-  }
-
-  &.select--disabled {
-    cursor: not-allowed;
-    background-color: var(--color-system-01);
-    background-image: linear-gradient(to top, var(--color-system-02), var(--color-system-01) 33%);
-  }
-
-  label {
-    font-size: 1.125rem;
-    font-weight: 500;
-    margin-top: 2rem;
-  }
-
-  select {
-    font-family: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    z-index: 1;
-    margin: 0;
-    padding: calc(var(--window-padding-size) / 2) 0 var(--window-padding-size) calc(var(--window-padding-size) * 1);
-    cursor: inherit;
-    outline: none;
-    background-color: transparent;
-    appearance: none;
-
-    &:focus {
-      border-radius: var(--window-padding-size);
-      outline: var(--color-outline) solid calc(var(--window-border-size) * 2) !important;
-      box-shadow: 0 0 0 var(--window-border-size) var(--color-system-04),
-      0 0 0 calc(var(--window-border-size) * 2) var(--color-system-02),
-      0 0 0 calc(var(--window-border-size) * 3) var(--color-black),
-      inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) 0 0 var(--color-system-05),
-      inset var(--window-border-size) var(--window-border-size) 0 0 var(--color-system-06);
-    }
-
-    &::-ms-expand {
-      display: none;
-    }
-  }
-
-  select,
-  &::after {
-    grid-area: select;
-  }
-
-  &:not(.select--multiple)::after {
-    height: 100%;
-    content: '';
-
-    border-left: var(--window-border-size) solid var(--color-system-05);
-    border-top-right-radius: var(--window-padding-size);
-    border-bottom-right-radius: var(--window-padding-size);
-    background-image: assets.$down-arrow;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 50%;
-    box-shadow: inset calc(var(--window-border-size) * 2) var(--window-border-size) 0 0 var(--color-white);
-    justify-self: end;
-    aspect-ratio: 1 / 1;
-  }
-
-  select[multiple] {
-    height: 6rem;
-    padding-right: 0;
-  }
-}

package/src/SystemFolder/SystemResources/PopUpMenu/ClassicyPopUpMenu.tsx

@@ -1,63 +0,0 @@
-import {ClassicyControlLabel} from '@/SystemFolder/SystemResources/ControlLabel/ClassicyControlLabel'
-import './ClassicyPopUpMenu.scss'
-import classNames from 'classnames'
-import React, {ChangeEvent, useState} from 'react'
-import {useAnalytics} from 'use-analytics'
-
-type classicyPopUpMenuOptions = {
-    value: string
-    label: string
-    icon?: string
-}
-
-type classicyPopUpMenuProps = {
-    id: string
-    label?: string
-    options: classicyPopUpMenuOptions[]
-    selected?: string
-    small?: boolean
-    onChangeFunc?: any
-    style?: any
-}
-export const ClassicyPopUpMenu: React.FC<classicyPopUpMenuProps> = ({
-                                                                        id,
-                                                                        label,
-                                                                        options,
-                                                                        selected,
-                                                                        style,
-                                                                        small = false,
-                                                                        onChangeFunc,
-                                                                    }) => {
-    const [selectedItem, setSelectedItem] = useState(selected)
-    const {track} = useAnalytics()
-    const analyticsArgs = {id,  label,  options, selected }
-
-    const onChangeHandler = (e: ChangeEvent<HTMLSelectElement>) => {
-        setSelectedItem(e.target.value)
-        track("selected", {type: 'ClassicyPopUpMenu', itemId: e.target.value, ...analyticsArgs})
-        if (onChangeFunc) {
-            onChangeFunc(e)
-        }
-    }
-
-    return (
-        <div className={"classicyPopUpMenuWrapper"}>
-            {label && <ClassicyControlLabel label={label} direction={'right'}></ClassicyControlLabel>}
-            <div
-                style={{flexGrow: '2', ...style}}
-                className={classNames(
-                    "classicyPopUpMenu",
-                    small ? "classicyPopUpMenuSmall" : ''
-                )}
-            >
-                <select id={id} tabIndex={0} value={selectedItem} onChange={onChangeHandler}>
-                    {options.map((o) => (
-                        <option key={id + o.label + o.value} value={o.value}>
-                            {o.label}
-                        </option>
-                    ))}
-                </select>
-            </div>
-        </div>
-    )
-}

package/src/SystemFolder/SystemResources/ProgressBar/ClassicyProgressBar.scss

@@ -1,70 +0,0 @@
-@use '../../ControlPanels/AppearanceManager/styles/appearance';
-@use 'sass:list';
-
-.classicyProgress {
-  progress[value] {
-    width: calc(100%);
-    padding: 0 var(--window-border-size);
-    background: var(--color-system-03) !important;
-
-    &::-webkit-progress-bar {
-      background: var(--color-system-04);
-      @include appearance.platinumWindowInnerBorder;
-    }
-
-    &::-webkit-progress-value {
-      transition: 1s all;
-      background: linear-gradient(
-                      to bottom,
-                      var(--color-theme-07),
-                      var(--color-theme-06),
-                      var(--color-theme-05),
-                      var(--color-theme-04),
-                      var(--color-theme-03),
-                      var(--color-theme-02),
-                      var(--color-theme-01),
-                      var(--color-white),
-                      var(--color-theme-01),
-                      var(--color-theme-02),
-                      var(--color-theme-03),
-                      var(--color-theme-04),
-                      var(--color-theme-05),
-                      var(--color-theme-06),
-                      var(--color-theme-07)
-      );
-    }
-  }
-}
-
-@property --slide-var {
-  syntax: '<length>';
-  inherits: false;
-  initial-value: 0px;
-}
-
-
-.classicyProgressIndeterminate {
-  @keyframes stripeSlide {
-    from {
-      --slide-var: 0px;
-    }
-    to {
-      --slide-var: 40px;
-    }
-  }
-
-  progress[value] {
-    &::-webkit-progress-value {
-      animation: stripeSlide 3s linear infinite;
-      animation-play-state: running;
-      background-image: repeating-linear-gradient(
-                      45deg,
-                      white var(--slide-var),
-                      white calc(var(--slide-var) + 10px),
-                      var(--color-theme-04) calc(var(--slide-var) + 10px),
-                      var(--color-theme-04) calc(var(--slide-var) + 20px)
-      ) !important;
-      mask: linear-gradient(0deg, var(--color-black), white, var(--color-black)) luminance;
-    }
-  }
-}

package/src/SystemFolder/SystemResources/ProgressBar/ClassicyProgressBar.tsx

@@ -1,29 +0,0 @@
-import './ClassicyProgressBar.scss'
-import classNames from 'classnames'
-import React from 'react'
-
-interface ClassicyProgressProps {
-    value?: number
-    max?: number
-    indeterminate?: boolean
-}
-
-const ClassicyProgressBar: React.FC<ClassicyProgressProps> = ({ max = 100, value = 0, indeterminate }) => {
-    if (indeterminate) {
-        max = 100
-        value = 100
-    }
-
-    return (
-        <div
-            className={classNames(
-                "classicyProgress",
-                indeterminate
-                    ? "classicyProgressIndeterminate"
-                    : "classicyProgressDeterminate"
-            )}
-        >
-            <progress max={max} value={value} />
-        </div>
-    )
-}

package/src/SystemFolder/SystemResources/QuickTime/QuickTimeMovieEmbed.scss

@@ -1,217 +0,0 @@
-@use '../../ControlPanels/AppearanceManager/styles/appearance';
-
-.quickTimePlayerVideoHolder {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  @include appearance.no-select;
-}
-
-.quickTimePlayerWrapper {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: calc(100% - var(--window-control-size) * 1);
-  min-height: calc(var(--window-control-size) * 1.5);
-}
-
-.quickTimePlayerVideoControlsHolder {
-  @include appearance.no-select;
-  bottom: calc(var(--window-border-size) * 1);
-  display: flex;
-  width: calc(100% - var(--window-control-size) * 2);
-
-  height: calc(var(--window-control-size) * 1.5);
-  margin-bottom: calc(var(--window-padding-size) - var(--window-border-size));
-  background: var(--color-system-03);
-  justify-items: center;
-}
-
-.quickTimePlayerVideoControlsTime {
-  font-family: var(--ui-font), sans-serif;
-  font-size: calc(var(--ui-font-size) * .85);
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: center;
-  height: calc(var(--window-control-size) * 1.5);
-  margin: 0;
-  padding: 0 var(--window-padding-size);
-  @include appearance.platinumWindowUndepressable;
-  border: 0;
-  border-radius: 0;
-  aspect-ratio: 1/1 !important;
-
-}
-
-.quickTimePlayerVideoControlsButton {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: center;
-  height: calc(var(--window-control-size) * 1.5);
-  margin: 0;
-  padding: 0;
-  @include appearance.platinumWindowDepressable;
-  border: 0;
-  border-radius: 0;
-  aspect-ratio: 1/1 !important;
-
-  img {
-    filter: drop-shadow(var(--window-border-size) var(--window-border-size) 0px rgba(0, 0, 0, 0.5));
-  }
-}
-
-.quickTimePlayerVideoControlsIcon {
-  width: calc(var(--window-control-size) * .875);
-  height: calc(var(--window-control-size) * .875);
-}
-
-.quickTimePlayerVideoControlsPlayIcon {
-}
-
-.quickTimePlayerVideoControlsProgressBarHolder {
-  flex-grow: 1;
-  @include appearance.platinumWindowDepressable;
-  width: auto;
-  border-radius: 0;
-}
-
-.quickTimePlayerVideoControlsVolumeBar {
-  position: absolute;
-  z-index: 999;
-  bottom: calc(var(--window-control-size) * 1.5);
-  width: calc(var(--window-control-size) * 1.5);
-  height: calc(var(--window-control-size) * 5);
-  margin-top: calc(var(--window-control-size) * 1.75);
-  margin-right: calc(var(--window-control-size) * -1.75);
-  padding: var(--window-border-size);
-  background: transparent; /* Otherwise white in Chrome */
-  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
-  writing-mode: vertical-rl;
-}
-
-.quickTimePlayerVideoControlsProgressBar {
-  width: 100%;
-  height: calc(var(--window-control-size) * 1.25);
-  background: transparent; /* Otherwise white in Chrome */
-  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
-}
-
-.quickTimePlayerVideoControlsProgressBar::-webkit-slider-thumb, .quickTimePlayerVideoControlsVolumeBar::-webkit-slider-thumb {
-  -webkit-appearance: none;
-}
-
-.quickTimePlayerVideoControlsProgressBar:focus, .quickTimePlayerVideoControlsVolumeBar:focus {
-  border-color: transparent;
-  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
-}
-
-.quickTimePlayerVideoControlsProgressBar::-ms-track, .quickTimePlayerVideoControlsVolumeBar::-ms-track {
-  /* Hides the slider so custom styles can be added */
-  cursor: pointer;
-  color: transparent;
-}
-
-.quickTimePlayerVideoControlsProgressBar::-webkit-slider-thumb, .quickTimePlayerVideoControlsVolumeBar::-webkit-slider-thumb {
-  width: calc(var(--window-control-size) * 1.25);
-  height: calc(var(--window-control-size) * 1.5);
-  margin-top: calc(var(--window-control-size) * -0.5);
-  margin-left: calc(var(--window-control-size) * -0.25);
-  cursor: pointer;
-  background: url('./thumb-slider.svg') no-repeat;
-  background-size: contain;
-  filter: drop-shadow(
-                  var(--window-border-size) var(--window-border-size) var(--window-border-size) var(--color-system-06)
-  );
-  -webkit-appearance: none;
-}
-
-.quickTimePlayerVideoControlsVolumeBar::-webkit-slider-thumb {
-  width: calc(var(--window-control-size) * 1.5);
-  height: calc(var(--window-control-size) * 1);
-  margin-top: 0;
-  margin-right: calc(var(--window-control-size) * -0.25);
-  margin-left: 0;
-  background: url('./volume-slider.svg') no-repeat;
-}
-
-.quickTimePlayerVideoControlsVolumeBar::-webkit-slider-runnable-track {
-  //height: calc(var(--window-control-size) * 0.825);
-  width: calc(var(--window-control-size) * 1);
-  height: calc(var(--window-control-size) * 1.5);
-  margin-top: calc(var(--window-control-size) * 0.25);
-  margin-right: calc(var(--window-padding-size) * .5);
-  margin-left: calc(var(--window-padding-size) * .75);
-  cursor: pointer;
-  border: 1px solid var(--color-theme-04);
-  background: transparent;
-  box-shadow: inset var(--window-border-size) var(--window-border-size) var(--window-border-size) var(--color-theme-04),
-  inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) var(--window-border-size) var(--color-theme-06);
-}
-
-.quickTimePlayerVideoControlsVolumeBar:focus::-webkit-slider-runnable-track {
-  background: var(--color-theme-02);
-}
-
-.quickTimePlayerVideoControlsVolumeBar {
-  background: var(--color-system-03);
-  @include appearance.platinumWindowInnerBoxShadow;
-}
-
-
-.quickTimePlayerVideoControlsProgressBar::-webkit-slider-runnable-track {
-  height: calc(var(--window-control-size) * 0.75);
-  margin-top: calc(var(--window-control-size) * -0.25);
-  margin-right: calc(var(--window-padding-size) * 1);
-  margin-left: calc(var(--window-padding-size) * 0.5);
-  cursor: pointer;
-  border: 1px solid var(--color-theme-04);
-  background: transparent;
-  box-shadow: inset var(--window-border-size) var(--window-border-size) var(--window-border-size) var(--color-theme-04),
-  inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) var(--window-border-size) var(--color-theme-06);
-}
-
-.quickTimePlayerVideoControlsProgressBar:focus::-webkit-slider-runnable-track {
-  background: var(--color-theme-02);
-}
-
-.quickTimePlayerCaptionsHolder {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-}
-
-.quickTimePlayerCaptionsHolderLeft {
-  align-items: flex-start;
-}
-
-.quickTimePlayerCaptionsHolderRight {
-  align-items: flex-end;
-}
-
-.quickTimePlayerCaptionsHolderCenter {
-  align-items: center;
-}
-
-.quickTimePlayerCaptionsHolderTop {
-  justify-content: start;
-}
-
-.quickTimePlayerCaptionsHolderBottom {
-  justify-content: end;
-}
-
-.quickTimePlayerCaptions {
-  font-family: var(--ui-font), sans-serif;
-  width: auto;
-  margin: var(--window-padding-size);
-  padding: var(--window-padding-size);
-  color: var(--color-theme-01);
-  background-color: var(--color-system-07);
-  text-shadow: 0px 0 3px var(--color-theme-05);
-  filter: saturate(500%) contrast(2);
-}