Skip to content

Commit 2d9fb6a

Browse files
huozhihuozhi
committed
[fix] only render indicator when available
1 parent 4e0b112 commit 2d9fb6a

File tree

13 files changed

+235
-1555
lines changed

13 files changed

+235
-1555
lines changed

‎packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.css

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
[data-nextjs-toast] {
2+
&[data-hidden='true'] {
3+
display: none;
4+
}
5+
}
6+
7+
.dev-tools-indicator-menu {
8+
-webkit-font-smoothing: antialiased;
9+
display: flex;
10+
flex-direction: column;
11+
align-items: flex-start;
12+
background: var(--color-background-100);
13+
border: 1px solid var(--color-gray-alpha-400);
14+
background-clip: padding-box;
15+
box-shadow: var(--shadow-menu);
16+
border-radius: var(--rounded-xl);
17+
position: absolute;
18+
font-family: var(--font-stack-sans);
19+
z-index: 3;
20+
overflow: hidden;
21+
opacity: 0;
22+
outline: 0;
23+
min-width: 248px;
24+
transition: opacity var(--animate-out-duration-ms)
25+
var(--animate-out-timing-function);
26+
27+
&[data-rendered='true'] {
28+
opacity: 1;
29+
scale: 1;
30+
}
31+
}
32+
33+
.dev-tools-indicator-inner {
34+
padding: 6px;
35+
width: 100%;
36+
}
37+
38+
.dev-tools-indicator-item {
39+
display: flex;
40+
align-items: center;
41+
padding: 8px 6px;
42+
height: var(--size-36);
43+
border-radius: 6px;
44+
text-decoration: none !important;
45+
user-select: none;
46+
white-space: nowrap;
47+
48+
svg {
49+
width: var(--size-16);
50+
height: var(--size-16);
51+
}
52+
53+
&:focus-visible {
54+
outline: 0;
55+
}
56+
}
57+
58+
.dev-tools-indicator-footer {
59+
background: var(--color-background-200);
60+
padding: 6px;
61+
border-top: 1px solid var(--color-gray-400);
62+
width: 100%;
63+
}
64+
65+
.dev-tools-indicator-item[data-selected='true'] {
66+
cursor: pointer;
67+
background-color: var(--color-gray-200);
68+
}
69+
70+
.dev-tools-indicator-label {
71+
font-size: var(--size-14);
72+
line-height: var(--size-20);
73+
color: var(--color-gray-1000);
74+
}
75+
76+
.dev-tools-indicator-value {
77+
font-size: var(--size-14);
78+
line-height: var(--size-20);
79+
color: var(--color-gray-900);
80+
margin-left: auto;
81+
}
82+
83+
.dev-tools-indicator-issue-count {
84+
--color-primary: var(--color-gray-800);
85+
--color-secondary: var(--color-gray-100);
86+
display: flex;
87+
flex-direction: row;
88+
align-items: center;
89+
justify-content: center;
90+
gap: 8px;
91+
min-width: var(--size-40);
92+
height: var(--size-24);
93+
background: var(--color-background-100);
94+
border: 1px solid var(--color-gray-alpha-400);
95+
background-clip: padding-box;
96+
box-shadow: var(--shadow-small);
97+
padding: 2px;
98+
color: var(--color-gray-1000);
99+
border-radius: 128px;
100+
font-weight: 500;
101+
font-size: var(--size-13);
102+
font-variant-numeric: tabular-nums;
103+
104+
&[data-has-issues='true'] {
105+
--color-primary: var(--color-red-800);
106+
--color-secondary: var(--color-red-100);
107+
}
108+
109+
.dev-tools-indicator-issue-count-indicator {
110+
width: var(--size-8);
111+
height: var(--size-8);
112+
background: var(--color-primary);
113+
box-shadow: 0 0 0 2px var(--color-secondary);
114+
border-radius: 50%;
115+
}
116+
}
117+
118+
.dev-tools-indicator-shortcut {
119+
display: flex;
120+
gap: 4px;
121+
122+
kbd {
123+
width: var(--size-20);
124+
height: var(--size-20);
125+
display: flex;
126+
justify-content: center;
127+
align-items: center;
128+
border-radius: var(--rounded-md);
129+
border: 1px solid var(--color-gray-400);
130+
font-family: var(--font-stack-sans);
131+
background: var(--color-background-100);
132+
color: var(--color-gray-1000);
133+
text-align: center;
134+
font-size: var(--size-12);
135+
line-height: var(--size-16);
136+
}
137+
}
138+
139+
.dev-tools-grabbing {
140+
cursor: grabbing;
141+
142+
> * {
143+
pointer-events: none;
144+
}
145+
}

‎packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.stories.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import type { Meta, StoryObj } from '@storybook/react'
22
import type { OverlayState } from '../../shared'
33

4-
import { DevToolsIndicatorNew } from './devtools-indicator'
4+
import { DevToolsIndicator } from './devtools-indicator'
55
import { INITIAL_OVERLAY_STATE } from '../../shared'
66
import { withShadowPortal } from '../../storybook/with-shadow-portal'
77

8-
const meta: Meta<typeof DevToolsIndicatorNew> = {
9-
component: DevToolsIndicatorNew,
8+
const meta: Meta<typeof DevToolsIndicator> = {
9+
component: DevToolsIndicator,
1010
parameters: {
1111
layout: 'centered',
1212
},
@@ -37,7 +37,7 @@ const meta: Meta<typeof DevToolsIndicatorNew> = {
3737
}
3838

3939
export default meta
40-
type Story = StoryObj<typeof DevToolsIndicatorNew>
40+
type Story = StoryObj<typeof DevToolsIndicator>
4141

4242
const state: OverlayState = {
4343
...INITIAL_OVERLAY_STATE,

‎packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/devtools-indicator.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import './devtools-indicator.css'
12
import type { CSSProperties } from 'react'
2-
3-
import { NextLogoNew } from './next-logo'
3+
import { NextLogo } from './next-logo'
44
import { Toast } from '../toast'
55
import {
66
MENU_CURVE,
@@ -20,7 +20,7 @@ import type { DevToolsIndicatorPosition } from '../errors/dev-tools-indicator/de
2020

2121
export const INDICATOR_PADDING = 20
2222

23-
export function DevToolsIndicatorNew() {
23+
export function DevToolsIndicator() {
2424
const { state, dispatch } = useDevOverlayContext()
2525
const { panel, setPanel, setSelectedIndex } = usePanelRouterContext()
2626
const updateAllPanelPositions = useUpdateAllPanelPositions()
@@ -56,7 +56,7 @@ export function DevToolsIndicatorNew() {
5656
updateAllPanelPositions(p)
5757
}}
5858
>
59-
<NextLogoNew
59+
<NextLogo
6060
onTriggerClick={() => {
6161
const newPanel =
6262
panel === 'panel-selector' ? null : 'panel-selector'

‎packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/next-logo.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Meta, StoryObj } from '@storybook/react'
2-
import { NextLogoNew } from './next-logo'
2+
import { NextLogo } from './next-logo'
33
import { withShadowPortal } from '../../storybook/with-shadow-portal'
44
// TODO(rob): this storybook's configurability is broken intentionally
55
// it will be restored when we wrap it in the storybook context addon https://storybook.js.org/addons/storybook-react-context
@@ -10,7 +10,7 @@ const StoryBookNextLogo = (
1010
isDevRendering: boolean
1111
} & Record<string, unknown>
1212
) => {
13-
return <NextLogoNew onTriggerClick={() => {}} />
13+
return <NextLogo onTriggerClick={() => {}} />
1414
}
1515

1616
const meta: Meta<typeof StoryBookNextLogo> = {

‎packages/next/src/next-devtools/dev-overlay/components/devtools-indicator/next-logo.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { BASE_LOGO_SIZE } from '../../utils/indicator-metrics'
1616

1717
const SHORT_DURATION_MS = 150
1818

19-
export function NextLogoNew({
19+
export function NextLogo({
2020
onTriggerClick,
2121
...buttonProps
2222
}: { onTriggerClick: () => void } & React.ComponentProps<'button'>) {

‎packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/dev-tools-indicator.stories.tsx

Lines changed: 0 additions & 103 deletions
This file was deleted.

0 commit comments

Comments
 (0)