From 9ea785fc634060fa5490c2689a33d7a3e17eee04 Mon Sep 17 00:00:00 2001 From: Robin Scholtes Date: Tue, 15 Aug 2023 20:27:35 +1200 Subject: [PATCH] replace the checkbox bootstrap styles with bootstap material v4. Not entirely sure what the issue was, but something in that checkbox decorator code caused reordering / cloning of c-recipe-li to fail --- src/web/HTMLIngredient.mjs | 27 ++++++++++--------- src/web/Manager.mjs | 2 +- src/web/TODO.md | 7 ++--- src/web/components/c-recipe-li.mjs | 20 +++++++------- src/web/stylesheets/components/_operation.css | 24 +++++++++++++++++ 5 files changed, 52 insertions(+), 28 deletions(-) diff --git a/src/web/HTMLIngredient.mjs b/src/web/HTMLIngredient.mjs index 9926458a..a145e2c1 100755 --- a/src/web/HTMLIngredient.mjs +++ b/src/web/HTMLIngredient.mjs @@ -131,20 +131,21 @@ class HTMLIngredient { `; break; case "boolean": - html += `
-
-
`; +
` break; case "option": html += `
diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs index cc2f2fff..15eb31fc 100755 --- a/src/web/Manager.mjs +++ b/src/web/Manager.mjs @@ -142,7 +142,7 @@ class Manager { document.getElementById("support").addEventListener("click", this.controls.supportButtonClick.bind(this.controls)); this.addMultiEventListeners("#save-texts textarea", "keyup paste", this.controls.saveTextChange, this.controls); document.getElementById("rec-list").addEventListener("click", this.controls.onMaximisedRecipeClick.bind(this.controls)); - // A note for the Maximise Controls listeners below: click events via addDynamicListener don't properly bubble and the hit box to maximise is unacceptably tiny, hence this solution + // A note for the Maximise Controls listeners below: click events via addDynamicListener don't properly bubble and the hit-box is unacceptably tiny, hence this solution document.getElementById("maximise-recipe").addEventListener("click", this.controls.onMaximiseButtonClick.bind(this.controls)); document.getElementById("maximise-input").addEventListener("click", this.controls.onMaximiseButtonClick.bind(this.controls)); document.getElementById("maximise-output").addEventListener("click", this.controls.onMaximiseButtonClick.bind(this.controls)); diff --git a/src/web/TODO.md b/src/web/TODO.md index d290c2cd..1779110f 100644 --- a/src/web/TODO.md +++ b/src/web/TODO.md @@ -1,8 +1,5 @@ operations: - UI tests etc. -manual testing issues - -mobile: -- all ops with bootstrap checkboxes in recipe break ( due to the bootstrap checkbox func not being applied ). Need to replace / remove this -- on ingredient input change ( for instance 'to charcode' 'base' or whatever ) on backspace / removing the value, there is a popup at teh bottem [object Object]. Also happens on actual CC but still. Only happens when value = null +manual testing issues: +- some reordering in recipe is not super smooth ( when the recipe-li is very large for instance ) diff --git a/src/web/components/c-recipe-li.mjs b/src/web/components/c-recipe-li.mjs index b5eb63d6..cc80c592 100644 --- a/src/web/components/c-recipe-li.mjs +++ b/src/web/components/c-recipe-li.mjs @@ -22,19 +22,21 @@ export class CRecipeLi extends HTMLElement { this.app = app; this.name = name; - this.args = []; + this.args = args; + this.ingredients = []; this.flowControl = this.app.operations[this.name].flowControl; this.manualBake = this.app.operations[this.name].manualBake; for (let i = 0; i < args.length; i++) { const ing = new HTMLIngredient(args[i], this.app, this.app.manager); - this.args.push(ing); + this.ingredients.push(ing); } this.build(); - this.addEventListener("click", this.handleClick.bind(this)); + // Use mousedown event instead of click to prevent accidentally firing the handler twice on mobile + this.addEventListener("mousedown", this.handleMousedown.bind(this)); this.addEventListener("dblclick", this.handleDoubleClick.bind(this)); } @@ -42,16 +44,16 @@ export class CRecipeLi extends HTMLElement { * Remove listeners on disconnectedCallback */ disconnectedCallback() { - this.removeEventListener("click", this.handleClick.bind(this)); + this.removeEventListener("mousedown", this.handleMousedown.bind(this)); this.removeEventListener("dblclick", this.handleDoubleClick.bind(this)); } /** - * Handle click + * Handle mousedown * @fires Manager#statechange * @param {Event} e */ - handleClick(e) { + handleMousedown(e) { const disableIcon = this.querySelector("i.disable-icon"); const breakpointIcon = this.querySelector("i.breakpoint-icon"); @@ -91,7 +93,7 @@ export class CRecipeLi extends HTMLElement { * @param {Event} e */ handleDoubleClick(e) { - // do not remove if icons or form elements are double clicked + // do not remove if icons or form elements are double-clicked if (e.target === this.querySelector("li") || e.target === this.querySelector("div.op-title")) { this.removeOperation(); } @@ -127,8 +129,8 @@ export class CRecipeLi extends HTMLElement { li.appendChild(titleDiv); li.appendChild(ingredientDiv); - for (let i = 0; i < this.args.length; i++) { - ingredientDiv.innerHTML += (this.args[i].toHtml()); + for (let i = 0; i < this.ingredients.length; i++) { + ingredientDiv.innerHTML += (this.ingredients[i].toHtml()); } const icons = this.buildIcons(); diff --git a/src/web/stylesheets/components/_operation.css b/src/web/stylesheets/components/_operation.css index b4b5e073..d9da213c 100755 --- a/src/web/stylesheets/components/_operation.css +++ b/src/web/stylesheets/components/_operation.css @@ -265,6 +265,30 @@ input.toggle-string { top: 13px; } +.custom-control-label { + line-height: 1.5rem; +} + +.custom-control-label:hover { + cursor: pointer; +} + +.custom-control-label::before { + height: 20px; + width: 20px; + border: 1px solid var(--input-border-colour); +} + +.custom-control-input:checked + .custom-control-label::before { + background-color: var(--input-highlight-colour); + border: 1px solid var(--input-highlight-colour); +} + +.custom-control-label::after { + height: 20px; + width: 20px; +} + .register-list { background-color: var(--fc-operation-border-colour); font-family: var(--fixed-width-font-family);