JosLe/logic-gates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: toolbar sections as dropdown menus

Browse Source 
Replace horizontal toolbar sections with dropdown buttons (I/O, Gates,
Components). Each opens a dropdown menu on click, keeping the toolbar
clean and compact. Dropdowns close on outside click or after selecting
a gate.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jose Luis
2026-03-20 03:14:43 +01:00
parent 53d600fcb0
commit 2a58ad372e
4 changed files with 135 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
css/style.css
View File

@@ -78,7 +78,7 @@ body {
.gate-btn.output-btn { border-color: #ff8833; } .gate-btn.output-btn { border-color: #ff8833; }
.gate-btn.output-btn:hover { border-color: #ffaa55; } .gate-btn.output-btn:hover { border-color: #ffaa55; }
.separator { width: 1px; height: 32px; background: #2a2a3a; margin: 0 6px; } .separator { width: 1px; height: 24px; background: #2a2a3a; margin: 0 4px; }
.create-component-btn { .create-component-btn {
padding: 4px 10px; padding: 4px 10px;
@@ -111,56 +111,107 @@ body {
.action-btn.sim-btn:hover { background: #ff44aa22; } .action-btn.sim-btn:hover { background: #ff44aa22; }
.action-btn.sim-btn.active { background: #ff44aa33; border-color: #ff66cc; color: #ff66cc; } .action-btn.sim-btn.active { background: #ff44aa33; border-color: #ff66cc; color: #ff66cc; }
/* ==================== Toolbar Sections ==================== */ /* ==================== Toolbar Dropdowns ==================== */
.toolbar-section { .toolbar-dropdown {
display: flex; position: relative;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 4px 0;
} }
.section-label { .dropdown-toggle {
font-size: 8px; padding: 6px 14px;
color: #555;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 0 2px;
line-height: 1;
}
.section-buttons {
display: flex;
gap: 3px;
align-items: center;
flex-wrap: nowrap;
}
.toolbar-section .gate-btn {
padding: 4px 10px;
font-size: 11px;
}
.toolbar-section #saved-components {
display: flex;
gap: 3px;
align-items: center;
}
.toolbar-section .component-btn {
padding: 4px 10px;
font-size: 11px;
background: #1a1a2e; background: #1a1a2e;
border: 1px solid #2a2a3a; border: 1px solid #2a2a3a;
border-radius: 6px; border-radius: 6px;
color: #ccc;
cursor: pointer;
font-size: 12px;
font-weight: 600;
transition: all 0.15s;
user-select: none;
display: flex;
align-items: center;
gap: 6px;
}
.dropdown-toggle:hover {
background: #252540;
border-color: #00e599;
color: #fff;
}
.toolbar-dropdown.open .dropdown-toggle {
background: #252540;
border-color: #00e599;
color: #00e599;
}
.dropdown-arrow {
font-size: 10px;
opacity: 0.6;
transition: transform 0.15s;
}
.toolbar-dropdown.open .dropdown-arrow {
transform: rotate(180deg);
opacity: 1;
}
.dropdown-menu {
display: none;
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 140px;
background: #14141e;
border: 1px solid #2a2a3a;
border-radius: 8px;
padding: 4px;
z-index: 150;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
flex-direction: column;
gap: 2px;
}
.toolbar-dropdown.open .dropdown-menu {
display: flex;
}
.dropdown-menu .gate-btn {
width: 100%;
text-align: left;
padding: 7px 12px;
border-radius: 5px;
font-size: 12px;
}
.dropdown-menu .create-component-btn {
width: 100%;
text-align: left;
padding: 7px 12px;
border-radius: 5px;
font-size: 12px;
}
.dropdown-menu #saved-components {
display: flex;
flex-direction: column;
gap: 2px;
}
.dropdown-menu .component-btn {
width: 100%;
text-align: left;
padding: 7px 12px;
background: #1a1a2e;
border: 1px solid #2a2a3a;
border-radius: 5px;
color: #9900ff; color: #9900ff;
cursor: pointer; cursor: pointer;
font-size: 12px;
font-weight: 600; font-weight: 600;
transition: all 0.15s; transition: all 0.15s;
} }
.toolbar-section .component-btn:hover { .dropdown-menu .component-btn:hover {
border-color: #9900ff; border-color: #9900ff;
color: #cc66ff; color: #cc66ff;
background: #252540; background: #252540;

30
index.html
View File

@@ -10,22 +10,20 @@
<div id="toolbar"> <div id="toolbar">
<span class="logo">⚡ Logic Lab</span> <span class="logo">⚡ Logic Lab</span>
<!-- I/O Section --> <!-- I/O Dropdown -->
<div class="toolbar-section"> <div class="toolbar-dropdown">
<div class="section-label">I/O</div> <button class="dropdown-toggle">I/O <span class="dropdown-arrow">▾</span></button>
<div class="section-buttons"> <div class="dropdown-menu">
<button class="gate-btn input-btn" data-gate="INPUT">INPUT</button> <button class="gate-btn input-btn" data-gate="INPUT">INPUT</button>
<button class="gate-btn clock-btn" data-gate="CLOCK">CLOCK</button> <button class="gate-btn clock-btn" data-gate="CLOCK">CLOCK</button>
<button class="gate-btn output-btn" data-gate="OUTPUT">OUTPUT</button> <button class="gate-btn output-btn" data-gate="OUTPUT">OUTPUT</button>
</div> </div>
</div> </div>
<div class="separator"></div> <!-- Gates Dropdown -->
<div class="toolbar-dropdown">
<!-- Gates Section --> <button class="dropdown-toggle">Gates <span class="dropdown-arrow">▾</span></button>
<div class="toolbar-section"> <div class="dropdown-menu">
<div class="section-label">Gates</div>
<div class="section-buttons">
<button class="gate-btn" data-gate="AND">AND</button> <button class="gate-btn" data-gate="AND">AND</button>
<button class="gate-btn" data-gate="OR">OR</button> <button class="gate-btn" data-gate="OR">OR</button>
<button class="gate-btn" data-gate="NOT">NOT</button> <button class="gate-btn" data-gate="NOT">NOT</button>
@@ -35,19 +33,15 @@
</div> </div>
</div> </div>
<div class="separator"></div> <!-- Components Dropdown -->
<div class="toolbar-dropdown" id="components-section">
<!-- Components Section --> <button class="dropdown-toggle">Components <span class="dropdown-arrow">▾</span></button>
<div class="toolbar-section" id="components-section"> <div class="dropdown-menu" id="components-menu">
<div class="section-label">Components</div>
<div class="section-buttons">
<button class="create-component-btn" id="create-component-btn" title="Create custom component">✚ Create</button> <button class="create-component-btn" id="create-component-btn" title="Create custom component">✚ Create</button>
<div id="saved-components"></div> <div id="saved-components"></div>
</div> </div>
</div> </div>
<div class="separator"></div>
<button class="action-btn sim-btn" id="sim-btn">Waveform</button> <button class="action-btn sim-btn" id="sim-btn">Waveform</button>
<div class="toolbar-right"> <div class="toolbar-right">
<button class="action-btn export-btn" id="export-btn" title="Export circuit">↓ Export</button> <button class="action-btn export-btn" id="export-btn" title="Export circuit">↓ Export</button>

2
js/components.js
View File

@@ -286,6 +286,8 @@ export function updateComponentButtons() {
btn.addEventListener('click', (e) => { btn.addEventListener('click', (e) => {
e.stopPropagation(); e.stopPropagation();
state.placingGate = `COMPONENT:${comp.id}`; state.placingGate = `COMPONENT:${comp.id}`;
// Close dropdown
document.querySelectorAll('.toolbar-dropdown.open').forEach(d => d.classList.remove('open'));
}); });
container.appendChild(btn); container.appendChild(btn);
}); });

34
js/events.js
View File

@@ -215,9 +215,32 @@ export function initEvents() {
keysDown.delete(e.key); keysDown.delete(e.key);
}); });
// ==================== TOOLBAR ==================== // ==================== TOOLBAR DROPDOWNS ====================
document.querySelectorAll('.gate-btn').forEach(btn => { function closeAllDropdowns() {
btn.addEventListener('click', () => { document.querySelectorAll('.toolbar-dropdown.open').forEach(d => d.classList.remove('open'));
}
document.querySelectorAll('.dropdown-toggle').forEach(toggle => {
toggle.addEventListener('click', (e) => {
e.stopPropagation();
const dropdown = toggle.parentElement;
const wasOpen = dropdown.classList.contains('open');
closeAllDropdowns();
if (!wasOpen) dropdown.classList.add('open');
});
});
// Close dropdowns when clicking outside
document.addEventListener('click', (e) => {
if (!e.target.closest('.toolbar-dropdown')) {
closeAllDropdowns();
}
});
// Gate buttons inside dropdowns
document.querySelectorAll('.dropdown-menu .gate-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
const gateName = btn.dataset.gate; const gateName = btn.dataset.gate;
// In puzzle mode, check if gate is allowed // In puzzle mode, check if gate is allowed
if (puzzleMode && currentLevel) { if (puzzleMode && currentLevel) {
@@ -228,6 +251,7 @@ export function initEvents() {
} }
} }
state.placingGate = gateName; state.placingGate = gateName;
closeAllDropdowns();
}); });
}); });
@@ -332,7 +356,9 @@ export function initEvents() {
document.addEventListener('mouseup', () => { state.resizingWave = false; }); document.addEventListener('mouseup', () => { state.resizingWave = false; });
// ==================== COMPONENT EDITOR ==================== // ==================== COMPONENT EDITOR ====================
document.getElementById('create-component-btn').addEventListener('click', () => { document.getElementById('create-component-btn').addEventListener('click', (e) => {
e.stopPropagation();
closeAllDropdowns();
enterComponentEditor(); enterComponentEditor();
}); });