1.11.1

CHANGELOG.md

@@ -1,3 +1,12 @@
+# 1.11.1
+
+- (Fix) Resolved an issue that caused scrollbars to appear on small dialogs
+- (Module) Dark-theme applications have support for PF2e Workbench's new rarity colors
+- (New) Styled Hazard sheets and Familiar sheets - also for dark theme
+- (Refinement) Improved styling for Basic Action Macros
+- (Module) Now notifies users of Token Action HUD that there is a Dorako UI style, if it is not currently selected
+- (New) Attempted to migrate dark-theme settings to a new centralized 'application theme' setting
+
 # 1.11.0
 
 - (Refinement) Spell buttons in light theme chat messages are now colored

languages/en.json

@@ -19,14 +19,13 @@
         "label": "Configure Theme Settings",
         "hint": "Change theme settings for various applications and UI elements",
 
-        "dark-theme-degree": {
-          "name": "Use dark theme for…",
-          "hint": "Decrease the degree of dark theme if you are encountering broken UI",
+        "application-theme": {
+          "name": "Application theme",
+          "hint": "Affects rendered application windows",
           "choice": {
-            "none": "No applications",
-            "supported": "All known good applications",
-            "extended": "All known good applications, and all dialogs",
-            "maximum": "Everything, even potentially breaky stuff"
+            "no-theme": "No theme",
+            "light-theme": "Light Dorako UI",
+            "dark-theme": "Dark Dorako UI"
           }
         },
         "frosted-glass": {

module.json

@@ -12,7 +12,7 @@
       "flags": {}
     }
   ],
-  "version": "1.11.0",
+  "version": "1.11.1",
   "compatibility": {
     "minimum": "10",
     "verified": "10"
@@ -66,6 +66,6 @@
     "modules/message-hooks.js",
     "modules/consts.js"
   ],
-  "download": "https://github.com/Dorako/pf2e-dorako-ui/archive/refs/tags/v1.11.0.zip",
+  "download": "https://github.com/Dorako/pf2e-dorako-ui/archive/refs/tags/v1.11.1.zip",
   "manifest": "https://github.com/Dorako/pf2e-dorako-ui/releases/latest/download/module.json"
 }

modules/base-theme-hooks.js

@@ -1,4 +1,9 @@
-import { baseThemeApplications, baseThemePf2eSheets, premiumModuleJournalSelector } from "./consts.js";
+import {
+  baseThemeApplications,
+  baseThemeCoreFoundryApplications,
+  baseThemePf2eSheets,
+  premiumModuleJournalSelector,
+} from "./consts.js";
 import { debug, warn } from "./util.js";
 
 // Debugging
@@ -7,16 +12,47 @@ Hooks.on("renderApplication", (app, html, data) => {
   console.debug({ app });
 });
 
+// Add .dorako-ui to all always-styled applications
+for (const app of [...baseThemeApplications]) {
+  Hooks.on("render" + app, (app, html, data) => {
+    let html0 = html[0];
+    debug(`baseThemeApplications | render${app.constructor.name} => add .dorako-ui`);
+    console.debug({ app });
+    html0.classList.add("dorako-ui");
+  });
+}
+
 // Add .dorako-ui to all whitelisted Applications
 for (const app of [...baseThemeApplications]) {
   Hooks.on("render" + app, (app, html, data) => {
     let html0 = html[0];
+    const theme = game.settings.get("pf2e-dorako-ui", "theme.application-theme");
+    if (theme === "no-theme") {
+      debug(`render${app.constructor.name} | theme: ${theme} => do not add .dorako-ui`);
+      return;
+    }
     debug(`baseThemeApplications | render${app.constructor.name} => add .dorako-ui`);
     console.debug({ app });
     html0.classList.add("dorako-ui");
   });
 }
 
+Hooks.on("renderDialog", (app, html, data) => {
+  const theme = game.settings.get("pf2e-dorako-ui", "theme.application-theme");
+  if (theme === "no-theme") {
+    debug(`render${app.constructor.name} | theme: ${theme} => do not add .dorako-ui`);
+    return;
+  }
+  debug(`render${app.constructor.name} | pushing .dorako-ui class option`);
+  console.debug({ app });
+  app.options?.classes?.push("dorako-ui");
+  let position = app.position;
+  position.height += 6;
+  position.width += 6;
+  app.setPosition(position);
+  app.render();
+});
+
 // Add .dorako-ui to all .window-app Applications
 Hooks.on("renderApplication", (app, html, data) => {
   let html0 = html[0];
@@ -25,6 +61,11 @@ Hooks.on("renderApplication", (app, html, data) => {
     debug(`render${app.constructor.name} | matches premiumModuleJournalSelector => do not add .dorako-ui`);
     return;
   }
+  const theme = game.settings.get("pf2e-dorako-ui", "theme.application-theme");
+  if (theme === "no-theme") {
+    debug(`render${app.constructor.name} | theme: ${theme} => do not add .dorako-ui`);
+    return;
+  }
   debug(`render${app.constructor.name} | is .window-app => add .dorako-ui`);
   html0.classList.add("dorako-ui");
 });
@@ -34,6 +75,11 @@ for (const app of [...baseThemePf2eSheets]) {
   Hooks.on("render" + app, (app, html, data) => {
     let html0 = html[0];
     if (!html0.classList.contains("window-app")) return;
+    const theme = game.settings.get("pf2e-dorako-ui", "theme.application-theme");
+    if (theme === "no-theme") {
+      debug(`render${app.constructor.name} | theme: ${theme} => do not add .dorako-ui`);
+      return;
+    }
     debug(`baseThemePf2eSheets | render${app.constructor.name} => add .dorako-ui`);
     console.debug({ app });
     html0.classList.add("dorako-ui");
@@ -46,6 +92,11 @@ Hooks.on("renderApplication", (app, html, data) => {
   let html0 = html[0];
   if (html0.classList.contains("dialog")) return;
   if (!html0.classList.contains("window-app")) return;
+  const theme = game.settings.get("pf2e-dorako-ui", "theme.application-theme");
+  if (theme === "no-theme") {
+    debug(`render${app.constructor.name} | theme: ${theme} => do not add .dorako-ui`);
+    return;
+  }
   const fakeDialogPatterns = ["popup", "dialog"];
   for (const fakeDialogPattern of [...fakeDialogPatterns]) {
     if (app.constructor.name.toLowerCase().includes(fakeDialogPattern)) {
@@ -61,12 +112,25 @@ Hooks.on("renderLootSheetPF2e", (app, html, data) => {
   html.find("select").addClass("dorako-ui-skip");
 });
 
+Hooks.on("renderHazardSheetPF2e", (app, html, data) => {
+  html.find("input").addClass("dorako-ui-skip");
+});
+
+Hooks.on("renderCharacterSheetPF2e", (app, html, data) => {
+  html.find(".details-input").addClass("dorako-ui-skip");
+});
+
 Hooks.on("renderNPCSheetPF2e", (app, html, data) => {
-  const npcTheme = game.settings.get("pf2e-dorako-ui", "theme.npc-sheet-theme");
-  if (npcTheme === "default") return;
-  let html0 = html[0];
-  html0.classList.add("dorako-theme");
-  html0.classList.add(npcTheme);
+  const theme = game.settings.get("pf2e-dorako-ui", "theme.application-theme");
+  if (theme === "no-theme") {
+    debug(`render${app.constructor.name} | theme: ${theme} => do not add .dorako-ui`);
+    return;
+  }
+  // const npcTheme = game.settings.get("pf2e-dorako-ui", "theme.npc-sheet-theme");
+  // if (npcTheme === "default") return;
+  // let html0 = html[0];
+  // html0.classList.add("dorako-theme");
+  // html0.classList.add(npcTheme);
   const acDetails = app.object.attributes.ac.details;
   const collapseAc = acDetails === "";
   const hpDetails = app.object.attributes.hp.details;
@@ -140,10 +204,15 @@ Hooks.on("renderNPCSheetPF2e", (app, html, data) => {
   }
 });
 
-Hooks.on("renderLootSheetPF2e", (app, html, data) => {
-  const theme = game.settings.get("pf2e-dorako-ui", "theme.loot-sheet-theme");
-  if (theme === "default") return;
-  let html0 = html[0];
-  html0.classList.add("dorako-theme");
-  html0.classList.add(theme);
-});
+// Hooks.on("renderLootSheetPF2e", (app, html, data) => {
+//   const theme = game.settings.get("pf2e-dorako-ui", "theme.loot-sheet-theme");
+//   if (theme === "default") return;
+//   let html0 = html[0];
+//   html0.classList.add("dorako-theme");
+//   html0.classList.add(theme);
+// });
+
+// // Blue player sheet
+// Hooks.on("renderCharacterSheetPF2e", (app, html, data) => {
+//   html.closest(".app").find("aside").wrap("<div class='blue'></div>");
+// });

modules/consts.js

@@ -6,24 +6,24 @@ export const MODULE_NAME = "pf2e-dorako-ui";
 // prettier-ignore
 export const darkThemeCompatibleCoreFoundryApplications = ["CombatTrackerConfig","InvitationLinks","SupportDetails","ToursManagement","WorldConfig","KeybindingsConfig", "FilePicker", "SettingsConfig", "PermissionConfig", "AVConfig", "DefaultTokenConfig", "FontConfig", "FolderConfig", "RollTableConfig", "PlaylistConfig", "CombatantConfig", "MeasuredTemplateConfig", "DocumentOwnershipConfig", "DocumentSheetConfig", "ModuleManagement", "MacroConfig", "Compendium", "CardsConfig", "WallConfig", "AmbientLightConfig", "AmbientSoundConfig", "TileConfig", "DrawingConfig"];
 // prettier-ignore
-export const darkThemeCompatiblePf2eApplications = ["TokenConfigPF2e", "HomebrewElements", "VariantRulesSettings", "AutomationSettings", "MetagameSettings", "WorldClockSettings", "PersistentDamageDialog", "SceneConfigPF2e"];
+export const darkThemeCompatiblePf2eApplications = ["NPCSheetPF2e","CharacterSheetPF2e","TokenConfigPF2e", "HomebrewElements", "VariantRulesSettings", "AutomationSettings", "MetagameSettings", "WorldClockSettings", "PersistentDamageDialog", "SceneConfigPF2e"];
 // prettier-ignore
 export const darkThemeCompatibleModuleApplications = ["RollPrompt", "SavingThrowApp", "AssignXPApp", "ContestedRollApp", "ActiveTileConfig", "DFChatEditor"];
 // prettier-ignore
 export const dorakoUiApplications = ["AvatarSettings","MiscSettings","ThemeSettings","UXSettings"]
 // prettier-ignore
-export const darkThemeIncompatibleApplications = ["FamiliarSheetPF2e","HazardSheetPF2e","TokenActionHUD","CustomHotbar","SceneDarknessAdjuster","EffectsPanel","Notifications", "Pause","TokenHUD","HeadsUpDisplay","Sidebar","HotbarPF2e","SceneNavigation", "SceneControls","PlayerList", "ImagePopout","EnhancedJournal","JournalSheetPF2e"]
+export const darkThemeIncompatibleApplications = ["AbilityBuilderPopup","TokenActionHUD","CustomHotbar","SceneDarknessAdjuster","EffectsPanel","Notifications", "Pause","TokenHUD","HeadsUpDisplay","Sidebar","HotbarPF2e","SceneNavigation", "SceneControls","PlayerList", "ImagePopout","EnhancedJournal","JournalSheetPF2e"]
 // prettier-ignore
 export const exclusivelyDarkApplications = ["FABattlemaps", "FADownloader"]
 
 // prettier-ignore
 export const baseThemeCoreFoundryApplications = ["ImagePopout","ChatMessage","SceneControls", "SidebarTab", "PlayerList", "HeadsUpDisplay", "Notifications", "TokenHUD", "Sidebar","SceneNavigation"];
 // prettier-ignore
-export const baseThemePf2eApplications = ["JournalSheetPF2e","HotbarPF2e", "EffectsPanel", "SceneDarknessAdjuster"];
+export const baseThemePf2eApplications = ["HotbarPF2e", "EffectsPanel", "SceneDarknessAdjuster"]; // "JournalSheetPF2e",
 // prettier-ignore
-export const baseThemePf2eSheets = ["ItemSheet","ActorSheet"];
+export const baseThemePf2eSheets = ["ItemSheet","ActorSheet"]; //"FamiliarSheetPF2e","HazardSheetPF2e"
 // prettier-ignore
-export const baseThemeModuleApplications = ["MonksHotbarExpansion","CustomHotbar", "TokenActionHUD"]
+export const baseThemeModuleApplications = ["CommonToolbar","MonksHotbarExpansion","CustomHotbar", "TokenActionHUD"]
 
 // prettier-ignore
 export const baseThemeApplications = [...baseThemeCoreFoundryApplications,...baseThemePf2eApplications,...baseThemeModuleApplications, ...dorakoUiApplications];

modules/dark-theme-hooks.js

@@ -8,61 +8,61 @@ import { debug } from "./util.js";
 
 // Supported dark theme
 function markAsDarkTheme(app, html) {
-  const degree = game.settings.get("pf2e-dorako-ui", "theme.dark-theme-degree");
-  if (degree === "none" || degree === "maximum") return;
-  debug(`render${app.constructor.name} | dark-theme-degree: ${degree}`);
+  const theme = game.settings.get("pf2e-dorako-ui", "theme.application-theme");
+  if (theme === "no-theme" || theme === "light-theme") return;
+  debug(`render${app.constructor.name} | theme: ${theme}`);
   let html0 = html[0];
   html0.classList.add("dorako-ui");
   html0.classList.add("dark-theme");
 }
 
 // Critical hit/fumble deck
 Hooks.on("renderJournalSheetPF2e", (app, html) => {
-  const degree = game.settings.get("pf2e-dorako-ui", "theme.dark-theme-degree");
-  if (degree === "none") return;
+  const theme = game.settings.get("pf2e-dorako-ui", "theme.application-theme");
+  if (theme === "no-theme") return;
   if (!html[0].id.includes("JournalSheetPF2e-Compendium-pf2e-criticaldeck")) return;
-  debug(`renderDialog | critical-hit-fumble-deck | dark-theme-degree: ${degree}`);
+  debug(`renderJournalSheetPF2e | critical-hit-fumble-deck | theme: ${theme}`);
   html.closest(".app").find(".journal-entry-content").addClass("dorako-ui dark-theme");
 });
 
-// Extended dark theme (Supported + Dialogs)
-Hooks.on("renderDialog", (app, html) => {
-  const degree = game.settings.get("pf2e-dorako-ui", "theme.dark-theme-degree");
-  if (degree !== "extended") return;
-  debug(`renderDialog | dark-theme-degree: ${degree}`);
-  let html0 = html[0];
-  html0.classList.add("dorako-ui");
-  html0.classList.add("dark-theme");
-});
+// // Extended dark theme (Supported + Dialogs)
+// Hooks.on("renderDialog", (app, html) => {
+//   const theme = game.settings.get("pf2e-dorako-ui", "theme.application-theme");
+//   if (theme !== "extended") return;
+//   debug(`renderDialog | dark-theme-degree: ${theme}`);
+//   let html0 = html[0];
+//   html0.classList.add("dorako-ui");
+//   html0.classList.add("dark-theme");
+// });
 
-// Extended dark theme support for 'fake' dialogs
-Hooks.on("renderApplication", (app, html, data) => {
-  const degree = game.settings.get("pf2e-dorako-ui", "theme.dark-theme-degree");
-  if (degree !== "extended") return;
+// // Extended dark theme support for 'fake' dialogs
+// Hooks.on("renderApplication", (app, html, data) => {
+//   const degree = game.settings.get("pf2e-dorako-ui", "theme.dark-theme-degree");
+//   if (degree !== "extended") return;
 
-  debug(`renderApplication | dark-theme-degree: ${degree}`);
-  let html0 = html[0];
-  if (html0.classList.contains("dialog")) return;
-  if (!html0.classList.contains("window-app")) return;
-  const fakeDialogPatterns = ["popup", "dialog"];
-  for (const fakeDialogPattern of [...fakeDialogPatterns]) {
-    if (app.constructor.name.toLowerCase().includes(fakeDialogPattern)) {
-      debug(`render${app.constructor.name} | constructor includes '${fakeDialogPattern}' => add .dark-theme`);
-      html0.classList.add("dark-theme");
-      return;
-    }
-  }
-});
+//   debug(`renderApplication | dark-theme-degree: ${degree}`);
+//   let html0 = html[0];
+//   if (html0.classList.contains("dialog")) return;
+//   if (!html0.classList.contains("window-app")) return;
+//   const fakeDialogPatterns = ["popup", "dialog"];
+//   for (const fakeDialogPattern of [...fakeDialogPatterns]) {
+//     if (app.constructor.name.toLowerCase().includes(fakeDialogPattern)) {
+//       debug(`render${app.constructor.name} | constructor includes '${fakeDialogPattern}' => add .dark-theme`);
+//       html0.classList.add("dark-theme");
+//       return;
+//     }
+//   }
+// });
 
 // Maximum dark theme (All '.app' applications except blacklisted ones)
 for (const app of ["Application", ...baseThemePf2eSheets]) {
   Hooks.on("render" + app, (app, html, data) => {
-    const degree = game.settings.get("pf2e-dorako-ui", "theme.dark-theme-degree");
-    if (degree !== "maximum") return;
+    const theme = game.settings.get("pf2e-dorako-ui", "theme.application-theme");
+    if (theme !== "dark-theme") return;
     if (darkThemeIncompatibleApplications.includes(app?.constructor?.name)) return;
     let html0 = html[0];
     if (!html0.classList.contains("app")) return;
-    debug(`render${app.constructor.name}) | dark-theme-degree: ${degree}`);
+    debug(`render${app.constructor.name}) | theme: ${degree}`);
     html0.classList.add("dorako-ui");
     html0.classList.add("dark-theme");
   });
@@ -100,32 +100,32 @@ Hooks.on("renderFilePicker", (app, html) => {
 //   }
 // });
 
-function createThemeButton(control, html, data) {
-  const name = "theme";
-  const title = "theme";
-  const icon = localStorage.getItem("dark-mode") === "true" ? "fas fa-sun" : "fas fa-moon";
-  const active = false; // localStorage.getItem('dark-mode') === 'true';
-  const btn = $(
-    `<li class="scene-control toggle ${
-      active ? "active" : ""
-    }" title="${title}" data-tool="${name}"><i class="${icon}"></i></li>`
-  );
-  btn.on("click", () => {
-    const apps = Object.values(ui.windows).filter((w) => w instanceof Application);
-    for (const app of apps) {
-      app.render();
-    }
-    // if (localStorage.getItem("dark-mode") == "true") {
-    //   localStorage.setItem("dark-mode", "false");
-    //   $("body").removeClass("dark-theme");
-    //   $("li.scene-control.toggle>i.fas.fa-moon").removeClass("fa-moon").addClass("fa-sun");
-    // } else {
-    //   localStorage.setItem("dark-mode", "true");
-    //   $("body").addClass("dark-theme");
-    //   $("li.scene-control.toggle>i.fas.fa-sun").removeClass("fa-sun").addClass("fa-moon");
-    // }
-  });
-  html.find(".main-controls").append(btn);
-}
+// function createThemeButton(control, html, data) {
+//   const name = "theme";
+//   const title = "theme";
+//   const icon = localStorage.getItem("dark-mode") === "true" ? "fas fa-sun" : "fas fa-moon";
+//   const active = false; // localStorage.getItem('dark-mode') === 'true';
+//   const btn = $(
+//     `<li class="scene-control toggle ${
+//       active ? "active" : ""
+//     }" title="${title}" data-tool="${name}"><i class="${icon}"></i></li>`
+//   );
+//   btn.on("click", () => {
+//     const apps = Object.values(ui.windows).filter((w) => w instanceof Application);
+//     for (const app of apps) {
+//       app.render();
+//     }
+//     // if (localStorage.getItem("dark-mode") == "true") {
+//     //   localStorage.setItem("dark-mode", "false");
+//     //   $("body").removeClass("dark-theme");
+//     //   $("li.scene-control.toggle>i.fas.fa-moon").removeClass("fa-moon").addClass("fa-sun");
+//     // } else {
+//     //   localStorage.setItem("dark-mode", "true");
+//     //   $("body").addClass("dark-theme");
+//     //   $("li.scene-control.toggle>i.fas.fa-sun").removeClass("fa-sun").addClass("fa-moon");
+//     // }
+//   });
+//   html.find(".main-controls").append(btn);
+// }
 
 // Hooks.on("renderSceneControls", createThemeButton);