Skip to content

Commit 929928d

Browse files
pomberpomber
committed
Better mini-editor tabs
1 parent 2b068de commit 929928d

File tree

6 files changed

+65
-77
lines changed

6 files changed

+65
-77
lines changed

‎external/new-react-website‎

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@
88
},
99
"scripts": {
1010
"build": "lerna run --stream x -- build",
11-
"watch": "lerna run --since HEAD --parallel x -- watch",
11+
"watch": "lerna run --since HEAD --exclude-dependents --parallel x -- watch",
1212
"watch-package": "lerna run --scope @*/mini-frame --include-dependencies --parallel x -- watch",
1313
"watch-all": "lerna run --parallel x -- watch",
1414
"storybook": "lerna run --scope storybook start --stream",
15+
"dev": "lerna run --scope react-website dev --stream",
1516
"release": "auto shipit"
1617
},
1718
"devDependencies": {

‎packages/mini-editor/src/editor-frame.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ function EditorFrame({
3838
files={files}
3939
active={active}
4040
button={button}
41-
classes={classes}
4241
/>
4342
}
4443
classes={classes}
@@ -55,13 +54,11 @@ type TabsContainerProps = {
5554
files: string[]
5655
active: string
5756
button?: React.ReactNode
58-
classes?: Classes
5957
}
6058
function TabsContainer({
6159
files,
6260
active,
6361
button,
64-
classes,
6562
}: TabsContainerProps) {
6663
const c = useClasser("ch-editor-tab")
6764
return (
@@ -70,6 +67,7 @@ function TabsContainer({
7067
{files.map(fileName => (
7168
<div
7269
key={fileName}
70+
title={fileName}
7371
className={c(
7472
"",
7573
fileName === active ? "active" : "inactive"

‎packages/mini-editor/src/index.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
border-right: 1px solid rgb(37, 37, 38);
88
width: 120px;
99
min-width: fit-content;
10-
flex-shrink: 0;
10+
flex-shrink: 1;
1111
position: relative;
1212
display: flex;
1313
white-space: nowrap;
@@ -18,11 +18,13 @@
1818
padding-right: 15px;
1919
background-color: rgb(45, 45, 45);
2020
color: rgba(255, 255, 255, 0.5);
21+
min-width: 0;
2122
}
2223

2324
.ch-editor-tab-active {
2425
background-color: rgb(30, 30, 30);
2526
color: rgb(255, 255, 255);
27+
min-width: unset;
2628
}
2729

2830
.ch-editor-tab > div {
@@ -31,6 +33,7 @@
3133
font-size: 12px;
3234
line-height: 1.4em;
3335
text-overflow: ellipsis;
36+
overflow: hidden;
3437
}
3538

3639
/** body */

‎packages/storybook/src/mini-editor.story.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -280,6 +280,63 @@ function CodeSandboxIcon() {
280280
)
281281
}
282282

283+
export const manyTabs = () => {
284+
return (
285+
<Page>
286+
<h2>Three tabs</h2>
287+
<MiniEditor
288+
style={{ height: 200 }}
289+
lang="js"
290+
file="index.js"
291+
steps={[{ code: code1 }]}
292+
progress={0}
293+
tabs={["index.js", "two.css", "three.html"]}
294+
/>
295+
<h2>With button</h2>
296+
<MiniEditor
297+
style={{ height: 200 }}
298+
lang="js"
299+
file="index.js"
300+
steps={[{ code: code1 }]}
301+
progress={0}
302+
tabs={["index.js", "two.css", "three.html"]}
303+
button={<CodeSandboxIcon />}
304+
/>
305+
<h2>Long name</h2>
306+
<MiniEditor
307+
style={{ height: 200 }}
308+
lang="js"
309+
file="index-with-long-name.js"
310+
steps={[{ code: code1 }]}
311+
progress={0}
312+
tabs={[
313+
"index-with-long-name.js",
314+
"two.css",
315+
"three.html",
316+
]}
317+
button={<CodeSandboxIcon />}
318+
/>
319+
<h2>Six tabs</h2>
320+
<MiniEditor
321+
style={{ height: 200 }}
322+
lang="js"
323+
file="two.js"
324+
steps={[{ code: code1 }]}
325+
progress={0}
326+
tabs={[
327+
"index.js",
328+
"two.js",
329+
"three.html",
330+
"four.js",
331+
"five.css",
332+
"six.html",
333+
]}
334+
button={<CodeSandboxIcon />}
335+
/>
336+
</Page>
337+
)
338+
}
339+
283340
export const x = () => {
284341
return (
285342
<WithProgress length={xprops.steps.length}>

‎yarn.lock‎

Lines changed: 0 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1602,19 +1602,6 @@
16021602
exec-sh "^0.3.2"
16031603
minimist "^1.2.0"
16041604

1605-
"@code-hike/classer@0.0.0-4333a8b":
1606-
version "0.0.0-4333a8b"
1607-
resolved "https://registry.yarnpkg.com/@code-hike/classer/-/classer-0.0.0-4333a8b.tgz#4e2bb3a304453b5ebcc8fdfaa976f4f2467016a6"
1608-
integrity sha512-mMrpIUZuI9X2kwpA9iGvO8zobC5ygYMCpieqvGKLAhZ8Tk+SZJW/i8AMPAqMPt0nGeG4TiEa9spKSVsnID+iTw==
1609-
1610-
"@code-hike/code-diff@0.0.0-4333a8b":
1611-
version "0.0.0-4333a8b"
1612-
resolved "https://registry.yarnpkg.com/@code-hike/code-diff/-/code-diff-0.0.0-4333a8b.tgz#cf88546357a181103658d7d46721a8f8185e76d8"
1613-
integrity sha512-CNuaeVywnz4+FLQv7ogDfhzgqgOmbbDwCA4FwFFMCscDk39hw+LdcOrY+f2OFk1A/Q75gS9s3TRl4eH94VBIng==
1614-
dependencies:
1615-
diff "^4.0.2"
1616-
prismjs "^1.22.0"
1617-
16181605
"@code-hike/code-diff@0.0.0-6a7ffe8":
16191606
version "0.0.0-6a7ffe8"
16201607
resolved "https://registry.yarnpkg.com/@code-hike/code-diff/-/code-diff-0.0.0-6a7ffe8.tgz#b5c635bc013abdd71f6503dc3b6cb17a9978bd7c"
@@ -1623,34 +1610,13 @@
16231610
diff "^4.0.2"
16241611
prismjs "^1.22.0"
16251612

1626-
"@code-hike/mini-browser@0.0.0-4333a8b":
1627-
version "0.0.0-4333a8b"
1628-
resolved "https://registry.yarnpkg.com/@code-hike/mini-browser/-/mini-browser-0.0.0-4333a8b.tgz#fb1cb2e5e96e002cc866d89f6c0f129ed0376c0e"
1629-
integrity sha512-QImpj5/M2HzdKlY/3Fc8+Vz8tqw+UNpsrEgtoXsSDGYJdoL6TnVBYpn/5R99FtYPNs62nRn8+jHtYIITXYtNfQ==
1630-
dependencies:
1631-
"@code-hike/classer" "0.0.0-4333a8b"
1632-
"@code-hike/mini-frame" "0.0.0-4333a8b"
1633-
use-spring "^0.2.3"
1634-
16351613
"@code-hike/mini-browser@0.0.0-6a7ffe8":
16361614
version "0.0.0-6a7ffe8"
16371615
resolved "https://registry.yarnpkg.com/@code-hike/mini-browser/-/mini-browser-0.0.0-6a7ffe8.tgz#9f15f984b8abc28354ba2f036ce394100310de8f"
16381616
integrity sha512-SwxCbz7kJFVaGixQtv+NT/VTf7ZeDUI4AIhqzGCC1EyGAHxnc2dKkM4qsHITOUFARQYVRipDJ4jeffudP/RzGg==
16391617
dependencies:
16401618
"@code-hike/mini-frame" "0.0.0-6a7ffe8"
16411619

1642-
"@code-hike/mini-editor@0.0.0-4333a8b":
1643-
version "0.0.0-4333a8b"
1644-
resolved "https://registry.yarnpkg.com/@code-hike/mini-editor/-/mini-editor-0.0.0-4333a8b.tgz#0c6f66edf84e33222dbfbf8f662928bf56c6eceb"
1645-
integrity sha512-uMb9dK6JklllNEwzKU3tFxUG2J0+DIivX2d6xeICUugBLXBcQH9fPQzWudBR9zK3qBDzIYyvrj+ZrvY7qgnaNw==
1646-
dependencies:
1647-
"@code-hike/classer" "0.0.0-4333a8b"
1648-
"@code-hike/code-diff" "0.0.0-4333a8b"
1649-
"@code-hike/mini-frame" "0.0.0-4333a8b"
1650-
"@code-hike/mini-terminal" "0.0.0-4333a8b"
1651-
"@code-hike/smooth-lines" "0.0.0-4333a8b"
1652-
use-spring "^0.2.3"
1653-
16541620
"@code-hike/mini-editor@0.0.0-6a7ffe8":
16551621
version "0.0.0-6a7ffe8"
16561622
resolved "https://registry.yarnpkg.com/@code-hike/mini-editor/-/mini-editor-0.0.0-6a7ffe8.tgz#0c08c8f49c7c5d30687e075d3005c83f6a27d08f"
@@ -1661,60 +1627,23 @@
16611627
"@code-hike/mini-terminal" "0.0.0-6a7ffe8"
16621628
"@code-hike/smooth-lines" "0.0.0-6a7ffe8"
16631629

1664-
"@code-hike/mini-frame@0.0.0-4333a8b":
1665-
version "0.0.0-4333a8b"
1666-
resolved "https://registry.yarnpkg.com/@code-hike/mini-frame/-/mini-frame-0.0.0-4333a8b.tgz#92068b8da326ebbd6a77fae2d7d92f10d35fc985"
1667-
integrity sha512-5yr4LZAqMpHtOm3ASkQNdo7aYJ1SlZ94f/trqQD9bMTuwaTH0zmywoL6yg1LMUBkyhnHs9aZ4mbNaLFyrdsJ6Q==
1668-
dependencies:
1669-
"@code-hike/classer" "0.0.0-4333a8b"
1670-
16711630
"@code-hike/mini-frame@0.0.0-6a7ffe8":
16721631
version "0.0.0-6a7ffe8"
16731632
resolved "https://registry.yarnpkg.com/@code-hike/mini-frame/-/mini-frame-0.0.0-6a7ffe8.tgz#f757e7c39ea33b656249eda2af8a29b18f0d8f65"
16741633
integrity sha512-DVlpgTIRirsTqr2yZnDDTt70i1yDgKYOgPtst3oQk8AOnlZSHs17FhBE0/EnsHjdNqOTQLkJfikRo10/bOBd+Q==
16751634

1676-
"@code-hike/mini-terminal@0.0.0-4333a8b":
1677-
version "0.0.0-4333a8b"
1678-
resolved "https://registry.yarnpkg.com/@code-hike/mini-terminal/-/mini-terminal-0.0.0-4333a8b.tgz#43f86d206e19dc4a99ecd0db9573550509c0cf20"
1679-
integrity sha512-y8T6KF06b2z8dnivzN7m16FC3CQr0CYfTnR7M1FtEqg0hkkUMYffJPT18tjiw9JSVVHSJ/Gdg6k75+BJZKD2lw==
1680-
dependencies:
1681-
"@code-hike/mini-frame" "0.0.0-4333a8b"
1682-
16831635
"@code-hike/mini-terminal@0.0.0-6a7ffe8":
16841636
version "0.0.0-6a7ffe8"
16851637
resolved "https://registry.yarnpkg.com/@code-hike/mini-terminal/-/mini-terminal-0.0.0-6a7ffe8.tgz#ba9ba33ca29f87e627de9831beb6605bd002f15b"
16861638
integrity sha512-th2XgOl+WlOvDie4b3ot/q0KK/vP6anlItN+ZOIOrN0t276rLOBhRDDpceR6boH2p9k3cLMEllbxDIWIJ+jDGw==
16871639
dependencies:
16881640
"@code-hike/mini-frame" "0.0.0-6a7ffe8"
16891641

1690-
"@code-hike/scroller@0.0.0-4333a8b":
1691-
version "0.0.0-4333a8b"
1692-
resolved "https://registry.yarnpkg.com/@code-hike/scroller/-/scroller-0.0.0-4333a8b.tgz#07a0c8a6981bb593441d581fb3952205beb8ba74"
1693-
integrity sha512-0ToJiEPWZM+5swz6+GSYi3NU4dZycgPfQE5rwJ3NbupqMhICt8eGzSfrdoEaQVyFnZgAbSW4kE8r0eU+TY9dHA==
1694-
16951642
"@code-hike/scroller@0.0.0-6a7ffe8":
16961643
version "0.0.0-6a7ffe8"
16971644
resolved "https://registry.yarnpkg.com/@code-hike/scroller/-/scroller-0.0.0-6a7ffe8.tgz#670f61a88083be803da7fea12fab81e6e5cc8506"
16981645
integrity sha512-Xpmgq6MaWHD/PZ52va299HDF47TrlHQot7T9E1R/xxIvVZs9YWrwRb66z3Nzp3fQMNboXLFaJu6TZovT8nv+rQ==
16991646

1700-
"@code-hike/scrollycoding@0.0.0-4333a8b":
1701-
version "0.0.0-4333a8b"
1702-
resolved "https://registry.yarnpkg.com/@code-hike/scrollycoding/-/scrollycoding-0.0.0-4333a8b.tgz#6942887e71a7c36912d8756fcd49a30f714b291b"
1703-
integrity sha512-ZkpUqT0+0hj6NKX26aWCcKj+sE/8mWgXWKlBEpkUPkFtykonAfyM0z2z7s0FtqSrAhMnDNqCPhRJdTQUdoW8nA==
1704-
dependencies:
1705-
"@code-hike/classer" "0.0.0-4333a8b"
1706-
"@code-hike/mini-browser" "0.0.0-4333a8b"
1707-
"@code-hike/mini-editor" "0.0.0-4333a8b"
1708-
"@code-hike/scroller" "0.0.0-4333a8b"
1709-
object-hash "^2.1.1"
1710-
react-smooshpack "1.0.0-alpha-31"
1711-
server-side-media-queries-for-react "^0.0.5"
1712-
1713-
"@code-hike/smooth-lines@0.0.0-4333a8b":
1714-
version "0.0.0-4333a8b"
1715-
resolved "https://registry.yarnpkg.com/@code-hike/smooth-lines/-/smooth-lines-0.0.0-4333a8b.tgz#131533ec7d3fbdbb23c116a788a84342fafd9ed1"
1716-
integrity sha512-V4Q/2PVUbdEyeIhcAlVz23sbag6pKObv/L9JDkRM7GB0sVIA/7X3akPOLXpH82KVVMuq6h6dZvoOSk4FzPxAUA==
1717-
17181647
"@code-hike/smooth-lines@0.0.0-6a7ffe8":
17191648
version "0.0.0-6a7ffe8"
17201649
resolved "https://registry.yarnpkg.com/@code-hike/smooth-lines/-/smooth-lines-0.0.0-6a7ffe8.tgz#6e7bba8a2b8650e33b595553cdc00460b2d7b9df"

0 commit comments

Comments
 (0)