QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-04-07 14:31:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: mobile responsive category color picker (#2280)

Browse Source 
* fix: mobile responsiveness on category picker popup

* fix: mobile responsiveness on category picker popup
This commit is contained in:
Luan Estradioto
2025-05-22 12:50:12 -03:00
committed by GitHub
parent 092350f1f8
commit 857436d894
3 changed files with 32 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
app/javascript/controllers/category_controller.js
View File

@@ -15,6 +15,7 @@ export default class extends Controller {
"validationMessage",
"selection",
"colorPickerRadioBtn",
"popup",
];
static values = {
@@ -36,6 +37,7 @@ export default class extends Controller {
this.colorInputTarget.reportValidity();
e.target.open = true;
}
this.updatePopupPosition()
});
this.selectedIcon = null;
@@ -43,6 +45,8 @@ export default class extends Controller {
if (!this.presetColorsValue.includes(this.colorInputTarget.value)) {
this.colorPickerRadioBtnTarget.checked = true;
}
document.addEventListener("mousedown", this.handleOutsideClick);
}
initPicker() {
@@ -209,6 +213,7 @@ export default class extends Controller {
this.colorsSectionTarget.classList.add("hidden");
this.paletteSectionTarget.classList.remove("hidden");
this.pickerSectionTarget.classList.remove("hidden");
this.updatePopupPosition();
this.picker.show();
}
@@ -216,6 +221,7 @@ export default class extends Controller {
this.colorsSectionTarget.classList.remove("hidden");
this.paletteSectionTarget.classList.add("hidden");
this.pickerSectionTarget.classList.add("hidden");
this.updatePopupPosition()
if (this.picker) {
this.picker.destroyAndRemove();
}
@@ -229,6 +235,27 @@ export default class extends Controller {
}
}
handleOutsideClick = (event) => {
if (this.detailsTarget.open && !this.detailsTarget.contains(event.target)) {
this.detailsTarget.open = false;
}
};
updatePopupPosition() {
const popup = this.popupTarget;
popup.style.top = "";
popup.style.bottom = "";
const rect = popup.getBoundingClientRect();
const overflow = rect.bottom > window.innerHeight;
if (overflow) {
popup.style.bottom = "0px";
} else {
popup.style.bottom = "";
}
}
#backgroundColor(color) {
return `color-mix(in oklab, ${color} 10%, transparent)`;
}