Skip to content

Commit 091ab34

Browse files
mbehr1mbehr1
committed
fix(layout): apply theme colors for buttons. fix #5
Use vscode button colors. Implemented for style "text" and "outlined" in secondary and primary colors. Changed most buttons to small size for consistency. Use outline buttons only in groups. Issues: #5
1 parent 5bf9cbe commit 091ab34

File tree

5 files changed

+56
-14
lines changed

5 files changed

+56
-14
lines changed

‎src/webview/src/App.js

+41
Original file line numberDiff line numberDiff line change
@@ -789,6 +789,47 @@ export default class App extends Component {
789789
// looks weird? fontSize: 'var(--vscode-font-size)',
790790
fontFamily: vscodeStyles.getPropertyValue('--vscode-font-family'),
791791
// looks weird? fontWeightRegular: 'var(--vscode-font-weight)'
792+
},
793+
overrides: {
794+
MuiButton: {
795+
textPrimary: {
796+
color: vscodeStyles.getPropertyValue('--vscode-button-foreground'),
797+
background: vscodeStyles.getPropertyValue('--vscode-button-background'),
798+
'&:hover': {
799+
backgroundColor: vscodeStyles.getPropertyValue('--vscode-button-hoverBackground'),
800+
}
801+
},
802+
textSecondary: {
803+
color: vscodeStyles.getPropertyValue('--vscode-button-secondaryForeground'),
804+
background: vscodeStyles.getPropertyValue('--vscode-button-secondaryBackground'),
805+
'&:hover': {
806+
backgroundColor: vscodeStyles.getPropertyValue('--vscode-button-secondaryHoverBackground'),
807+
}
808+
}, // todo support inherit color for buttons?
809+
outlinedPrimary: {
810+
color: vscodeStyles.getPropertyValue('--vscode-foreground'), // regular foreground
811+
borderColor: vscodeStyles.getPropertyValue('--vscode-button-background'),
812+
'&:hover': {
813+
color: vscodeStyles.getPropertyValue('--vscode-editor-foreground'),
814+
borderColor: vscodeStyles.getPropertyValue('--vscode-button-hoverBackground'),
815+
}
816+
},
817+
outlinedSecondary: {
818+
color: vscodeStyles.getPropertyValue('--vscode-foreground'), // regular foreground for contrast
819+
borderColor: vscodeStyles.getPropertyValue('--vscode-button-secondaryBackground'),
820+
'&:hover': {
821+
color: vscodeStyles.getPropertyValue('--vscode-editor-foreground'),
822+
borderColor: vscodeStyles.getPropertyValue('--vscode-button-secondaryHoverBackground'),
823+
}
824+
},
825+
},
826+
/* todo investigate later ... MuiCheckbox: {
827+
colorPrimary: {
828+
// background: vscodeStyles.getPropertyValue('--vscode-checkbox-background'),
829+
// borderColor: vscodeStyles.getPropertyValue('--vscode-checkbox-border'),
830+
color: vscodeStyles.getPropertyValue('--vscode-checkbox-foreground'),
831+
}
832+
} */
792833
}
793834
});
794835

‎src/webview/src/components/dataProviderEditDialog.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ export default function DataProviderEditDialog(props) {
137137
</FormControl>
138138
</Paper>}
139139
{dataType === 'ext:dlt' && <Paper>
140-
<Button size="small" variant="outlined" color="primary" onClick={() => setDltFilterAssistantOpen(true)}>
140+
<Button size="small" color="primary" onClick={() => setDltFilterAssistantOpen(true)}>
141141
Open DLT filter assistant...
142142
</Button>
143143
<DLTFilterAssistantDialog
@@ -190,7 +190,7 @@ export default function DataProviderEditDialog(props) {
190190
</Paper>}
191191
</Grid>
192192
{props.applyMode && <Grid item>
193-
<Button id={'dp-test-apply-filter-' + props.name} color="primary" startIcon={<FilterListIcon />}
193+
<Button id={'dp-test-apply-filter-' + props.name} color="secondary" startIcon={<FilterListIcon />}
194194
disabled={!(previewBadgeStatus === 3 && dataSource?.length > 0)}
195195
onClick={(e) => { if (previewBadgeStatus === 3 && dataSource?.length > 0) { setPreviewBadgeStatus(0); } }}>
196196
Test "apply filter"
@@ -215,7 +215,7 @@ export default function DataProviderEditDialog(props) {
215215
</Grid>
216216
</DialogContent>
217217
<DialogActions>
218-
<Button autoFocus onClick={handleSave} color="primary">
218+
<Button size="small" autoFocus onClick={handleSave} color="primary">
219219
Save changes
220220
</Button>
221221
</DialogActions>

‎src/webview/src/components/dltFilterAssistant.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -413,6 +413,7 @@ export default function DLTFilterAssistantDialog(props) {
413413
<ListItem classes={{ root: classes.item }} key={value} role="listitem" button onClick={handleToggle(value)} dense={true} disableGutters={true}>
414414
<ListItemIcon classes={{ root: classes.icon }}>
415415
<Checkbox
416+
color='primary'
416417
classes={{ root: classes.checkbox }}
417418
checked={checked.indexOf(value) !== -1}
418419
tabIndex={-1}
@@ -509,8 +510,8 @@ export default function DLTFilterAssistantDialog(props) {
509510
</Grid>
510511
<Grid item>
511512
<Grid container direction="column" alignItems="center">
512-
<Button variant="outlined" size="small" onClick={handleCheckedRight} disabled={leftChecked.length === 0}>&gt;</Button>
513-
<Button variant="outlined" size="small" onClick={handleCheckedLeft} disabled={rightChecked.length === 0}>&lt;</Button>
513+
<Button size="small" color="primary" onClick={handleCheckedRight} disabled={leftChecked.length === 0}>&gt;</Button>
514+
<Button size="small" color="primary" onClick={handleCheckedLeft} disabled={rightChecked.length === 0}>&lt;</Button>
514515
</Grid>
515516
</Grid>
516517
<Grid item>
@@ -520,7 +521,7 @@ export default function DLTFilterAssistantDialog(props) {
520521
</Grid>
521522
</Grid>
522523
{props.applyMode && <Grid item>
523-
<Button id={'test-apply-filter-' + props.name} color="primary" startIcon={<FilterListIcon />}
524+
<Button id={'test-apply-filter-' + props.name} color="secondary" startIcon={<FilterListIcon />}
524525
disabled={!(previewBadgeStatus === 3 && dataSource?.length > 0)}
525526
onClick={(e) => { if (previewBadgeStatus === 3 && dataSource?.length > 0) { setPreviewBadgeStatus(0); } }}>
526527
Test "apply filter"
@@ -548,7 +549,7 @@ export default function DLTFilterAssistantDialog(props) {
548549
</Grid>
549550
</DialogContent>
550551
<DialogActions>
551-
<Button autoFocus onClick={handleSave} color="primary">
552+
<Button size="small" autoFocus onClick={handleSave} color="primary">
552553
Save changes
553554
</Button>
554555
</DialogActions>

‎src/webview/src/components/fbaCheckbox.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -308,7 +308,7 @@ export default function FBACheckbox(props) {
308308

309309
const applyFilterFragment = (values.filter &&
310310
<React.Fragment>
311-
<Button id={'apply-filter-' + props.name} color="primary" startIcon={<FilterListIcon />} onClick={(e) => handleApplyFilter(values.filter)}>
311+
<Button id={'apply-filter-' + props.name} size="small" color="secondary" startIcon={<FilterListIcon />} onClick={(e) => handleApplyFilter(values.filter)}>
312312
Apply filter
313313
</Button>
314314
<Snackbar open={applyFilterBarOpen} autoHideDuration={6000} anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }} onClose={handleFilterBarClose}>
@@ -360,18 +360,18 @@ export default function FBACheckbox(props) {
360360
</DialogContent>
361361
<DialogActions>
362362
{applyFilterFragment}
363-
<ButtonGroup>
364-
<Button size="small" onClick={() => { handleClose({ value: 'ok' }); }} color="primary" startIcon={<CheckBoxIcon />}>
363+
<ButtonGroup color="primary" size="small" variant="outlined">
364+
<Button onClick={() => { handleClose({ value: 'ok' }); }} color="primary" startIcon={<CheckBoxIcon />}>
365365
{values.value === 'ok' ? 'keep as OK' : 'mark as OK'}
366366
</Button>
367-
<Button size="small" onClick={() => { handleClose({ value: 'error' }); }} color="secondary" startIcon={<ErrorIcon />}>
367+
<Button onClick={() => { handleClose({ value: 'error' }); }} color="primary" startIcon={<ErrorIcon color='error' />}>
368368
{values.value === 'error' ? 'keep as ERROR' : 'mark as ERROR'}
369369
</Button>
370-
<Button size="small" onClick={() => { handleClose({ value: null }); }} color="primary" startIcon={<CheckBoxOutlineBlankIcon />}>
370+
<Button onClick={() => { handleClose({ value: null }); }} color="primary" startIcon={<CheckBoxOutlineBlankIcon />}>
371371
{!values.value ? 'keep as unprocessed' : 'mark as unprocessed'}
372372
</Button>
373373
</ButtonGroup>
374-
<Button onClick={() => handleClose()} color="primary">
374+
<Button size="small" onClick={() => handleClose()} color="primary">
375375
Close
376376
</Button>
377377
</DialogActions>

‎src/webview/src/components/textFieldEditDialog.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export default function TextFieldEditDialog(props) {
6464
</TextField>
6565
</DialogContent>
6666
<DialogActions>
67-
<Button autoFocus onClick={handleSave} color="primary">
67+
<Button size="small" autoFocus onClick={handleSave} color="primary">
6868
Save changes
6969
</Button>
7070
</DialogActions>

0 commit comments

Comments
 (0)