Skip to content

Commit a682bd8

Browse files
aeagleaeagle
authored
Merge pull request #25 from aeagle/feature/layers
Feature/layers
2 parents ef6f883 + dcd36d8 commit a682bd8

File tree

20 files changed

+738
-617
lines changed

20 files changed

+738
-617
lines changed

‎demo/package-lock.json‎

Lines changed: 1 addition & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/src/docs/Docs.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { Nested } from './Nested';
1010
import { Scrollable } from './Scrollable';
1111
import { Stacked } from './Stacked';
1212
import { SizingInfo } from './SizingInfo';
13-
import { VersionHistory } from './VersionHistory';
1413
import { Intro } from './Intro';
1514
import { Try } from './Try';
1615
import { KnownIssues } from './KnownIssues';
@@ -36,8 +35,6 @@ export const Docs = () => {
3635
<Menu.Item><a href="#stacked">Stacked</a></Menu.Item>
3736
<Menu.Item><a href="#sizeinfo">Sizing information</a></Menu.Item>
3837
<Menu.Item><a href="#try">Try</a></Menu.Item>
39-
<Menu.Item><a href="#issues">Known issues</a></Menu.Item>
40-
<Menu.Item><a href="#changes">Version history</a></Menu.Item>
4138
</Menu>
4239

4340
<div style={{ padding: 15}}>
@@ -65,7 +62,6 @@ export const Docs = () => {
6562
<SizingInfo />
6663
<Try />
6764
<KnownIssues />
68-
<VersionHistory />
6965

7066
</Space.Fill>
7167

‎demo/src/docs/VersionHistory.tsx‎

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

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

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
.layers-demo {
2+
label {
3+
margin-right: 20px;
4+
}
5+
6+
aside {
7+
opacity: 0.7;
8+
background-color: #e0eeee;
9+
transition: width 0.5s;
10+
11+
.description {
12+
position: relative;
13+
top: -200px;
14+
}
15+
}
16+
17+
section {
18+
opacity: 0.7;
19+
background-color: #e0e0ee;
20+
transition: left 0.5s;
21+
22+
.description {
23+
position: relative;
24+
top: -200px;
25+
}
26+
}
27+
28+
nav {
29+
background-color: #eee0e0;
30+
transition: width 0.5s;
31+
32+
.description {
33+
position: relative;
34+
top: 200px;
35+
}
36+
}
37+
38+
main {
39+
background-color: #eee;
40+
transition: left 0.5s;
41+
opacity: 0.7;
42+
}
43+
44+
.description {
45+
color: black;
46+
font-size: 120%;
47+
padding: 30px;
48+
}
49+
}

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import * as React from 'react';
2+
import * as Space from 'react-spaces';
3+
import './Layers.scss';
4+
5+
export const LayersDemo = () => {
6+
const [ fixedSideBarHovered, setFixedSideBarHovered ] = React.useState(false);
7+
const [ floatingSideBarHovered, setFloatingSideBarHovered ] = React.useState(false);
8+
const [ showLayer1, setShowLayer1 ] = React.useState(true);
9+
const [ showLayer2, setShowLayer2 ] = React.useState(false);
10+
11+
return (
12+
<Space.Fill className="layers-demo">
13+
<Space.Top size={40} centerContent={Space.CenterType.HorizontalVertical}>
14+
<label><input type="checkbox" checked={showLayer1} onChange={e => setShowLayer1(e.target.checked)} /> Show layer 1</label>
15+
<label><input type="checkbox" checked={showLayer2} onChange={e => setShowLayer2(e.target.checked)} /> Show layer 2</label>
16+
</Space.Top>
17+
<Space.Fill>
18+
19+
{ showLayer1 &&
20+
<Space.Layer zIndex={0}>
21+
22+
<Space.Left
23+
id="layer_1_left"
24+
size={fixedSideBarHovered ? "75%" : "60%" }
25+
onMouseEnter={() => setFixedSideBarHovered(true)}
26+
onMouseLeave={() => setFixedSideBarHovered(false)}
27+
as="nav">
28+
{Description("Left fixed (zIndex = 0) - HOVER TO CHANGE SIZE")}
29+
</Space.Left>
30+
31+
<Space.Fill as="main" id="layer_1_main">
32+
{Description("Fill space not affected by floated left space in different layer but is affected by left space in same layer (zIndex = 0)")}
33+
</Space.Fill>
34+
35+
</Space.Layer>
36+
}
37+
38+
{ showLayer2 &&
39+
<Space.Layer zIndex={1}>
40+
41+
<Space.Left
42+
id="layer_2_left"
43+
order={1}
44+
className="layer2"
45+
size={floatingSideBarHovered ? "30%" : "15%" }
46+
onMouseEnter={() => setFloatingSideBarHovered(true)}
47+
onMouseLeave={() => setFloatingSideBarHovered(false)}
48+
as="aside">
49+
{Description("Left floated (zIndex = 1) - HOVER TO CHANGE SIZE")}
50+
</Space.Left>
51+
<Space.Left
52+
id="layer_2_left1"
53+
order={2}
54+
className="layer2"
55+
size="15%"
56+
as="section">
57+
{Description("Left floated (zIndex = 1)")}
58+
</Space.Left>
59+
<Space.Fill
60+
as="main"
61+
className="layer2"
62+
id="layer_2_main">
63+
{Description("Fill space not affected by floated left space in different layer but is affected by left space in same layer (zIndex = 0)")}
64+
</Space.Fill>
65+
66+
</Space.Layer>
67+
}
68+
69+
</Space.Fill>
70+
</Space.Fill>
71+
)
72+
}
73+
74+
const Description = (props: string) => (
75+
<Space.Centered>
76+
<div className="description">
77+
<strong>{props}</strong>
78+
</div>
79+
</Space.Centered>
80+
);

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
.ui-demo {
22
font-family: 'Roboto', sans-serif;
33
font-size: 12px;
4-
color: #c5c5c5;
54

65
.examples-sidebar {
76
h2 {

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

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,11 @@ import './UI.scss';
55
import { CodeEditor } from './CodeEditor';
66
import { Resizable } from './Resizable';
77
import { ScrollableDemo } from './Scrollable';
8+
import { LayersDemo } from './Layers';
9+
import { WindowsDemo } from './Windows';
810

911
export const UI = () => {
10-
const [ selectedDemo, setSelectedDemo ] = React.useState(1);
12+
const [ selectedDemo, setSelectedDemo ] = React.useState("resizable");
1113
const [ showSpaces, setShowSpaces ] = React.useState(false);
1214
const [ sidebarVisible, setSidebarVisible ] = React.useState(true);
1315

@@ -28,8 +30,8 @@ export const UI = () => {
2830
const DemoSelection = (props: {
2931
sidebarVisible: boolean,
3032
setSidebarVisible: (state: boolean) => void,
31-
selectedDemo: number,
32-
setSelectedDemo: (demo: number) => void,
33+
selectedDemo: string,
34+
setSelectedDemo: (demo: string) => void,
3335
showSpaces: boolean,
3436
setShowSpaces: (state: boolean) => void }) => {
3537

@@ -38,24 +40,41 @@ const DemoSelection = (props: {
3840
<Space.LeftResizable className="ui-list" size={300} minimumSize={150} style={{ backgroundColor: '#193549' }}>
3941
<Space.Fill scrollable={true}>
4042
<ul>
41-
<li className={props.selectedDemo === 1 ? "active" : undefined}>
42-
<a onClick={() => props.setSelectedDemo(1)}>
43+
<li className={props.selectedDemo === "resizable" ? "active" : undefined}>
44+
<a onClick={() => props.setSelectedDemo("resizable")}>
4345
Nested / resizable spaces
4446
<span>
4547
Example with nested and resizable spaces
4648
</span>
4749
</a>
4850
</li>
49-
<li className={props.selectedDemo === 2 ? "active" : undefined}>
50-
<a onClick={() => props.setSelectedDemo(2)}>
51+
<li className={props.selectedDemo === "scrollable" ? "active" : undefined}>
52+
<a onClick={() => props.setSelectedDemo("scrollable")}>
5153
Sidebar / header layout
5254
<span>
5355
antd components with a header, sidebar and scrollable main layout
5456
</span>
5557
</a>
5658
</li>
57-
<li className={props.selectedDemo === 3 ? "active" : undefined}>
58-
<a onClick={() => props.setSelectedDemo(3)}>
59+
<li className={props.selectedDemo === "layers" ? "active" : undefined}>
60+
<a onClick={() => props.setSelectedDemo("layers")}>
61+
Layers
62+
<span>
63+
Layered spaces demonstrating hover interaction to create drawer like
64+
elements
65+
</span>
66+
</a>
67+
</li>
68+
<li className={props.selectedDemo === "windows" ? "active" : undefined}>
69+
<a onClick={() => props.setSelectedDemo("windows")}>
70+
Windows
71+
<span>
72+
Positioned spaces used to create resizable / draggable floating windows
73+
</span>
74+
</a>
75+
</li>
76+
<li className={props.selectedDemo === "codeeditor" ? "active" : undefined}>
77+
<a onClick={() => props.setSelectedDemo("codeeditor" )}>
5978
Code editor
6079
<span>
6180
A code editor interface with docked panels, menu bars and tabs
@@ -94,12 +113,14 @@ const DemoSelection = (props: {
94113
)
95114
}
96115

97-
const Main = (props: { selectedDemo: number, showSpaces: boolean }) => {
116+
const Main = (props: { selectedDemo: string, showSpaces: boolean }) => {
98117
return (
99118
<Space.Fill debug={props.showSpaces}>
100-
{ props.selectedDemo === 1 ? <Resizable /> : null }
101-
{ props.selectedDemo === 2 ? <ScrollableDemo /> : null }
102-
{ props.selectedDemo === 3 ? <CodeEditor /> : null }
119+
{ props.selectedDemo === "resizable" ? <Resizable /> : null }
120+
{ props.selectedDemo === "scrollable" ? <ScrollableDemo /> : null }
121+
{ props.selectedDemo === "layers" ? <LayersDemo /> : null }
122+
{ props.selectedDemo === "windows" ? <WindowsDemo /> : null }
123+
{ props.selectedDemo === "codeeditor" ? <CodeEditor /> : null }
103124
</Space.Fill>
104125
)
105126
}

0 commit comments

Comments
 (0)