Create a 3rd party gui alignment class for objects.

Use the class for the chat to accomodate size issues in some languages.

Chat size issue reported by: Zeldt on forums
Initial solution by: Nescio
Comments By: elexis, nwtour, Freagarach, vladislav, wraitii
Differential Revision: D2623
fixes #4252

This was SVN commit r26349.

binaries/data/mods/public/gui/common/AlignmentHelper.js

@@ -0,0 +1,51 @@
+/**
+ * This is a helper class to align edges of a set of GUIObjects.
+ * The class is designed to either vertically or horizontally align the GUIObjects.
+ */
+class AlignmentHelper
+{
+	/**
+	 * @param {string} direction - Either min or max. Deciding whether we should move all objects to the minimal (left or top most) or maximal (right or bottom most) position.
+	 */
+	constructor(direction)
+	{
+		if (direction != "max" && direction != "min")
+			error("Invalid alignment direction.");
+
+		this.direction = direction;
+		// An Object of Objects containing the GUIObjects and their requested alignment details.
+		this.objectData = {};
+
+		this.defaultValue = this.direction == "max" ? -Infinity : Infinity;
+	}
+
+	/**
+	 * @param {Object} GUIObject - A GUIObject to be aligned.
+	 * @param {string} edge - One of left, right, top and bottom. Determining the edge to change position for this object.
+	 * @param {number} wantedPosition - The requested position of the edge.
+	 */
+	setObject(GUIObject, edge, wantedPosition = this.defaultValue)
+	{
+		this.objectData[GUIObject.name] = {
+			"GUIObject": GUIObject,
+			"edge": edge,
+			"wantedPosition": wantedPosition
+		};
+
+		this.align();
+	}
+
+	align()
+	{
+		let value = this.defaultValue;
+		for (const objectName in this.objectData)
+			value = Math[this.direction](value, this.objectData[objectName].wantedPosition);
+
+		for (const objectName in this.objectData)
+		{
+			const objectSize = this.objectData[objectName].GUIObject.size;
+			objectSize[this.objectData[objectName].edge] = value;
+			this.objectData[objectName].GUIObject.size = objectSize;
+		}
+	}
+}

binaries/data/mods/public/gui/common/functions_utility.js

@@ -220,6 +220,29 @@ function horizontallySpaceObjects(parentName, margin = 0)
 	}
 }
 
+/**
+ * Change the width of a GUIObject to make the caption fits nicely.
+ * @param object - The GUIObject to consider.
+ * @param direction - Direction to change the side either "left" or "right".
+ * @param margin - Margin to be added to the width (can be negative).
+ */
+function resizeGUIObjectToCaption(object, align, margin = 0)
+{
+	const objectSize = object.size;
+	const width = Engine.GetTextWidth(object.font, object.caption) + margin;
+	switch (align)
+	{
+	case "right":
+		objectSize.right = object.size.left + width;
+		break;
+	case "left":
+		objectSize.left = object.size.right - width;
+		break;
+	default:
+	}
+	object.size = objectSize;
+}
+
 /**
  * Hide all children after a certain index
  */

binaries/data/mods/public/gui/session/chat/Chat.js

@@ -12,13 +12,15 @@ class Chat
 		this.ChatHistory = new ChatHistory();
 		this.ChatHistory.registerSelectionChangeHandler(this.ChatWindow.onSelectionChange.bind(this.ChatWindow));
 
-		this.ChatInput = new ChatInput();
+		const alignmentHelper = new AlignmentHelper("max");
+
+		this.ChatInput = new ChatInput(alignmentHelper);
 		this.ChatInput.registerChatSubmitHandler(executeNetworkCommand);
 		this.ChatInput.registerChatSubmitHandler(cheats.executeCheat.bind(cheats));
 		this.ChatInput.registerChatSubmitHandler(this.submitChat.bind(this));
 		this.ChatInput.registerChatSubmittedHandler(this.closePage.bind(this));
 
-		this.ChatAddressees = new ChatAddressees();
+		this.ChatAddressees = new ChatAddressees(alignmentHelper);
 		this.ChatAddressees.registerSelectionChangeHandler(this.ChatInput.onSelectionChange.bind(this.ChatInput));
 		this.ChatAddressees.registerSelectionChangeHandler(this.ChatWindow.onSelectionChange.bind(this.ChatWindow));
 

binaries/data/mods/public/gui/session/chat/ChatAddressees.js

@@ -3,12 +3,17 @@
  */
 class ChatAddressees
 {
-	constructor()
+	constructor(alignmentHelper)
 	{
 		this.selectionChangeHandlers = [];
 
+		this.chatAddresseeCaption = Engine.GetGUIObjectByName("chatAddresseeCaption");
+		resizeGUIObjectToCaption(this.chatAddresseeCaption, "right", this.CaptionMargin);
+
 		this.chatAddressee = Engine.GetGUIObjectByName("chatAddressee");
 		this.chatAddressee.onSelectionChange = this.onSelectionChange.bind(this);
+
+		alignmentHelper.setObject(this.chatAddressee, "left", this.chatAddresseeCaption.size.right + this.DropdownMargin);
 	}
 
 	registerSelectionChangeHandler(handler)
@@ -125,3 +130,6 @@ ChatAddressees.prototype.AddresseeTypes = [
 		"isAddressee": (senderID, addresseeGUID) => addresseeGUID == Engine.GetPlayerGUID()
 	}
 ];
+
+ChatAddressees.prototype.CaptionMargin = 10;
+ChatAddressees.prototype.DropdownMargin = 5;

binaries/data/mods/public/gui/session/chat/ChatHistory.js

@@ -13,6 +13,9 @@ class ChatHistory
 
 		this.selectionChangeHandlers = [];
 
+		this.chatHistoryFilterCaption = Engine.GetGUIObjectByName("chatHistoryFilterCaption");
+		resizeGUIObjectToCaption(this.chatHistoryFilterCaption, "right", this.CaptionMargin);
+
 		this.chatHistoryFilter = Engine.GetGUIObjectByName("chatHistoryFilter");
 		let filters = prepareForDropdown(this.Filters.filter(chatFilter => !chatFilter.hidden));
 		this.chatHistoryFilter.list = filters.text.map(text => translateWithContext("chat history filter", text));
@@ -20,6 +23,10 @@ class ChatHistory
 		this.chatHistoryFilter.selected = 0;
 		this.chatHistoryFilter.onSelectionChange = this.onSelectionChange.bind(this);
 
+		const chatHistoryFilterSize = this.chatHistoryFilter.size;
+		chatHistoryFilterSize.left = this.chatHistoryFilterCaption.size.right + this.FilterMargin;
+		this.chatHistoryFilter.size = chatHistoryFilterSize;
+
 		this.chatHistoryText = Engine.GetGUIObjectByName("chatHistoryText");
 	}
 
@@ -132,3 +139,6 @@ ChatHistory.prototype.Filters = [
 		"hidden": !Engine.HasNetClient()
 	}
 ];
+
+ChatHistory.prototype.CaptionMargin = 10;
+ChatHistory.prototype.FilterMargin = 5;

binaries/data/mods/public/gui/session/chat/ChatInput.js

@@ -3,16 +3,21 @@
  */
 class ChatInput
 {
-	constructor()
+	constructor(alignmentHelper)
 	{
 		this.selectedCommand = "";
 		this.chatSubmitHandlers = [];
 		this.chatSubmittedHandlers = [];
 
+		this.chatInputCaption = Engine.GetGUIObjectByName("chatInputCaption");
+		resizeGUIObjectToCaption(this.chatInputCaption, "right", this.CaptionMargin);
+
 		this.chatInput = Engine.GetGUIObjectByName("chatInput");
 		this.chatInput.onPress = this.submitChatInput.bind(this);
 		this.chatInput.onTab = this.autoComplete.bind(this);
 
+		alignmentHelper.setObject(this.chatInput, "left", this.chatInputCaption.size.right + this.InputMargin);
+
 		this.sendChat = Engine.GetGUIObjectByName("sendChat");
 		this.sendChat.onPress = this.submitChatInput.bind(this);
 
@@ -88,3 +93,6 @@ class ChatInput
 			handler();
 	}
 }
+
+ChatInput.prototype.CaptionMargin = 10;
+ChatInput.prototype.InputMargin = 5;

binaries/data/mods/public/gui/session/chat/chat_window.xml

@@ -15,7 +15,7 @@
 	<object type="image" name="chatHistoryPage" size="0 0 100% 100%-120">
 
 		<!-- Chat History Filter -->
-		<object type="text" size="16 12 60 32" style="ModernLeftLabelText">
+		<object type="text" name="chatHistoryFilterCaption" size="16 12 60 32" style="ModernLeftLabelText">
 			<translatableAttribute id="caption" context="chat input">Filter:</translatableAttribute>
 		</object>
 
@@ -42,7 +42,7 @@
 	<object name="chatPage" size="0 100%-120 100% 100%">
 
 		<!-- Message addressee -->
-		<object size="16 100%-106 50 100%-82" type="text" style="ModernLeftLabelText">
+		<object type="text" name="chatAddresseeCaption" size="16 100%-106 50 100%-82" style="ModernLeftLabelText">
 			<translatableAttribute id="caption" context="chat input">To:</translatableAttribute>
 		</object>
 		<object
@@ -56,7 +56,7 @@
 		</object>
 
 		<!-- Message text -->
-		<object type="text" size="16 100%-74 50 100%-50" style="ModernLeftLabelText">
+		<object type="text" name="chatInputCaption" size="16 100%-74 50 100%-50" style="ModernLeftLabelText">
 			<translatableAttribute id="caption" context="chat input">Text:</translatableAttribute>
 		</object>
 		<object