Fixed horizontal alignment for collapsable hooks
Brian Vaughn committed
Apr 10, 2019 at 12:47 UTC
40469a190e79ea13cb482620055c05e221f64c17
4 files changed
+35
-18
src/devtools/views/Components/HooksTree.css
+8
-1
@@ -4,7 +4,10 @@
4
}
5
6
.Hook {
7
- padding-left: 0.75rem;
7
+}
8
+
9
+.Children {
10
+ padding-left: 1rem;
11
}
12
13
.HeaderRow {
@@ -50,3 +53,7 @@
53
.TruncationIndicator {
54
color: var(--color-dimmer);
55
}
56
+
57
+.ExpandCollapseToggleSpacer {
58
+ width: 1rem;
59
+}
src/devtools/views/Components/HooksTree.js
+19
-12
@@ -121,28 +121,34 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
121
return (
122
<div className={styles.Hook}>
123
<div className={styles.NameValueRow}>
124
+ <span className={styles.ExpandCollapseToggleSpacer} />
125
<span className={styles.Name}>{name}</span>
126
</div>
126
- <KeyValue depth={1} name="DebugValue" value={value} />
127
- <InnerHooksTreeView
128
- canEditHooks={canEditHooks}
129
- hooks={subHooks}
130
- id={id}
131
- />
127
+ <div className={styles.Children}>
128
+ <KeyValue depth={1} name="DebugValue" value={value} />
129
+ <InnerHooksTreeView
130
+ canEditHooks={canEditHooks}
131
+ hooks={subHooks}
132
+ id={id}
133
+ />
134
+ </div>
135
</div>
136
);
137
} else {
138
return (
139
<div className={styles.Hook}>
140
<div className={styles.NameValueRow}>
141
+ <span className={styles.ExpandCollapseToggleSpacer} />
142
<span className={styles.Name}>{name}</span> {/* $FlowFixMe */}
143
<span className={styles.Value}>{displayValue}</span>
144
</div>
141
- <InnerHooksTreeView
142
- canEditHooks={canEditHooks}
143
- hooks={subHooks}
144
- id={id}
145
- />
145
+ <div className={styles.Children}>
146
+ <InnerHooksTreeView
147
+ canEditHooks={canEditHooks}
148
+ hooks={subHooks}
149
+ id={id}
150
+ />
151
+ </div>
152
</div>
153
);
154
}
@@ -166,7 +172,7 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
172
return (
173
<div className={styles.Hook}>
174
<KeyValue
169
- depth={0}
175
+ depth={1}
176
name={name}
177
overrideValueFn={overrideValueFn}
178
value={value}
@@ -177,6 +183,7 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
183
return (
184
<div className={styles.Hook}>
185
<div className={styles.NameValueRow}>
186
+ <span className={styles.ExpandCollapseToggleSpacer} />
187
<span
188
className={
189
typeof overrideValueFn === 'function'
src/devtools/views/Components/KeyValue.css
+4
-1
@@ -30,9 +30,12 @@
30
}
31
32
.ExpandCollapseToggle {
33
- display: inline-flex;
33
width: 1rem;
34
height: 1rem;
35
padding: 0;
36
color: var(--color-expand-collapse-toggle);
37
}
38
+
39
+.ExpandCollapseToggleSpacer {
40
+ width: 1rem;
41
+}
src/devtools/views/Components/KeyValue.js
+4
-4
@@ -62,7 +62,7 @@ export default function KeyValue({
62
63
children = (
64
<div key="root" className={styles.Item} style={style}>
65
- <div className={styles.ExpandCollapseToggle} />
65
+ <div className={styles.ExpandCollapseToggleSpacer} />
66
<span className={nameClassName}>{name}</span>
67
{typeof overrideValueFn === 'function' ? (
68
<EditableValue
@@ -80,7 +80,7 @@ export default function KeyValue({
80
// TODO Is this type even necessary? Can we just drop it?
81
children = (
82
<div key="root" className={styles.Item} style={style}>
83
- <div className={styles.ExpandCollapseToggle} />
83
+ <div className={styles.ExpandCollapseToggleSpacer} />
84
<span className={styles.Name}>{name}</span>
85
<span className={styles.Value}>{getMetaValueLabel(value)}</span>
86
</div>
@@ -106,7 +106,7 @@ export default function KeyValue({
106
{hasChildren ? (
107
<ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
108
) : (
109
- <div className={styles.ExpandCollapseToggle} />
109
+ <div className={styles.ExpandCollapseToggleSpacer} />
110
)}
111
<span
112
className={styles.Name}
@@ -137,7 +137,7 @@ export default function KeyValue({
137
{hasChildren ? (
138
<ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
139
) : (
140
- <div className={styles.ExpandCollapseToggle} />
140
+ <div className={styles.ExpandCollapseToggleSpacer} />
141
)}
142
<span
143
className={styles.Name}