Rearranged Settings UI in prep for custom filter controls
Brian Vaughn committed
Apr 26, 2019 at 13:53 UTC
18b34b49268ab9256e5408b1746da4a45eec5ca1
2 files changed
+67
-43
src/devtools/views/Settings/Settings.css
+36
-11
@@ -13,48 +13,73 @@
13
}
14
15
.Section {
16
- display: flex;
17
- flex-direction: row;
18
- align-items: center;
19
- margin-right: 0.5rem;
20
- margin-bottom: 0.5rem;
16
+ width: 100%;
17
+ padding: 0.5rem 0;
18
+ border-top: 1px solid var(--color-border);
19
+}
20
+.Section:first-of-type {
21
+ padding-top: 0;
22
+ border-top: none;
23
}
24
25
.Header {
24
- margin-right: 0.5rem;
26
+ margin-bottom: 0.5rem;
27
font-size: var(--font-size-sans-large);
28
}
29
30
.OptionGroup {
29
- display: flex;
31
+ display: inline-flex;
32
flex-direction: row;
33
+ align-items: center;
34
user-select: none;
35
+ margin: 0 1rem 0.5rem 0;
36
+}
37
+.OptionGroup:last-of-type {
38
+ margin-right: 0;
39
+}
40
+
41
+.OptionLabel {
42
+ margin-right: 0.5rem;
43
+ font-size: var(--font-size-sans-normal);
44
}
45
34
-.Option {
46
+.RadioOption {
47
cursor: pointer;
48
padding: 0.5rem;
49
border: 1px solid var(--color-border);
50
border-right: none;
51
}
52
41
-.Option:hover {
53
+.RadioOption:hover {
54
background-color: var(--color-background-hover);
55
}
56
45
-.Option:first-of-type {
57
+.RadioOption:first-of-type {
58
border-top-left-radius: 0.25rem;
59
border-bottom-left-radius: 0.25rem;
60
}
61
50
-.Option:last-of-type {
62
+.RadioOption:last-of-type {
63
border-top-right-radius: 0.25rem;
64
border-bottom-right-radius: 0.25rem;
65
border-right: 1px solid var(--color-border);
66
}
67
68
+.CheckboxOption {
69
+ display: block;
70
+ padding: 0.5rem 0;
71
+}
72
+
73
.ScreenshotThrottling {
74
background-color: var(--color-background-hover);
75
padding: 0.25rem 0.5rem;
76
border-radius: 0.25rem;
77
}
78
+
79
+.HRule {
80
+ height: 1px;
81
+ background-color: var(--color-border);
82
+ width: 100%;
83
+ border: none;
84
+ margin: 0.5rem 0;
85
+}
src/devtools/views/Settings/Settings.js
+31
-32
@@ -73,9 +73,10 @@ function Settings(_: {||}) {
73
return (
74
<div className={styles.Settings}>
75
<div className={styles.Section}>
76
- <div className={styles.Header}>Theme</div>
76
+ <div className={styles.Header}>Display preferences</div>
77
<div className={styles.OptionGroup}>
78
- <label className={styles.Option}>
78
+ <div className={styles.OptionLabel}>Theme</div>
79
+ <label className={styles.RadioOption}>
80
<input
81
type="radio"
82
name="Settings-theme"
@@ -85,7 +86,7 @@ function Settings(_: {||}) {
86
/>{' '}
87
Auto
88
</label>
88
- <label className={styles.Option}>
89
+ <label className={styles.RadioOption}>
90
<input
91
type="radio"
92
name="Settings-theme"
@@ -95,7 +96,7 @@ function Settings(_: {||}) {
96
/>{' '}
97
Light
98
</label>
98
- <label className={styles.Option}>
99
+ <label className={styles.RadioOption}>
100
<input
101
type="radio"
102
name="Settings-theme"
@@ -106,22 +107,9 @@ function Settings(_: {||}) {
107
Dark
108
</label>
109
</div>
109
- </div>
110
- <div className={styles.Section}>
111
- <div className={styles.Header}>Components tree</div>
112
- <label>
113
- <input
114
- type="checkbox"
115
- checked={collapseNodesByDefault}
116
- onChange={updateCollapseNodesByDefault}
117
- />{' '}
118
- Collapse tree by default
119
- </label>
120
- </div>
121
- <div className={styles.Section}>
122
- <div className={styles.Header}>Display density</div>
110
<div className={styles.OptionGroup}>
124
- <label className={styles.Option}>
111
+ <div className={styles.OptionLabel}>Display density</div>
112
+ <label className={styles.RadioOption}>
113
<input
114
type="radio"
115
name="Settings-displayDensity"
@@ -131,7 +119,7 @@ function Settings(_: {||}) {
119
/>{' '}
120
Compact
121
</label>
134
- <label className={styles.Option}>
122
+ <label className={styles.RadioOption}>
123
<input
124
type="radio"
125
name="Settings-displayDensity"
@@ -143,19 +131,30 @@ function Settings(_: {||}) {
131
</label>
132
</div>
133
</div>
134
+
135
+ <div className={styles.Section}>
136
+ <div className={styles.Header}>Components tree</div>
137
+ <label className={styles.CheckboxOption}>
138
+ <input
139
+ type="checkbox"
140
+ checked={collapseNodesByDefault}
141
+ onChange={updateCollapseNodesByDefault}
142
+ />{' '}
143
+ Collapse newly added components by default
144
+ </label>
145
+ </div>
146
+
147
{store.supportsCaptureScreenshots && (
147
- <div>
148
- <div className={styles.Section}>
149
- <div className={styles.Header}>Profiler</div>
150
- <label>
151
- <input
152
- type="checkbox"
153
- checked={captureScreenshots}
154
- onChange={updateCaptureScreenshotsWhileProfiling}
155
- />{' '}
156
- Capture screenshots while profiling
157
- </label>
158
- </div>
148
+ <div className={styles.Section}>
149
+ <div className={styles.Header}>Profiler</div>
150
+ <label className={styles.CheckboxOption}>
151
+ <input
152
+ type="checkbox"
153
+ checked={captureScreenshots}
154
+ onChange={updateCaptureScreenshotsWhileProfiling}
155
+ />{' '}
156
+ Capture screenshots while profiling
157
+ </label>
158
{captureScreenshots && (
159
<div className={styles.ScreenshotThrottling}>
160
Screenshots will be throttled in order to reduce the negative