Skip to content

Commit dcd36d8

Browse files
aeagleaeagle
committed
Merge branch 'feature/positioned' into feature/layers
# Conflicts: # demo/src/ui-demo/Layers.scss # demo/src/ui-demo/Layers.tsx
2 parents 02697e7 + 69eaad7 commit dcd36d8

File tree

18 files changed

+664
-664
lines changed

18 files changed

+664
-664
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: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,27 @@
11
.layers-demo {
2+
label {
3+
margin-right: 20px;
4+
}
5+
26
aside {
37
opacity: 0.7;
48
background-color: #e0eeee;
59
transition: width 0.5s;
610

711
.description {
812
position: relative;
9-
top: -30px;
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;
1025
}
1126
}
1227

@@ -16,17 +31,19 @@
1631

1732
.description {
1833
position: relative;
19-
top: 30px;
34+
top: 200px;
2035
}
2136
}
2237

2338
main {
2439
background-color: #eee;
2540
transition: left 0.5s;
41+
opacity: 0.7;
2642
}
2743

2844
.description {
2945
color: black;
3046
font-size: 120%;
47+
padding: 30px;
3148
}
3249
}

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

Lines changed: 59 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,32 +5,68 @@ import './Layers.scss';
55
export const LayersDemo = () => {
66
const [ fixedSideBarHovered, setFixedSideBarHovered ] = React.useState(false);
77
const [ floatingSideBarHovered, setFloatingSideBarHovered ] = React.useState(false);
8+
const [ showLayer1, setShowLayer1 ] = React.useState(true);
9+
const [ showLayer2, setShowLayer2 ] = React.useState(false);
810

911
return (
1012
<Space.Fill className="layers-demo">
11-
<Space.Layer zIndex={0}>
12-
<Space.Left
13-
size={fixedSideBarHovered ? "40%" : "15%" }
14-
onMouseEnter={() => setFixedSideBarHovered(true)}
15-
onMouseLeave={() => setFixedSideBarHovered(false)}
16-
as="nav">
17-
{Description("Layer 1 left")}
18-
</Space.Left>
19-
20-
<Space.Fill as="main">
21-
{Description("Fill space not affected by floated left space in different layer")}
22-
</Space.Fill>
23-
</Space.Layer>
24-
25-
<Space.Layer zIndex={1}>
26-
<Space.Left
27-
size={floatingSideBarHovered ? "30%" : 50 }
28-
onMouseEnter={() => setFloatingSideBarHovered(true)}
29-
onMouseLeave={() => setFloatingSideBarHovered(false)}
30-
as="aside">
31-
{Description("Layer 2 left")}
32-
</Space.Left>
33-
</Space.Layer>
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>
3470
</Space.Fill>
3571
)
3672
}

‎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 {

0 commit comments

Comments
 (0)