mirror of
https://github.com/ChrisTitusTech/winutil.git
synced 2026-08-09 17:41:14 +10:00
Fix search bar overflowing behind icon buttons at narrow window sizes (#4831)
* fix(search): make search bar stretch instead of overflowing at narrow window sizes * fix(ui): sync runtime MinWidth override with XAML value Add_Loaded was hardcoding $sync.Form.MinWidth back to 1000 after load, overriding the 1150 set in inputXML.xaml and letting the window shrink below the space the search bar/toolbar layout needs. * fix(ui): address responsive search review feedback * fix(ui): enforce usable toolbar width --------- Co-authored-by: Chris Titus <contact@christitus.com>
This commit is contained in:
@@ -135,6 +135,7 @@ Describe "XAML document" {
|
||||
"WPFTab4BT",
|
||||
"WPFTab5BT",
|
||||
"SearchBar",
|
||||
"SearchBarIcon",
|
||||
"SearchBarClearButton",
|
||||
"appscategory",
|
||||
"appspanel",
|
||||
@@ -271,6 +272,32 @@ Describe "XAML document" {
|
||||
}
|
||||
}
|
||||
|
||||
It "keeps the responsive search controls within the available screen width" {
|
||||
$window = $script:xaml.DocumentElement
|
||||
$searchBar = $script:xaml.SelectSingleNode('//*[local-name()="TextBox"][@Name="SearchBar"]')
|
||||
$searchBorder = $searchBar.ParentNode.ParentNode
|
||||
$mainScript = Get-Content -Path $script:mainScriptPath -Raw
|
||||
|
||||
$window.GetAttribute("MinWidth") | Should -Be "800"
|
||||
$searchBorder.GetAttribute("Width") | Should -BeNullOrEmpty
|
||||
$searchBorder.GetAttribute("HorizontalAlignment") | Should -Be "Stretch"
|
||||
$searchBar.GetAttribute("Width") | Should -BeNullOrEmpty
|
||||
$searchBar.GetAttribute("HorizontalAlignment") | Should -Be "Stretch"
|
||||
$mainScript | Should -Match '\$sync\.Form\.MinWidth = "1150"'
|
||||
$mainScript | Should -Match '\$sync\.Form\.MinWidth = \[Math\]::Min\(\[double\]\$sync\.Form\.MinWidth, \[double\]\$screenWidth\)'
|
||||
}
|
||||
|
||||
It "shows only one search action glyph at a time" {
|
||||
$searchIcon = $script:xaml.SelectSingleNode('//*[local-name()="TextBlock"][@Name="SearchBarIcon"]')
|
||||
$clearButton = $script:xaml.SelectSingleNode('//*[local-name()="Button"][@Name="SearchBarClearButton"]')
|
||||
$mainScript = Get-Content -Path $script:mainScriptPath -Raw
|
||||
|
||||
$searchIcon | Should -Not -BeNullOrEmpty
|
||||
$clearButton | Should -Not -BeNullOrEmpty
|
||||
$mainScript | Should -Match '\$sync\.SearchBarClearButton\.Visibility = "Visible"\s+\$sync\.SearchBarIcon\.Visibility = "Collapsed"'
|
||||
$mainScript | Should -Match '\$sync\.SearchBarClearButton\.Visibility = "Collapsed"\s+\$sync\.SearchBarIcon\.Visibility = "Visible"'
|
||||
}
|
||||
|
||||
It "scopes toggle button styles without leaking into combo boxes" {
|
||||
$resources = $script:xaml.SelectSingleNode('//*[local-name()="Window.Resources"]')
|
||||
$implicitToggleStyles = @($resources.SelectNodes('./*[local-name()="Style"][@TargetType="ToggleButton" or @TargetType="{x:Type ToggleButton}"][not(@x:Key)]', $script:xamlNamespace))
|
||||
|
||||
+4
-1
@@ -285,6 +285,7 @@ $sync["Form"].Add_ContentRendered({
|
||||
# Extract screen width and height for the primary monitor
|
||||
$screenWidth = $primaryScreen.Bounds.Width
|
||||
$screenHeight = $primaryScreen.Bounds.Height
|
||||
$sync.Form.MinWidth = [Math]::Min([double]$sync.Form.MinWidth, [double]$screenWidth)
|
||||
|
||||
# Compare with the primary monitor size
|
||||
if ($sync.Form.ActualWidth -gt $screenWidth -or $sync.Form.ActualHeight -gt $screenHeight) {
|
||||
@@ -353,8 +354,10 @@ $searchBarTimer.add_Tick({
|
||||
$sync["SearchBar"].Add_TextChanged({
|
||||
if ($sync.SearchBar.Text -ne "") {
|
||||
$sync.SearchBarClearButton.Visibility = "Visible"
|
||||
$sync.SearchBarIcon.Visibility = "Collapsed"
|
||||
} else {
|
||||
$sync.SearchBarClearButton.Visibility = "Collapsed"
|
||||
$sync.SearchBarIcon.Visibility = "Visible"
|
||||
}
|
||||
if ($searchBarTimer.IsEnabled) {
|
||||
$searchBarTimer.Stop()
|
||||
@@ -365,7 +368,7 @@ $sync["SearchBar"].Add_TextChanged({
|
||||
$sync["Form"].Add_Loaded({
|
||||
param($e)
|
||||
$null = $e
|
||||
$sync.Form.MinWidth = "1000"
|
||||
$sync.Form.MinWidth = "1150"
|
||||
$sync["Form"].MaxWidth = [Double]::PositiveInfinity
|
||||
$sync["Form"].MaxHeight = [Double]::PositiveInfinity
|
||||
})
|
||||
|
||||
+5
-5
@@ -1039,13 +1039,12 @@
|
||||
<ColumnDefinition Width="Auto"/><!-- Buttons area -->
|
||||
</Grid.ColumnDefinitions>
|
||||
|
||||
<Border Grid.Column="0" Margin="5,0,0,0" Width="{DynamicResource SearchBarWidth}" Height="{DynamicResource SearchBarHeight}" VerticalAlignment="Center" HorizontalAlignment="Left">
|
||||
<Border Grid.Column="0" Margin="5,0,10,0" MinWidth="120" Height="{DynamicResource SearchBarHeight}" VerticalAlignment="Center" HorizontalAlignment="Stretch">
|
||||
<Grid>
|
||||
<TextBox
|
||||
Width="{DynamicResource SearchBarWidth}"
|
||||
Height="{DynamicResource SearchBarHeight}"
|
||||
FontSize="{DynamicResource SearchBarTextBoxFontSize}"
|
||||
VerticalAlignment="Center" HorizontalAlignment="Left"
|
||||
VerticalAlignment="Center" HorizontalAlignment="Stretch"
|
||||
BorderThickness="1"
|
||||
Name="SearchBar"
|
||||
Foreground="{DynamicResource MainForegroundColor}" Background="{DynamicResource MainBackgroundColor}"
|
||||
@@ -1053,6 +1052,7 @@
|
||||
ToolTip="Press Ctrl-F and type app name to filter application list below. Press Esc to reset the filter">
|
||||
</TextBox>
|
||||
<TextBlock
|
||||
Name="SearchBarIcon"
|
||||
VerticalAlignment="Center" HorizontalAlignment="Right"
|
||||
FontFamily="Segoe MDL2 Assets"
|
||||
Foreground="{DynamicResource ButtonBackgroundSelectedColor}"
|
||||
@@ -1062,10 +1062,10 @@
|
||||
</Grid>
|
||||
</Border>
|
||||
<Button Grid.Column="0"
|
||||
VerticalAlignment="Center" HorizontalAlignment="Left"
|
||||
VerticalAlignment="Center" HorizontalAlignment="Right"
|
||||
Name="SearchBarClearButton"
|
||||
Style="{StaticResource SearchBarClearButtonStyle}"
|
||||
Margin="213,0,0,0" Visibility="Collapsed">
|
||||
Margin="0,0,20,0" Visibility="Collapsed">
|
||||
</Button>
|
||||
|
||||
<!-- Buttons Container -->
|
||||
|
||||
Reference in New Issue
Block a user