Skip to content

Commit

Permalink
Display checkbox for boolean value in SectionsFormManager
Browse files Browse the repository at this point in the history
  • Loading branch information
@MalekKamel
MalekKamel committed Oct 26, 2024
1 parent 2920739 commit b86d8ec
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 8 deletions.
48 changes: 46 additions & 2 deletions solara/lib/core/dashboard/brand/SectionsFormManager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ class SectionItemManager {

const isArray = Array.isArray(obj)

for (const [k, v] of Object.entries(obj)) {
for (const [k, v] of Object.entries(obj)) {
const item = document.createElement('div');

const cardValueContainer = document.createElement('div');
Expand All @@ -133,7 +133,51 @@ class SectionItemManager {
item.className = 'card-item';
itemKey.textContent = k.replace(/_/g, ' ')

if (this.isColorValue(v)) {
if (typeof v === 'boolean') {
// Create a container for the entire boolean input
const booleanContainer = document.createElement('div');
booleanContainer.className = 'boolean-container';

const checkboxContainer = document.createElement('div');
checkboxContainer.className = 'card-value checkbox-container';

const itemValue = document.createElement('input');
itemValue.type = 'checkbox';
itemValue.className = 'card-value checkbox';
itemValue.checked = v;

const valueLabel = document.createElement('span');
valueLabel.className = 'checkbox-value';
valueLabel.textContent = v.toString();

const updateValue = () => {
const newValue = !itemValue.checked;
itemValue.checked = newValue;
valueLabel.textContent = newValue.toString();
this.updateValue(obj, k, newValue, typeof v);
};

// Add click handlers to both container and checkbox
booleanContainer.onclick = (e) => {
if (e.target !== itemValue) { // Prevent double-toggle when clicking checkbox
updateValue();
}
};

itemValue.onchange = () => {
valueLabel.textContent = itemValue.checked.toString();
this.updateValue(obj, k, itemValue.checked, typeof v);
};

checkboxContainer.appendChild(itemValue);
checkboxContainer.appendChild(valueLabel);

// Move the key inside the boolean container
booleanContainer.appendChild(itemKey);
booleanContainer.appendChild(checkboxContainer);

cardValueContainer.appendChild(booleanContainer);
} else if (this.isColorValue(v)) {
const itemValue = document.createElement('input');
itemValue.type = 'color';
itemValue.className = 'card-value';
Expand Down
51 changes: 45 additions & 6 deletions solara/lib/core/dashboard/brand/brand.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -515,6 +515,45 @@
background-color: var(--background-color);
color: var(--text-color);
}
.boolean-container {
flex-direction: row;
display: flex;
align-items: center;

cursor: pointer;
padding: 0px;
flex: 1;
}

.boolean-container:hover {
background-color: var(--background-color));
}

.card-value.checkbox-container {
flex-direction: row;
display: flex;
align-items: start;
gap: 0px;
padding-bottom: 10px;
margin-left: 10px;
}

.card-value.checkbox {
width: auto;
height: auto;
margin: 0;
flex: 0;
cursor: pointer;
}

.checkbox-value {
font-size: 1.2em;
color: var(--text-color);
user-select: none;
flex: 0;
margin-left: 10px;
}

.card-actions {
display: flex;
align-items: center;
Expand Down Expand Up @@ -556,7 +595,7 @@ <h1><span id="brandNametitle"></span></h1>
<img class="loading-overlay-logo" src="../solara.png" alt="Loading Logo">
</div>

<div id="toast" style=" display: none; position: fixed; top: 10%; left: 50%; transform: translate(-50%, 10%); background-color: #4CAF50; color: white; padding: 16px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);">
<div id="toast" style=" display: none; position: fixed; top: 10%; left: 50%; transform: translate(-50%, 10%); background-color: #4CAF50; color: white; padding: 16px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);">
<!-- Message will be set dynamically -->
</div>

Expand Down Expand Up @@ -591,11 +630,11 @@ <h1><span id="brandNametitle"></span></h1>
<img src="../solara.png" alt="Solara Logo">
<h2>Solara simplifies the management of your brand configurations, allowing you to access and update them anytime, anywhere.</h2>
<div class="button-message">You can select a JSON file containing brand configurations that were exported using Solara.</div>
<button id="uploadJsonBtn" style=" animation-delay: 0.5s;">Upload JSON</button>
<div class="button-message" style=" animation-delay: 0.7s;">Alternatively, upload from a folder that includes the brand's JSON files.</div>
<button id="uploadBrandBtn" style=" animation-delay: 0.9s;">Upload Folder</button>
<div class="button-message" style=" animation-delay: 1.1s;">You also have the option to create new brand configurations.</div>
<button id="newBrandBtn" style=" animation-delay: 1.3s;">New Brand</button>
<button id="uploadJsonBtn" style=" animation-delay: 0.5s;">Upload JSON</button>
<div class="button-message" style=" animation-delay: 0.7s;">Alternatively, upload from a folder that includes the brand's JSON files.</div>
<button id="uploadBrandBtn" style=" animation-delay: 0.9s;">Upload Folder</button>
<div class="button-message" style=" animation-delay: 1.1s;">You also have the option to create new brand configurations.</div>
<button id="newBrandBtn" style=" animation-delay: 1.3s;">New Brand</button>
</div>

</div>
Expand Down

0 comments on commit b86d8ec

Please sign in to comment.