Color Picker, Color Buttons (Drental#261)

* Color Picker, Color Buttons
- Color Picker: Add Color Picker library for module settings.
- Color Buttons: Add settings to color button background and border.

* Tidy Up Code
- Tidy up errant changes from previous commit.

lang/en.json

@@ -253,8 +253,16 @@
         "name": "HUD scale"
       },
       "background": {
-        "hint": "Takes a valid HTML color (e.g. 'red', '#00000055', '#FFF', etc.) and uses it as the background, makes no checks as to the validity of the code.",
-        "name": "HUD Background color"
+        "hint": "Set the background color of the HUD.",
+        "name": "HUD Background Color"
+      },
+      "buttonBackgroundColor": {
+        "hint": "Set the background color of the HUD buttons.",
+        "name": "Button Background Color"
+      },
+      "buttonBorderColor": {
+        "hint": "Set the border color of the HUD buttons.",
+        "name": "Button Border Color"
       },
       "showHudTitle": {
         "name": "Show HUD Title",

module.json

@@ -199,6 +199,11 @@
         "id": "cleenmain",
         "type": "system"
       }
+    ],
+    "requires": [
+      {
+        "id": "color-picker"
+      }
     ]
   },
   "socket": false,

scripts/init.js

@@ -57,8 +57,7 @@ Hooks.on("init", () => {
   }
   systemManager = SystemManagerFactory.create(supportedSystem, appName);
   systemManager.registerSettings();
-  if (game.settings.get(systemManager.appName, "dorakoUI"))
-    injectCSS("dorako-action-hud");
+  if (game.settings.get(systemManager.appName, "dorakoUI")) injectCSS("dorako-action-hud");
 });
 
 
@@ -71,6 +70,14 @@ Hooks.on("init", () => {
 //   systemManager.registerSettings();
 // });
 
+Hooks.once('ready', async () => {
+  if (game.user.isGM) {
+    if (typeof ColorPicker === 'undefined') {
+      ui.notifications.notify("Token Action HUD: To set colors within this module's settings, install and enable the 'Color Picker' module.")
+    }
+  }
+});
+
 Hooks.on("canvasReady", async () => {
   let user = game.user;
 

scripts/managers/manager.js

@@ -88,6 +88,7 @@ export class SystemManager {
   registerSettings() {
     let rollHandlers = this.getAvailableRollHandlers();
     settings.registerSettings(this.appName, this, rollHandlers);
+    settings.initColorSettings(this.appName);
   }
 
   /** UTILITY */

scripts/settings.js

@@ -194,18 +194,6 @@ export const registerSettings = function (app, systemManager, rollHandlers) {
     },
   });
 
-  game.settings.register(appName, "background", {
-    name: game.i18n.localize("tokenactionhud.settings.background.name"),
-    hint: game.i18n.localize("tokenactionhud.settings.background.hint"),
-    scope: "client",
-    config: true,
-    type: String,
-    default: "none",
-    onChange: (value) => {
-      updateFunc(value);
-    },
-  });
-
   game.settings.register(appName, "activeCssAsText", {
     name: game.i18n.localize("tokenactionhud.settings.activeCssAsText.name"),
     hint: game.i18n.localize("tokenactionhud.settings.activeCssAsText.hint"),
@@ -252,3 +240,72 @@ export function get(setting) {
 export function set(setting, value) {
   game.settings.set(appName, setting, value);
 }
+
+export function initColorSettings(appName) {
+  if (typeof ColorPicker === 'object') {
+    registerColorSettings(appName);
+  } else {
+    Hooks.once("colorPickerReady", () => {
+      registerColorSettings(appName);
+    }); 
+  }
+}
+
+function registerColorSettings(appName) {
+  ColorPicker.register(
+    appName,
+    "background",
+    {
+      name: game.i18n.localize("tokenactionhud.settings.background.name"),
+      hint: game.i18n.localize("tokenactionhud.settings.background.hint"),
+      scope: "client",
+      restricted: true,
+      default: "#00000000",
+      onChange: (value) => {
+        updateFunc(value);
+      },
+    },
+    {
+      format: "hexa",
+      alphaChannel: true
+    }
+  );
+
+  ColorPicker.register(
+    appName,
+    "buttonBackgroundColor",
+    {
+      name: game.i18n.localize("tokenactionhud.settings.buttonBackgroundColor.name"),
+      hint: game.i18n.localize("tokenactionhud.settings.buttonBackgroundColor.hint"),
+      scope: "client",
+      restricted: true,
+      default: "#000000b3",
+      onChange: (value) => {
+        updateFunc(value);
+      },
+    },
+    {
+      format: "hexa",
+      alphaChannel: true
+    }
+  );
+
+  ColorPicker.register(
+    appName,
+    "buttonBorderColor",
+    {
+      name: game.i18n.localize("tokenactionhud.settings.buttonBorderColor.name"),
+      hint: game.i18n.localize("tokenactionhud.settings.buttonBorderColor.hint"),
+      scope: "client",
+      restricted: true,
+      default: "#000000ff",
+      onChange: (value) => {
+        updateFunc(value);
+      },
+    },
+    {
+      format: "hexa",
+      alphaChannel: true
+    }
+  );
+}

scripts/tokenactionhud.js

@@ -118,6 +118,18 @@ export class TokenActionHUD extends Application {
     const repositionIcon = "#tah-reposition";
     const categoriesIcon = "#tah-categories";
     const action = ".tah-action";
+    const buttonBackgroundColor = game.settings.get("token-action-hud", "buttonBackgroundColor");
+    const buttonBorderColor = game.settings.get("token-action-hud", "buttonBorderColor")
+
+    for (let categoryButton of html.find(".tah-category button")) {
+      categoryButton.style.backgroundColor = buttonBackgroundColor;
+      categoryButton.style.borderColor = buttonBorderColor;
+    }
+
+    for (let actionButton of html.find(".tah-action button")) {
+      actionButton.style.backgroundColor = buttonBackgroundColor;
+      actionButton.style.borderColor = buttonBorderColor;
+    }
 
     const handleClick = (e) => {
       let target = e.target;

styles/token-action-hud.css

@@ -11,6 +11,7 @@
   margin: 5px;
   background: none;
   font-size: small;
+  border-radius: 3px;
 }
 
 #token-action-hud [class*="icon-"] {
@@ -143,6 +144,7 @@
   display: none;
   overflow-y: auto;
   overflow-x: hidden;
+  border-radius: 3px;
 }
 
 /* Show the dropdown menu on hover */
@@ -151,23 +153,21 @@
   flex-direction: column;
   padding: 2px;
   position: absolute;
-  left: -155px;
+  left: -80px;
   background: none;
 }
 
 .tah-subcategory {
-  display: grid;
-  grid-template-columns: 150px auto;
-  grid-auto-rows: auto;
+  display: flex;
   cursor: default;
 }
 
 .tah-subtitle {
   position: relative;
-  grid-column: 1;
-  padding: 10px 8px 0px 0px;
+  flex: 1;
+  width: 75px;
+  padding: 10px 8px 0px 5px;
   margin: 0px;
-  min-width: 150px;
   color: #fff;
   text-shadow: -1px -1px 1px rgba(52, 52, 52, 1),
     -1px -1px 1px rgba(52, 52, 52, 1), -1px -1px 1px rgba(52, 52, 52, 1),