clean up prefs dialog
This commit is contained in:
parent
165258616d
commit
c14be0940e
2 changed files with 39 additions and 21 deletions
|
|
@ -226,7 +226,7 @@ api.settings = function() {
|
|||
const { surface, normals, space, wireframe } = prefs.map;
|
||||
const { dark } = space;
|
||||
|
||||
const col1 = h.div([
|
||||
const set1 = h.div([
|
||||
h.label('dark mode'),
|
||||
h.input({ type: "checkbox",
|
||||
onchange: ev => call.set_darkmode(ev.target.checked),
|
||||
|
|
@ -244,9 +244,20 @@ api.settings = function() {
|
|||
}),
|
||||
]);
|
||||
|
||||
const col2 = h.div([
|
||||
h.label(''),
|
||||
h.label('normal'),
|
||||
const set2 = h.div([
|
||||
h.label({ class: "header", _: '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)
|
||||
}),
|
||||
]);
|
||||
|
||||
const set3 = h.div([
|
||||
h.label({ class: "header", _: 'normal'}),
|
||||
h.label('length'),
|
||||
h.input({ type: "text", size: 5, value: parseFloat(normals.length),
|
||||
onchange: ev => call.set_normals_length(ev.target.value)
|
||||
|
|
@ -258,9 +269,8 @@ api.settings = function() {
|
|||
}),
|
||||
]);
|
||||
|
||||
const col3 = h.div([
|
||||
h.label(''),
|
||||
h.label('surface'),
|
||||
const set4 = h.div([
|
||||
h.label({ class: "header", _: 'surface'}),
|
||||
h.label('radians'),
|
||||
h.input({ type: "text", size: 5, value: parseFloat(surface.radians),
|
||||
onchange: ev => call.set_surface_radians(ev.target.value)
|
||||
|
|
@ -271,20 +281,7 @@ api.settings = function() {
|
|||
}),
|
||||
]);
|
||||
|
||||
const col4 = h.div([
|
||||
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 ] ));
|
||||
modal.show('settings', h.div({ class: "settings" }, [ set1, set2, set3, set4 ] ));
|
||||
}
|
||||
|
||||
// create html elements
|
||||
|
|
|
|||
|
|
@ -300,11 +300,31 @@ button:hover {
|
|||
gap: 5px;
|
||||
}
|
||||
|
||||
.settings {
|
||||
gap: 5px;
|
||||
display: grid;
|
||||
background-color: #fff;
|
||||
grid: min-content 1fr / min-content 1fr;
|
||||
}
|
||||
|
||||
.settings > div {
|
||||
display: grid;
|
||||
background-color: #f5f5f5;
|
||||
grid: min-content 1fr / min-content 1fr;
|
||||
white-space: nowrap;
|
||||
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 {
|
||||
|
|
@ -314,6 +334,7 @@ button:hover {
|
|||
.settings input {
|
||||
font-family: monospace;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/** spinner animation **/
|
||||
|
|
|
|||
Loading…
Reference in a new issue