Fix scrollbars & lobby small make-ups, widths, paddings (FAForever#3925)

lua/ui/controls/combo.lua

@@ -60,6 +60,12 @@ Combo = Class(Group) {
         self.mItemCue = itemCue or "UI_Tab_Click_01"
         self.EnableColor = EnableColor or true
 
+        -- sets the offsets to the auto-attached scrollbar
+        -- these are the better defaults for the FAF design
+        self._scrollbarOffsetRight = -22
+        self._scrollbarOffsetBottom = -6
+        self._scrollbarOffsetTop = -6
+
         bitmaps = bitmaps or defaultBitmaps
 
         pointSize = pointSize or 12
@@ -197,7 +203,7 @@ Combo = Class(Group) {
         -- set the height of the list based on the number of items visible and the font metrics
         self._maxVisibleItems = maxVisibleItems
         self._visibleItems = LazyVar.Create()
-        self._list.Height:Set(function() return self._visibleItems() * (self._text.FontAscent() + self._text.FontDescent() + self._text.FontExternalLeading() + 1) end)
+        self._list.Height:Set(function() return self._visibleItems() * (self._text.FontAscent() + self._text.FontDescent() + self._text.FontExternalLeading()) end)
         self._dropdown.Height:Set(function() return self._list.Height() + ddum.Height() + ddlm.Height() end)
         self._visibleItems:Set(1)
 
@@ -316,7 +322,7 @@ Combo = Class(Group) {
             self._scrollbar:Destroy()
         end
         if numItems > self._visibleItems() then
-            self._scrollbar = UIUtil.CreateVertScrollbarFor(self._list)
+            self._scrollbar = UIUtil.CreateVertScrollbarFor(self._list, self._scrollbarOffsetRight, nil, self._scrollbarOffsetBottom, self._scrollbarOffsetTop)
         end
 
         local realDefFinded = false
@@ -336,6 +342,13 @@ Combo = Class(Group) {
         self:SetItem(defaultItemIndex)
     end,
 
+    -- helper function to (re)set scrollbar offsets for dialogs or UI parts using Vanila design (Replays, Multiplayer LAN, etc)
+    SetScrollBarOffsets = function(self, offset_right, offset_bottom, offset_top)
+        self._scrollbarOffsetRight = offset_right or 0
+        self._scrollbarOffsetBottom = offset_bottom or 0
+        self._scrollbarOffsetTop = offset_top or 0
+    end,
+
     ClearItems = function(self)
         self._visibleItems:Set(0)
         self._list:DeleteAllItems()

lua/ui/lobby/lobby.lua

@@ -624,7 +624,8 @@ function ReallyCreateLobby(protocol, localPort, desiredPlayerName, localPlayerUI
                 GUI.chatEdit:AcquireFocus()
             end,
             nil, nil,
-            true
+            true,
+            {escapeButton = 2, enterButton = 1, worldCover = true}
         )
     end
     EscapeHandler.PushEscapeHandler(GUI.exitLobbyEscapeHandler)
@@ -2737,7 +2738,7 @@ function CreateSlotsUI(makeLabel)
         newSlot:AddChild(numGamesText)
 
         -- Name
-        local nameLabel = Combo(newSlot, 14, 12, true, nil, "UI_Tab_Rollover_01", "UI_Tab_Click_01")
+        local nameLabel = Combo(newSlot, 14, 16, true, nil, "UI_Tab_Rollover_01", "UI_Tab_Click_01")
         newSlot.name = nameLabel
         nameLabel._text:SetFont('Arial Gras', 15)
         newSlot:AddChild(nameLabel)
@@ -3068,23 +3069,24 @@ function CreateUI(maxPlayers)
         LayoutHelpers.SetWidth(GUI.AIFillPanel, 278)
         UIUtil.SurroundWithBorder(GUI.AIFillPanel, '/scx_menu/lan-game-lobby/frame/')
         GUI.AIFillCombo = Combo.Combo(GUI.AIFillPanel, 14, 12, false, nil)
-        LayoutHelpers.AtLeftTopIn(GUI.AIFillCombo, GUI.AIFillPanel)
-        GUI.AIFillCombo.Width:Set(GUI.AIFillPanel.Width)
+        LayoutHelpers.AtHorizontalCenterIn(GUI.AIFillCombo, GUI.AIFillPanel)
+        LayoutHelpers.AtTopIn(GUI.AIFillCombo, GUI.AIFillPanel, 5)
+        GUI.AIFillCombo.Width:Set(function() return GUI.AIFillPanel.Width() - LayoutHelpers.ScaleNumber(15) end)
         GUI.AIFillCombo:AddItems(AIStrings)
         GUI.AIFillCombo:SetTitleText(LOC('<LOC lobui_0461>Choose AI for autofilling'))
         Tooltip.AddComboTooltip(GUI.AIFillCombo, AITooltips)
         GUI.AIFillButton = UIUtil.CreateButtonStd(GUI.AIFillCombo, '/BUTTON/medium/', LOC('<LOC lobui_0462>Fill Slots'), 12)
         LayoutHelpers.SetWidth(GUI.AIFillButton, 129)
         LayoutHelpers.SetHeight(GUI.AIFillButton, 30)
-        LayoutHelpers.AtLeftTopIn(GUI.AIFillButton, GUI.AIFillCombo, -10, 25)
+        LayoutHelpers.AtLeftTopIn(GUI.AIFillButton, GUI.AIFillCombo, -10, 20)
         GUI.AIClearButton = UIUtil.CreateButtonStd(GUI.AIFillButton, '/BUTTON/medium/', LOC('<LOC lobui_0463>Clear Slots'), 12)
         GUI.AIClearButton.Width:Set(GUI.AIFillButton.Width)
         GUI.AIClearButton.Height:Set(GUI.AIFillButton.Height)
         LayoutHelpers.RightOf(GUI.AIClearButton, GUI.AIFillButton, -19)
         GUI.TeamCountSelector = Combo.BitmapCombo(GUI.AIClearButton, teamIcons, 1, false, nil, "UI_Tab_Rollover_01", "UI_Tab_Click_01")
         LayoutHelpers.SetWidth(GUI.TeamCountSelector, 44)
         LayoutHelpers.AtTopIn(GUI.TeamCountSelector, GUI.AIClearButton, 5)
-        GUI.TeamCountSelector.Right:Set(GUI.AIFillPanel.Right)
+        LayoutHelpers.AtRightIn(GUI.TeamCountSelector, GUI.AIFillPanel, 8)
         local tooltipText = {}
         tooltipText['text'] = '<LOC tooltipui0710>Teams Count'
         tooltipText['body'] = '<LOC tooltipui0711>On how many teams share players?'
@@ -3386,9 +3388,9 @@ function CreateUI(maxPlayers)
     local chatBG = Bitmap(GUI.chatPanel)
     GUI.chatBG = chatBG
     chatBG:SetSolidColor('FF212123')
-    LayoutHelpers.Below(chatBG, GUI.chatDisplay, 1)
-    LayoutHelpers.AtLeftIn(chatBG, GUI.chatDisplay, -5)
-    chatBG.Width:Set(GUI.chatPanel.Width() - LayoutHelpers.ScaleNumber(16))
+    LayoutHelpers.Below(chatBG, GUI.chatDisplay, 0)
+    LayoutHelpers.AtLeftIn(chatBG, GUI.chatDisplay, -2)
+    chatBG.Width:Set(GUI.chatPanel.Width)
     LayoutHelpers.SetHeight(chatBG, 24)
 
     -- Set up the chat edit buttons and functions
@@ -3742,12 +3744,12 @@ function CreateUI(maxPlayers)
 
     -- CLOSE/OPEN EMPTY SLOTS BUTTON --
     GUI.closeEmptySlots = UIUtil.CreateButtonStd(GUI.observerPanel, '/BUTTON/closeslots/')
-    LayoutHelpers.AtLeftTopIn(GUI.closeEmptySlots, GUI.defaultOptions, -39, 47)
     Tooltip.AddButtonTooltip(GUI.closeEmptySlots, 'lob_close_empty_slots')
     if not isHost then
         GUI.closeEmptySlots:Hide()
-        LayoutHelpers.AtLeftTopIn(GUI.closeEmptySlots, GUI.defaultOptions, -40, 47)
+        LayoutHelpers.AtLeftTopIn(GUI.closeEmptySlots, GUI.defaultOptions, -40, 43)
     else
+        LayoutHelpers.AtLeftTopIn(GUI.closeEmptySlots, GUI.defaultOptions, -31, 43)
         GUI.closeEmptySlots.OnClick = function(self, modifiers)
             if lobbyComm:IsHost() then
                 if modifiers.Ctrl then
@@ -3786,7 +3788,7 @@ function CreateUI(maxPlayers)
 
     -- GO OBSERVER BUTTON --
     GUI.becomeObserver = UIUtil.CreateButtonStd(GUI.observerPanel, '/BUTTON/observer/')
-    LayoutHelpers.RightOf(GUI.becomeObserver, GUI.closeEmptySlots, -19)
+    LayoutHelpers.RightOf(GUI.becomeObserver, GUI.closeEmptySlots, -25)
     Tooltip.AddButtonTooltip(GUI.becomeObserver, 'lob_become_observer')
     GUI.becomeObserver.OnClick = function()
         if IsPlayer(localPlayerID) then
@@ -3806,15 +3808,15 @@ function CreateUI(maxPlayers)
 
     -- CPU BENCH BUTTON --
     GUI.rerunBenchmark = UIUtil.CreateButtonStd(GUI.observerPanel, '/BUTTON/cputest/', '', 11)
-    LayoutHelpers.RightOf(GUI.rerunBenchmark, GUI.becomeObserver, -19)
+    LayoutHelpers.RightOf(GUI.rerunBenchmark, GUI.becomeObserver, -25)
     Tooltip.AddButtonTooltip(GUI.rerunBenchmark,{text=LOC("<LOC lobui_0425>Run CPU Benchmark Test"), body=LOC("<LOC lobui_0426>Recalculates your CPU rating.")})
     GUI.rerunBenchmark.OnClick = function(self, modifiers)
         ForkThread(function() UpdateBenchmark(true) end)
     end
 
     -- Autobalance Button --
     GUI.PenguinAutoBalance = UIUtil.CreateButtonStd(GUI.observerPanel, '/BUTTON/autobalance/')
-    LayoutHelpers.RightOf(GUI.PenguinAutoBalance, GUI.becomeObserver, 59)
+    LayoutHelpers.RightOf(GUI.PenguinAutoBalance, GUI.rerunBenchmark, -25)
     Tooltip.AddButtonTooltip(GUI.PenguinAutoBalance, {text=LOC("<LOC lobui_0444>Autobalance"), body=LOC("<LOC lobui_0445>Automatically balance players into 2 equally sized teams")})
     if not isHost then
         GUI.PenguinAutoBalance:Hide()
@@ -4279,15 +4281,15 @@ end
 function setupChatEdit(chatPanel)
     GUI.chatEdit = Edit(chatPanel)
     LayoutHelpers.AtLeftTopIn(GUI.chatEdit, GUI.chatBG, 4, 3)
-    GUI.chatEdit.Width:Set(GUI.chatBG.Width() - LayoutHelpers.ScaleNumber(9))
+    GUI.chatEdit.Width:Set(GUI.chatBG.Width() - LayoutHelpers.ScaleNumber(4))
     LayoutHelpers.SetHeight(GUI.chatEdit, 22)
     GUI.chatEdit:SetFont(UIUtil.bodyFont, 16)
     GUI.chatEdit:SetForegroundColor(UIUtil.fontColor)
     GUI.chatEdit:ShowBackground(false)
     GUI.chatEdit:SetDropShadow(true)
     GUI.chatEdit:AcquireFocus()
 
-    GUI.chatDisplayScroll = UIUtil.CreateLobbyVertScrollbar(chatPanel, -15, -2, 0)
+    GUI.chatDisplayScroll = UIUtil.CreateLobbyVertScrollbar(chatPanel, -15, 25, 0)
 
     GUI.chatEdit:SetMaxChars(200)
     GUI.chatEdit.OnCharPressed = function(self, charcode)