Index: binaries/data/mods/public/gui/common/AlignLeft.js =================================================================== --- /dev/null +++ binaries/data/mods/public/gui/common/AlignLeft.js @@ -0,0 +1,28 @@ +/** + * This is a helper class to align a set of GUIObjects horizontally on the left. + */ +class AlignLeft +{ + constructor() + { + // A set of arrays containing the GUIObjects and minumim left position per objects. + this.data = new Set(); + } + + addObject(object, minLeft) + { + this.data.add({ "object": object, "minLeft": minLeft }); + this.align(); + } + + align() + { + const left = Math.max(...Array.from(this.data).map(objectData => objectData.minLeft)) + for (const objectData of this.data) + { + const objectSize = objectData.object.size + objectSize.left = left; + objectData.object.size = objectSize; + } + } +} Index: binaries/data/mods/public/gui/common/functions_utility.js =================================================================== --- binaries/data/mods/public/gui/common/functions_utility.js +++ binaries/data/mods/public/gui/common/functions_utility.js @@ -221,6 +221,29 @@ } /** + * 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 */ function hideRemaining(parentName, start = 0) Index: binaries/data/mods/public/gui/session/chat/Chat.js =================================================================== --- binaries/data/mods/public/gui/session/chat/Chat.js +++ binaries/data/mods/public/gui/session/chat/Chat.js @@ -12,15 +12,19 @@ this.ChatHistory = new ChatHistory(); this.ChatHistory.registerSelectionChangeHandler(this.ChatWindow.onSelectionChange.bind(this.ChatWindow)); + const alignHelper = new AlignLeft(); + this.ChatInput = new ChatInput(); 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)); + alignHelper.addObject(this.ChatInput.getChatInput(), this.ChatInput.getCaptionSizeRight() + this.Margin) this.ChatAddressees = new ChatAddressees(); this.ChatAddressees.registerSelectionChangeHandler(this.ChatInput.onSelectionChange.bind(this.ChatInput)); this.ChatAddressees.registerSelectionChangeHandler(this.ChatWindow.onSelectionChange.bind(this.ChatWindow)); + alignHelper.addObject(this.ChatAddressees.getChatAddressee(), this.ChatAddressees.getCaptionSizeRight() + this.Margin) this.ChatMessageHandler = new ChatMessageHandler(); this.ChatMessageHandler.registerMessageFormatClass(ChatMessageFormatNetwork); @@ -95,3 +99,5 @@ }); } } + +Chat.prototype.Margin = 5; Index: binaries/data/mods/public/gui/session/chat/ChatAddressees.js =================================================================== --- binaries/data/mods/public/gui/session/chat/ChatAddressees.js +++ binaries/data/mods/public/gui/session/chat/ChatAddressees.js @@ -7,10 +7,23 @@ { 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); } + getCaptionSizeRight() + { + return this.chatAddresseeCaption.size.right; + } + + getChatAddressee() + { + return this.chatAddressee; + } + registerSelectionChangeHandler(handler) { this.selectionChangeHandlers.push(handler); @@ -125,3 +138,5 @@ "isAddressee": (senderID, addresseeGUID) => addresseeGUID == Engine.GetPlayerGUID() } ]; + +ChatAddressees.prototype.CaptionMargin = 10; Index: binaries/data/mods/public/gui/session/chat/ChatHistory.js =================================================================== --- binaries/data/mods/public/gui/session/chat/ChatHistory.js +++ binaries/data/mods/public/gui/session/chat/ChatHistory.js @@ -13,6 +13,9 @@ 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 @@ this.chatHistoryFilter.selected = 0; this.chatHistoryFilter.onSelectionChange = this.onSelectionChange.bind(this); + const chatHistoryFilterSize = this.chatHistoryFilter.size; + chatHistoryFilterSize.left = this.chatHistoryFilterCaption.size.right + this.CaptionToFilterMargin; + this.chatHistoryFilter.size = chatHistoryFilterSize; + this.chatHistoryText = Engine.GetGUIObjectByName("chatHistoryText"); } @@ -132,3 +139,6 @@ "hidden": !Engine.HasNetClient() } ]; + +ChatHistory.prototype.CaptionMargin = 10; +ChatHistory.prototype.CaptionToFilterMargin = 5; Index: binaries/data/mods/public/gui/session/chat/ChatInput.js =================================================================== --- binaries/data/mods/public/gui/session/chat/ChatInput.js +++ binaries/data/mods/public/gui/session/chat/ChatInput.js @@ -9,6 +9,9 @@ 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); @@ -19,6 +22,16 @@ registerHotkeyChangeHandler(this.onHotkeyChange.bind(this)); } + getCaptionSizeRight() + { + return this.chatInputCaption.size.right; + } + + getChatInput() + { + return this.chatInput; + } + onHotkeyChange() { let tooltip = this.getInputHotkeyTooltip() + this.getOpenHotkeyTooltip(); @@ -88,3 +101,5 @@ handler(); } } + +ChatInput.prototype.CaptionMargin = 10; Index: binaries/data/mods/public/gui/session/chat/chat_window.xml =================================================================== --- binaries/data/mods/public/gui/session/chat/chat_window.xml +++ binaries/data/mods/public/gui/session/chat/chat_window.xml @@ -15,7 +15,7 @@ - + Filter: @@ -42,7 +42,7 @@ - + To: - + Text: