Merge pull request #3577 from foundryvtt/ui-tweaks

Control hints & other UI tweaks

icons/LICENSE

@@ -110,6 +110,7 @@ SVG Icons from Noun Project
 The dnd5e system for Foundry Virtual Tabletop includes icon artwork licensed from various authors at TheNounProject.com under CC BY 3.0.
 
 /svg/ink-pot.svg - "ink pot" by Creative Stall from https://thenounproject.com/icon/ink-pot-143149/
+/svg/mouse.svg - "Mouse" by difatama from https://thenounproject.com/icon/mouse-6099417/
 /svg/statuses/encumbered.svg - "Weight" by YANDI RS from https://thenounproject.com/icon/weight-4551693/
 /svg/statuses/exceeding-carrying-capacity.svg - "Weight" by YANDI RS from https://thenounproject.com/icon/weight-4551693/
 /svg/statuses/heavily-encumbered.svg - "Weight" by YANDI RS from https://thenounproject.com/icon/weight-4551693/

lang/en.json

@@ -392,6 +392,12 @@
 "DND5E.BonusesHint": "Define global bonuses as formulas which are added to certain rolls. For example: 1d4 + 2",
 "DND5E.BonusesInstructions": "Configure character bonuses which are added to the appropriate dice roll",
 "DND5E.Conditions": "Conditions",
+"DND5E.Controls": {
+  "Hint": "Enable various hints throughout the UI for certain mouse and keyboard controls.",
+  "LockHint": "Middle-click to lock",
+  "MiddleClick": "Middle Click",
+  "Name": "Enable Control Hints"
+},
 "DND5E.ChallengeRating": "Challenge Rating",
 "DND5E.Charged": "Charged",
 "DND5E.Charges": "Charges",

less/v2/apps.less

@@ -945,18 +945,13 @@
 :is(.dnd5e2, .dnd5e2-journal) .window-resizable-handle {
   border-radius: 0;
   border: none;
-  background: transparent;
   color: var(--dnd5e-color-black);
   overflow: hidden;
-  font-size: 16px;
+  width: 11px;
+  height: 11px;
   cursor: nwse-resize;
-  opacity: .4;
+  opacity: .7;
+  background: transparent url('ui/resize-handle.webp') no-repeat center / contain;
 
-  > i {
-    position: absolute;
-    bottom: -3px;
-    right: 1px;
-
-    &::before { content: "\f7a5"; }
-  }
+  > i { display: none; }
 }

less/v2/character.less

@@ -21,6 +21,11 @@
     border-radius: 5px;
   }
 
+  .window-resizable-handle {
+    bottom: 0;
+    right: 1px;
+  }
+
   /* ---------------------------------- */
   /*  Outer Window                      */
   /* ---------------------------------- */

less/v2/tooltips.less

@@ -35,6 +35,27 @@
       border-radius: 4px;
       pointer-events: none;
     }
+
+    .lock-hint { display: none; }
+  }
+
+  .lock-hint {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+    padding: 6px 0 0;
+    margin-bottom: -4px;
+    font-size: var(--font-size-10);
+    color: var(--color-text-dark-5);
+
+    > img {
+      height: 1em;
+      aspect-ratio: 1;
+      border: none;
+      transform: scale(1.35);
+      opacity: .6;
+    }
   }
 
   /* ---------------------------------- */

module/data/abstract.mjs

@@ -431,6 +431,7 @@ export class ItemDataModel extends SystemDataModel {
     const context = {
       name, type, img, price, weight, uses, school, materials, activation,
       config: CONFIG.DND5E,
+      controlHints: game.settings.get("dnd5e", "controlHints"),
       labels: foundry.utils.deepClone(this.parent.labels),
       tags: this.parent.labels?.components?.tags,
       subtitle: subtitle.filterJoin(" • "),

module/settings.mjs

@@ -327,6 +327,16 @@ export function registerSystemSettings() {
     type: PrimaryPartyData,
     onChange: s => ui.actors.render()
   });
+
+  // Control hints
+  game.settings.register("dnd5e", "controlHints", {
+    name: "DND5E.Controls.Name",
+    hint: "DND5E.Controls.Hint",
+    scope: "client",
+    config: true,
+    type: Boolean,
+    default: true
+  });
 }
 
 /**

templates/items/parts/item-tooltip.hbs

@@ -88,4 +88,10 @@
         {{/each}}
         {{/if}}
     </ul>
+    {{#if controlHints}}
+    <div class="lock-hint">
+        <img src="systems/dnd5e/icons/svg/mouse-middle.svg" alt="{{ localize "DND5E.Controls.MiddleClick" }}">
+        <span>{{ localize "DND5E.Controls.LockHint" }}</span>
+    </div>
+    {{/if}}
 </section>