Update opener icon and remove negative margin
Lucas Cordeiro committed
Apr 10, 2019 at 14:47 UTC
2d516199eaf0979b1966f0122b7a46995caaae5a
2 files changed
+24
-15
src/devtools/views/Components/KeyValue.css
+5
-7
@@ -1,5 +1,6 @@
1
.Item {
2
display: flex;
3
+ --color-expand-collapse-toggle: var(--color-dim);
4
}
5
6
.Name {
@@ -28,11 +29,8 @@
29
}
30
31
.Opener {
31
- padding: 0.125rem;
32
- margin-left: -1rem;
33
-}
34
-
35
-.Opener svg {
36
- width: 0.75rem;
37
- height: 0.75rem;
32
+ display: inline-flex;
33
+ width: 1rem;
34
+ height: 1rem;
35
+ color: var(--color-expand-collapse-toggle);
36
}
src/devtools/views/Components/KeyValue.js
+19
-8
@@ -3,7 +3,6 @@
3
import React, { useState } from 'react';
4
import type { Element } from 'react';
5
import EditableValue from './EditableValue';
6
-import Button from '../Button';
6
import ButtonIcon from '../ButtonIcon';
7
import { getMetaValueLabel } from '../utils';
8
import { meta } from '../../../hydration';
@@ -82,12 +81,14 @@ export default function KeyValue({
81
);
82
} else {
83
const opener = (
85
- <Button className={styles.Opener} onClick={handleToggle}>
86
- <ButtonIcon type={open ? 'up' : 'down'} />
87
- </Button>
84
+ <div className={styles.Opener} onClick={handleToggle}>
85
+ <ButtonIcon type={open ? 'expanded' : 'collapsed'} />
86
+ </div>
87
);
88
89
if (Array.isArray(value)) {
90
+ const showOpener = value.length > 0;
91
+
92
children = open
93
? value.map((innerValue, index) => (
94
<KeyValue
@@ -104,14 +105,20 @@ export default function KeyValue({
105
<div
106
key={`${depth}-root`}
107
className={styles.Item}
107
- style={{ paddingLeft }}
108
+ style={{
109
+ paddingLeft: showOpener
110
+ ? `calc(${paddingLeft} - 1rem)`
111
+ : paddingLeft,
112
+ }}
113
>
109
- {value.length > 0 && opener}
114
+ {showOpener && opener}
115
<span className={styles.Name}>{name}</span>
116
<span>Array</span>
117
</div>
118
);
119
} else {
120
+ const showOpener = Object.entries(value).length > 0;
121
+
122
children = open
123
? Object.entries(value).map<Element<any>>(([name, value]) => (
124
<KeyValue
@@ -128,9 +135,13 @@ export default function KeyValue({
135
<div
136
key={`${depth}-root`}
137
className={styles.Item}
131
- style={{ paddingLeft }}
138
+ style={{
139
+ paddingLeft: showOpener
140
+ ? `calc(${paddingLeft} - 1rem)`
141
+ : paddingLeft,
142
+ }}
143
>
133
- {Object.entries(value).length > 0 && opener}
144
+ {showOpener && opener}
145
<span className={styles.Name}>{name}</span>
146
<span>Object</span>
147
</div>