-
Notifications
You must be signed in to change notification settings - Fork 373
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: refactor GUI of DevTools (#4809)
- Loading branch information
Showing
79 changed files
with
1,461 additions
and
1,090 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| { | ||
| "cssVariables.lookupFiles": [ | ||
| "./node_modules/@radix-ui/themes/styles.css", | ||
| "./src/**/*.css", | ||
| "./src/**/*.scss", | ||
| "./src/**/*.sass", | ||
| "./src/**/*.less" | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
9 changes: 9 additions & 0 deletions
9
packages/devtools/client/src/components/Breadcrumbs.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| .link { | ||
| color: var(--gray-10); | ||
| } | ||
|
|
||
| .connector { | ||
| width: var(--font-size-2); | ||
| height: var(--font-size-2); | ||
| color: var(--gray-6); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,43 +1,56 @@ | ||
| import React from 'react'; | ||
| import styled from '@emotion/styled'; | ||
| import { Button, Flex } from '@radix-ui/themes'; | ||
| import React, { ReactNode } from 'react'; | ||
| import _ from 'lodash'; | ||
| import { Flex } from '@radix-ui/themes'; | ||
| import { ChevronRightIcon } from '@radix-ui/react-icons'; | ||
| import type { ButtonProps } from '@radix-ui/themes/dist/cjs/components/button'; | ||
| import type { FlexProps } from '@radix-ui/themes/dist/cjs/components/flex'; | ||
| import { useMatches } from '@modern-js/runtime/router'; | ||
| import styles from './Breadcrumbs.module.scss'; | ||
| import { Link } from './Link'; | ||
|
|
||
| export type BreadcrumbButtonProps = ButtonProps & | ||
| React.RefAttributes<HTMLButtonElement>; | ||
| export type BreadcrumbProps = FlexProps & React.RefAttributes<HTMLDivElement>; | ||
|
|
||
| export const BreadcrumbButton: React.FC<BreadcrumbButtonProps> = props => { | ||
| return <Button color="gray" size="1" variant="ghost" {...props} />; | ||
| }; | ||
| export const Breadcrumbs: React.FC<BreadcrumbProps> = props => { | ||
| const elements: React.ReactElement[] = []; | ||
| const items: { pathname: string; title: ReactNode; id: string }[] = []; | ||
|
|
||
| export interface BreadcrumbsProps { | ||
| children?: React.ReactElement[]; | ||
| } | ||
| for (const match of useMatches()) { | ||
| const raw: unknown = _.get(match, 'handle.breadcrumb'); | ||
| if (!raw) continue; | ||
| const breadcrumbs = _.castArray(raw).filter(_.isObject); | ||
| for (const breadcrumb of breadcrumbs) { | ||
| if (!('title' in breadcrumb)) continue; | ||
| const pathname = | ||
| 'pathname' in breadcrumb && _.isString(breadcrumb.pathname) | ||
| ? breadcrumb.pathname | ||
| : match.pathname; | ||
| items.push({ | ||
| title: breadcrumb.title as any, | ||
| pathname, | ||
| id: match.id, | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ children = [] }) => { | ||
| const elements: React.ReactElement[] = []; | ||
| for (const child of children) { | ||
| elements.push(child); | ||
| if (child !== children.at(-1)) { | ||
| elements.push(<Connector key={`${child.key}__connector`} />); | ||
| for (const [i, item] of Object.entries(items)) { | ||
| const keyParts = [item.id, item.pathname, i]; | ||
| elements.push( | ||
| <Link key={keyParts.join('_')} color="gray" size="2" to={item.pathname}> | ||
| {item.title} | ||
| </Link>, | ||
| ); | ||
| if (item !== items.at(-1)) { | ||
| keyParts.push('#connector'); | ||
| elements.push( | ||
| <ChevronRightIcon | ||
| key={keyParts.join('_')} | ||
| className={styles.connector} | ||
| />, | ||
| ); | ||
| } | ||
| } | ||
| return ( | ||
| <Flex align="center" gap="1"> | ||
| <Flex align="center" height="8" gap="1" px="4" {...props}> | ||
| {elements} | ||
| </Flex> | ||
| ); | ||
| }; | ||
|
|
||
| (Breadcrumbs as any).Button = BreadcrumbButton; | ||
|
|
||
| export default Breadcrumbs as typeof Breadcrumbs & { | ||
| Button: typeof BreadcrumbButton; | ||
| }; | ||
|
|
||
| const Connector = styled(ChevronRightIcon)({ | ||
| width: 'var(--font-size-2)', | ||
| height: 'var(--font-size-2)', | ||
| color: 'var(--gray-6)', | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { | ||
| Link as RouterLink, | ||
| LinkProps as RouterLinkProps, | ||
| } from '@modern-js/runtime/router'; | ||
| import { Link as BaseLink } from '@radix-ui/themes'; | ||
| import type { LinkProps as BaseLinkProps } from '@radix-ui/themes/dist/esm/components/link'; | ||
|
|
||
| // @ts-expect-error | ||
| export interface LinkProps extends BaseLinkProps, RouterLinkProps {} | ||
|
|
||
| export const Link: React.FC<LinkProps> = ({ to, children, ...props }) => ( | ||
| <BaseLink {...props} asChild> | ||
| <RouterLink to={to}>{children}</RouterLink> | ||
| </BaseLink> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { | ||
| NavLink as RouterNavLink, | ||
| NavLinkProps as RouterNavLinkProps, | ||
| } from '@modern-js/runtime/router'; | ||
| import { Link as BaseLink } from '@radix-ui/themes'; | ||
| import type { LinkProps as BaseLinkProps } from '@radix-ui/themes/dist/esm/components/link'; | ||
| import React from 'react'; | ||
|
|
||
| // @ts-expect-error | ||
| export interface NavLinkProps extends RouterNavLinkProps, BaseLinkProps {} | ||
|
|
||
| export const NavLink: React.FC<NavLinkProps> = React.forwardRef( | ||
| ({ to, children, ...props }, ref) => ( | ||
| <BaseLink {...(props as any)} asChild> | ||
| <RouterNavLink ref={ref} to={to}> | ||
| {children} | ||
| </RouterNavLink> | ||
| </BaseLink> | ||
| ), | ||
| ); |
3 changes: 3 additions & 0 deletions
3
packages/devtools/client/src/components/ObjectInspector.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .container { | ||
| font-size: var(--font-size-2); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import React from 'react'; | ||
| import { Select } from '@radix-ui/themes'; | ||
| import { | ||
| NavigateOptions, | ||
| matchPath, | ||
| useLocation, | ||
| useNavigate, | ||
| } from '@modern-js/runtime/router'; | ||
|
|
||
| export interface SelectLinkProps { | ||
| items: { to: string; options?: NavigateOptions; title: string }[]; | ||
| } | ||
|
|
||
| export const SelectLink: React.FC<SelectLinkProps> = ({ items }) => { | ||
| const navigate = useNavigate(); | ||
| const loc = useLocation(); | ||
| const active = items.find(item => matchPath(item.to, loc.pathname)); | ||
|
|
||
| return ( | ||
| <Select.Root size="1" value={active?.to} onValueChange={navigate}> | ||
| <Select.Trigger /> | ||
| <Select.Content position="popper"> | ||
| {items.map(({ title, to }) => ( | ||
| <Select.Item key={to} value={to}> | ||
| {title} | ||
| </Select.Item> | ||
| ))} | ||
| </Select.Content> | ||
| </Select.Root> | ||
| ); | ||
| }; |
70 changes: 70 additions & 0 deletions
70
packages/devtools/client/src/components/ServerRoute/Base.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| .container { | ||
| background-color: var(--gray-1); | ||
| border-radius: var(--radius-2); | ||
| box-shadow: var(--shadow-4); | ||
| } | ||
|
|
||
| .trigger { | ||
| all: unset; | ||
| width: 100%; | ||
| display: flex; | ||
| gap: var(--space-2); | ||
| align-items: center; | ||
| cursor: pointer; | ||
| & * { | ||
| cursor: pointer; | ||
| } | ||
| } | ||
|
|
||
| .content { | ||
| padding-top: var(--space-2); | ||
| overflow: hidden; | ||
| &[data-state='open'] { | ||
| animation: slideDown 150ms ease-out; | ||
| } | ||
| &[data-state='closed'] { | ||
| animation: slideUp 150ms ease-out; | ||
| } | ||
|
|
||
| @keyframes slideDown { | ||
| from { | ||
| height: 0; | ||
| opacity: 0; | ||
| } | ||
| to { | ||
| height: var(--radix-collapsible-content-height); | ||
| opacity: 1; | ||
| } | ||
| } | ||
|
|
||
| @keyframes slideUp { | ||
| from { | ||
| height: var(--radix-collapsible-content-height); | ||
| opacity: 1; | ||
| } | ||
| to { | ||
| height: 0; | ||
| opacity: 0; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .url-text { | ||
| color: var(--gray-12); | ||
| font-size: var(--font-size-2); | ||
| transition: color 200ms; | ||
| } | ||
|
|
||
| .mark { | ||
| height: var(--font-size-5); | ||
| width: var(--font-size-5); | ||
| border-radius: var(--radius-2); | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| transition: background-color 100ms; | ||
| background-color: transparent; | ||
| &[data-open='true'] { | ||
| background-color: var(--gray-4); | ||
| } | ||
| } |
Oops, something went wrong.