Add inline category selection (#541)

* Implement inline category selection

* Add turbo frame to refresh updated transaction

* Improve styles

* Fix category assignment

* Reorganize code

* Revert event propagation

* Remove unused frames

* Make only the transaction name clickable

* Add custom scrollbar class

app/javascript/controllers/dropdown_controller.js

@@ -4,20 +4,32 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static targets = ["menu"]
 
-  toggleMenu(event) {
-    event.stopPropagation(); // Prevent event from closing the menu immediately
-    this.menuTarget.classList.toggle("hidden");
+  toggleMenu = (e) => {
+    e.stopPropagation(); // Prevent event from closing the menu immediately
+    this.menuTarget.classList.contains("hidden") ? this.showMenu() : this.hideMenu();
+  }
+
+  showMenu = () => {
+    document.addEventListener("click", this.onDocumentClick);
+    this.menuTarget.classList.remove("hidden");
   }
 
   hideMenu = () => {
+    document.removeEventListener("click", this.onDocumentClick);
     this.menuTarget.classList.add("hidden");
   }
 
-  connect() {
-    document.addEventListener("click", this.hideMenu);
+  disconnect = () => {
+    this.hideMenu();
   }
 
-  disconnect() {
-    document.removeEventListener("click", this.hideMenu);
+  onDocumentClick = (e) => {
+    if (this.menuTarget.contains(e.target)) {
+      // user has clicked inside of the dropdown
+      e.stopPropagation();
+      return;
+    }
+
+    this.hideMenu();
   }
 }

app/javascript/controllers/modal_controller.js

@@ -8,7 +8,7 @@ export default class extends Controller {
   }
 
   // Hide the dialog when the user clicks outside of it
-  click_outside(e) {
+  clickOutside(e) {
     if (e.target === this.element) {
       this.element.close();
     }

app/javascript/tailwindColors.js

@@ -2,6 +2,22 @@
  * To keep consistent styling across the app, this file can be imported in
  * Stimulus controllers to reference our color palette.  Mostly used for D3 charts.
  */
+
+export const categoryColors = [
+   "#e99537",
+   "#4da568",
+   "#6471eb",
+   "#db5a54",
+   "#df4e92",
+   "#c44fe9",
+   "#eb5429",
+   "#61c9ea",
+   "#805dee",
+   "#6ad28a"
+]
+
+export const categoryDefaultColor = "#737373"
+
 export default {
   transparent: "transparent",
   current: "currentColor",
@@ -138,4 +154,43 @@ export default {
     600: "#7839EE",
     700: "#6927DA",
   },
+  fuchsia: {
+    25: "#FEFAFF",
+    50: "#FDF4FF",
+    100: "#FBE8FF",
+    200: "#F6D0FE",
+    300: "#EEAAFD",
+    400: "#E478FA",
+    500: "#D444F1",
+    600: "#BA24D5",
+    700: "#9F1AB1",
+    800: "#821890",
+    900: "#6F1877",
+  },
+  pink: {
+    25: "#FFFAFC",
+    50: "#FEF0F7",
+    100: "#FFD1E2",
+    200: "#FFB1CE",
+    300: "#FD8FBA",
+    400: "#F86BA7",
+    500: "#F23E94",
+    600: "#D5327F",
+    700: "#BA256B",
+    800: "#9E1958",
+    900: "#840B45",
+  },
+  orange: {
+    25: "#FFF9F5",
+    50: "#FFF4ED",
+    100: "#FFE6D5",
+    200: "#FFD6AE",
+    300: "#FF9C66",
+    400: "#FF692E",
+    500: "#FF4405",
+    600: "#E62E05",
+    700: "#BC1B06",
+    800: "#97180C",
+    900: "#771A0D",
+  },
 };