{"parents":["a9aa9f210637c6b74fab768e63f899b6a4216e0f"],"commit":{"revision":"18b34b49268ab9256e5408b1746da4a45eec5ca1","authoredAt":"2019-04-26T13:53:22-07:00","subject":"Rearranged Settings UI in prep for custom filter controls","shortRevision":"18b34b4926","authorName":"Brian Vaughn","authorEmail":"bvaughn@fb.com"},"patch":"diff --git a\/src\/devtools\/views\/Settings\/Settings.css b\/src\/devtools\/views\/Settings\/Settings.css\nindex 581facc0e9..9e255d1233 100644\n--- a\/src\/devtools\/views\/Settings\/Settings.css\n+++ b\/src\/devtools\/views\/Settings\/Settings.css\n@@ -13,48 +13,73 @@\n }\n \n .Section {\n- display: flex;\n- flex-direction: row;\n- align-items: center;\n- margin-right: 0.5rem;\n- margin-bottom: 0.5rem;\n+ width: 100%;\n+ padding: 0.5rem 0;\n+ border-top: 1px solid var(--color-border);\n+}\n+.Section:first-of-type {\n+ padding-top: 0;\n+ border-top: none;\n }\n \n .Header {\n- margin-right: 0.5rem;\n+ margin-bottom: 0.5rem;\n font-size: var(--font-size-sans-large);\n }\n \n .OptionGroup {\n- display: flex;\n+ display: inline-flex;\n flex-direction: row;\n+ align-items: center;\n user-select: none;\n+ margin: 0 1rem 0.5rem 0;\n+}\n+.OptionGroup:last-of-type {\n+ margin-right: 0;\n+}\n+\n+.OptionLabel {\n+ margin-right: 0.5rem;\n+ font-size: var(--font-size-sans-normal);\n }\n \n-.Option {\n+.RadioOption {\n cursor: pointer;\n padding: 0.5rem;\n border: 1px solid var(--color-border);\n border-right: none;\n }\n \n-.Option:hover {\n+.RadioOption:hover {\n background-color: var(--color-background-hover);\n }\n \n-.Option:first-of-type {\n+.RadioOption:first-of-type {\n border-top-left-radius: 0.25rem;\n border-bottom-left-radius: 0.25rem;\n }\n \n-.Option:last-of-type {\n+.RadioOption:last-of-type {\n border-top-right-radius: 0.25rem;\n border-bottom-right-radius: 0.25rem;\n border-right: 1px solid var(--color-border);\n }\n \n+.CheckboxOption {\n+ display: block;\n+ padding: 0.5rem 0;\n+}\n+\n .ScreenshotThrottling {\n background-color: var(--color-background-hover);\n padding: 0.25rem 0.5rem;\n border-radius: 0.25rem;\n }\n+\n+.HRule {\n+ height: 1px;\n+ background-color: var(--color-border);\n+ width: 100%;\n+ border: none;\n+ margin: 0.5rem 0;\n+}\ndiff --git a\/src\/devtools\/views\/Settings\/Settings.js b\/src\/devtools\/views\/Settings\/Settings.js\nindex 1c1ed43bcf..b578fe5b38 100644\n--- a\/src\/devtools\/views\/Settings\/Settings.js\n+++ b\/src\/devtools\/views\/Settings\/Settings.js\n@@ -73,9 +73,10 @@ function Settings(_: {||}) {\n return (\n

\n-

Theme<\/div>\n+

Display preferences<\/div>\n

\n- \n+

Theme<\/div>\n+ \n {' '}\n Auto\n <\/label>\n- \n+ \n {' '}\n Light\n <\/label>\n- \n+ \n \n <\/div>\n- <\/div>\n-

\n-

Components tree<\/div>\n- \n- {' '}\n- Collapse tree by default\n- <\/label>\n- <\/div>\n-

\n-

Display density<\/div>\n

\n- \n+

Display density<\/div>\n+ \n {' '}\n Compact\n <\/label>\n- \n+ \n \n <\/div>\n <\/div>\n+\n+

\n+

Components tree<\/div>\n+ \n+ {' '}\n+ Collapse newly added components by default\n+ <\/label>\n+ <\/div>\n+\n {store.supportsCaptureScreenshots && (\n-

\n-

Profiler<\/div>\n- \n- {' '}\n- Capture screenshots while profiling\n- <\/label>\n- <\/div>\n+

\n+

Profiler<\/div>\n+ \n+ {' '}\n+ Capture screenshots while profiling\n+ <\/label>\n {captureScreenshots && (\n

\n Screenshots will be throttled in order to reduce the negative\n","body":"","files":[{"status":"M","path":"src\/devtools\/views\/Settings\/Settings.css"},{"status":"M","path":"src\/devtools\/views\/Settings\/Settings.js"}]}

dillon1000/react

Files changed