ValveSoftware
tf: qol: Add filter/search option in advanced options menu
Description
This PR adds the ability to filter settings in TF's advanced options menu. In order to make this work it also adds a check in PanelListPanel::ComputeVPixelsNeeded() and PanelListPanel::PerformLayout() to prevent allocating space for invisible panels.
This change should make navigation around the menu better, since I think the amount of settings makes it a bit too cluttered.
Closes:
- https://github.com/ValveSoftware/Source-1-Games/issues/4809
Demonstration video:
https://github.com/user-attachments/assets/ecd9d4ae-4f7f-4110-81dc-4fc2260d1bf7
Changes in runtime files needed
Following modifications to tf/resource/ui/tfadvancedoptionsdialog.res need to be made, as well as localization strings for #TF_AdvancedOptions_Filter:
Click to expand
"Resource\UI\TFAdvancedOptionsDialog.res"
{
"TFAdvancedOptionsDialog"
{
"ControlName" "EditablePanel"
"fieldName" "TFAdvancedOptionsDialog"
"xpos" "c-250"
"ypos" "90"
"wide" "500"
"tall" "350"
"autoResize" "0"
"pinCorner" "0"
"visible" "1"
"enabled" "1"
"tabPosition" "0"
"bgcolor_override" "46 43 42 255"
"paintbackgroundtype" "2"
"settitlebarvisible" ""
"paintborder" "1"
"paintbackground" "0"
"border" "GrayDialogBorder"
"control_w" "500"
"control_h" "25"
"slider_w" "500"
"slider_h" "25"
}
"TitleLabel"
{
"ControlName" "CExLabel"
"fieldName" "TitleLabel"
"font" "HudFontMediumBold"
"labelText" "#TF_AdvancedOptions"
"textAlignment" "center"
"xpos" "0"
"ypos" "0"
"zpos" "1"
"wide" "500"
"tall" "40"
"autoResize" "0"
"pinCorner" "0"
"visible" "1"
"enabled" "1"
"fgcolor_override" "200 80 60 255"
}
+ "FilterLabel"
+ {
+ "ControlName" "CExLabel"
+ "fieldName" "FilterLabel"
+ "font" "HudFontSmall"
+ "labelText" "#TF_AdvancedOptions_Filter"
+ "textAlignment" "left"
+ "xpos" "10"
+ "ypos" "40"
+ "zpos" "1"
+ "wide" "40"
+ "tall" "25"
+ "autoResize" "0"
+ "pinCorner" "0"
+ "visible" "1"
+ "enabled" "1"
+ "fgcolor_override" "235 226 202 255"
+ }
+ "FilterPanel"
+ {
+ "ControlName" "TextEntry"
+ "fieldName" "FilterPanel"
+ "font" "HudFontSmall"
+ "textAlignment" "left"
+ "xpos" "40"
+ "ypos" "40"
+ "zpos" "1"
+ "wide" "440"
+ "tall" "25"
+ "autoResize" "0"
+ "pinCorner" "0"
+ "visible" "1"
+ "enabled" "1"
+ "fgcolor_override" "180 180 180 255"
+ "bgcolor_override" "0 0 0 255"
+ }
"CancelButton"
{
"ControlName" "CExButton"
"fieldName" "CancelButton"
"xpos" "150"
"ypos" "310"
"zpos" "1"
"wide" "100"
"tall" "25"
"autoResize" "0"
"pinCorner" "3"
"visible" "1"
"enabled" "1"
"tabPosition" "0"
"labelText" "#Cancel"
"font" "HudFontSmallBold"
"textAlignment" "center"
"dulltext" "0"
"brighttext" "0"
"default" "1"
"Command" "Close"
"sound_depressed" "UI/buttonclick.wav"
"sound_released" "UI/buttonclickrelease.wav"
}
"OkButton"
{
"ControlName" "CExButton"
"fieldName" "OkButton"
"xpos" "300"
"ypos" "310"
"zpos" "1"
"wide" "100"
"tall" "25"
"autoResize" "0"
"pinCorner" "3"
"visible" "1"
"enabled" "1"
"tabPosition" "0"
"labelText" "#GameUI_Ok"
"font" "HudFontSmallBold"
"textAlignment" "center"
"dulltext" "0"
"brighttext" "0"
"default" "1"
"Command" "Ok"
"sound_depressed" "UI/buttonclick.wav"
"sound_released" "UI/buttonclickrelease.wav"
}
"PanelListPanel"
{
"ControlName" "CPanelListPanel"
"fieldName" "PanelListPanel"
"xpos" "10"
- "ypos" "40"
+ "ypos" "70"
"wide" "480"
- "tall" "260"
+ "tall" "239"
"autoResize" "0"
"pinCorner" "0"
"visible" "1"
"enabled" "1"
"tabPosition" "0"
"bgcolor_override" "0 0 0 0"
}
"TooltipPanel"
{
"ControlName" "EditablePanel"
"fieldName" "TooltipPanel"
"xpos" "0"
"ypos" "0"
"zpos" "100"
"wide" "240"
"tall" "50"
"visible" "0"
"PaintBackgroundType" "2"
"border" "MainMenuBGBorder"
"TipLabel"
{
"ControlName" "CExLabel"
"fieldName" "TipLabel"
"font" "HudFontSmallest"
"labelText" "%tiptext%"
"textAlignment" "center"
"xpos" "20"
"ypos" "10"
"zpos" "2"
"wide" "200"
"tall" "30"
"autoResize" "0"
"pinCorner" "0"
"visible" "1"
"enabled" "1"
"fgcolor_override" "235 226 202 255"
"wrap" "1"
//"centerwrap" "1"
}
}
}
I felt like the filter box in the video was hard to see, so I decided to put together an alternative color scheme that fixes this problem. This color scheme makes the filter box look like other text boxes in the same panel.
"fgcolor_override" "180 180 180 255"
"bgcolor_override" "0 0 0 255"
Yeah, I can see how the text entry might blend-in with the background. I have updated the diff and the video to reflect your changes.
#TF_AdvancedOptions_Filter string may overlap with the search bar in some languages
Replying to https://github.com/ValveSoftware/source-sdk-2013/pull/1241#issuecomment-3475292153
Updated FilterField and FilterLabel bounds so all supported languges should fit (I think Finnish is the longest)
Would be nicer if TextEntry supported putting placeholder text like the equivalent Win32 control but adding that is probably too out-of-scope for this PR