Add hotbar settings (reposition, button size/gap)

langs/en-ca.json

@@ -5,17 +5,29 @@
 				"name": "Chat Background",
 				"hint": "(v13+) Adds a background to the chat tab of the right-hand sidebar."
 			},
+			"hotbarButtonGap": {
+				"name": "Hotbar Button Gap",
+				"hint": "(v13+) Allows changing the amount of space between the hotbar buttons."
+			},
+			"hotbarButtonSize": {
+				"name": "Hotbar Button Size",
+				"hint": "(v13+) Changes the size of the hotbar buttons to a size you prefer."
+			},
 			"preventUserConfigOpen": {
 				"name": "Prevent Auto User Config",
 				"hint": "(v13+) Prevents Foundry from opening the User Configuration when a player loads into the world."
 			},
+			"repositionHotbar": {
+				"name": "Reposition Hotbar",
+				"hint": "(v13+) This moves the hotbar into a position similar to where it was in ~v11, making it so that it doesn't move when you expand or collapse the right-hand sidebar."
+			},
 			"startSidebarExpanded": {
 				"name": "Start Sidebar Expanded",
 				"hint": "(v13+) Starts the right-hand sidebar expanded when logging in."
 			},
 			"startingSidebarTab": {
 				"name": "Starting Sidebar Tab",
-				"hint": "(v13+) Determines what sidebar tab to have selected initially when loading Foundry",
+				"hint": "(v13+) Determines what sidebar tab to have selected initially when loading Foundry.",
 				"choices": {
 					"blank": "No Custom Default Tab"
 				}

module/oft.mjs

@@ -1,18 +1,18 @@
 // Settings
 import { chatSidebarBackground } from "./settings/chatSidebarBackground.mjs";
+import { hotbarButtonGap } from "./settings/hotbarButtonGap.mjs";
+import { hotbarButtonSize } from "./settings/hotbarButtonSize.mjs";
 import { preventUserConfigOpen } from "./settings/preventUserConfigOpen.mjs";
+import { repositionHotbar } from "./settings/repositionHotbar.mjs";
 import { startingSidebarTab } from "./settings/startingSidebarTab.mjs";
 import { startSidebarExpanded } from "./settings/startSidebarExpanded.mjs";
 
-Hooks.once(`init`, () => {
+Hooks.on(`init`, () => {
-
-	// Sidebar Settings
 	chatSidebarBackground();
 	startSidebarExpanded();
 	startingSidebarTab();
-
+	hotbarButtonSize();
-	// App Settings
+	hotbarButtonGap();
+	repositionHotbar();
 	preventUserConfigOpen();
-
-	// Dev Settings
 });

module/settings/hotbarButtonGap.mjs

@@ -0,0 +1,39 @@
+import { __ID } from "../consts.mjs";
+import { Logger } from "../utils/Logger.mjs";
+
+const key = `hotbarButtonGap`;
+
+export function hotbarButtonGap() {
+
+	const prevented = Hooks.call(`${__ID}.preventSetting`, key);
+	if (!prevented) {
+		Logger.log(`Preventing setting "${key}" from being registered`);
+		return;
+	};
+
+	// #region Registration
+	Logger.log(`Registering setting: ${key}`);
+	document.body.classList.add(`${__ID}-${key}`);
+	game.settings.register(__ID, key, {
+		name: `OFT.setting.${key}.name`,
+		hint: `OFT.setting.${key}.hint`,
+		scope: `user`,
+		type: new foundry.data.fields.NumberField({
+			min: 0,
+			max: 16,
+			step: 1,
+		}),
+		default: 8,
+		config: true,
+		requiresReload: false,
+		onChange: (newValue) => {
+			document.body.style.setProperty(`--hotbar-button-gap`, `${newValue}px`);
+		},
+	});
+	// #endregion Registration
+
+	// #region Implementation
+	const buttonGap = game.settings.get(__ID, key);
+	document.body.style.setProperty(`--hotbar-button-gap`, `${buttonGap}px`);
+	// #endregion Implementation
+};

module/settings/hotbarButtonSize.mjs

@@ -0,0 +1,39 @@
+import { __ID } from "../consts.mjs";
+import { Logger } from "../utils/Logger.mjs";
+
+const key = `hotbarButtonSize`;
+
+export function hotbarButtonSize() {
+
+	const prevented = Hooks.call(`${__ID}.preventSetting`, key);
+	if (!prevented) {
+		Logger.log(`Preventing setting "${key}" from being registered`);
+		return;
+	};
+
+	// #region Registration
+	Logger.log(`Registering setting: ${key}`);
+	document.body.classList.add(`${__ID}-${key}`);
+	game.settings.register(__ID, key, {
+		name: `OFT.setting.${key}.name`,
+		hint: `OFT.setting.${key}.hint`,
+		scope: `user`,
+		type: new foundry.data.fields.NumberField({
+			min: 45,
+			max: 75,
+			step: 5,
+		}),
+		default: 60, // this is the value Foundry uses
+		config: true,
+		requiresReload: false,
+		onChange: (newValue) => {
+			document.body.style.setProperty(`--hotbar-size`, `${newValue}px`);
+		},
+	});
+	// #endregion Registration
+
+	// #region Implementation
+	const hotbarSize = game.settings.get(__ID, key);
+	document.body.style.setProperty(`--hotbar-size`, `${hotbarSize}px`);
+	// #endregion Implementation
+};

module/settings/repositionHotbar.mjs

@@ -0,0 +1,45 @@
+import { __ID } from "../consts.mjs";
+import { Logger } from "../utils/Logger.mjs";
+
+const key = `repositionHotbar`;
+
+export function repositionHotbar() {
+
+	const prevented = Hooks.call(`${__ID}.preventSetting`, key);
+	if (!prevented) {
+		Logger.log(`Preventing setting "${key}" from being registered`);
+		return;
+	};
+
+	// #region Registration
+	Logger.log(`Registering setting: ${key}`);
+	game.settings.register(__ID, key, {
+		name: `OFT.setting.${key}.name`,
+		hint: `OFT.setting.${key}.hint`,
+		scope: `user`,
+		type: Boolean,
+		default: true,
+		config: true,
+		requiresReload: true,
+	});
+	// #endregion Registration
+
+	// #region Implementation
+	if (game.settings.get(__ID, key)) {
+		Logger.debug(`setting:${key} | Repositioning hotbar`);
+		document.body.classList.add(`oft-${key}`);
+
+		const container = document.createElement(`div`);
+		container.id = `oft-repositionHotbar-container`;
+
+		const playersPlaceholder = document.getElementById(`players`);
+		const hotbarPlaceholder = document.getElementById(`hotbar`);
+
+		container.insertAdjacentElement(`afterbegin`, hotbarPlaceholder);
+		container.insertAdjacentElement(`afterbegin`, playersPlaceholder);
+
+		const uiPosition = document.getElementById(`ui-left-column-1`);
+		uiPosition.insertAdjacentElement(`beforeend`, container);
+	};
+	// #endregion Implementation
+};

styles/hotbarButtonGap.css

@@ -0,0 +1,10 @@
+.oft-hotbarButtonGap #hotbar {
+	&.sm #action-bar {
+		width: calc((var(--hotbar-size) * 5) + (var(--hotbar-button-gap) * 4));
+	}
+
+	#action-bar {
+		row-gap: min(var(--hotbar-button-gap, 8px), 8px);
+		column-gap: var(--hotbar-button-gap, 8px);
+	}
+}

styles/hotbarButtonSize.css

@@ -0,0 +1,7 @@
+/*
+Making it so that the hotbar uses the style attribute from
+"document.body" instead of the one the application assigns
+*/
+.oft-hotbarButtonSize #hotbar {
+	--hotbar-size: unset;
+}

styles/main.css

@@ -1,4 +1,7 @@
 @import url("./chatSidebarBackground.css");
+@import url("./hotbarButtonGap.css");
+@import url("./hotbarButtonSize.css");
+@import url("./repositionHotbar.css");
 
 /* Make the chat sidebar the same width as all the other tabs */
 .chat-sidebar:not(.sidebar-popout) { width: unset; }

styles/repositionHotbar.css

@@ -0,0 +1,14 @@
+#oft-repositionHotbar-container {
+	display: flex;
+	flex-direction: row;
+	gap: 12px;
+	align-items: end;
+
+	#hotbar {
+		margin-bottom: 0;
+
+		&.min {
+			transform: none;
+		}
+	}
+}