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: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 {
padding: 4px 10px;
@@ -111,56 +111,107 @@ body {
.action-btn.sim-btn:hover { background: #ff44aa22; }
.action-btn.sim-btn.active { background: #ff44aa33; border-color: #ff66cc; color: #ff66cc; }
/* ==================== Toolbar Sections ==================== */
.toolbar-section {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 4px 0;
/* ==================== Toolbar Dropdowns ==================== */
.toolbar-dropdown {
position: relative;
}
.section-label {
font-size: 8px;
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;
.dropdown-toggle {
padding: 6px 14px;
background: #1a1a2e;
border: 1px solid #2a2a3a;
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;
cursor: pointer;
font-size: 12px;
font-weight: 600;
transition: all 0.15s;
}
.toolbar-section .component-btn:hover {
.dropdown-menu .component-btn:hover {
border-color: #9900ff;
color: #cc66ff;
background: #252540;