Pysty/vaaka-toggle avatareille

Lisätty nappi jolla org-chartin voi vaihtaa vaaka- ja pystyasennon välillä.
Vaaka on oletuksena (kompakti), pysty lisää vertical-CSS-luokan.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-07 12:55:07 +03:00
parent 86191fbb6c
commit 9307c75516

View File

@@ -421,6 +421,16 @@
.org-branch {
display: none;
}
.org-chart.vertical {
flex-direction: column;
align-items: center;
gap: 0;
}
.org-chart.vertical .org-connector {
width: 2px;
height: 24px;
background: linear-gradient(to bottom, rgba(88, 166, 255, 0.8), rgba(88, 166, 255, 0.2));
}
.avatar-card {
background: linear-gradient(145deg, rgba(33, 38, 45, 0.4) 0%, rgba(13, 17, 23, 0.8) 100%);
backdrop-filter: blur(12px);
@@ -1007,6 +1017,7 @@
<div style="display:flex;align-items:center;gap:16px;">
<span style="font-weight:600;font-size:15px;color:var(--text-color)"><span style="color:#ff6b00">Kipinä</span> Agent Workspace</span>
<button id="btn-toggle-all" onclick="toggleAllAgents()" style="background:rgba(33, 38, 45, 0.8);border:1px solid var(--border-color);color:#c9d1d9;font-size:11px;padding:4px 12px;border-radius:4px;cursor:pointer;">Valitse kaikki</button>
<button id="btn-toggle-layout" onclick="toggleOrgLayout()" style="background:rgba(33, 38, 45, 0.8);border:1px solid var(--border-color);color:#c9d1d9;font-size:11px;padding:4px 12px;border-radius:4px;cursor:pointer;">⇅ Pysty</button>
</div>
<span id="agent-status" style="font-size:12px;color:var(--success-color)">Monitoring Active</span>
</div>
@@ -1303,6 +1314,16 @@
updatePromptEditor();
};
window.toggleOrgLayout = function() {
const chart = document.querySelector('.org-chart');
const btn = document.getElementById('btn-toggle-layout');
if (chart.classList.toggle('vertical')) {
btn.textContent = '⇄ Vaaka';
} else {
btn.textContent = '⇅ Pysty';
}
};
// Autosave prompti
document.getElementById('agent-prompt-text')?.addEventListener('input', (e) => {
if (selectedAgents.size === 0) return;