Skip to content

Commit ca312ee

Browse files
ddelpianoddelpiano
authored
Merge pull request #445 from MetaCell/feature/441
#441 UI updates to fix the style updates from version change
2 parents 070baef + 91b0cfd commit ca312ee

7 files changed

Lines changed: 165 additions & 75 deletions

File tree

‎webapp/components/drawer/Drawer.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -170,13 +170,13 @@ const DrawerList = ({
170170
return (
171171
<Paper elevation={0} className={paperClasses}>
172172
<div className={drawerClasses.container}>
173-
<Box p={2}>
173+
<Box px={1} py={2}>
174174
{ expand && (
175175
<Box className="drawerListBox">
176176
<Typography variant="body2">{editMode ? SIDEBAR_HEADINGS.MODEL : SIDEBAR_HEADINGS.PLOTS}</Typography>
177177
</Box>
178178
)}
179-
<List dense disablePadding>
179+
<List disablePadding>
180180
{getMenu()[0]
181181
.map(mapItem)}
182182
</List>
@@ -186,7 +186,7 @@ const DrawerList = ({
186186
<Typography variant="body2">{SIDEBAR_HEADINGS.TOOLS}</Typography>
187187
)}
188188
</Box>
189-
<List dense disablePadding>
189+
<List disablePadding>
190190
{getMenu()[1]
191191
.map(mapItem)}
192192
</List>

‎webapp/components/drawer/useStyles.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ export default makeStyles(({
2424

2525
closeDrawer: drawerCss(false, transitions, palette, spacing),
2626

27-
buttonContainerOpen: { textAlign: 'end', padding: '12px' },
28-
buttonContainerClosed: { textAlign: 'center', padding: '12px' },
27+
buttonContainerOpen: { textAlign: 'end', padding: '0' },
28+
buttonContainerClosed: { textAlign: 'center', padding: '0' },
2929
button: {
3030
color: 'white',
3131
fontSize: '1em',
@@ -37,6 +37,11 @@ export default makeStyles(({
3737
flexDirection: 'column',
3838
flex: 1,
3939
width: '100%',
40+
41+
'& > .MuiBox-root': {
42+
overflow: 'auto',
43+
maxHeight: 'calc(100vh - 96px)',
44+
},
4045
},
4146

4247
selected: { color: palette.primary.main },

‎webapp/css/flexlayout.less‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ div.flexlayout__layout {
2727

2828
.flexlayout__tabset_tabbar_outer {
2929
background-color: transparent;
30+
left: -0.125rem;
3031
}
3132

3233
.flexlayout__tabset_tabbar_outer_top {
@@ -99,9 +100,9 @@ div.flexlayout__layout {
99100
border-top-left-radius: @radius;
100101
color: @textColor;
101102
display: flex;
103+
margin: 0 0.1875rem 0 0.125rem;
102104
align-items: flex-start;
103-
margin-right: 3px;
104-
margin-top: 0px;
105+
line-height: 1.42857143;
105106
&.flexlayout__tab_button--selected {
106107
background-color: @bgRegular; //was bgDark
107108

‎webapp/css/material.less‎

Lines changed: 66 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,88 @@
11
@import 'variables';
22

33
label {
4-
margin-top: 0px;
5-
margin-bottom: 0px;
4+
margin-top: 0;
5+
margin-bottom: 0;
66
}
77

88
input[type="text"], input[type="number"]{
99
box-shadow: none!important;
10-
border-radius:0px!important;
11-
color: white!important;
10+
border-radius:0!important;
11+
color: @fontColor !important;
1212
font-size: inherit;
1313
}
1414

15-
div.MuiAccordionSummary-root {
16-
h2 {
17-
font-size: 1em;
18-
}
15+
div.MuiAccordionSummary-root {
16+
margin: 0;
17+
display: flex;
18+
padding: 0 !important;
19+
min-height: unset !important;
20+
transition: min-height 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
1921

20-
.MuiTypography-subtitle1 {
21-
font-size: 1em;
22-
color : grey;
23-
}
22+
h2 {
23+
font-size: 1em;
24+
}
25+
26+
.MuiTypography-subtitle1 {
27+
font-size: 1em;
28+
color: grey;
29+
}
2430
}
2531

26-
div.MuiCollapse-container .MuiCollapse-wrapper,
27-
div.MuiAccordionSummary-root {
28-
padding: @tabSpacing;
29-
}
30-
div.MuiAccordion-root.Mui-expanded {
31-
margin: 2px;
32-
}
33-
.MuiAccordion-root {
34-
margin: 2px;
32+
div.MuiCollapse-container .MuiCollapse-wrapper,
33+
div.MuiAccordionSummary-root {
34+
padding: @tabSpacing;
35+
}
36+
div.MuiAccordion-root.Mui-expanded {
37+
margin: 0.125rem;
38+
}
39+
.MuiAccordion-root {
40+
margin: 0.125rem;
3541
}
3642

3743
label.MuiInputLabel-root
38-
.MuiInput-root {
39-
color : #fff;
40-
cursor : text;
41-
display : inline-flex;
42-
position : relative;
43-
font-size : 1rem;
44-
box-sizing : border-box;
45-
align-items: center;
46-
font-family: Roboto, Helvetica, Arial, sans-serif;
47-
line-height: 1.1875em;
44+
.MuiInput-root {
45+
color: @fontColor;
46+
cursor: text;
47+
display: inline-flex;
48+
position: relative;
49+
font-size: 1rem;
50+
box-sizing: border-box;
51+
align-items: center;
52+
font-family: Roboto, Helvetica, Arial, sans-serif;
53+
line-height: 1.1875em;
4854

49-
input {
50-
line-height: 24px;
51-
position : relative;
52-
width : 100%;
53-
border : none;
54-
outline : none;
55-
background-color : rgba(0, 0, 0, 0);
56-
color : rgba(255, 255, 255, 0.87);
57-
cursor : inherit;
58-
font : inherit;
59-
opacity : 1;
60-
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
61-
height : 100%;
62-
}
55+
input {
56+
line-height: 1.5rem;
57+
position: relative;
58+
width: 100%;
59+
border: none;
60+
outline: none;
61+
background-color: rgba(0, 0, 0, 0);
62+
color: rgba(255, 255, 255, 0.87);
63+
cursor: inherit;
64+
font: inherit;
65+
opacity: 1;
66+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
67+
height: 100%;
68+
}
6369

64-
}
65-
66-
.MuiButton-root,
67-
.MuiFab-root {
68-
font-size: 1em;
70+
}
6971

70-
}
72+
.MuiButton-root,
73+
.MuiFab-root {
74+
font-size: 1em;
75+
}
7176

72-
.MuiFab-root{
73-
text-transform: none;
74-
}
77+
.MuiFab-root{
78+
text-transform: none;
79+
}
7580

76-
label.MuiInputLabel-root, label.MuiFormLabel-root{
77-
font-weight: bold;
78-
color: rgba(255, 255, 255, 0.7);
79-
}
81+
label.MuiInputLabel-root, label.MuiFormLabel-root{
82+
font-weight: bold;
83+
color: rgba(255, 255, 255, 0.7);
84+
}
8085

81-
.MuiSelect-select{
82-
min-width: 72px;
83-
}
86+
.MuiSelect-select{
87+
min-width: 4.5rem;
88+
}

‎webapp/css/netpyne.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ html {
1414
}
1515
body {
1616
background: @bgDarker;
17+
line-height: 1.42857143;
1718
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
1819
}
1920
}

‎webapp/css/variables.less‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,6 @@
3333
@experimentLabelColor: #989898;
3434
@experimentAutocompleteBorder: #727272;
3535
@errorFieldBorder: #F2453D;
36+
37+
@fabDisableBg: rgba(255, 255, 255, 0.12);
38+
@fabDisableColor: rgba(255, 255, 255, 0.3);

‎webapp/theme.js‎

Lines changed: 82 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ export const {
3636
experimentLabelColor,
3737
errorFieldBorder,
3838
primaryColorHover,
39+
fabDisableColor,
40+
fabDisableBg,
3941
} = vars;
4042

4143
const rawTheme = {
@@ -88,7 +90,7 @@ const rawTheme = {
8890
},
8991
MuiCard: {
9092
root: {
91-
backgroundColor: bgDarker,
93+
backgroundColor: `${bgDarker}!important`,
9294
overflowY: 'auto',
9395
flex: 1,
9496
},
@@ -109,7 +111,13 @@ const rawTheme = {
109111
root: {
110112
color: fontColor,
111113
textTransform: 'uppercase',
112-
maxwidth: 'auto',
114+
padding: '0.375rem 0.75rem 0.5rem !important',
115+
maxWidth: '10.5rem',
116+
minWidth: '5rem',
117+
118+
'& .MuiBottomNavigationAction-wrapper': {
119+
lineHeight: '1.428125rem',
120+
},
113121
},
114122
label: {
115123
fontSize: '1rem',
@@ -120,8 +128,34 @@ const rawTheme = {
120128
MuiFab: {
121129
secondary: { color: fontColor },
122130
primary: { color: fontColor },
131+
root: {
132+
'&:not(.Mui-disabled).MuiFab-primary': {
133+
backgroundColor: primaryColor,
134+
'&:hover': {
135+
backgroundColor: secondaryColor,
136+
},
137+
},
138+
139+
'&:not(.Mui-disabled).MuiFab-secondary': {
140+
backgroundColor: secondaryColor,
141+
'&:hover': {
142+
backgroundColor: primaryColor,
143+
},
144+
},
145+
146+
'&.Mui-disabled': {
147+
color: fabDisableColor,
148+
boxShadow: 'none',
149+
backgroundColor: fabDisableBg,
150+
},
151+
},
123152
},
124153
MuiButton: {
154+
root: {
155+
'&.MuiButtonGroup-grouped': {
156+
minWidth: '2.5rem',
157+
},
158+
},
125159
contained: {
126160
color: fontColor,
127161
backgroundColor: bgInputs,
@@ -145,17 +179,17 @@ const rawTheme = {
145179
MuiTypography: { root: { color: fontColor } },
146180
MuiCollapse: {
147181
container: { padding: 0 },
148-
wrapper: { padding: '0px!important' },
182+
wrapper: { padding: '0 !important' },
149183
},
150184
MuiIcon: { fontSizeLarge: { fontSize: '1.75rem' } },
151185
MuiAccordionSummary: {
152186
root: {
153-
padding: '0px!important',
187+
padding: '0!important',
154188
margin: 0,
155189
minHeight: 'unset!important',
156190
},
157191
content: {
158-
margin: '0px!important',
192+
margin: '0!important',
159193
cursor: 'auto',
160194
},
161195
expandIcon: { marginRight: 0 },
@@ -171,12 +205,53 @@ const rawTheme = {
171205
MuiAccordion: {
172206
root: {
173207
padding: 0,
174-
margin: '0px!important',
208+
margin: '0 !important',
175209
minHeight: 'unset',
176210
},
177211
},
178-
MuiAutocomplete: { popupIndicator: { marginRight: 0 } },
212+
MuiAutocomplete: {
213+
root: {
214+
'& .MuiIconButton-root': {
215+
padding: '0.125rem !important',
216+
},
217+
},
218+
popupIndicator: { marginRight: 0 },
219+
},
179220
MuiCardContent: { root: { padding: 8 } },
221+
222+
MuiListItem: {
223+
root: {
224+
'&.MuiButtonBase-root': {
225+
color: 'white',
226+
paddingTop: '.5rem',
227+
whiteSpace: 'nowrap',
228+
paddingBottom: '0.375rem',
229+
display: 'flex',
230+
justifyContent: 'flex-start',
231+
textDecoration: 'none',
232+
textAlign: 'left',
233+
alignItems: 'center',
234+
},
235+
236+
'&.MuiListItem-dense': {
237+
padding: '0.25rem 0.5rem',
238+
borderRadius: '0.25rem',
239+
justifyContent: 'flex-start',
240+
},
241+
242+
'&.MuiMenuItem-gutters': {
243+
paddingLeft: '2rem',
244+
paddingRight: '2rem',
245+
},
246+
},
247+
},
248+
249+
MuiIconButton: {
250+
root: {
251+
color: fontColor,
252+
padding: '0.75rem !important',
253+
},
254+
},
180255
},
181256
};
182257

0 commit comments

Comments
 (0)