Maybe fixed checkbox alignment issue Dan reported?
Brian Vaughn committed
Feb 27, 2019 at 13:54 UTC
13ca37384d99610ccbc8b1bf07fcafa97405d6d2
2 files changed
+25
-10
src/devtools/views/EditableValue.css
+9
-5
@@ -1,12 +1,16 @@
1
-.ValueInputLabel {
1
+.CheckboxLabel {
2
flex: 1 1 100%;
3
display: flex;
4
}
5
-.ValueInputLabel:focus-within {
5
+.CheckboxLabel:focus-within {
6
background-color: var(--color-button-background-focus);
7
}
8
9
-.ValueInput {
9
+.Checkbox:focus {
10
+ outline: none;
11
+}
12
+
13
+.Input {
14
flex: 1 1;
15
background: none;
16
border: 1px solid transparent;
@@ -15,11 +19,11 @@
19
font-family: var(--font-family-monospace);
20
font-size: var(--font-size-monospace-normal);
21
}
18
-
19
-.ValueInput:focus {
22
+.Input:focus {
23
background-color: var(--color-button-background-focus);
24
outline: none;
25
}
26
+
27
.ResetButton {
28
flex: 0 0 auto;
29
padding: 0 0.5rem;
src/devtools/views/EditableValue.js
+16
-5
@@ -88,17 +88,28 @@ export default function EditableValue({
88
89
return (
90
<Fragment>
91
- <label className={styles.ValueInputLabel}>
91
+ {dataType === 'boolean' && (
92
+ <label className={styles.CheckboxLabel}>
93
+ <input
94
+ checked={inputValue}
95
+ className={styles.Checkbox}
96
+ onChange={handleChange}
97
+ onKeyDown={handleKeyDown}
98
+ ref={inputRef}
99
+ type={type}
100
+ />
101
+ </label>
102
+ )}
103
+ {dataType !== 'boolean' && (
104
<input
93
- checked={dataType === 'boolean' ? inputValue : undefined}
94
- className={styles.ValueInput}
105
+ className={styles.Input}
106
onChange={handleChange}
107
onKeyDown={handleKeyDown}
108
ref={inputRef}
109
type={type}
99
- value={dataType === 'boolean' ? undefined : inputValue}
110
+ value={inputValue}
111
/>
101
- </label>
112
+ )}
113
{hasPendingChanges && dataType !== 'boolean' && (
114
<Button
115
className={styles.ResetButton}