Merge pull request #158 from JulieWinchester/ui-show-above-stage

Add configuration setting to show UI elements above stage

Author: megahead11

src/lang/en.json

@@ -70,9 +70,16 @@
         "nameFontHint": "Put in the name of the font you want to use. If the font exists in Theatre, it can be used. Requires actors to re-stage or for the GM to resync.",
         "nameFontSize": "Actor Name Size (Experimental)",
         "nameFontSizeHint": "Sets the size of the name font. Note that the sizes may be different depending on your display or font choice. Using huge sizes is not recommended.",
-        "autoHideBottom": "Auto Hide Bottom",
-        "autoHideBottomHint": "Hide bottom UI(player&hotbar) when actor shows on stage.",
-        "suppressMacroHotbar": "Show Player List and Macro Hotbar When Stage is Suppressed",
+        "autoHideBottom": "Hide Bottom UI Elements Automatically",
+        "autoHideBottomHint": "Hide bottom UI elements (players list and macro hotbar) when actor shows on stage.",
+        "suppressMacroHotbar": "Show Bottom UI Elements When Stage Is Suppressed",
+        "suppressMacroHotbarHint": "Only has an effect if Hide Bottom UI Elements Automatically is enabled. Bottom UI elements (players list and macro hotbar) are shown again after hiding if stage is suppressed when actors are on stage.",
+        "showUIAboveStage": "Show UI Elements Above Stage",
+        "showUIAboveStageHint": "Useful mainly if Hide Bottom UI Elements Automatically is disabled. UI elements to show above the stage. Users can interact with UI elements above the stage even when actors are on stage.",
+        "showUIAboveStageNone": "None (Stage Above UI)",
+        "showUIAboveStageLeft": "Players List and Controls",
+        "showUIAboveStageMiddle": "Macro Hotbar",
+        "showUIAboveStageBoth": "Both (UI Above Stage)",
         "removeLabelSheetHeader": "Remove Text Labels From Actor Sheet Header",
         "removeLabelSheetHeaderHint": "Removes text labels from actor sheet header buttons, useful for small screens and mobile devices. Button will still be displayed with icon.",
         "ignoreMessagesToChat": "Ignore Theatre Messages From Chat",

src/scripts/Theatre.js

@@ -196,7 +196,13 @@ export class Theatre {
     // set narrator height
     this.settings.narrHeight = game.settings.get(Theatre.SETTINGS, "theatreNarratorHeight");
     this.theatreNarrator.style.top = `calc(${this.settings.narrHeight} - 50px)`;
-
+    // set z-index class for other UI elements
+    const uiAbove = game.settings.get(Theatre.SETTINGS, "showUIAboveStage");
+    const leftAbove = uiAbove == "left" || uiAbove == "both";
+    if (leftAbove) document.getElementById("ui-left").classList.add("z-higher");
+    const middleAbove = uiAbove == "middle" || uiAbove == "both";
+    if (middleAbove) document.getElementById("ui-middle").classList.add("z-higher");
+    
     // set dock canvas hard dimensions after CSS has caclulated it
 
     /**
@@ -497,13 +503,29 @@ export class Theatre {
 
     game.settings.register(Theatre.SETTINGS, "suppressMacroHotbar", {
       name: "Theatre.UI.Settings.suppressMacroHotbar",
-      hint: "",
+      hint: "Theatre.UI.Settings.suppressMacroHotbarHint",
       scope: "world",
       config: true,
       type: Boolean,
       default: true,
     });
 
+    game.settings.register(Theatre.SETTINGS, "showUIAboveStage", {
+      name: "Theatre.UI.Settings.showUIAboveStage",
+      hint: "Theatre.UI.Settings.showUIAboveStageHint",
+      scope: "world",
+      config: true,
+      default: "none",
+      requiresReload: true,
+      type: String,
+      choices: {
+        none: "Theatre.UI.Settings.showUIAboveStageNone",
+        left: "Theatre.UI.Settings.showUIAboveStageLeft",
+        middle: "Theatre.UI.Settings.showUIAboveStageMiddle",
+        both: "Theatre.UI.Settings.showUIAboveStageBoth",
+      }
+    });
+
     game.settings.register(Theatre.SETTINGS, "removeLabelSheetHeader", {
       name: "Theatre.UI.Settings.removeLabelSheetHeader",
       hint: "Theatre.UI.Settings.removeLabelSheetHeaderHint",

src/styles/theatre.css

@@ -1680,10 +1680,6 @@
   bottom: calc(50% - 50px);
 }
 
-#players {
-  z-index: 1;
-}
-
 #players,
 #hotbar {
   transition: opacity 500ms ease 0ms;
@@ -1702,6 +1698,10 @@
   pointer-events: none;
 }
 
+#ui-left.z-higher, #ui-middle.z-higher {
+  z-index: calc(var(--z-index-app) + 1);
+}
+
 @-moz-document url-prefix() {
   .emote-box .emotebar .colorselect {
     padding: 3px;