Minimal UI module support, right click context menu

changelog.md

@@ -2,6 +2,8 @@
 
 ## Version 1.4.4
 
+- Added a right click context menu to the item pile inventory UI, with an option to show an item's image to everyone
+- Improved Request Trade button in the player list when the Minimal UI module is active
 - Improved splitting API functions to improve performance when playing on Forge 
 - Improved documentation to better describe what each API method requires
 - Tweaked `Split n ways` button to disable itself instead of becoming hidden

scripts/api.js

@@ -8,7 +8,7 @@ import { hotkeyState } from "./hotkeys.js";
 
 const preloadedFiles = new Set();
 
-export default {
+const API = {
 
     /**
      * The actor class type used for the original item pile actor in this system
@@ -2452,4 +2452,6 @@ export default {
 
     }
 
-};
+};
+
+export default API;

scripts/formapplications/item-pile-inventory.js

@@ -425,6 +425,40 @@ export class ItemPileInventory extends FormApplication {
                 .replaceWith($('<span>' + innerHTML + '</span>'));
             html.find('.item-piles-change-actor-select').remove();
         }
+
+        // Activate context menu
+        this._contextMenu(html);
+    }
+
+    /* -------------------------------------------- */
+
+    /** @inheritdoc */
+    _contextMenu(html) {
+        ContextMenu.create(this, html, ".item-piles-item-row", this._getEntryContextOptions());
+    }
+
+    /* -------------------------------------------- */
+
+    /**
+     * Get the Macro entry context options
+     * @returns {object[]}  The Macro entry context options
+     * @private
+     */
+    _getEntryContextOptions() {
+        return [
+            {
+                name: "JOURNAL.ActionShow",
+                icon: '<i class="fas fa-eye"></i>',
+                condition: (div) => {
+                    return game.user.isGM && div.data("item-id");
+                },
+                callback: (div) => {
+                    const item = this.pileActor.items.get(div.data("item-id"));
+                    const popout = new ImagePopout(item.data.img, { title: item.name }).render(true);
+                    popout.shareImage();
+                }
+            }
+        ];
     }
 
     previewImage(html, element) {

scripts/module.js

@@ -38,7 +38,10 @@ Hooks.once("init", async () => {
 
     if (game.settings.get(CONSTANTS.MODULE_NAME, "enableTrading") && game.settings.get(CONSTANTS.MODULE_NAME, "showTradeButton")) {
         Hooks.on("renderPlayerList", (app, html) => {
-            const button = $(`<button type="button" class="item-piles-player-list-trade-button"><i class="fas fa-handshake"></i> Request Trade</button>`)
+            const minimalUI = game.modules.get('minimal-ui')?.active;
+            const classes = "item-piles-player-list-trade-button" + (minimalUI ? " item-piles-minimal-ui" : "")
+            const text = !minimalUI ? " Request Trade" : ""
+            const button = $(`<button type="button" class="${classes}"><i class="fas fa-handshake"></i>${text}</button>`)
             button.click(() => {
                 TradeAPI.requestTrade();
             });

styles/module.scss

@@ -7,6 +7,15 @@
     font-size: 0.85rem;
     width: calc(100% - 0.5rem);
     margin: 0.25rem;
+
+    &.item-piles-minimal-ui {
+      padding: 2px 0 0 0;
+      text-align: center;
+
+      i {
+        width: 100%;
+      }
+    }
   }
 
   &-specate-trade:disabled {