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 { 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
|
||||||
|
|
|
||||||
|
|
@ -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 **/
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue