Skip to content

Commit 75065ea

Browse files
aeagleaeagle
committed
Demo revisions
1 parent 4c07185 commit 75065ea

File tree

4 files changed

+108
-4
lines changed

4 files changed

+108
-4
lines changed

‎demo/src/ui-demo/CodeEditor.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
.bottom-pane {
1818
.spaces-resize-handle {
19-
background-color: #333 !important;
19+
border-top: 2px #333 solid;
2020
}
2121

2222
button {

‎demo/src/ui-demo/CodeEditor.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ const IconPane = () => {
8181

8282
const SideBar : React.FC<{ wide: boolean, visible: boolean }> = (props) => {
8383
return (
84-
<Space.LeftResizable order={2} className="side-bar" size={props.visible ? (props.wide ? 500 : 300) : 0} handleSize={2} overlayHandle={false} style={{ backgroundColor: '#252526' }}>
84+
<Space.LeftResizable order={2} className="side-bar" size={props.visible ? (props.wide ? 500 : 300) : 0} handleSize={20} overlayHandle={true} style={{ backgroundColor: '#252526' }}>
8585
<SideBarPane order={1} title="Open editors" height={200}>
8686

8787
</SideBarPane>
@@ -116,7 +116,7 @@ const SideBarPaneInner: React.FC<{ title: string }> = (props) => {
116116
{props.title}
117117
</Space.CenteredVertically>
118118
</Space.Top>
119-
<Space.Fill className="content">
119+
<Space.Fill className="content" style={{ backgroundColor: '#1f1f1f' }}>
120120
{props.children}
121121
</Space.Fill>
122122
</>
@@ -125,7 +125,7 @@ const SideBarPaneInner: React.FC<{ title: string }> = (props) => {
125125

126126
const BottomPane : React.FC<{ toggleVisibility: () => void, toggleSize: () => void }> = (props) => {
127127
return (
128-
<Space.BottomResizable className="bottom-pane" size={60} handleSize={2} centerContent={Space.CenterType.HorizontalVertical}>
128+
<Space.BottomResizable className="bottom-pane" size={60} handleSize={20} centerContent={Space.CenterType.HorizontalVertical}>
129129
<button onClick={props.toggleVisibility}>Toggle sidebar visibility</button>
130130
<button onClick={props.toggleSize}>Toggle sidebar size</button>
131131
</Space.BottomResizable>

‎demo/src/ui-demo/Pinnable.tsx‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import React from 'react';
2+
import * as Space from 'react-spaces';
3+
4+
export const Pinnable = () => {
5+
const [leftOpen, setLeftOpen] = React.useState(false);
6+
const [leftPinned, setLeftPinned] = React.useState(false);
7+
const [rightOpen, setRightOpen] = React.useState(false);
8+
const [rightPinned, setRightPinned] = React.useState(false);
9+
10+
return (
11+
<>
12+
<Space.Fill>
13+
<Space.LeftResizable
14+
order={1}
15+
size={leftOpen ? "25%" : 50}
16+
zIndex={leftPinned ? 1 : 2}
17+
style={{ background: "yellow", opacity: 0.8 }}
18+
>
19+
<Space.Top size={40} centerContent={Space.CenterType.HorizontalVertical}>
20+
<button onClick={() => setLeftOpen(prev => !prev)}>
21+
{leftOpen ? "Close" : "Open"}
22+
</button>
23+
{leftOpen && (
24+
<button onClick={() => setLeftPinned(prev => !prev)}>
25+
{leftPinned ? "Unpin" : "Pin"}
26+
</button>
27+
)}
28+
</Space.Top>
29+
<Space.Fill style={{ padding: 10 }}>
30+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab incidunt
31+
commodi id doloremque inventore laudantium maxime saepe veritatis,
32+
dolorem labore magnam. Quod, tempore inventore omnis doloremque
33+
accusantium commodi ratione dignissimos eos doloribus aliquid
34+
quibusdam officiis qui porro neque modi, fugiat iusto suscipit
35+
perspiciatis? Corporis, necessitatibus quia soluta illum perferendis
36+
beatae.
37+
</Space.Fill>
38+
</Space.LeftResizable>
39+
<Space.Left
40+
zIndex={1}
41+
order={2}
42+
size="25%"
43+
style={{ background: "orange" }}
44+
>
45+
<Space.Top size={40} />
46+
<Space.Fill style={{ padding: 10 }}>
47+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod a,
48+
facilis qui perspiciatis excepturi culpa! Vero sit eum nobis itaque
49+
nemo culpa sed quasi recusandae, voluptatum, debitis dolores qui dolor
50+
libero ipsam minima animi voluptates! Ad excepturi modi eius velit,
51+
debitis impedit maxime voluptates consequatur rem dolore nesciunt,
52+
earum cum.
53+
</Space.Fill>
54+
</Space.Left>
55+
<Space.Fill zIndex={1} style={{ background: "pink" }}>
56+
<Space.Top size={40} />
57+
<Space.Fill style={{ padding: 10 }}>
58+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo dicta
59+
dolore nisi veniam maiores iusto magnam fuga facere ipsum, recusandae,
60+
reprehenderit quasi illum sequi doloribus molestias. Consectetur qui
61+
unde dolore odio similique quidem perferendis, eligendi sequi
62+
recusandae explicabo. Excepturi ratione molestias et temporibus
63+
perferendis vitae ab voluptatum repellat corporis assumenda.
64+
</Space.Fill>
65+
</Space.Fill>
66+
<Space.Right
67+
size={rightOpen ? "25%" : 50}
68+
zIndex={rightPinned ? 1 : 2}
69+
style={{ background: "lime", opacity: 0.8 }}
70+
>
71+
<Space.Top size={40} centerContent={Space.CenterType.HorizontalVertical}>
72+
<button onClick={() => setRightOpen(prev => !prev)}>
73+
{rightOpen ? "Close" : "Open"}
74+
</button>
75+
{rightOpen && (
76+
<button onClick={() => setRightPinned(prev => !prev)}>
77+
{rightPinned ? "Unpin" : "Pin"}
78+
</button>
79+
)}
80+
</Space.Top>
81+
<Space.Fill style={{ padding: 10 }}>
82+
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure,
83+
inventore! Deserunt quasi hic atque natus quod totam. Quia molestias
84+
obcaecati quibusdam illum sint dolorem doloremque eos unde natus
85+
nesciunt officia corrupti recusandae ipsam, accusamus, sed amet optio
86+
numquam minima eaque inventore enim esse. Natus saepe laboriosam dolor
87+
magnam at illo.
88+
</Space.Fill>
89+
</Space.Right>
90+
</Space.Fill>
91+
</>
92+
);
93+
};

‎demo/src/ui-demo/UI.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Resizable } from './Resizable';
77
import { ScrollableDemo } from './Scrollable';
88
import { LayersDemo } from './Layers';
99
import { WindowsDemo } from './Windows';
10+
import { Pinnable } from './Pinnable';
1011

1112
export const UI = () => {
1213
const [ selectedDemo, setSelectedDemo ] = React.useState("resizable");
@@ -81,6 +82,15 @@ const DemoSelection = (props: {
8182
</span>
8283
</a>
8384
</li>
85+
<li className={props.selectedDemo === "pinnable" ? "active" : undefined}>
86+
<a onClick={() => props.setSelectedDemo("pinnable" )}>
87+
Pinnable
88+
<span>
89+
Pinnable anchored spaces using a combination of layers and
90+
anchored spaces.
91+
</span>
92+
</a>
93+
</li>
8494
</ul>
8595
</Space.Fill>
8696
<Space.Bottom size={60} className="tools">
@@ -121,6 +131,7 @@ const Main = (props: { selectedDemo: string, showSpaces: boolean }) => {
121131
{ props.selectedDemo === "layers" ? <LayersDemo /> : null }
122132
{ props.selectedDemo === "windows" ? <WindowsDemo /> : null }
123133
{ props.selectedDemo === "codeeditor" ? <CodeEditor /> : null }
134+
{ props.selectedDemo === "pinnable" ? <Pinnable /> : null }
124135
</Space.Fill>
125136
)
126137
}

0 commit comments

Comments
 (0)