Skip to content

Commit

Permalink
Search box visual tweaks (#11105)
Browse files Browse the repository at this point in the history
Made some changes to the search box:
* Adjusted spacing inside the box
* Detached the search box from the titlebar (as explained [here](#1375 (comment)))
* The search box is now 8px further to the left, in case the scrollbar is always enabled
* Made some controls use default properties, so that they'll adjust nicely to the 2.6 styles

Other: the search box and command palette now use OverlayCornerRadius

Before/After:
![image](https://user-images.githubusercontent.com/84711285/131888377-513b9de4-a653-4086-9a67-8718c64dc75b.png)
  • Loading branch information
gabrielconl committed Sep 9, 2021
1 parent bee6fb4 commit 54ed295
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 12 deletions.
2 changes: 1 addition & 1 deletion src/cascadia/TerminalApp/CommandPalette.xaml
Expand Up @@ -407,7 +407,7 @@
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
Windows10version1903:Shadow="{StaticResource CommandPaletteShadow}"
CornerRadius="{ThemeResource ControlCornerRadius}"
CornerRadius="{ThemeResource OverlayCornerRadius}"
PointerPressed="_backdropPointerPressed"
Style="{ThemeResource CommandPaletteBackground}">

Expand Down
27 changes: 16 additions & 11 deletions src/cascadia/TerminalControl/SearchBoxControl.xaml
Expand Up @@ -16,18 +16,23 @@
<ResourceDictionary>
<Style x:Key="ToggleButtonStyle"
TargetType="ToggleButton">
<Setter Property="Width" Value="25" />
<Setter Property="Height" Value="25" />
<Setter Property="Width" Value="24" />
<Setter Property="Height" Value="24" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Padding" Value="1" />
<Setter Property="CornerRadius" Value="2" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Padding" Value="0" />
<Setter Property="Margin" Value="2,0" />
<Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
</Style>
<Style x:Key="ButtonStyle"
TargetType="Button">
<Setter Property="Width" Value="25" />
<Setter Property="Height" Value="25" />
<Setter Property="Width" Value="24" />
<Setter Property="Height" Value="24" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="CornerRadius" Value="2" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Padding" Value="0" />
<Setter Property="Margin" Value="6,0,0,0" />
<Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
</Style>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Dark">
Expand Down Expand Up @@ -227,14 +232,15 @@
</ResourceDictionary>
</UserControl.Resources>

<StackPanel Padding="5"
CornerRadius="0,0,2,2"
<StackPanel Margin="8"
Padding="8"
CornerRadius="{ThemeResource OverlayCornerRadius}"
Orientation="Horizontal"
Style="{ThemeResource SearchBoxBackground}">
<TextBox x:Name="TextBox"
x:Uid="SearchBox_TextBox"
Width="160"
Margin="5"
Margin="0,0,6,0"
HorizontalAlignment="Left"
VerticalAlignment="Center"
CornerRadius="2"
Expand Down Expand Up @@ -270,7 +276,6 @@

<Button x:Name="CloseButton"
x:Uid="SearchBox_Close"
Padding="0"
Click="CloseClick"
Style="{ThemeResource ButtonStyle}">
<FontIcon FontFamily="Segoe MDL2 Assets"
Expand Down

0 comments on commit 54ed295

Please sign in to comment.