Skip to content

Commit f8f0bc1

Browse files
shepmastershepmaster
committed
Convert Playground to CSS modules
1 parent fd6b67a commit f8f0bc1

File tree

4 files changed

+126
-101
lines changed

4 files changed

+126
-101
lines changed

‎ui/frontend/Output.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,11 @@ interface PaneWithCodeProps extends SimplePaneProps {
4444
code?: string;
4545
}
4646

47-
const Output: React.SFC = () => {
47+
interface OutputProps {
48+
isFocused?: boolean;
49+
}
50+
51+
const Output: React.SFC<OutputProps> = ({ isFocused }) => {
4852
const somethingToShow = useSelector(selectors.getSomethingToShow);
4953
const { meta: { focus }, execute, format, clippy, miri, macroExpansion, assembly, llvmIr, mir, hir, wasm, gist } =
5054
useSelector((state: State) => state.output);
@@ -93,7 +97,7 @@ const Output: React.SFC = () => {
9397
}
9498

9599
return (
96-
<div className="output">
100+
<div className={`output ${isFocused ? 'output--focused' : ''}`}>
97101
<div className="output-tabs">
98102
<Tab kind={Focus.Execute} focus={focus}
99103
label="Execution"

‎ui/frontend/Playground.module.css

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
.container {
2+
display: flex;
3+
height: 100vh;
4+
flex-direction: column;
5+
padding-bottom: 1em;
6+
}
7+
8+
.split {
9+
display: flex;
10+
height: 100%;
11+
}
12+
13+
.splitAutomatic {
14+
composes: split;
15+
}
16+
17+
@media screen and (max-width: 1600px) {
18+
.splitAutomatic {
19+
flex-direction: column;
20+
}
21+
}
22+
23+
@media screen and (min-width: 1600px) {
24+
.splitAutomatic {
25+
flex-direction: row;
26+
}
27+
}
28+
29+
.splitHorizontal {
30+
composes: split;
31+
flex-direction: column;
32+
}
33+
34+
.splitVertical {
35+
composes: split;
36+
flex-direction: row;
37+
}
38+
39+
.splitVertical > * {
40+
/* FIXME: remove this, when the output-rules are 'aware' of the
41+
* orientation (this disables the extra margin-top for the spacing
42+
* between editor and output in the horizontal split mode)
43+
*/
44+
margin-top: -0.2em;
45+
46+
/* for the border of the editor */
47+
margin-bottom: 4px;
48+
49+
/* space between the split */
50+
margin-left: 0.5em;
51+
}
52+
53+
.splitVertical > *:first-child {
54+
/* the first child, i.e. the editor has the border already */
55+
margin-top: 0;
56+
margin-bottom: 0;
57+
margin-left: 0;
58+
}
59+
60+
@media screen and (min-width: 1600px) {
61+
/* automatic vertical */
62+
.splitAutomatic > *:first-child {
63+
/* the first child, i.e. the editor has the border already */
64+
margin-top: 0;
65+
margin-bottom: 0;
66+
margin-left: 0;
67+
}
68+
}
69+
70+
/* automatic vertical */
71+
@media screen and (min-width: 1600px) {
72+
.splitAutomatic > * {
73+
/* FIXME: remove this, when the output-rules are 'aware' of the
74+
* orientation (this disables the extra margin-top for the spacing
75+
* between editor and output in the horizontal split mode)
76+
*/
77+
margin-top: -0.2em;
78+
79+
/* for the border of the editor */
80+
margin-bottom: 4px;
81+
82+
/* space between the split */
83+
margin-left: 0.5em;
84+
}
85+
}
86+
87+
.editor {
88+
position: relative;
89+
flex: 1 1 auto;
90+
border: 4px solid var(--border-color);
91+
border-radius: 4px;
92+
}
93+
94+
.outputFocused {
95+
position: relative;
96+
flex: 1 1 auto;
97+
}

‎ui/frontend/Playground.tsx

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,32 +7,40 @@ import Notifications from './Notifications';
77
import Output from './Output';
88
import * as selectors from './selectors';
99
import State from './state';
10+
import { Orientation } from './types';
11+
12+
import styles from './Playground.module.css';
13+
14+
const ORIENTATION_STYLE_MAP = {
15+
[Orientation.Automatic]: styles.splitAutomatic,
16+
[Orientation.Horizontal]: styles.splitHorizontal,
17+
[Orientation.Vertical]: styles.splitVertical,
18+
}
1019

1120
const Playground: React.SFC = () => {
1221
const showNotifications = useSelector(selectors.anyNotificationsToShowSelector);
1322
const focus = useSelector((state: State) => state.output.meta.focus);
1423
const splitOrientation = useSelector((state: State) => state.configuration.orientation);
1524

16-
const outputFocused = focus ? 'playground-output-focused' : '';
17-
const splitClass = 'playground-split';
18-
const orientation = splitClass + '-' + splitOrientation;
25+
const outputFocused = focus ? styles.outputFocused : '';
26+
const splitClass = ORIENTATION_STYLE_MAP[splitOrientation];
1927

2028
return (
2129
<div>
22-
<div className="playground">
23-
<div className="playground-header">
30+
<div className={styles.container}>
31+
<div>
2432
<Header />
2533
</div>
26-
<div className={`${splitClass} ${orientation}`}>
27-
<div className="playground-editor">
34+
<div className={splitClass}>
35+
<div className={styles.editor}>
2836
<Editor />
2937
</div>
30-
<div className={`playground-output ${outputFocused}`}>
31-
<Output />
38+
<div className={outputFocused}>
39+
<Output isFocused={!!focus} />
3240
</div>
3341
</div>
3442
</div>
35-
{showNotifications && <Notifications />}
43+
{ showNotifications && <Notifications />}
3644
</div>
3745
);
3846
};

‎ui/frontend/index.scss

Lines changed: 5 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -29,26 +29,6 @@ body {
2929
font-family: $primary-font;
3030
}
3131

32-
@mixin split-first-child() {
33-
// the first child, i.e. the editor has the border already
34-
margin-top: 0;
35-
margin-bottom: 0;
36-
margin-left: 0;
37-
}
38-
39-
@mixin split-all-children() {
40-
// space between the split
41-
margin-left: 0.5em;
42-
43-
// FIXME: remove this, when the output-rules are 'aware' of the orientation
44-
// (this disables the extra margin-top for the spacing between editor
45-
// and output in the horizontal split mode)
46-
margin-top: -0.2em;
47-
48-
// for the border of the editor
49-
margin-bottom: 4px;
50-
}
51-
5232
@mixin button-reset {
5333
border: none;
5434
padding: 0;
@@ -67,74 +47,6 @@ body {
6747
color: #0000EE;
6848
}
6949

70-
.playground {
71-
display: flex;
72-
height: 100vh;
73-
flex-direction: column;
74-
75-
padding-bottom: 1em;
76-
77-
&-split {
78-
display: flex;
79-
height: 100%;
80-
81-
&-automatic {
82-
@media screen and (max-width: 1600px) {
83-
flex-direction: column;
84-
}
85-
86-
@media screen and (min-width: 1600px) {
87-
flex-direction: row;
88-
}
89-
}
90-
91-
&-horizontal {
92-
flex-direction: column;
93-
}
94-
95-
&-vertical {
96-
flex-direction: row;
97-
}
98-
99-
&-vertical > *:first-child {
100-
@include split-first-child();
101-
}
102-
103-
// automatic vertical
104-
&-automatic > *:first-child {
105-
@media screen and (min-width: 1600px) {
106-
@include split-first-child();
107-
}
108-
}
109-
110-
&-vertical > * {
111-
@include split-all-children();
112-
}
113-
114-
// automatic vertical
115-
&-automatic > * {
116-
@media screen and (min-width: 1600px) {
117-
@include split-all-children();
118-
}
119-
}
120-
}
121-
122-
&-editor {
123-
flex: 1 1 auto;
124-
position: relative;
125-
126-
border: 4px solid $border-color;
127-
border-radius: 4px;
128-
}
129-
130-
&-output {
131-
&-focused {
132-
flex: 1 1 auto;
133-
position: relative;
134-
}
135-
}
136-
}
137-
13850
@mixin body-monospace {
13951
font-size: 0.9em;
14052
// http://code.stephenmorley.org/html-and-css/fixing-browsers-broken-monospace-font-handling/
@@ -173,7 +85,7 @@ body {
17385

17486
margin-top: 0.2em;
17587

176-
.playground-output-focused & {
88+
&--focused {
17789
position: absolute;
17890
width: 100%;
17991
height: 100%;
@@ -647,3 +559,7 @@ $header-transition: 0.2s ease-in-out;
647559
}
648560
}
649561
}
562+
563+
:root {
564+
--border-color: #{$border-color};
565+
}

0 commit comments

Comments
 (0)