Skip to content

Commit 9758829

Browse files
norbertsuskinorbertsuski
committed
feat: components and css refactor
1 parent cfcdbaf commit 9758829

File tree

15 files changed

+496
-1261
lines changed

15 files changed

+496
-1261
lines changed

‎examples/sample-data-west.json

+14-14
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"query": "FROM Transaction SELECT average(duration) FACET entityGuid, appName WHERE entityGuid in ('NjMwMDYwfEFQTXxBUFBMSUNBVElPTnw2MDgwNzg2')",
1616
"entities": [
1717
{
18-
"guid": "NjMwMDYwfE5SMXxXT1JLTE9BRHwzODI",
18+
"guid": "MjM2OTE2NXxOUjF8V09SS0xPQUR8MTU5NDE",
1919
"entityType": "WORKLOAD_ENTITY"
2020
}
2121
],
@@ -37,7 +37,7 @@
3737
"query": "FROM Transaction SELECT average(duration) FACET entityGuid, appName WHERE entityGuid in ('NjMwMDYwfEFQTXxBUFBMSUNBVElPTnw2MDgwNzg2')",
3838
"entities": [
3939
{
40-
"guid": "NjMwMDYwfE5SMXxXT1JLTE9BRHwzODI",
40+
"guid": "MjM2OTE2NXxOUjF8V09SS0xPQUR8MTU5NDE",
4141
"entityType": "WORKLOAD_ENTITY"
4242
}
4343
],
@@ -59,7 +59,7 @@
5959
"query": "FROM Transaction SELECT average(duration) FACET entityGuid, appName WHERE entityGuid in ('NjMwMDYwfEFQTXxBUFBMSUNBVElPTnw2MDgwNzg2')",
6060
"entities": [
6161
{
62-
"guid": "NjMwMDYwfE5SMXxXT1JLTE9BRHwzODI",
62+
"guid": "MjM2OTE2NXxOUjF8V09SS0xPQUR8MTU5NDE",
6363
"entityType": "WORKLOAD_ENTITY"
6464
}
6565
],
@@ -81,7 +81,7 @@
8181
"query": "FROM Transaction SELECT average(duration) FACET entityGuid, appName WHERE entityGuid in ('NjMwMDYwfEFQTXxBUFBMSUNBVElPTnw2MDgwNzg2')",
8282
"entities": [
8383
{
84-
"guid": "NjMwMDYwfE5SMXxXT1JLTE9BRHwzODI",
84+
"guid": "MjM2OTE2NXxOUjF8V09SS0xPQUR8MTU5NDE",
8585
"entityType": "WORKLOAD_ENTITY"
8686
}
8787
],
@@ -103,7 +103,7 @@
103103
"query": "FROM Transaction SELECT average(duration) FACET entityGuid, appName WHERE entityGuid in ('NjMwMDYwfEFQTXxBUFBMSUNBVElPTnw2MDgwNzg2')",
104104
"entities": [
105105
{
106-
"guid": "NjMwMDYwfE5SMXxXT1JLTE9BRHwzODI",
106+
"guid": "MjM2OTE2NXxOUjF8V09SS0xPQUR8MTU5NDE",
107107
"entityType": "WORKLOAD_ENTITY"
108108
}
109109
],
@@ -125,7 +125,7 @@
125125
"query": "FROM Transaction SELECT average(duration) FACET entityGuid, appName WHERE entityGuid in ('NjMwMDYwfEFQTXxBUFBMSUNBVElPTnw2MDgwNzg2')",
126126
"entities": [
127127
{
128-
"guid": "NjMwMDYwfE5SMXxXT1JLTE9BRHw1ODM",
128+
"guid": "MjM2OTE2NXxOUjF8V09SS0xPQUR8MTU5NDE",
129129
"entityType": "WORKLOAD_ENTITY"
130130
}
131131
],
@@ -147,7 +147,7 @@
147147
"query": "FROM Transaction SELECT average(duration) FACET entityGuid, appName WHERE entityGuid in ('NjMwMDYwfEFQTXxBUFBMSUNBVElPTnw2MDgwNzg2')",
148148
"entities": [
149149
{
150-
"guid": "NjMwMDYwfE5SMXxXT1JLTE9BRHw1ODM",
150+
"guid": "MjM2OTE2NXxOUjF8V09SS0xPQUR8MTU5NDE",
151151
"entityType": "WORKLOAD_ENTITY"
152152
}
153153
],
@@ -169,7 +169,7 @@
169169
"query": "FROM Transaction SELECT average(duration) FACET entityGuid, appName WHERE entityGuid in ('NjMwMDYwfEFQTXxBUFBMSUNBVElPTnw2MDgwNzg2')",
170170
"entities": [
171171
{
172-
"guid": "NjMwMDYwfE5SMXxXT1JLTE9BRHw1ODM",
172+
"guid": "MjM2OTE2NXxOUjF8V09SS0xPQUR8MTU5NDE",
173173
"entityType": "WORKLOAD_ENTITY"
174174
}
175175
],
@@ -191,7 +191,7 @@
191191
"query": "FROM Transaction SELECT average(duration) FACET entityGuid, appName WHERE entityGuid in ('NjMwMDYwfEFQTXxBUFBMSUNBVElPTnw2MDgwNzg2')",
192192
"entities": [
193193
{
194-
"guid": "NjMwMDYwfE5SMXxXT1JLTE9BRHwzODI",
194+
"guid": "MjM2OTE2NXxOUjF8V09SS0xPQUR8MTU5NDE",
195195
"entityType": "WORKLOAD_ENTITY"
196196
}
197197
],
@@ -213,7 +213,7 @@
213213
"query": "FROM Transaction SELECT average(duration) FACET entityGuid, appName WHERE entityGuid in ('NjMwMDYwfEFQTXxBUFBMSUNBVElPTnw2MDgwNzg2')",
214214
"entities": [
215215
{
216-
"guid": "NjMwMDYwfE5SMXxXT1JLTE9BRHw1ODM",
216+
"guid": "MjM2OTE2NXxOUjF8V09SS0xPQUR8MTU5NDE",
217217
"entityType": "WORKLOAD_ENTITY"
218218
}
219219
],
@@ -235,7 +235,7 @@
235235
"query": "FROM Transaction SELECT average(duration) FACET entityGuid, appName WHERE entityGuid in ('NjMwMDYwfEFQTXxBUFBMSUNBVElPTnw2MDgwNzg2')",
236236
"entities": [
237237
{
238-
"guid": "NjMwMDYwfE5SMXxXT1JLTE9BRHw1ODM",
238+
"guid": "MjM2OTE2NXxOUjF8V09SS0xPQUR8MTU5NDE",
239239
"entityType": "WORKLOAD_ENTITY"
240240
}
241241
],
@@ -257,7 +257,7 @@
257257
"query": "FROM Transaction SELECT average(duration) FACET entityGuid, appName WHERE entityGuid in ('NjMwMDYwfEFQTXxBUFBMSUNBVElPTnw2MDgwNzg2')",
258258
"entities": [
259259
{
260-
"guid": "NjMwMDYwfE5SMXxXT1JLTE9BRHwzODI",
260+
"guid": "MjM2OTE2NXxOUjF8V09SS0xPQUR8MTU5NDE",
261261
"entityType": "WORKLOAD_ENTITY"
262262
}
263263
],
@@ -279,12 +279,12 @@
279279
"query": "FROM Transaction SELECT average(duration) FACET entityGuid, appName WHERE entityGuid in ('NjMwMDYwfEFQTXxBUFBMSUNBVElPTnw2MDgwNzg2')",
280280
"entities": [
281281
{
282-
"guid": "NjMwMDYwfE5SMXxXT1JLTE9BRHwzODI",
282+
"guid": "MjM2OTE2NXxOUjF8V09SS0xPQUR8MTU5NDE",
283283
"entityType": "WORKLOAD_ENTITY"
284284
}
285285
],
286286
"contactEmail": "[email protected]",
287287
"runbookUrl": "https://docs.google.com/document/d/1NOWVNqJ9G8Ks5jIf2HVRj2CLP0Mjui1FsaIqs7kXy-Y/edit"
288288
}
289289
]
290-
}
290+
}

‎nerdlets/geo-ops-nerdlet/MapList.scss

-38
This file was deleted.

‎nerdlets/geo-ops-nerdlet/MapList.js ‎nerdlets/geo-ops-nerdlet/MapList/MapList.js

+45-52
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,52 @@
11
import React, { PureComponent } from 'react';
22
import PropTypes from 'prop-types';
3-
import { Button, Grid, GridItem } from 'nr1';
3+
import { Grid, GridItem } from 'nr1';
44
import styled from 'styled-components';
55

6-
import { ToolbarWrapper, ToolbarItem } from '../shared/components/Toolbar';
7-
import MapItem from '../shared/components/MapItem';
6+
import { ToolbarWrapper } from '../../shared/components/Toolbar';
7+
import MapItem from '../../shared/components/MapItem';
8+
import RightToolbar from './Toolbars/RightToolbar';
9+
import LeftToolbar from './Toolbars/LeftToolbar';
810

9-
const StyledToolbarItem = styled(ToolbarItem)`
10-
h4 {
11-
margin-bottom: 0;
12-
font-size: 20px;
13-
line-height: 71px;
14-
text-transform: none;
15-
color: #464e4e;
11+
const StyledGrid = styled(Grid)`
12+
padding: 24px;
13+
background-color: #f4f5f5;
14+
height: calc(100% - 74px);
15+
16+
div.map-grid {
17+
grid-gap: 16px;
1618
}
1719
`;
1820

19-
const RightToolbar = ({ navigation }) => {
20-
return (
21-
<>
22-
<ToolbarItem>
23-
<Button
24-
type={Button.TYPE.PRIMARY}
25-
onClick={() =>
26-
navigation.router({
27-
to: 'createMap',
28-
state: { selectedMap: null, activeStep: 1 }
29-
})
30-
}
31-
iconType={Button.ICON_TYPE.INTERFACE__SIGN__PLUS}
32-
>
33-
New Map
34-
</Button>
35-
</ToolbarItem>
36-
</>
37-
);
38-
};
39-
RightToolbar.propTypes = {
40-
navigation: PropTypes.object
41-
};
42-
43-
const LeftToolbar = () => {
44-
return (
45-
<>
46-
<StyledToolbarItem>
47-
<h4>My maps</h4>
48-
</StyledToolbarItem>
49-
</>
50-
);
51-
};
52-
RightToolbar.propTypes = {
53-
navigation: PropTypes.object
54-
};
21+
const AddNewMapButton = styled.div`
22+
display: flex;
23+
justify-content: center;
24+
align-items: center;
25+
width: 100%;
26+
height: calc(9vw + 70px);
27+
border: 3px dashed #d5d7d7;
28+
border-radius: 4px;
29+
transition: all 0.05s ease-out;
30+
31+
&:hover {
32+
cursor: pointer;
33+
border-color: #b9bdbd;
34+
transform: translateY(-2px);
35+
36+
svg {
37+
opacity: 1;
38+
}
39+
}
40+
41+
&:active {
42+
transform: translateY(1px);
43+
}
44+
45+
svg {
46+
opacity: 0.75;
47+
transition: all 0.15s ease-out;
48+
}
49+
`;
5550

5651
export default class MapList extends PureComponent {
5752
static propTypes = {
@@ -103,16 +98,14 @@ export default class MapList extends PureComponent {
10398
left={<LeftToolbar />}
10499
/>
105100

106-
<Grid
107-
className="primary-grid map-list-primary-grid"
101+
<StyledGrid
108102
spacingType={[Grid.SPACING_TYPE.NONE, Grid.SPACING_TYPE.NONE]}
109103
>
110104
<GridItem columnSpan={12} fullHeight>
111105
<Grid className="map-grid">
112106
{mapGridItems}
113107
<GridItem columnSpan={3}>
114-
<div
115-
className="add-map-item-button"
108+
<AddNewMapButton
116109
onClick={() =>
117110
navigation.router({
118111
to: 'createMap',
@@ -134,11 +127,11 @@ export default class MapList extends PureComponent {
134127
fill="#B9BDBD"
135128
/>
136129
</svg>
137-
</div>
130+
</AddNewMapButton>
138131
</GridItem>
139132
</Grid>
140133
</GridItem>
141-
</Grid>
134+
</StyledGrid>
142135
</>
143136
);
144137
}

‎nerdlets/geo-ops-nerdlet/MapList/Toolbars/LeftToolbar.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
4+
import { ToolbarItem } from '../../../shared/components/Toolbar';
5+
6+
const StyledToolbarItem = styled(ToolbarItem)`
7+
h4 {
8+
margin-bottom: 0;
9+
font-size: 20px;
10+
line-height: 71px;
11+
text-transform: none;
12+
color: #464e4e;
13+
}
14+
`;
15+
16+
const LeftToolbar = () => {
17+
return (
18+
<>
19+
<StyledToolbarItem>
20+
<h4>My maps</h4>
21+
</StyledToolbarItem>
22+
</>
23+
);
24+
};
25+
26+
export default LeftToolbar;

‎nerdlets/geo-ops-nerdlet/MapList/Toolbars/RightToolbar.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { Button } from 'nr1';
4+
5+
import { ToolbarItem } from '../../../shared/components/Toolbar';
6+
7+
const RightToolbar = ({ navigation }) => {
8+
return (
9+
<>
10+
<ToolbarItem>
11+
<Button
12+
type={Button.TYPE.PRIMARY}
13+
onClick={() =>
14+
navigation.router({
15+
to: 'createMap',
16+
state: { selectedMap: null, activeStep: 1 }
17+
})
18+
}
19+
iconType={Button.ICON_TYPE.INTERFACE__SIGN__PLUS}
20+
>
21+
New Map
22+
</Button>
23+
</ToolbarItem>
24+
</>
25+
);
26+
};
27+
28+
RightToolbar.propTypes = {
29+
navigation: PropTypes.object
30+
};
31+
32+
export default RightToolbar;

0 commit comments

Comments
 (0)