Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-07-21 22:29:38 +02:00
Code Issues Releases Activity Actions

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
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
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)`;
}