Skip to content

Commit

Permalink
Improve UI Styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@ben-rogerson
ben-rogerson committed Feb 26, 2024
1 parent 93ae0d0 commit d828a6a
Show file tree
Hide file tree
Showing 9 changed files with 147 additions and 195 deletions.
9 changes: 8 additions & 1 deletion src/components/Detail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,19 @@ import { type VirtuosoHandle } from 'react-virtuoso'
import { Editors } from '@/feature/editor/components/Editors'
import { GroupSet } from '@/components/GroupSet'
import type { Group } from '@/utils/types'
import { useAppActions } from '@/hooks/appState'

const Detail = (props: { group?: Group; activeEditors: Group['editors'] }) => {
const { getConfig } = useAppActions()
const virtualListRef = useRef<VirtuosoHandle>(null)

return (
<div>
<div className="grid gap-5">
{props.activeEditors.length > 0 && (
<div className="text-xl text-muted">
<span className="capitalize">{getConfig().iconSetType}</span> set
</div>
)}
{!!props.group && (
<GroupSet
id={props.group.id}
Expand Down
41 changes: 9 additions & 32 deletions src/components/GroupSet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export function Menu(props: {
groupId: string
createdAt: number
hasIcons: boolean
isLarge: boolean
}) {
const { removeGroup } = useAppActions()
const { toast } = useToast()
Expand All @@ -67,7 +68,11 @@ export function Menu(props: {
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button type="button" aria-label="More options">
<MoreVertical />
<MoreVertical
className={cn('text-muted hover:text-primary', {
'h-10 w-10': props.isLarge,
})}
/>
</button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56" align="end">
Expand Down Expand Up @@ -146,18 +151,15 @@ const Header: FunctionComponent<{
)}
/>
</div>
{/* <div className="flex justify-end gap-10"> */}
{/* <div>View spritesheet</div> */}
<div className="flex">
<Menu
groupId={props.id}
createdAt={props.createdAt}
title={props.title}
hasIcons={props.hasIcons}
isLarge={props.isLarge}
/>
{/* <RemoveButton onClick={() => props.removeGroup(props.id)} /> */}
</div>
{/* </div> */}
</header>
</div>
)
Expand Down Expand Up @@ -232,25 +234,6 @@ export const GroupSet = memo(function GroupSet(props: GroupSetBlock) {
{props.count === 1 ? 'icon' : 'icons'}
</div>
</div>
{/* <Guides /> */}

{/* {props.icons.map(([id, data], i) => (
<button
// eslint-disable-next-line react/no-array-index-key
key={`${i}-${id}`}
type="button"
className="pointer-events-auto relative z-10"
onClick={() => {
setActiveIcon(props.id, data.title, id);
}}
>
<div
dangerouslySetInnerHTML={{ __html: data.svg.output }}
className="relative z-10 rounded border border-transparent p-5 hover:border-[--text-muted] hover:shadow-sm"
/>
<Guides />
</button>
))} */}

{props.isHeader && props.virtualListRef ? (
<IconListDraggable
Expand Down Expand Up @@ -278,8 +261,7 @@ export const GroupSet = memo(function GroupSet(props: GroupSetBlock) {
}}
className={tw(
'absolute inset-0 z-0 cursor-pointer rounded border opacity-0',
'hover:opacity-50 group-focus-within:opacity-50 group-hover:opacity-50'
// props.isCurrent && 'opacity-50'
'hover:opacity-100 group-focus-within:opacity-100 group-hover:opacity-100'
)}
/>
</SheetClose>
Expand Down Expand Up @@ -319,12 +301,7 @@ const IconListDraggable = (props: {
useSensor(PointerSensor, { activationConstraint: { distance: 8 } })
)

const setActiveIcon = (
groupId: string,
// title: string,
// editorId: string,
index: number
) => {
const setActiveIcon = (groupId: string, index: number) => {
setActiveGroup(groupId)

props.virtualListRef.current?.scrollToIndex({
Expand Down
22 changes: 3 additions & 19 deletions src/components/RemoveButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { crossIcon } from '@/lib/icons'
import { tw } from '@/lib/utils'
import { type FunctionComponent, type MouseEventHandler } from 'react'

export const RemoveButton: FunctionComponent<{
Expand All @@ -10,25 +9,10 @@ export const RemoveButton: FunctionComponent<{
onClick={props.onClick}
type="button"
aria-label="Remove editor"
className={tw([
'group/button',
'group-hover/editor:grid group-hover/set:grid',
'relative z-30 hidden h-10 w-10 place-items-center',
])}
className="group/button relative z-30 hidden h-10 w-10 place-items-center group-hover/editor:grid group-hover/set:grid"
>
<div
className={tw([
'group-hover/button:bg-[var(--button-bg-hover)]',
'absolute inset-0 rounded-full bg-transparent',
])}
/>
<div
className={tw([
'text-[--button-text]',
'group-hover/button:text-[--button-text-hover]',
'text-md pointer-events-none relative z-0',
])}
>
<div className="absolute inset-0 rounded-full bg-transparent group-hover/button:bg-[var(--button-bg-hover)]" />
<div className="pointer-events-none relative z-0 text-[1.75em] text-[--button-text] group-hover/button:text-[--button-text-hover]">
{crossIcon}
</div>
</button>
Expand Down
180 changes: 82 additions & 98 deletions src/feature/config/components/ConfigPanel.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable vitest/no-commented-out-tests */
import { beforeEach, describe, expect, it } from 'vitest'
import {
render,
Expand Down Expand Up @@ -220,102 +221,85 @@ describe('<ConfigPanel />', () => {
})
})

describe('common for all modes', () => {
// const openDropdownByName = async (reg: RegExp) => {
// const container = screen.getByRole<HTMLButtonElement>("combobox", {
// name: reg,
// });
// expect(container).toHaveAttribute("aria-expanded", "false");
// // A click event doesn't activate the dropdown for some reason - some JS trickery?
// container.focus();
// await userEvent.keyboard("[Space]");
// expect(container).toHaveAttribute("aria-expanded", "true");
// };

describe('stroke linecap', () => {
const setup = () => {
render(<ConfigPanel activeEditors={[]} />)
// await openDropdownByName(/linecap/i);

const container = within(screen.getByTestId('control-stroke-linecap'))
const element = container.getByRole<HTMLButtonElement>('combobox')
const { result } = renderHook(() => useAppActions())
return { container, element, state: result.current }
}

it('has default value', () => {
const { container, element, state } = setup()

expect(container.getByLabelText(/linecap/i)).toBeVisible()
expect(element).toHaveTextContent('round')
expect(element.getAttribute('aria-expanded')).toBe('false')
expect(state.getConfig().strokeLinecap).toBe('round')
})

it('can be updated', async () => {
const { element, state } = setup()

expect(element.getAttribute('aria-expanded')).toBe('false')

expect(element.getAttribute('aria-expanded')).toBe('false')
expect(element).not.toHaveFocus()
expect(state.getConfig().strokeLinecap).toBe('round')

// Focus menu and hits arrow down to "open the menu"
element.focus()
await userEvent.keyboard('[ArrowDown]')
expect(element.getAttribute('aria-expanded')).toBe('true')
expect(state.getConfig().strokeLinecap).toBe('round')

// Select the menu item at the bottom
await userEvent.keyboard('[ArrowDown][ArrowDown][ArrowDown][Enter]')
expect(element.getAttribute('aria-expanded')).toBe('false')
expect(element.textContent).toBe('square')
expect(state.getConfig().strokeLinecap).toBe('square')
})
})

describe('stroke linejoin', () => {
const setup = () => {
render(<ConfigPanel activeEditors={[]} />)
// await openDropdownByName(/stroke options/i);

const container = within(screen.getByTestId('control-stroke-linejoin'))
const element = container.getByRole<HTMLButtonElement>('combobox')
const { result } = renderHook(() => useAppActions())
return { container, element, state: result.current }
}

it('has default value', () => {
const { container, element, state } = setup()
expect(container.getByLabelText(/linejoin/i)).toBeVisible()
expect(element.textContent).toBe('round')
expect(element.getAttribute('aria-expanded')).toBe('false')
expect(state.getConfig().strokeLinejoin).toBe('round')
})

it('can be updated', async () => {
const { element, state } = setup()

expect(element.getAttribute('aria-expanded')).toBe('false')

// Focus menu then un-focus doesn't update state
expect(element.getAttribute('aria-expanded')).toBe('false')
expect(element).not.toHaveFocus()
expect(state.getConfig().strokeLinejoin).toBe('round')

// Focus menu and hits arrow down to "open the menu"
element.focus()
await userEvent.keyboard('[ArrowUp]')
expect(element.getAttribute('aria-expanded')).toBe('true')
expect(state.getConfig().strokeLinejoin).toBe('round')

// Select the menu item at the bottom
await userEvent.keyboard('[ArrowUp][ArrowUp][ArrowUp][Enter]')
expect(element.getAttribute('aria-expanded')).toBe('false')
expect(element.textContent).toBe('bevel')
expect(state.getConfig().strokeLinejoin).toBe('bevel')
})
})
})
// describe('common for all modes', () => {
// const openDropdownByName = async (reg: RegExp) => {
// const container = screen.getByRole<HTMLButtonElement>("combobox", {
// name: reg,
// });
// expect(container).toHaveAttribute("aria-expanded", "false");
// // A click event doesn't activate the dropdown for some reason - some JS trickery?
// container.focus();
// await userEvent.keyboard("[Space]");
// expect(container).toHaveAttribute("aria-expanded", "true");
// };
// describe('stroke linecap', () => {
// const setup = () => {
// render(<ConfigPanel activeEditors={[]} />)
// // await openDropdownByName(/linecap/i);
// const container = within(screen.getByTestId('control-stroke-linecap'))
// const element = container.getByRole<HTMLButtonElement>('combobox')
// const { result } = renderHook(() => useAppActions())
// return { container, element, state: result.current }
// }
// it('has default value', () => {
// const { container, element, state } = setup()
// expect(container.getByLabelText(/linecap/i)).toBeVisible()
// expect(element).toHaveTextContent('round')
// expect(element.getAttribute('aria-expanded')).toBe('false')
// expect(state.getConfig().strokeLinecap).toBe('round')
// })
// it('can be updated', async () => {
// const { element, state } = setup()
// expect(element.getAttribute('aria-expanded')).toBe('false')
// expect(element.getAttribute('aria-expanded')).toBe('false')
// expect(element).not.toHaveFocus()
// expect(state.getConfig().strokeLinecap).toBe('round')
// // Focus menu and hits arrow down to "open the menu"
// element.focus()
// await userEvent.keyboard('[ArrowDown]')
// expect(element.getAttribute('aria-expanded')).toBe('true')
// expect(state.getConfig().strokeLinecap).toBe('round')
// // Select the menu item at the bottom
// await userEvent.keyboard('[ArrowDown][ArrowDown][ArrowDown][Enter]')
// expect(element.getAttribute('aria-expanded')).toBe('false')
// expect(element.textContent).toBe('square')
// expect(state.getConfig().strokeLinecap).toBe('square')
// })
// })
// describe('stroke linejoin', () => {
// const setup = () => {
// render(<ConfigPanel activeEditors={[]} />)
// // await openDropdownByName(/stroke options/i);
// const container = within(screen.getByTestId('control-stroke-linejoin'))
// const element = container.getByRole<HTMLButtonElement>('combobox')
// const { result } = renderHook(() => useAppActions())
// return { container, element, state: result.current }
// }
// it('has default value', () => {
// const { container, element, state } = setup()
// expect(container.getByLabelText(/linejoin/i)).toBeVisible()
// expect(element.textContent).toBe('round')
// expect(element.getAttribute('aria-expanded')).toBe('false')
// expect(state.getConfig().strokeLinejoin).toBe('round')
// })
// it('can be updated', async () => {
// const { element, state } = setup()
// expect(element.getAttribute('aria-expanded')).toBe('false')
// // Focus menu then un-focus doesn't update state
// expect(element.getAttribute('aria-expanded')).toBe('false')
// expect(element).not.toHaveFocus()
// expect(state.getConfig().strokeLinejoin).toBe('round')
// // Focus menu and hits arrow down to "open the menu"
// element.focus()
// await userEvent.keyboard('[ArrowUp]')
// expect(element.getAttribute('aria-expanded')).toBe('true')
// expect(state.getConfig().strokeLinejoin).toBe('round')
// // Select the menu item at the bottom
// await userEvent.keyboard('[ArrowUp][ArrowUp][ArrowUp][Enter]')
// expect(element.getAttribute('aria-expanded')).toBe('false')
// expect(element.textContent).toBe('bevel')
// expect(state.getConfig().strokeLinejoin).toBe('bevel')
// })
// })
// })
})

0 comments on commit d828a6a

Please sign in to comment.