fix chart's checkbox option type (#15014)

* fix chart's checkbox option type

* overwrite the useragent margin for checkbox
This commit is contained in:
Alan Ren
2021-04-07 10:19:00 -07:00
committed by GitHub
parent addef2d584
commit 7fc991b678
3 changed files with 15 additions and 5 deletions

View File

@@ -22,3 +22,7 @@
pointer-events: none; pointer-events: none;
opacity: 0.3; opacity: 0.3;
} }
input[type='checkbox'] {
margin: 0px 5px 0px 0px;
}

View File

@@ -317,11 +317,13 @@ export class ChartView extends Disposable implements IPanelView {
} }
private createOption(option: IChartOption, container: HTMLElement) { private createOption(option: IChartOption, container: HTMLElement) {
const label = DOM.$('div.option-label');
label.innerText = option.label;
const optionContainer = DOM.$('div.option-container'); const optionContainer = DOM.$('div.option-container');
const optionInput = DOM.$('div.option-input'); const optionInput = DOM.$('div.option-input');
if (option.type !== ControlType.checkbox) {
const label = DOM.$('div.option-label');
label.innerText = option.label;
optionContainer.appendChild(label); optionContainer.appendChild(label);
}
optionContainer.appendChild(optionInput); optionContainer.appendChild(optionInput);
let setFunc: ((val: string) => void) | ((val: number) => void) | ((val: boolean) => void); let setFunc: ((val: string) => void) | ((val: number) => void) | ((val: boolean) => void);
let entry = option.configEntry as keyof IInsightOptions; let entry = option.configEntry as keyof IInsightOptions;
@@ -329,7 +331,7 @@ export class ChartView extends Disposable implements IPanelView {
switch (option.type) { switch (option.type) {
case ControlType.checkbox: case ControlType.checkbox:
let checkbox = new Checkbox(optionInput, { let checkbox = new Checkbox(optionInput, {
label: '', label: option.label,
ariaLabel: option.label, ariaLabel: option.label,
checked: value, checked: value,
onChange: () => { onChange: () => {

View File

@@ -31,3 +31,7 @@
min-width: 250px; min-width: 250px;
padding-right: 10px; padding-right: 10px;
} }
.option-container {
margin-bottom: 5px;
}