Skip to content

Commit dd19cd7

Browse files
roblourensroblourens
committed
Merge branch 'roblou/settingsEditorAsTree'
2 parents e8c5cb7 + de1fbc1 commit dd19cd7

4 files changed

Lines changed: 885 additions & 880 deletions

File tree

‎src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css‎

Lines changed: 74 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -90,132 +90,138 @@
9090
margin-left: 2px;
9191
}
9292

93-
.settings-editor > .settings-body .settings-list-container .settings-list-offset-helper {
93+
.settings-editor > .settings-body .settings-tree-container .settings-list-offset-helper {
9494
opacity: 0;
9595
position: absolute;
9696
}
9797

98-
.settings-editor > .settings-body .settings-list-container .monaco-list::before {
98+
.settings-editor > .settings-body .settings-tree-container .monaco-tree::before {
9999
outline: none !important;
100100
}
101101

102-
.settings-editor > .settings-body .settings-list-container {
102+
.settings-editor > .settings-body .settings-tree-container {
103103
flex: 1;
104104
border-spacing: 0;
105105
border-collapse: separate;
106106
position: relative;
107107
}
108108

109-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row {
109+
.settings-editor > .settings-body > .settings-tree-container .setting-item {
110110
cursor: default;
111111
white-space: normal;
112+
display: flex;
113+
height: 100%;
114+
min-height: 75px;
112115
}
113116

114-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row.odd:not(.focused):not(.selected):not(:hover),
115-
.settings-editor > .settings-body > .settings-list-container .monaco-list:not(:focus) .monaco-list-row.focused.odd:not(.selected):not(:hover),
116-
.settings-editor > .settings-body > .settings-list-container .monaco-list:not(.focused) .monaco-list-row.focused.odd:not(.selected):not(:hover) {
117-
background-color: rgba(130, 130, 130, 0.04);
117+
.settings-editor > .settings-body > .settings-tree-container .monaco-tree-row .content::before {
118+
content: ' ';
119+
display: inline-block;
120+
position: absolute;
121+
width: 10px;
122+
left: -14px;
123+
top: 2px;
124+
bottom: 10px;
118125
}
119126

120-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row.setting-item {
121-
padding: 3px;
127+
.settings-editor > .settings-body > .settings-tree-container .monaco-tree .monaco-tree-row {
128+
background-color: initial !important;
122129
}
123130

124-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row > .setting-item-container {
125-
display: flex;
126-
height: 100%;
131+
.settings-editor > .settings-body > .settings-tree-container .setting-item.odd:not(.focused):not(.selected):not(:hover),
132+
.settings-editor > .settings-body > .settings-tree-container .monaco-tree:not(:focus) .setting-item.focused.odd:not(.selected):not(:hover),
133+
.settings-editor > .settings-body > .settings-tree-container .monaco-tree:not(.focused) .setting-item.focused.odd:not(.selected):not(:hover) {
134+
background-color: rgba(130, 130, 130, 0.04);
127135
}
128136

129-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row > .setting-item-container > .setting-item-left {
137+
.settings-editor > .settings-body > .settings-tree-container .setting-item > .setting-item-left {
130138
flex: 1;
139+
padding-top: 3px;
140+
padding-bottom: 12px;
131141
}
132142

133-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row > .setting-item-container > .setting-item-right {
143+
.settings-editor > .settings-body > .settings-tree-container .setting-item > .setting-item-right {
134144
min-width: 180px;
135-
margin: 21px 10px;
145+
margin: 21px 10px 0px;
136146
}
137147

138-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-title {
148+
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-title {
139149
line-height: initial;
140150
}
141151

142-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-title .setting-item-overrides {
152+
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-title .setting-item-overrides {
143153
opacity: 0.5;
144154
margin-left: 7px;
145155
font-style: italic;
146156
}
147157

148-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-label {
158+
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-label,
159+
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-category {
149160
font-weight: bold;
161+
font-size: 14px;
150162
}
151163

152-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-category {
153-
font-weight: bold;
164+
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-category {
154165
opacity: 0.7;
155166
}
156167

157-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-key {
168+
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-key {
158169
margin-left: 10px;
159170
font-family: Monaco, Menlo, Consolas, "Droid Sans Mono", "Inconsolata", "Courier New", monospace, "Droid Sans Fallback";
160171
font-size: 90%;
161172
opacity: 0.8;
162173
display: none;
163174
}
164175

165-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-description {
176+
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description {
166177
opacity: 0.7;
167-
margin-top: 5px;
178+
margin-top: 3px;
168179
height: 36px;
169180
overflow: hidden;
170181
white-space: pre-wrap;
171182
}
172183

173-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row.is-expanded .setting-item-description,
174-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row.setting-item-measure-helper .setting-item-description {
175-
height: initial;
184+
.settings-editor > .settings-body > .settings-tree-container .setting-measure-container.monaco-tree-row {
185+
padding-left: 15px;
186+
opacity: 0;
176187
}
177188

178-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row.is-expandable .setting-item-description {
179-
cursor: pointer;
189+
.settings-editor > .settings-body > .settings-tree-container .setting-item.is-expanded .setting-item-description,
190+
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-measure-helper .setting-item-description {
191+
height: initial;
180192
}
181193

182-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row.is-expandable:not(.is-expanded) .setting-item-description::after {
183-
content: '…';
184-
display: block;
185-
height: 4px;
186-
width: 8px;
187-
position: absolute;
188-
bottom: 16px;
189-
right: 202px;
194+
.settings-editor > .settings-body > .settings-tree-container .setting-item.is-expandable .setting-item-description {
195+
cursor: pointer;
190196
}
191197

192-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-value {
198+
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value {
193199
display: flex;
194200
}
195201

196-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-value > .edit-in-settings-button,
197-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-value > .edit-in-settings-button:hover,
198-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-value > .edit-in-settings-button:active {
202+
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button,
203+
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button:hover,
204+
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button:active {
199205
margin: auto;
200206
text-align: left;
201207
text-decoration: underline;
202208
}
203209

204-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-value > .edit-in-settings-button + .setting-reset-button.monaco-button {
210+
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button + .setting-reset-button.monaco-button {
205211
display: none;
206212
}
207213

208-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row .monaco-select-box {
214+
.settings-editor > .settings-body > .settings-tree-container .setting-item .monaco-select-box {
209215
width: 100%;
210216
font: inherit;
211217
height: 26px;
212218
}
213219

214-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-value-checkbox {
220+
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-value-checkbox {
215221
position: relative;
216222
}
217223

218-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row.is-configured .setting-value-checkbox::after {
224+
.settings-editor > .settings-body > .settings-tree-container .setting-item.is-configured .setting-value-checkbox::after {
219225
content: ' ';
220226
display: block;
221227
height: 3px;
@@ -225,7 +231,7 @@
225231
left: -3px;
226232
}
227233

228-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-value > .setting-reset-button.monaco-button {
234+
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-reset-button.monaco-button {
229235
display: inline-block;
230236
background: url("clean.svg") center center no-repeat;
231237
width: 16px;
@@ -235,23 +241,36 @@
235241
visibility: hidden;
236242
}
237243

238-
.vs-dark .settings-editor > .settings-body > .settings-list-container .monaco-list-row .setting-item-value > .setting-reset-button.monaco-button {
244+
.settings-editor > .settings-body > .settings-tree-container .setting-item .expand-indicator {
245+
visibility: hidden;
246+
position: absolute;
247+
bottom: -2px;
248+
width: calc(100% - 190px);
249+
text-align: center;
250+
opacity: .5;
251+
}
252+
253+
.settings-editor > .settings-body > .settings-tree-container .setting-item.is-expandable .expand-indicator {
254+
visibility: visible;
255+
}
256+
257+
.vs-dark .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-reset-button.monaco-button {
239258
background: url("clean-dark.svg") center center no-repeat;
240259
}
241260

242-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row.is-configured .setting-item-value > .setting-reset-button.monaco-button {
261+
.settings-editor > .settings-body > .settings-tree-container .setting-item.is-configured .setting-item-value > .setting-reset-button.monaco-button {
243262
visibility: visible;
244263
}
245264

246-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row.all-settings {
265+
.settings-editor > .settings-body > .settings-tree-container .all-settings {
247266
display: flex;
248267
}
249268

250-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row.all-settings .all-settings-button {
269+
.settings-editor > .settings-body > .settings-tree-container .all-settings .all-settings-button {
251270
margin: auto;
252271
}
253272

254-
.settings-editor > .settings-body > .settings-list-container .monaco-list-row.all-settings .all-settings-button .monaco-button {
273+
.settings-editor > .settings-body > .settings-tree-container .all-settings .all-settings-button .monaco-button {
255274
padding-left: 10px;
256275
padding-right: 10px;
257276
}
@@ -264,57 +283,17 @@
264283
265284
This is risky, consider a different approach
266285
*/
267-
.settings-editor .settings-list-container .monaco-list-row {
286+
.settings-editor .settings-tree-container .setting-item {
268287
overflow: visible;
269288
}
270289

271-
.settings-editor .settings-list-container .monaco-list-row {
272-
margin-left: 15px;
273-
width: calc(100% - 15px);
274-
}
275-
276290
.settings-editor .settings-body {
277291
margin-left: -15px;
278292
}
279293

280-
.settings-editor > .settings-body > .settings-list-container .settings-group-title-label {
281-
margin: 5px 3px;
282-
}
283-
284-
.settings-editor > .settings-body > .settings-list-container .settings-group-title-expanded,
285-
.settings-editor > .settings-body > .settings-list-container .settings-group-title-collapsed {
286-
cursor: pointer;
287-
}
288-
289-
.vs-dark .settings-editor > .settings-body > .settings-list-container .settings-group-title-collapsed::before {
290-
background-image: url(collapsed-dark.svg);
291-
}
292-
293-
.settings-editor > .settings-body > .settings-list-container .settings-group-title-collapsed::before {
294-
display: inline-block;
295-
background-image: url(collapsed.svg);
296-
}
297-
298-
.vs-dark .settings-editor > .settings-body > .settings-list-container .settings-group-title-expanded::before {
299-
background-image: url(expanded-dark.svg);
300-
}
301-
302-
.settings-editor > .settings-body > .settings-list-container .settings-group-title-expanded::before {
303-
display: inline-block;
304-
background-image: url(expanded.svg);
305-
}
306-
307-
.settings-editor > .settings-body > .settings-list-container .settings-group-title-collapsed::before,
308-
.settings-editor > .settings-body > .settings-list-container .settings-group-title-expanded::before {
309-
background-size: 16px;
310-
background-position: 50% 50%;
311-
background-repeat: no-repeat;
312-
width: 16px;
313-
height: 22px;
314-
position: absolute;
315-
content: ' ';
316-
left: -19px;
317-
top: 4px;
294+
.settings-editor > .settings-body > .settings-tree-container .settings-group-title-label {
295+
margin: 0px;
296+
padding: 5px 0px;
318297
}
319298

320299
.settings-editor > .settings-body .settings-feedback-button {

0 commit comments

Comments
 (0)