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 merchants color picker (#1134)

Browse source 
* Fix merchants color picker

* Lint fixes
This commit is contained in:
Zach Gollwitzer 2024-08-26 19:18:27 -04:00 • committed by GitHub
parent 166ed4b1ea
commit f82ce59dad
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 52 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

9
app/javascript/controllers/merchant_avatar_controller.js
View file

@ -1,32 +1,29 @@
import {Controller} from "@hotwired/stimulus";
import { Controller } from "@hotwired/stimulus";
// Connects to data-controller="merchant-avatar"
// Used by the transaction merchant form to show a preview of what the avatar will look like
export default class extends Controller {
static targets = [
"name",
"color",
"avatar"
];
connect() {
this.nameTarget.addEventListener("input", this.handleNameChange);
this.colorTarget.addEventListener("input", this.handleColorChange);
}
disconnect() {
this.nameTarget.removeEventListener("input", this.handleNameChange);
this.colorTarget.removeEventListener("input", this.handleColorChange);
}
handleNameChange = (e) => {
this.avatarTarget.textContent = (e.currentTarget.value?.[0] || "?").toUpperCase();
}
handleColorChange = (e) => {
handleColorChange(e) {
const color = e.currentTarget.value;
this.avatarTarget.style.backgroundColor = `color-mix(in srgb, ${color} 5%, white)`;
this.avatarTarget.style.borderColor = `color-mix(in srgb, ${color} 10%, white)`;
this.avatarTarget.style.color = color;
}
}
}