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

36
web/kiri/index.css
View file

@ -1850,6 +1850,42 @@ details[open] summary::after {
margin: 0 10px 0 10px; margin: 0 10px 0 10px;
text-align: left; 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 { .dev-type {
font-family: 'Russo One', sans-serif; font-family: 'Russo One', sans-serif;