Skip to content

Commit a0b0e76

Browse files
mbehr1mbehr1
committed
fix(layout): ... buttons in fishbone better contrast
MuiSwitch according to inverted badge foreground/background. Strangely checkbox colors are only partially available. More contrast for the ... buttons in effects and categories. Markdown switch colors according to theme and more verbose.
1 parent 829ad80 commit a0b0e76

File tree

3 files changed

+88
-70
lines changed

3 files changed

+88
-70
lines changed

‎src/webview/src/App.js

+17
Original file line numberDiff line numberDiff line change
@@ -822,6 +822,23 @@ export default class App extends Component {
822822
}
823823
}
824824
},
825+
MuiSwitch: {
826+
'track': {
827+
backgroundColor: vscodeStyles.getPropertyValue('--vscode-badge-foreground'),
828+
},
829+
colorSecondary: {
830+
color: vscodeStyles.getPropertyValue('--vscode-badge-background'),
831+
'&$checked': {
832+
color: vscodeStyles.getPropertyValue('--vscode-badge-background'),
833+
},
834+
'&$checked + $track': {
835+
backgroundColor: vscodeStyles.getPropertyValue('--vscode-badge-foreground'),
836+
},
837+
'&$disabled + $track': {
838+
backgroundColor: vscodeStyles.getPropertyValue('--vscode-badge-foreground'),
839+
},
840+
}
841+
},
825842
MuiButton: {
826843
textPrimary: {
827844
color: vscodeStyles.getPropertyValue('--vscode-button-foreground'),

‎src/webview/src/components/fishbone/fishboneChart.js

+69-68
Original file line numberDiff line numberDiff line change
@@ -62,19 +62,20 @@ export default function FishboneChart(props) {
6262
console.log(`FishboneChart render no causes! props=`, props);
6363
return <React.Fragment></React.Fragment>;
6464
}
65+
const vscodeStyles = window.getComputedStyle(document.body);
6566

66-
const getColor = (index) => {
67-
const colors = [
68-
'blue_two',
69-
'gray',
70-
'black',
71-
'green',
72-
'blue',
73-
'orange',
74-
'purple',
75-
'pink',
76-
77-
];
67+
const getColor = (index) => {
68+
const colors = [
69+
'blue_two',
70+
'gray',
71+
'black',
72+
'green',
73+
'blue',
74+
'orange',
75+
'purple',
76+
'pink',
77+
78+
];
7879

7980
if (index >= colors.length) {
8081
index %= colors.length;
@@ -158,64 +159,64 @@ export default function FishboneChart(props) {
158159
}
159160

160161
const getHalfCategories = (categories, top) => {
161-
// we want them sorted from left to right always changing top/down, e.g.
162-
// 1 3 5
163-
// 2 4
164-
165-
const halfArray = [];
162+
// we want them sorted from left to right always changing top/down, e.g.
163+
// 1 3 5
164+
// 2 4
165+
166+
const halfArray = [];
166167
for (let i = top ? 0 : 1; i < categories.length; i += 2) {
167168
halfArray.push(categories[i]);
168-
}
169-
// top ? causes.slice(0, middle) : causes.slice(middle);
170-
171-
const color = effectIndexColor;
172-
const halfCauses = halfArray.map((category, index) => {
173-
if (top) {
174-
// todo optimize so that we do use only one menu instance?
175-
return (
176-
<div key={`top_causes_${category.name}_${index}`} className="causeContent">
177-
<div className={`cause top ${color}_ ${color}Border`}>
178-
<OnBlurInputBase style={{ height: '1em' }} margin='dense' value={category.name} onChange={(event) => props.onChange(category, event, 'name')} />
179-
{props.categoryContextMenu && props.categoryContextMenu.length > 0 && /* todo race cond if all items are undefined... */
180-
<React.Fragment>
181-
<IconButton id={`top_cat_${index}`} onClick={handleMenuClick} color="secondary" size="small"><MoreVertIcon fontSize="small" /></IconButton>
182-
<Menu id={`top_cat_${index}`} anchorEl={menuAnchorEl} keepMounted open={menuOpen === `top_cat_${index}`} onClose={handleMenuClose}>
183-
{props.categoryContextMenu.filter(m => m !== undefined).map((menuItem, index) => <MenuItem onClick={() => { handleMenuClose(); menuItem?.cb(props.data, effectIndex, category); }}>{menuItem.text}</MenuItem>)}
184-
</Menu>
185-
</React.Fragment>
186-
}
187-
188-
</div>
189-
<div className="causeAndLine">
190-
{getRootCauses(category.rootCauses, category)}
191-
<div className={`diagonalLine ${color}TopBottom`} />
192-
</div>
193-
</div>
194-
);
195-
} else {
196-
return (
197-
<div key={`bottom_causes_${category.name}_${index}`} className="causeContent">
198-
<div className="causeAndLine">
199-
{getRootCauses(category.rootCauses, category)}
200-
<div className={`diagonalLine ${color}BottomTop`} />
201-
</div>
202-
<div className={`cause bottom ${color}_ ${color}Border`}>
203-
<OnBlurInputBase style={{ height: '1em' }} margin='dense' value={category.name} onChange={(event) => props.onChange(category, event, 'name')} />
204-
{props.categoryContextMenu && props.categoryContextMenu.length > 0 &&
205-
<React.Fragment>
206-
<IconButton id={`bottom_cat_${index}`} onClick={handleMenuClick} color="secondary" size="small"><MoreVertIcon fontSize="small" /></IconButton>
207-
<Menu id={`bottom_cat_${index}`} anchorEl={menuAnchorEl} keepMounted open={menuOpen === `bottom_cat_${index}`} onClose={handleMenuClose}>
208-
{props.categoryContextMenu.filter(m => m !== undefined).map((menuItem, index) => <MenuItem onClick={() => { handleMenuClose(); menuItem?.cb(props.data, effectIndex, category); }}>{menuItem.text}</MenuItem>)}
209-
</Menu>
210-
</React.Fragment>
211-
}
212-
</div>
213-
</div>
214-
);
215-
}
216-
});
217-
return (<div className="causesGroup">{halfCauses}</div>);
218169
}
170+
// top ? causes.slice(0, middle) : causes.slice(middle);
171+
172+
const color = effectIndexColor;
173+
const halfCauses = halfArray.map((category, index) => {
174+
if (top) {
175+
// todo optimize so that we do use only one menu instance?
176+
return (
177+
<div key={`top_causes_${category.name}_${index}`} className="causeContent">
178+
<div className={`cause top ${color}_ ${color}Border`}>
179+
<OnBlurInputBase style={{ height: '1em' }} margin='dense' value={category.name} onChange={(event) => props.onChange(category, event, 'name')} />
180+
{props.categoryContextMenu && props.categoryContextMenu.length > 0 && /* todo race cond if all items are undefined... */
181+
<React.Fragment>
182+
<IconButton id={`top_cat_${index}`} onClick={handleMenuClick} color="secondary" size="small" style={{ color: vscodeStyles.getPropertyValue('--vscode-button-secondaryForeground'), backgroundColor: vscodeStyles.getPropertyValue('--vscode-button-secondaryBackground'), }} ><MoreVertIcon fontSize="small" /></IconButton>
183+
<Menu id={`top_cat_${index}`} anchorEl={menuAnchorEl} keepMounted open={menuOpen === `top_cat_${index}`} onClose={handleMenuClose}>
184+
{props.categoryContextMenu.filter(m => m !== undefined).map((menuItem, index) => <MenuItem onClick={() => { handleMenuClose(); menuItem?.cb(props.data, effectIndex, category); }}>{menuItem.text}</MenuItem>)}
185+
</Menu>
186+
</React.Fragment>
187+
}
188+
189+
</div>
190+
<div className="causeAndLine">
191+
{getRootCauses(category.rootCauses, category)}
192+
<div className={`diagonalLine ${color}TopBottom`} />
193+
</div>
194+
</div>
195+
);
196+
} else {
197+
return (
198+
<div key={`bottom_causes_${category.name}_${index}`} className="causeContent">
199+
<div className="causeAndLine">
200+
{getRootCauses(category.rootCauses, category)}
201+
<div className={`diagonalLine ${color}BottomTop`} />
202+
</div>
203+
<div className={`cause bottom ${color}_ ${color}Border`}>
204+
<OnBlurInputBase style={{ height: '1em' }} margin='dense' value={category.name} onChange={(event) => props.onChange(category, event, 'name')} />
205+
{props.categoryContextMenu && props.categoryContextMenu.length > 0 &&
206+
<React.Fragment>
207+
<IconButton id={`bottom_cat_${index}`} onClick={handleMenuClick} color="secondary" size="small" style={{ color: vscodeStyles.getPropertyValue('--vscode-button-secondaryForeground'), backgroundColor: vscodeStyles.getPropertyValue('--vscode-button-secondaryBackground'), }}><MoreVertIcon fontSize="small" /></IconButton>
208+
<Menu id={`bottom_cat_${index}`} anchorEl={menuAnchorEl} keepMounted open={menuOpen === `bottom_cat_${index}`} onClose={handleMenuClose}>
209+
{props.categoryContextMenu.filter(m => m !== undefined).map((menuItem, index) => <MenuItem onClick={() => { handleMenuClose(); menuItem?.cb(props.data, effectIndex, category); }}>{menuItem.text}</MenuItem>)}
210+
</Menu>
211+
</React.Fragment>
212+
}
213+
</div>
214+
</div>
215+
);
216+
}
217+
});
218+
return (<div className="causesGroup">{halfCauses}</div>);
219+
}
219220

220221
const getCauses = () => {
221222
const color = effectIndexColor;
@@ -237,7 +238,7 @@ export default function FishboneChart(props) {
237238
</div>
238239
{props.effectContextMenu && props.effectContextMenu.length > 0 &&
239240
<React.Fragment>
240-
<IconButton id={`effect_${effectIndex}`} onClick={handleMenuClick} color="secondary" size="small"><MoreVertIcon fontSize="small" /></IconButton>
241+
<IconButton id={`effect_${effectIndex}`} onClick={handleMenuClick} color="secondary" size="small" style={{ color: vscodeStyles.getPropertyValue('--vscode-button-secondaryForeground'), backgroundColor: vscodeStyles.getPropertyValue('--vscode-button-secondaryBackground'), }}><MoreVertIcon fontSize="small" /></IconButton>
241242
<Menu anchorEl={menuAnchorEl} keepMounted open={menuOpen === `effect_${effectIndex}`} onClose={handleMenuClose}>
242243
{props.effectContextMenu.filter(e => e !== undefined).map((menuItem, index) => <MenuItem onClick={() => { handleMenuClose(); menuItem?.cb(props.data, effectIndex); }}>{menuItem.text}</MenuItem>)}
243244
</Menu>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@ export default function TextFieldEditDialog(props) {
5555
</IconButton>
5656
</DialogTitle>
5757
<DialogContent dividers>
58-
<FormControlLabel control={<Switch checked={markdownFormat} onChange={toggleMarkdown} />}
59-
label="Markdown">
58+
<FormControlLabel control={<Switch color='secondary' checked={markdownFormat} onChange={toggleMarkdown} />}
59+
label={markdownFormat ? 'Markdown on' : 'Markdown off'}>
6060
</FormControlLabel>
6161
<TextField name={props.label} margin="dense" id={'description-field-' + props.label}
6262
InputLabelProps={{ shrink: true, }} fullWidth multiline value={dataTextValue} onChange={(event) => setDataTextValue(event.target.value)}

0 commit comments

Comments
 (0)