mAi/house-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add custom furniture creator form to catalog panel

Browse Source 
Adds a "Create Custom Furniture" button at the bottom of the catalog
sidebar that expands into a form with fields for name, dimensions
(W/D/H in meters), color picker, and category selector. Submitting
creates a simple box-geometry catalog item and adds it to the
in-memory catalog for immediate placement into rooms.
This commit is contained in:
m
2026-02-07 12:45:09 +01:00
parent d35b61648e
commit 53ee0fc1ec
2 changed files with 268 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/index.html
View File

@@ -207,6 +207,103 @@
font-size: 12px;
}
/* Custom furniture creator */
.catalog-create-btn {
display: block;
width: calc(100% - 24px);
margin: 8px 12px;
padding: 8px;
border: 1px dashed #4a90d9;
border-radius: 4px;
background: transparent;
color: #4a90d9;
cursor: pointer;
font-size: 12px;
font-weight: 500;
}
.catalog-create-btn:hover {
background: #e8f0fe;
}
.catalog-create-form {
padding: 0 12px 12px;
border-top: 1px solid #eee;
margin-top: 4px;
}
.catalog-create-form label {
display: block;
font-size: 11px;
color: #666;
margin-top: 8px;
margin-bottom: 2px;
}
.catalog-create-form input,
.catalog-create-form select {
width: 100%;
padding: 5px 8px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 12px;
outline: none;
}
.catalog-create-form input:focus,
.catalog-create-form select:focus {
border-color: #4a90d9;
}
.catalog-create-dims {
display: flex;
gap: 6px;
}
.catalog-create-dims > div {
flex: 1;
}
.catalog-create-dims label {
margin-top: 0 !important;
}
.catalog-create-color-row {
display: flex;
align-items: center;
gap: 8px;
}
.catalog-create-color-row input[type="color"] {
width: 32px;
height: 28px;
padding: 1px;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
flex-shrink: 0;
}
.catalog-create-color-row input[type="text"] {
flex: 1;
}
.catalog-create-actions {
display: flex;
gap: 6px;
margin-top: 10px;
}
.catalog-create-actions button {
flex: 1;
padding: 6px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 12px;
cursor: pointer;
}
.catalog-create-actions .btn-submit {
background: #4a90d9;
color: #fff;
border-color: #4a90d9;
}
.catalog-create-actions .btn-submit:hover {
background: #3a7bc8;
}
.catalog-create-actions .btn-cancel {
background: #fff;
}
.catalog-create-actions .btn-cancel:hover {
background: #f0f0f0;
}
.export-section {
margin-top: 16px;
padding-top: 12px;