Skip to content

Commit b57ce3f

Browse files
pel-danielpel-daniel
committed
Merge pull request #4 from lambdabricks/pimp-ui
Pimp ui
2 parents 44143a8 + 68be688 commit b57ce3f

File tree

15 files changed

+294
-98
lines changed

15 files changed

+294
-98
lines changed

‎dist/index.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@
55

66
<link rel="stylesheet" type="text/css" href="styles.css">
77
<link rel="stylesheet" type="text/css" href="react-joyride-compiled.css">
8+
9+
<link
10+
href='https://fonts.googleapis.com/css?family=Open+Sans'
11+
rel='stylesheet'
12+
type='text/css'
13+
>
814
</head>
915
<body>
1016
<div id="main">

‎dist/styles.css‎

Lines changed: 216 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,254 @@
11
html, body {
2+
color: #4f5f6f;
3+
font-family: 'Open Sans', sans-serif;
4+
height: 100%;
25
margin: 0;
6+
min-height: 100%;
7+
overflow-x: hidden;
38
padding: 0;
49
}
510

6-
html, body, #main {
11+
body {
12+
font-size: 14px;
13+
line-height: 1.5;
14+
}
15+
16+
h1, h2, h3, h4, h5 {
17+
font-weight: normal;
18+
}
19+
20+
h2, h3 {
21+
font-size: 14px;
22+
}
23+
24+
a {
25+
color: #59c2e6;
26+
text-decoration: none;
27+
transition: color 0.13s;
28+
}
29+
30+
a:hover {
31+
color: #0b98ca;
32+
}
33+
34+
ol, ul {
35+
padding-left: 15px;
36+
}
37+
38+
button {
39+
background-color: #0b98ca;
40+
border: 0;
41+
color: white;
42+
cursor: pointer;
43+
padding: 6px 12px;
44+
transition: background-color 0.13s;
45+
}
46+
47+
button:hover {
48+
background-color: #219FCA;
49+
}
50+
51+
label {
52+
display: inline-block;
53+
width: 45px;
54+
}
55+
56+
select, input {
57+
background-color: white;
58+
border: 0;
59+
font-size: 14px;
60+
height: 26px;
61+
padding: 3px 3px;
62+
width: 200px;
63+
}
64+
65+
hr {
66+
border-style: groove;
67+
}
68+
69+
::-webkit-scrollbar {
70+
height: 7px;
71+
width: 7px;
72+
}
73+
74+
::-webkit-scrollbar-thumb {
75+
background: #767D86;
76+
border-radius: 0;
77+
}
78+
79+
::-webkit-scrollbar-track {
80+
background-color: #2d363f;
81+
border-radius: 0;
82+
}
83+
84+
#main {
785
height: 100%;
86+
overflow-x: hidden;
87+
overflow-y: auto;
88+
position: absolute;
89+
width: 100%;
90+
}
91+
92+
.app {
93+
background-color: #f0f3f6;
94+
box-sizing: border-box;
95+
/*box-shadow: 0 0 3px #ccc;*/
96+
left: 0;
97+
/*margin: 0 auto;*/
98+
min-height: 100vh;
99+
padding: 10px 10px 10px 240px;
100+
position: relative;
101+
transition: left 0.3s ease, padding-left 0.3s ease;
102+
width: 100%;
103+
}
104+
105+
#logo {
106+
background-color: #3a4651;
107+
box-sizing: border-box;
108+
color: white;
109+
font-size: 16px;
110+
left: 0;
111+
line-height: 70px;
112+
padding-left: 15px;
113+
position: fixed;
114+
top: 0;
115+
width: 230px;
116+
}
117+
118+
.brick {
119+
float: left;
120+
height: 40px;
121+
padding-top: 18px;
122+
width: 50px;
123+
}
124+
125+
.brick rect {
126+
fill: #79D1EF;
127+
}
128+
129+
#library {
130+
background-color: #3a4651;
131+
bottom: 0;
132+
color: white;
133+
font-size: 14px;
134+
left: 0;
135+
overflow-y: auto;
136+
position: fixed;
137+
top: 70px;
138+
transition: left 0.3s ease;
139+
width: 230px;
140+
}
141+
142+
#library h2 {
143+
padding-left: 20px;
144+
}
145+
146+
.nav h3, .nav h4 {
147+
color: white;
148+
font-size: 14px;
149+
margin: 0;
150+
}
151+
152+
.nav h3 {
153+
background-color: #0b98ca;
154+
padding: 15px 10px 15px 20px;
155+
}
156+
157+
.nav h4 {
158+
background-color: #2d363f;
159+
padding: 15px 10px 15px 40px;
160+
}
161+
162+
.nav ul {
163+
list-style: none;
164+
margin: 0;
165+
padding-left: 0;
166+
}
167+
168+
.nav li {
169+
color: rgba(255, 255, 255, 0.5);
170+
cursor: pointer;
171+
margin: 0;
172+
padding: 10px 0 10px 40px;
173+
transition: color 0.13s;
174+
}
175+
176+
.nav li:hover {
177+
color: white;
178+
background-color: #2d363f;
179+
}
180+
181+
#instructions {
182+
background-color: #2d363f;
183+
bottom: 0;
184+
box-sizing: border-box;
185+
color: rgba(255, 255, 255, 0.6);
186+
left: 0;
187+
overflow-y: auto;
188+
padding: 10px;
189+
position: fixed;
190+
top: 70px;
191+
width: 250px;
192+
}
193+
194+
.tutorial.app {
195+
padding-left: 490px;
196+
}
197+
198+
.tutorial #logo {
199+
width: 480px;
200+
}
201+
202+
.tutorial #library {
203+
left: 250px;
204+
}
205+
206+
.selectedElementDialog {
207+
background-color: rgba(58, 70, 81, 0.9);
208+
border-radius: 4px;
209+
color: white;
210+
padding: 20px 14px 10px;
211+
position: absolute;
8212
}
9213

10214
#customValueInput input[type=radio] {
11215
display: none;
12216
}
13217

14218
#customValueInput input[type=radio] + label {
15-
padding: 2px;
16219
border: 3px solid rgba(0, 0, 0, 0);
17220
color: white;
18221
display: inline-block;
19222
font-weight: bold;
20-
margin: 3px 3px 0 0;
223+
height: 20px;
224+
margin-right: 3px;
225+
padding-left: 3px;
21226
}
22227

23228
#customValueInput input[type=radio]:checked + label {
24229
border: 3px solid orange;
25230
}
26231

27232
.closeBtn {
28-
color: #551A8B;
233+
color: white;
29234
font-size: 15px;
30235
line-height: 10px;
31236
position: absolute;
32237
right: 6px;
33238
text-decoration: none;
34-
top: 6px
239+
top: 6px;
35240
}
36241

37242
.closeBtn:hover, .closeBtn:focus, .closeBtn:active {
38-
color: #551A8B;
243+
color: white;
39244
text-decoration: none;
40245
}
41246

247+
.topMargin {
248+
margin-top: 5px;
249+
}
250+
42251
.code {
252+
color: rgba(255, 255, 255, 0.9);
43253
font-weight: bold;
44254
}

‎src/components/ElementDetails/MainBrickDetails.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default class MainBrickDetails extends Component {
2020
/>
2121
</div>
2222
{ totalUnitTests > 1 &&
23-
<div>
23+
<div className="topMargin">
2424
<DialogButton
2525
onClick={ () => deleteUnitTest(workspaceIndex) }
2626
message="deleteUnitTest"

‎src/components/ElementDetails/PrimitiveDetails.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export default class PrimitiveDetails extends Component {
2929
value={ value }
3030
workspaceIndex={ workspaceIndex }
3131
/>
32+
<hr/>
3233
<DialogButton
3334
onClick={ () => deleteElement(id) }
3435
message="delete"

‎src/components/ElementDetails/TestNodeDetails.js‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,6 @@ import {
77
import CustomValueInput from './CustomValueInput'
88
import TypesSelect from './TypesSelect'
99

10-
const styles = {
11-
width: 300
12-
}
13-
1410
export default class TestNodeDetails extends Component {
1511
render() {
1612
const {
@@ -24,7 +20,7 @@ export default class TestNodeDetails extends Component {
2420
} = this.props
2521

2622
return (
27-
<div style={ styles} >
23+
<div>
2824
<TypesSelect
2925
handleChange={ changeTestNodeType }
3026
id={ id }
@@ -33,14 +29,16 @@ export default class TestNodeDetails extends Component {
3329
workspaceIndex={ workspaceIndex }
3430
/>
3531
{ type != "null" &&
36-
<CustomValueInput
37-
handleChange={ changeTestNodeValue }
38-
id={ id }
39-
primitives={ primitives }
40-
type={ type }
41-
value={ value }
42-
workspaceIndex={ workspaceIndex }
43-
/>
32+
<div className="topMargin">
33+
<CustomValueInput
34+
handleChange={ changeTestNodeValue }
35+
id={ id }
36+
primitives={ primitives }
37+
type={ type }
38+
value={ value }
39+
workspaceIndex={ workspaceIndex }
40+
/>
41+
</div>
4442
}
4543
</div>
4644
)

‎src/components/LambdaBricksApp.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,16 @@ import React, { Component, PropTypes } from 'react'
22

33
import { UNIT_TEST } from './constants'
44
import Library from '../containers/Library'
5+
import Logo from './Logo'
56
import Workspace from '../containers/Workspace'
67

7-
const styles = {
8-
display: 'flex'
9-
}
10-
118
export default class LambdaBricksApp extends Component {
129
render() {
1310
const { libraryId, workspaceType } = this.props
1411

1512
return (
16-
<div style={ styles }>
13+
<div className="app">
14+
<Logo />
1715
<Library id={ libraryId }/>
1816
<Workspace type={ workspaceType } />
1917
</div>

0 commit comments

Comments
 (0)