AI_Assistant/grid-apps-cmms
Watch
1
0
Fork
You've already forked grid-apps-cmms
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix image conversion modal styling

Browse source
This commit is contained in:
Stewart Allen 2026-02-23 20:59:41 -05:00
commit f6ee969d1c
2 changed files with 88 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

82
src/kiri/app/image.js
View file

@ -22,36 +22,58 @@ function loadImageDialog(image, name, force) {
}
});
}
const opt = {pre: [
"<div class='f-col a-center'>",
" <h3>Image Conversion</h3>",
" <p class='t-just' style='width:300px;line-height:1.5em'>",
" This will create a 3D model from a 2D PNG image. Photos must",
" be blurred to be usable. Values from 0=off to 50=high are suggested.",
" Higher values incur more processing time.",
" </p>",
" <div class='f-row t-right'><table>",
" <tr><th>blur value</th><td><input id='png-blur' value='0' size='3'></td>",
" <th>&nbsp;invert image</th><td><input id='png-inv' type='checkbox'></td></tr>",
" <tr><th>base size</th><td><input id='png-base' value='0' size='3'></td>",
" <th>&nbsp;invert alpha</th><td><input id='alpha-inv' type='checkbox'></td></tr>",
" <tr><th>border size</th><td><input id='png-border' value='0' size='3'></td>",
" <th></th><td></td></tr>",
" </table></div>",
"</div>"
]};
api.uc.confirm(undefined, {convert:true, cancel:false}, undefined, opt).then((ok) => {
if (ok) {
const rnd = Date.now().toString(36);
const host = $('mod-any');
host.innerHTML = [
`<div class="image-convert-dialog f-col a-center">`,
` <h3 class="image-convert-title">Image Conversion</h3>`,
` <p class="image-convert-copy t-just">`,
` This will create a 3D model from a 2D PNG image. Photos must`,
` be blurred to be usable. Values from 0=off to 50=high are suggested.`,
` Higher values incur more processing time.`,
` </p>`,
` <div class="f-row t-right image-convert-fields"><table>`,
` <tr><th>blur value</th><td><input id="png-blur-${rnd}" value="0" size="3"></td>`,
` <th>invert image</th><td><input id="png-inv-${rnd}" type="checkbox"></td></tr>`,
` <tr><th>base size</th><td><input id="png-base-${rnd}" value="0" size="3"></td>`,
` <th>invert alpha</th><td><input id="alpha-inv-${rnd}" type="checkbox"></td></tr>`,
` <tr><th>border size</th><td><input id="png-border-${rnd}" value="0" size="3"></td>`,
` <th></th><td></td></tr>`,
` </table></div>`,
` <div class="f-row j-end image-convert-actions">`,
` <button id="img-convert-ok-${rnd}">convert</button>`,
` <button id="img-convert-cancel-${rnd}">cancel</button>`,
` </div>`,
`</div>`
].join('');
const blur = $(`png-blur-${rnd}`);
const base = $(`png-base-${rnd}`);
const border = $(`png-border-${rnd}`);
const invImage = $(`png-inv-${rnd}`);
const invAlpha = $(`alpha-inv-${rnd}`);
const okBtn = $(`img-convert-ok-${rnd}`);
const cancelBtn = $(`img-convert-cancel-${rnd}`);
okBtn.onclick = () => {
api.modal.hide();
setTimeout(() => {
loadImage(image, {
file: name,
blur: parseInt($('png-blur').value) || 0,
base: parseInt($('png-base').value) || 0,
border: parseInt($('png-border').value) || 0,
inv_image: $('png-inv').checked,
inv_alpha: $('alpha-inv').checked
blur: parseInt(blur.value) || 0,
base: parseInt(base.value) || 0,
border: parseInt(border.value) || 0,
inv_image: invImage.checked,
inv_alpha: invAlpha.checked
});
}
});
},50);
};
cancelBtn.onclick = () => api.modal.hide();
blur.onkeypress = (ev) => {
if (ev.key === 'Enter' || ev.charCode === 13) okBtn.click();
};
api.modal.show('any');
setTimeout(() => blur.focus(), 0);
}
/**
@ -62,10 +84,10 @@ function loadImageDialog(image, name, force) {
*/
function loadImage(image, opt = {}) {
const info = Object.assign({settings: settings.get(), png:image}, opt);
api.client.image2mesh(info, progress => {
api.show.progress(progress, "converting");
api.client.image2mesh(info, () => {
api.show.busy('converting');
}, vertices => {
api.show.progress(0);
api.show.busy(false);
const widget = newWidget().loadVertices(vertices);
widget.meta.file = opt.file;
platform.add(widget);

36
web/kiri/index.css
View file

@ -1850,6 +1850,42 @@ details[open] summary::after {
margin: 0 10px 0 10px;
text-align: left;
}
.image-convert-dialog {
gap: 8px;
padding: 10px 14px 6px;
min-width: 360px;
}
.image-convert-title {
margin: 0;
text-align: center;
}
.image-convert-copy {
width: 320px;
line-height: 1.5em;
padding: 5px 0 5px 0;
margin: 0;
}
.image-convert-fields {
justify-content: center;
}
.image-convert-fields table {
border-collapse: collapse;
}
.image-convert-fields th,
.image-convert-fields td {
padding: 3px 6px;
vertical-align: middle;
}
.image-convert-fields th {
font-weight: 600;
}
.image-convert-fields input[type="checkbox"] {
margin: 0;
}
.image-convert-actions {
width: 100%;
margin-top: 4px;
}
.dev-type {
font-family: 'Russo One', sans-serif;