Skip to content

Commit 66c6cbb

Browse files
thetarnavthetarnav
committed
Remove solid-headless and improve the menu
Adds sponsor links
1 parent cb58921 commit 66c6cbb

File tree

6 files changed

+146
-94
lines changed

6 files changed

+146
-94
lines changed

‎.changeset/popular-wolves-drive.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@solid-devtools/frontend": patch
3+
---
4+
5+
Improve top-right menu (add sponsor link and nicer styles)

‎packages/frontend/package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,7 @@
5656
"@solid-primitives/styles": "^0.0.114",
5757
"@solid-primitives/timer": "^1.3.10",
5858
"@solid-primitives/utils": "^6.2.3",
59-
"clsx": "^2.1.1",
60-
"solid-headless": "^0.13.1"
59+
"clsx": "^2.1.1"
6160
},
6261
"peerDependencies": {
6362
"solid-js": "^1.9.0"

‎packages/frontend/src/App.tsx‎

Lines changed: 100 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -3,70 +3,7 @@ import * as theme from '@solid-devtools/shared/theme'
33
import * as ui from './ui/index.ts'
44
import {createSidePanel} from './SidePanel.tsx'
55
import {StructureView} from './structure.tsx'
6-
// TODO: replace solid-headless
7-
// @ts-expect-error
8-
import {Menu, MenuItem, Popover, PopoverButton, PopoverPanel} from 'solid-headless'
96

10-
// const MainViewTabs: Component = () => {
11-
// const { view } = useController()
12-
13-
// return (
14-
// <button
15-
// style={{
16-
// margin: '0 10px',
17-
// padding: '5px 10px',
18-
// border: '1px solid #fff',
19-
// 'border-radius': '5px',
20-
// cursor: 'pointer',
21-
// }}
22-
// onClick={() => {
23-
// view.set(
24-
// view.get() === DevtoolsMainView.Structure
25-
// ? DevtoolsMainView.Dgraph
26-
// : DevtoolsMainView.Structure,
27-
// )
28-
// }}
29-
// >
30-
// View: {view.get().toUpperCase()}
31-
// </button>
32-
// )
33-
// }
34-
35-
const Options: s.Component = () => {
36-
return (
37-
<Popover defaultOpen={false} class="relative ml-auto">
38-
{(popover: any) => (
39-
<>
40-
<PopoverButton
41-
onKeyDown={(e: KeyboardEvent) => e.key === ' ' && popover.setState(true)}
42-
class={`${ui.toggle_button} rounded-md ml-auto w-7 h-7`}
43-
>
44-
<ui.Icon.Options class="w-4.5 h-4.5" />
45-
</PopoverButton>
46-
<s.Show when={popover.isOpen()}>
47-
<PopoverPanel
48-
class="absolute z-9999 w-max top-0 right-full mr-2 p-2 rounded-md bg-panel-2 b b-solid b-panel-3"
49-
on:keydown={(e: KeyboardEvent) =>
50-
e.key === 'Escape' && e.stopPropagation()
51-
}
52-
>
53-
<Menu class="flex flex-col items-stretch gap-2">
54-
<MenuItem
55-
as="a"
56-
href="https://github.com/thetarnav/solid-devtools/issues"
57-
target="_blank"
58-
class="text-text"
59-
>
60-
Report a bug
61-
</MenuItem>
62-
</Menu>
63-
</PopoverPanel>
64-
</s.Show>
65-
</>
66-
)}
67-
</Popover>
68-
)
69-
}
707

718
export const App: s.Component<{headerSubtitle?: s.JSX.Element}> = props => {
729
// side panel is created here to keep the state between renders
@@ -105,3 +42,103 @@ export const App: s.Component<{headerSubtitle?: s.JSX.Element}> = props => {
10542
</div>
10643
)
10744
}
45+
46+
const Options: s.Component = () => {
47+
48+
let details!: HTMLDetailsElement
49+
50+
return (
51+
<details
52+
ref={details}
53+
class="relative ml-auto"
54+
on:focusout={e => {
55+
// Close if focus moves outside the details element
56+
if (!e.currentTarget.contains(e.relatedTarget as Node)) {
57+
details.removeAttribute('open')
58+
}
59+
}}
60+
on:keydown={e => {
61+
switch (e.key) {
62+
case 'Escape':
63+
details.removeAttribute('open')
64+
break
65+
case 'ArrowDown':
66+
case 'ArrowUp': {
67+
e.preventDefault()
68+
let root = details.getRootNode()
69+
if (root instanceof Document || root instanceof ShadowRoot) {
70+
let items = [...details.querySelectorAll('[role="menuitem"]')]
71+
let focused_idx = items.indexOf(root.activeElement!)
72+
let dir = e.key === 'ArrowDown' ? 1 : -1
73+
let next_idx = (focused_idx + dir + items.length) % items.length
74+
let el = items[next_idx]
75+
if (el instanceof HTMLElement) el.focus()
76+
}
77+
break
78+
}
79+
}
80+
}}>
81+
<summary
82+
class={`${ui.toggle_button} rounded-md ml-auto w-7 h-7`}>
83+
<ui.Icon.Options
84+
class="w-4.5 h-4.5"
85+
/>
86+
</summary>
87+
<div
88+
class='absolute z-9999 w-max top-0 right-full mr-2 p-1 rounded-md bg-panel-2 b b-solid b-panel-3'>
89+
<div
90+
role='menu'
91+
class='flex flex-col items-stretch gap-0.5'>
92+
<a
93+
role='menuitem'
94+
tabindex='0'
95+
href='https://github.com/thetarnav/solid-devtools/issues'
96+
target='_blank'
97+
class='
98+
flex items-center gap-1 p-1 rounded-md outline-none
99+
text-text transition-colors hover:bg-orange-500/10 focus:bg-orange-500/10'>
100+
<ui.Icon.Bug class='w-3 h-3 mb-px text-orange-500 dark:text-orange-400' />
101+
Report a bug
102+
</a>
103+
<a
104+
role='menuitem'
105+
tabindex='0'
106+
href='https://github.com/sponsors/thetarnav'
107+
target='_blank'
108+
class='
109+
flex items-center gap-1 p-1 rounded-md outline-none
110+
text-text transition-colors hover:bg-pink-500/10 focus:bg-pink-500/10'>
111+
<ui.Icon.Heart class='w-3 h-3 mb-px text-pink-500 dark:text-pink-400' />
112+
Support the project
113+
</a>
114+
</div>
115+
</div>
116+
</details>
117+
)
118+
}
119+
120+
121+
// const MainViewTabs: Component = () => {
122+
// const { view } = useController()
123+
124+
// return (
125+
// <button
126+
// style={{
127+
// margin: '0 10px',
128+
// padding: '5px 10px',
129+
// border: '1px solid #fff',
130+
// 'border-radius': '5px',
131+
// cursor: 'pointer',
132+
// }}
133+
// onClick={() => {
134+
// view.set(
135+
// view.get() === DevtoolsMainView.Structure
136+
// ? DevtoolsMainView.Dgraph
137+
// : DevtoolsMainView.Structure,
138+
// )
139+
// }}
140+
// >
141+
// View: {view.get().toUpperCase()}
142+
// </button>
143+
// )
144+
// }

‎packages/frontend/src/ui/icons.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -628,6 +628,40 @@ const Search: ProxyIconComponent<'Search'> = ({id}) => (
628628
</svg>
629629
)
630630

631+
const Heart: ProxyIconComponent<'Heart'> = ({id}) => (
632+
<svg
633+
id={`sdt_icon_${id}`}
634+
xmlns="http://www.w3.org/2000/svg"
635+
viewBox="0 0 256 256"
636+
fill="none">
637+
<path
638+
fill="none"
639+
stroke="currentColor"
640+
stroke-linecap="round"
641+
stroke-linejoin="round"
642+
stroke-width="16"
643+
d="M178,40c-20.65,0-38.73,8.88-50,23.89C116.73,48.88,98.65,40,78,40a62.07,62.07,0,0,0-62,62c0,70,103.79,126.66,108.21,129a8,8,0,0,0,7.58,0C136.21,228.66,240,172,240,102A62.07,62.07,0,0,0,178,40ZM128,214.8C109.74,204.16,32,155.69,32,102A46.06,46.06,0,0,1,78,56c19.45,0,35.78,10.36,42.6,27a8,8,0,0,0,14.8,0c6.82-16.67,23.15-27,42.6-27a46.06,46.06,0,0,1,46,46C224,155.61,146.24,204.15,128,214.8Z"
644+
/>
645+
</svg>
646+
)
647+
648+
const Bug: ProxyIconComponent<'Bug'> = ({id}) => (
649+
<svg
650+
id={`sdt_icon_${id}`}
651+
xmlns="http://www.w3.org/2000/svg"
652+
viewBox="0 0 256 256"
653+
fill="none">
654+
<path
655+
fill="none"
656+
stroke="currentColor"
657+
stroke-linecap="round"
658+
stroke-linejoin="round"
659+
stroke-width="16"
660+
d="M144,92a12,12,0,1,1,12,12A12,12,0,0,1,144,92ZM100,80a12,12,0,1,0,12,12A12,12,0,0,0,100,80Zm116,64A87.76,87.76,0,0,1,213,167l22.24,9.72A8,8,0,0,1,232,192a7.89,7.89,0,0,1-3.2-.67L207.38,182a88,88,0,0,1-158.76,0L27.2,191.33A7.89,7.89,0,0,1,24,192a8,8,0,0,1-3.2-15.33L43,167A87.76,87.76,0,0,1,40,144v-8H16a8,8,0,0,1,0-16H40v-8a87.76,87.76,0,0,1,3-23L20.8,79.33a8,8,0,1,1,6.4-14.66L48.62,74a88,88,0,0,1,158.76,0l21.42-9.36a8,8,0,0,1,6.4,14.66L213,89.05a87.76,87.76,0,0,1,3,23v8h24a8,8,0,0,1,0,16H216ZM56,120H200v-8a72,72,0,0,0-144,0Zm64,95.54V136H56v8A72.08,72.08,0,0,0,120,215.54ZM200,144v-8H136v79.54A72.08,72.08,0,0,0,200,144Z"
661+
/>
662+
</svg>
663+
)
664+
631665
export const SolidWhite: IconComponent = props => (
632666
<svg viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg" class={props.class}>
633667
<path
@@ -775,6 +809,8 @@ const embedIconComponents = {
775809
Code,
776810
Search,
777811
Graph,
812+
Heart,
813+
Bug,
778814
} as const
779815

780816
const iconComponents = {

‎packages/frontend/src/ui/toggle-button.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,14 +47,13 @@ export const toggle_button_styles = /*css*/ `
4747
`
4848

4949
export const ToggleButton: s.ParentComponent<
50-
s.ComponentProps<'button'> & {onToggle: (selected: boolean) => void; selected: boolean}
50+
s.ComponentProps<'button'> & {onInteract: (selected: boolean) => void; selected: boolean}
5151
> = props => {
52+
5253
props = combineProps(props, {
5354
class: toggle_button,
54-
get 'aria-selected'() {
55-
return props.selected
56-
},
57-
onClick: () => props.onToggle(!props.selected),
55+
get 'aria-selected'() {return props.selected},
56+
onClick() {props.onInteract(!props.selected)},
5857
})
5958

6059
// ! createToggleButton doesn't seems to passing class to buttonProps

‎pnpm-lock.yaml‎

Lines changed: 0 additions & 24 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)