feat(ui): make process output text boxes collapsible and default to collapsed (v0.1.10) #55

Merged
gronod merged 1 commits from feature/issue-54-collapsible-log-containers into development 2026-08-25 08:44:59 +01:00
10 changed files with 47 additions and 24 deletions
+1 -1
View File
@@ -1,7 +1,7 @@
{
"name": "iccery",
"private": true,
"version": "0.1.9",
"version": "0.1.10",
"type": "module",
"scripts": {
"tauri": "tauri"
+1 -1
View File
@@ -1,6 +1,6 @@
[package]
name = "iccery"
version = "0.1.9"
version = "0.1.10"
description = "A Tauri App"
authors = ["you"]
edition = "2021"
+1 -1
View File
@@ -1,7 +1,7 @@
{
"$schema": "https://schema.tauri.app/config/2",
"productName": "ICCery",
"version": "0.1.9",
"version": "0.1.10",
"identifier": "com.gronod.iccery",
"build": {
"frontendDist": "../src"
+15 -15
View File
@@ -94,10 +94,10 @@
<button class="primary" id="btnGenerate" disabled>Generate (.ti1)</button>
<div class="log-container hidden" id="targenLogContainer">
<h4>Process Output</h4>
<details class="log-container hidden" id="targenLogContainer">
<summary>Process Output</summary>
<pre id="targenLog"></pre>
</div>
</details>
</section>
<!-- Stage 2: printtarg -->
@@ -166,10 +166,10 @@
<button class="primary" id="btnCreateLayout">Create Layout (.ti2 + .tif)</button>
<div class="log-container hidden" id="printtargLogContainer">
<h4>Process Output</h4>
<details class="log-container hidden" id="printtargLogContainer">
<summary>Process Output</summary>
<pre id="printtargLog"></pre>
</div>
</details>
<!-- TIFF preview gallery (populated dynamically after generation) -->
<div class="tiff-gallery hidden" id="tiffGallery">
@@ -279,10 +279,10 @@
<div class="swatch-grid" id="swatchGrid"></div>
<!-- Process Log -->
<div class="log-container hidden" id="chartreadLogContainer">
<h4>Process Output</h4>
<details class="log-container hidden" id="chartreadLogContainer">
<summary>Process Output</summary>
<pre id="chartreadLog"></pre>
</div>
</details>
</section>
<!-- Stage 4: colprof -->
@@ -338,10 +338,10 @@
</div>
<!-- Process Log -->
<div class="log-container hidden" id="colprofLogContainer">
<h4>Process Output</h4>
<details class="log-container hidden" id="colprofLogContainer">
<summary>Process Output</summary>
<pre id="colprofLog"></pre>
</div>
</details>
</section>
<!-- Stage 5: profcheck -->
@@ -385,10 +385,10 @@
</div>
<!-- Process Log -->
<div class="log-container hidden" id="profcheckLogContainer">
<h4>Verification Output</h4>
<details class="log-container hidden" id="profcheckLogContainer">
<summary>Verification Output</summary>
<pre id="profcheckLog"></pre>
</div>
</details>
</section>
</main>
</div>
+1
View File
@@ -90,6 +90,7 @@ export function initChartread() {
}
logPre.textContent = "";
logContainer.open = false;
logContainer.classList.remove("hidden");
setState(STATE.CALIBRATING);
setPrompt("Starting chartread... waiting for instrument calibration prompt.");
+1
View File
@@ -36,6 +36,7 @@ export function initColprof() {
const description = descInput.value.trim() || basename;
logPre.textContent = "";
logContainer.open = false;
logContainer.classList.remove("hidden");
spinnerContainer.classList.remove("hidden");
successCard.classList.add("hidden");
+1
View File
@@ -272,6 +272,7 @@ export function initPrinttarg() {
}
logPre.textContent = "";
logContainer.open = false;
logContainer.classList.remove("hidden");
tiffGallery.classList.add("hidden");
if (rawPrintPanel) rawPrintPanel.classList.add("hidden");
+1
View File
@@ -33,6 +33,7 @@ export function initProfcheck() {
const iccPath = cwd ? `${cwd}${sep}${basename}.icc` : `${basename}.icc`;
logPre.textContent = "";
logContainer.open = false;
logContainer.classList.remove("hidden");
reportCard.classList.add("hidden");
btnVerify.disabled = true;
+1
View File
@@ -77,6 +77,7 @@ export function initTargen() {
// Generate button clicks
btnGenerate.addEventListener("click", async () => {
logPre.textContent = "";
logContainer.open = false;
logContainer.classList.remove("hidden");
btnGenerate.disabled = true;
+24 -6
View File
@@ -270,23 +270,41 @@ button:disabled {
}
.log-container {
margin-top: 20px;
margin-top: 16px;
background: #111;
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 10px;
padding: 8px 12px;
}
.log-container h4 {
margin: 0 0 10px 0;
.log-container summary {
cursor: pointer;
user-select: none;
font-weight: 500;
font-size: 0.85rem;
color: #888;
font-size: 0.9em;
outline: none;
display: list-item;
transition: color 0.2s ease;
}
.log-container summary:hover {
color: #ccc;
}
.log-container[open] {
padding-bottom: 12px;
}
.log-container[open] summary {
margin-bottom: 10px;
color: #aaa;
}
.log-container pre {
margin: 0;
font-family: monospace;
font-size: 0.9em;
font-size: 0.85rem;
color: #ccc;
max-height: 200px;
overflow-y: auto;