clean up prefs dialog

This commit is contained in:
Stewart Allen 2022-04-18 22:02:36 -04:00
commit c14be0940e
2 changed files with 39 additions and 21 deletions

View file

@ -226,7 +226,7 @@ api.settings = function() {
const { surface, normals, space, wireframe } = prefs.map; const { surface, normals, space, wireframe } = prefs.map;
const { dark } = space; const { dark } = space;
const col1 = h.div([ const set1 = h.div([
h.label('dark mode'), h.label('dark mode'),
h.input({ type: "checkbox", h.input({ type: "checkbox",
onchange: ev => call.set_darkmode(ev.target.checked), onchange: ev => call.set_darkmode(ev.target.checked),
@ -244,9 +244,20 @@ api.settings = function() {
}), }),
]); ]);
const col2 = h.div([ const set2 = h.div([
h.label(''), h.label({ class: "header", _: 'wire'}),
h.label('normal'), h.label('opacity'),
h.input({ type: "text", size: 5, value: parseFloat(wireframe.opacity),
onchange: ev => call.set_wireframe_opacity(ev.target.value)
}),
h.label('fog x'),
h.input({ type: "text", size: 5, value: parseFloat(wireframe.fog),
onchange: ev => call.set_wireframe_fog(ev.target.value)
}),
]);
const set3 = h.div([
h.label({ class: "header", _: 'normal'}),
h.label('length'), h.label('length'),
h.input({ type: "text", size: 5, value: parseFloat(normals.length), h.input({ type: "text", size: 5, value: parseFloat(normals.length),
onchange: ev => call.set_normals_length(ev.target.value) onchange: ev => call.set_normals_length(ev.target.value)
@ -258,9 +269,8 @@ api.settings = function() {
}), }),
]); ]);
const col3 = h.div([ const set4 = h.div([
h.label(''), h.label({ class: "header", _: 'surface'}),
h.label('surface'),
h.label('radians'), h.label('radians'),
h.input({ type: "text", size: 5, value: parseFloat(surface.radians), h.input({ type: "text", size: 5, value: parseFloat(surface.radians),
onchange: ev => call.set_surface_radians(ev.target.value) onchange: ev => call.set_surface_radians(ev.target.value)
@ -271,20 +281,7 @@ api.settings = function() {
}), }),
]); ]);
const col4 = h.div([ modal.show('settings', h.div({ class: "settings" }, [ set1, set2, set3, set4 ] ));
h.label(''),
h.label('wire'),
h.label('opacity'),
h.input({ type: "text", size: 5, value: parseFloat(wireframe.opacity),
onchange: ev => call.set_wireframe_opacity(ev.target.value)
}),
h.label('fog x'),
h.input({ type: "text", size: 5, value: parseFloat(wireframe.fog),
onchange: ev => call.set_wireframe_fog(ev.target.value)
}),
]);
modal.show('settings', h.div({ class: "settings" }, [ col1, col2, col3, col4 ] ));
} }
// create html elements // create html elements

View file

@ -300,11 +300,31 @@ button:hover {
gap: 5px; gap: 5px;
} }
.settings {
gap: 5px;
display: grid;
background-color: #fff;
grid: min-content 1fr / min-content 1fr;
}
.settings > div { .settings > div {
display: grid; display: grid;
background-color: #f5f5f5;
grid: min-content 1fr / min-content 1fr; grid: min-content 1fr / min-content 1fr;
white-space: nowrap; white-space: nowrap;
align-items: center; align-items: center;
border: 1px solid #ddd;
border-radius: 3px;
padding: 3px;
}
.settings .header {
grid-column: 1 / 3;
text-align: center;
margin-bottom: 5px;
border-radius: 3px;
background-color: #ccc;
padding: 0;
} }
.settings label { .settings label {
@ -314,6 +334,7 @@ button:hover {
.settings input { .settings input {
font-family: monospace; font-family: monospace;
text-align: center; text-align: center;
background: #fff;
} }
/** spinner animation **/ /** spinner animation **/