Skip to content

Commit

Permalink
fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Specy
Specy committed Apr 16, 2024
1 parent cc44fae commit a00d290
Show file tree
Hide file tree
Showing 14 changed files with 78 additions and 140 deletions.
17 changes: 4 additions & 13 deletions src/components/pages/Composer/ComposerCanvas.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
import isMobile from "is-mobile"
import {ComposerCache} from "$cmp/pages/Composer/ComposerCache"
import {APP_NAME} from "$config"
import Memoized from '$cmp/shared/Utility/Memoized';
import {MemoizedIcon} from '$cmp/shared/Utility/Memoized';
import {ThemeProvider} from '$stores/ThemeStore/ThemeProvider';
import {clamp, colorToRGB, nearestEven} from '$lib/utils/Utilities';
import type {NoteColumn} from '$lib/Songs/SongClasses';
Expand Down Expand Up @@ -501,9 +501,7 @@ export default class ComposerCanvas extends Component<ComposerCanvasProps, Compo
}}
ariaLabel='Previous Breakpoint'
>
<Memoized>
<FaStepBackward size={16}/>
</Memoized>
<MemoizedIcon icon={FaStepBackward} size={16}/>
</TimelineButton>
<TimelineButton
onClick={() => this.handleBreakpoints(1)}
Expand All @@ -514,9 +512,7 @@ export default class ComposerCanvas extends Component<ComposerCanvasProps, Compo
}}
ariaLabel='Next Breakpoint'
>
<Memoized>
<FaStepForward size={16}/>
</Memoized>
<MemoizedIcon icon={FaStepForward} size={16}/>
</TimelineButton>

<div className='timeline-scroll' style={{backgroundColor: theme.timeline.hex}}>
Expand Down Expand Up @@ -591,12 +587,7 @@ export default class ComposerCanvas extends Component<ComposerCanvasProps, Compo
tooltip={isBreakpointSelected ? 'Remove breakpoint' : 'Add breakpoint'}
ariaLabel={isBreakpointSelected ? 'Remove breakpoint' : 'Add breakpoint'}
>
<Memoized>
{isBreakpointSelected
? <FaMinusCircle key='minus' size={16}/>
: <FaPlusCircle key='plus' size={16}/>
}
</Memoized>
<MemoizedIcon icon={isBreakpointSelected ? FaMinusCircle : FaPlusCircle} size={16}/>
</TimelineButton>
</div>
</div>
Expand Down
26 changes: 8 additions & 18 deletions src/components/pages/Composer/ComposerMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {APP_NAME} from '$config'
import {MenuButton, MenuItem} from '$cmp/shared/Menu/MenuItem'
import {MenuPanel, MenuPanelWrapper} from '$cmp/shared/Menu/MenuPanel'
import DonateButton from '$cmp/shared/Miscellaneous/DonateButton'
import Memoized from '$cmp/shared/Utility/Memoized';
import Memoized, {MemoizedIcon} from '$cmp/shared/Utility/Memoized';
import Analytics from '$lib/Analytics';
import {logger} from '$stores/LoggerStore';
import {AppButton} from '$cmp/shared/Inputs/AppButton';
Expand Down Expand Up @@ -186,45 +186,35 @@ function Menu({data, functions, inPreview}: MenuProps) {
visible={isVisible}
>
<div className="hamburger" onClick={() => setVisible(!isVisible)}>
<Memoized>
<FaBars/>
</Memoized>
<MemoizedIcon icon={FaBars}/>
</div>
<MenuSidebar>
<MenuButton onClick={() => toggleMenu()} className='close-menu' ariaLabel='Close menu'>
<FaTimes className="icon"/>
<MemoizedIcon icon={FaTimes} className={'icon'}/>
</MenuButton>
<MenuButton
onClick={updateThisSong}
className={data.hasChanges ? "not-saved" : ""}
ariaLabel='Save'
style={{marginTop: 'auto'}}
>
<Memoized>
<FaSave className="icon"/>
</Memoized>
<MemoizedIcon icon={FaSave} className={'icon'}/>
</MenuButton>
<MenuItem id={"Songs"} ariaLabel='Song menu'>
<Memoized>
<FaMusic className="icon"/>
</Memoized>
<MemoizedIcon icon={FaSave} className={'icon'}/>
</MenuItem>
<MenuItem id={"Settings"} ariaLabel='Settings menu'>
<Memoized>
<FaCog className="icon"/>
</Memoized>
<MemoizedIcon icon={FaCog} className={'icon'}/>
</MenuItem>
<MenuButton
onClick={() => changePage('Home')}
ariaLabel='Open home menu'
style={{border: "solid 0.1rem var(--secondary)"}}
>
<Memoized>
<FaHome className="icon"/>
</Memoized>
<MemoizedIcon icon={FaHome} className={'icon'}/>
</MenuButton>
</MenuSidebar>
<MenuPanelWrapper>
<MenuPanelWrapper style={inPreview ? {position: 'absolute'}: {}}>
<MenuPanel id="Songs">
<div className="songs-buttons-wrapper">
<HelpTooltip>
Expand Down
14 changes: 3 additions & 11 deletions src/components/pages/Player/PlayerMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,15 +144,6 @@ function Menu({functions, data, inPreview}: MenuProps) {
const newState = override !== null ? override : !isOpen
setOpen(newState)
}
const selectSideMenu = (selection?: MenuTabs) => {
if (selection === selectedMenu && isOpen) {
return setOpen(false)
}
clearSearch()
if (selection) setSelectedMenu(selection)
setOpen(true)
Analytics.UIEvent('menu', {tab: selection})
}
const importSong = async (files: FileElement<SerializedSong[] | SerializedSong>[]) => {
for (const file of files) {
try {
Expand Down Expand Up @@ -241,8 +232,9 @@ function Menu({functions, data, inPreview}: MenuProps) {
setOpen={setOpen}
visible={true}
ref={menuRef}

>
<MenuSidebar>
<MenuSidebar opacity={'0.9'}>
{isOpen &&
<MenuButton onClick={toggleMenu} className='close-menu' ariaLabel='Close menu'>
<FaTimes className="icon"/>
Expand All @@ -268,7 +260,7 @@ function Menu({functions, data, inPreview}: MenuProps) {
<FaHome className="icon"/>
</MenuButton>
</MenuSidebar>
<MenuPanelWrapper>
<MenuPanelWrapper style={inPreview ? {position: 'absolute'} : {}}>
<MenuPanel title="No selection" id='No selection'>
Select a menu
</MenuPanel>
Expand Down
10 changes: 3 additions & 7 deletions src/components/pages/Player/PlayerSongControls.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {SPEED_CHANGERS} from "$config"
import Memoized from "$cmp/shared/Utility/Memoized";
import Memoized, {MemoizedIcon} from "$cmp/shared/Utility/Memoized";
import {FaStop, FaSyncAlt} from "react-icons/fa";
import {ChangeEvent, memo} from "react";
import {playerStore} from "$stores/PlayerStore";
Expand Down Expand Up @@ -84,17 +84,13 @@ function _PlayerSongControls({
tooltip='Stop'
ariaLabel="Stop song"
>
<Memoized>
<FaStop/>
</Memoized>
<MemoizedIcon icon={FaStop}/>
</IconButton>
</div>
<PlayerSlider/>

<IconButton onClick={onRestart} tooltip='Restart' ariaLabel="Restart song">
<Memoized>
<FaSyncAlt/>
</Memoized>
<MemoizedIcon icon={FaSyncAlt}/>
</IconButton>
</div>

Expand Down
37 changes: 15 additions & 22 deletions src/components/pages/VsrgComposer/VsrgComposerMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {SettingsPane} from "$cmp/shared/Settings/SettingsPane";
import {asyncConfirm} from "$cmp/shared/Utility/AsyncPrompts";
import {FloatingDropdown, FloatingDropdownRow, FloatingDropdownText} from "$cmp/shared/Utility/FloatingDropdown";
import {HelpTooltip} from "$cmp/shared/Utility/HelpTooltip";
import Memoized from "$cmp/shared/Utility/Memoized";
import {MemoizedIcon} from "$cmp/shared/Utility/Memoized";
import {hasTooltip, Tooltip} from "$cmp/shared/Utility/Tooltip";
import {VsrgComposerSettingsDataType} from "$lib/BaseSettings";
import {Folder} from "$lib/Folder";
Expand Down Expand Up @@ -95,53 +95,46 @@ function VsrgMenu({
visible={isVisible}
>
<div className="hamburger vsrg-hamburger" onClick={() => setVisible(!isVisible)}>
<Memoized>
<FaBars/>
</Memoized>
<MemoizedIcon icon={FaBars}/>
</div>
<MenuSidebar>
<MenuButton onClick={() => setVisible(!isVisible)} className='close-menu' ariaLabel='Close menu'>
<FaTimes className="icon"/>
<MemoizedIcon icon={FaTimes} className={'icon'}/>
</MenuButton>
<MenuButton
onClick={onSave}
style={{marginTop: 'auto'}}
className={hasChanges ? "not-saved" : ""}
ariaLabel='Save'
>
<Memoized>
<FaSave className="icon"/>
</Memoized>
<MemoizedIcon icon={FaSave} className={'icon'}/>
</MenuButton>
<MenuItem
id={'Help'}
ariaLabel='Help'
>
<Memoized>
<FaQuestion className="icon"/>
</Memoized>
<MemoizedIcon icon={FaQuestion} className={'icon'}/>
</MenuItem>
<MenuItem
id={'Songs'}
ariaLabel='Song menu'
>
<Memoized>
<FaMusic className="icon"/>
</Memoized>
<MemoizedIcon icon={FaMusic} className={'icon'}/>
</MenuItem>
<MenuItem
id={'Settings'}
ariaLabel='Settings menu'
>
<Memoized>
<FaCog className="icon"/>
</Memoized>
<MemoizedIcon icon={FaCog} className={'icon'}/>

</MenuItem>
<MenuButton onClick={homeStore.open} ariaLabel='Open home menu'
style={{border: "solid 0.1rem var(--secondary)"}}>
<Memoized>
<FaHome className="icon"/>
</Memoized>
<MenuButton
onClick={homeStore.open}
ariaLabel='Open home menu'
style={{border: "solid 0.1rem var(--secondary)"}}
>
<MemoizedIcon icon={FaHome} className={'icon'}/>

</MenuButton>
</MenuSidebar>
<MenuPanelWrapper>
Expand Down
19 changes: 5 additions & 14 deletions src/components/pages/VsrgComposer/VsrgTop.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {APP_NAME} from "$config"
import Color from "color"
import {AppButton} from "$cmp/shared/Inputs/AppButton"
import Memoized from "$cmp/shared/Utility/Memoized"
import Memoized, {MemoizedIcon} from "$cmp/shared/Utility/Memoized"
import {useTheme} from "$lib/Hooks/useTheme"
import {VsrgHitObject, VsrgSong, VsrgTrack} from "$lib/Songs/VsrgSong"
import {useEffect, useState} from "react"
Expand Down Expand Up @@ -63,25 +63,16 @@ export function VsrgTop({
}
<Row align={'center'} className="vsrg-breakpoints-buttons" style={{marginBottom: '0.4rem'}}>
<AppButton style={{marginLeft: 0}} onClick={() => onBreakpointSelect(-1)}>
<Memoized>
<FaStepBackward/>
</Memoized>
<MemoizedIcon icon={FaStepBackward}/>
</AppButton>
<AppButton onClick={() => onBreakpointChange(true)}>
<Memoized>
<FaMinus/>
</Memoized>
<MemoizedIcon icon={FaMinus}/>
</AppButton>
<AppButton onClick={() => onBreakpointChange(false)}>
<Memoized>
<FaPlus/>
</Memoized>
<MemoizedIcon icon={FaPlus}/>
</AppButton>
<AppButton onClick={() => onBreakpointSelect(1)}>
<Memoized>
<FaStepForward/>

</Memoized>
<MemoizedIcon icon={FaStepForward}/>
</AppButton>
</Row>
<div className="vsrg-track-wrapper column">
Expand Down
20 changes: 6 additions & 14 deletions src/components/pages/VsrgPlayer/VsrgPlayerMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {MenuButton, MenuItem} from "$cmp/shared/Menu/MenuItem";
import {SettingsPane} from "$cmp/shared/Settings/SettingsPane";
import {asyncConfirm} from "$cmp/shared/Utility/AsyncPrompts";
import {FloatingDropdown, FloatingDropdownRow, FloatingDropdownText} from "$cmp/shared/Utility/FloatingDropdown";
import Memoized from "$cmp/shared/Utility/Memoized";
import Memoized, {MemoizedIcon} from "$cmp/shared/Utility/Memoized";
import {hasTooltip, Tooltip} from "$cmp/shared/Utility/Tooltip";
import {VsrgPlayerSettingsDataType} from "$lib/BaseSettings";
import {Folder} from "$lib/Folder";
Expand Down Expand Up @@ -74,9 +74,7 @@ function VsrgMenu({onSongSelect, settings, onSettingsUpdate}: VsrgMenuProps) {
className="hamburger-top"
onClick={() => setIsVisible(true)}
>
<Memoized>
<FaBars/>
</Memoized>
<MemoizedIcon icon={FaBars}/>
</div>
<MenuSidebar>
<MenuButton
Expand All @@ -85,31 +83,25 @@ function VsrgMenu({onSongSelect, settings, onSettingsUpdate}: VsrgMenuProps) {
}}
ariaLabel="Close MenuContext"
>
<FaTimes className='icon'/>
<MemoizedIcon icon={FaTimes} className={'icon'}/>
</MenuButton>
<MenuItem
style={{marginTop: 'auto'}}
id={'Songs'}
ariaLabel='Song menu'
>
<Memoized>
<FaMusic className="icon"/>
</Memoized>
<MemoizedIcon icon={FaMusic} className={'icon'}/>
</MenuItem>

<MenuItem id={'Settings'} ariaLabel='Settings menu'>
<Memoized>
<FaCog className="icon"/>
</Memoized>
<MemoizedIcon icon={FaCog} className={'icon'}/>
</MenuItem>
<MenuButton
onClick={homeStore.open}
ariaLabel='Open home menu'
style={{border: "solid 0.1rem var(--secondary)"}}
>
<Memoized>
<FaHome className="icon"/>
</Memoized>
<MemoizedIcon icon={FaHome} className={'icon'}/>
</MenuButton>
</MenuSidebar>
<MenuPanelWrapper>
Expand Down
10 changes: 3 additions & 7 deletions src/components/pages/VsrgPlayer/VsrgPlayerRight.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {IconButton} from "$cmp/shared/Inputs/IconButton";
import Memoized from "$cmp/shared/Utility/Memoized";
import {MemoizedIcon} from "$cmp/shared/Utility/Memoized";
import {VsrgSong} from "$lib/Songs/VsrgSong";
import {FaStop, FaSyncAlt} from "react-icons/fa";
import {VsrgPlayerScore} from "./VsrgPlayerScore";
Expand All @@ -18,14 +18,10 @@ export function VsrgPlayerRight({song, onStopSong, onRetrySong}: VsrgPlayerRight
<div className={s['vsrg-player-right']}>
<div className="row space-between" style={{gap: '0.2rem'}}>
<IconButton onClick={onStopSong}>
<Memoized>
<FaStop/>
</Memoized>
<MemoizedIcon icon={FaStop}/>
</IconButton>
<IconButton onClick={onRetrySong}>
<Memoized>
<FaSyncAlt/>
</Memoized>
<MemoizedIcon icon={FaSyncAlt}/>
</IconButton>
</div>
</div>
Expand Down
Loading

0 comments on commit a00d290

Please sign in to comment.