Skip to content

Commit af577b9

Browse files
committed
improve and rename dismiss button style
add ToggleReplaceModeButton animation
1 parent eb08d4e commit af577b9

8 files changed

Lines changed: 182 additions & 122 deletions

File tree

src/Notepads/App.xaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<ResourceDictionary Source="Notepads.Controls/Themes/Generic.xaml" />
2323
<ResourceDictionary Source="Controls/TextEditor/TextEditorCore.xaml" />
2424
<ResourceDictionary Source="Controls/FindAndReplace/FindAndReplacePlaceholder.xaml"></ResourceDictionary>
25-
<ResourceDictionary Source="Resource/DismissButtonStyle.xaml"></ResourceDictionary>
25+
<ResourceDictionary Source="Resource/TransparentButtonStyle.xaml" />
2626
<ResourceDictionary Source="Resource/TransparentTextBoxStyle.xaml"></ResourceDictionary>
2727
<ResourceDictionary Source="Resource/CustomSplitViewStyle.xaml"></ResourceDictionary>
2828
<ResourceDictionary Source="Resource/InAppNotificationNoDismissButton.xaml"></ResourceDictionary>

src/Notepads/Controls/DiffViewer/SideBySideDiffViewer.xaml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,13 @@
3939
<Grid Grid.Row="0" Background="{ThemeResource HeaderBackgroundThemeBrush}">
4040
<Button x:Name="DismissButton"
4141
x:Uid="FindAndReplace_DismissButton"
42-
Style="{StaticResource DismissButtonStyle}"
42+
Style="{StaticResource TransparentButtonStyle}"
4343
Width="42"
44+
Padding="0"
4445
HorizontalAlignment="Left"
4546
VerticalAlignment="Stretch"
46-
Content="&#xE894;"
47-
FontSize="12"
4847
IsTabStop="False">
48+
<FontIcon FontSize="12" Glyph="&#xE894;" />
4949
<Button.KeyboardAccelerators>
5050
<KeyboardAccelerator Key="Escape" />
5151
</Button.KeyboardAccelerators>

src/Notepads/Controls/FindAndReplace/FindAndReplaceControl.xaml

Lines changed: 46 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,36 @@
2828
Grid.Column="0">
2929
<Button x:Name="ToggleReplaceModeButton"
3030
x:Uid="FindAndReplace_ToggleReplaceModeButton"
31-
Style="{StaticResource DismissButtonStyle}"
31+
Style="{StaticResource TransparentButtonStyle}"
3232
Width="20"
3333
MinHeight="32"
34-
d:Content="&#xE76C;"
35-
FontSize="12"
34+
Padding="0"
3635
Click="ToggleReplaceModeButton_OnClick"
37-
IsTabStop="False" />
36+
IsTabStop="False">
37+
<Button.Resources>
38+
<x:String x:Key="ExpandCollapseChevronAnimationDuration">00:00:00.200</x:String>
39+
<x:String x:Key="ExpandCollapseChevronKeySpline">0.1,0.25,0.1,0.75</x:String>
40+
41+
<Storyboard x:Name="ReplaceBarClosed">
42+
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronTransform" Storyboard.TargetProperty="Rotation">
43+
<SplineDoubleKeyFrame KeyTime="{StaticResource ExpandCollapseChevronAnimationDuration}" Value="0" KeySpline="{StaticResource ExpandCollapseChevronKeySpline}" />
44+
</DoubleAnimationUsingKeyFrames>
45+
</Storyboard>
46+
47+
<Storyboard x:Name="ReplaceBarOpened">
48+
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="ExpandCollapseChevronTransform" Storyboard.TargetProperty="Rotation">
49+
<SplineDoubleKeyFrame KeyTime="{StaticResource ExpandCollapseChevronAnimationDuration}" Value="90" KeySpline="{StaticResource ExpandCollapseChevronKeySpline}" />
50+
</DoubleAnimationUsingKeyFrames>
51+
</Storyboard>
52+
</Button.Resources>
53+
<FontIcon FontSize="12"
54+
Glyph="&#xE974;"
55+
RenderTransformOrigin="0.5 0.5">
56+
<FontIcon.RenderTransform>
57+
<CompositeTransform x:Name="ExpandCollapseChevronTransform" />
58+
</FontIcon.RenderTransform>
59+
</FontIcon>
60+
</Button>
3861
</Grid>
3962

4063
<RelativePanel x:Name="FindBarPlaceHolder"
@@ -92,12 +115,11 @@
92115
</Line>
93116
<Button x:Name="OptionButton"
94117
x:Uid="FindAndReplace_SearchOptionButton"
95-
Style="{StaticResource DismissButtonStyle}"
118+
Style="{StaticResource TransparentButtonStyle}"
96119
Width="32"
97120
Height="32"
98-
Content="&#xE712;"
99-
FontSize="16"
100121
IsTabStop="False">
122+
<FontIcon FontSize="16" Glyph="&#xE712;" />
101123
<Button.Flyout>
102124
<MenuFlyout Placement="BottomEdgeAlignedRight">
103125
<ToggleMenuFlyoutItem x:Name="MatchCaseToggle"
@@ -142,14 +164,14 @@
142164
<Button x:Name="SearchBackwardButton"
143165
x:Uid="FindAndReplace_SearchBackwardButton"
144166
Grid.Column="0"
145-
Style="{StaticResource DismissButtonStyle}"
167+
Style="{StaticResource TransparentButtonStyle}"
146168
Width="36"
147169
Height="32"
148-
Content="&#xE74A;"
149-
FontSize="16"
170+
Padding="0"
150171
Click="SearchBackwardButton_OnClick"
151172
IsEnabled="False"
152173
IsTabStop="False">
174+
<FontIcon FontSize="16" Glyph="&#xE74A;" />
153175
<Button.KeyboardAccelerators>
154176
<KeyboardAccelerator Modifiers="Shift" Key="F3" />
155177
</Button.KeyboardAccelerators>
@@ -158,14 +180,14 @@
158180
<Button x:Name="SearchForwardButton"
159181
x:Uid="FindAndReplace_SearchForwardButton"
160182
Grid.Column="1"
161-
Style="{StaticResource DismissButtonStyle}"
183+
Style="{StaticResource TransparentButtonStyle}"
162184
Width="36"
163185
Height="32"
164-
Content="&#xE74B;"
165-
FontSize="16"
186+
Padding="0"
166187
Click="SearchForwardButton_OnClick"
167188
IsEnabled="False"
168189
IsTabStop="False">
190+
<FontIcon FontSize="16" Glyph="&#xE74B;" />
169191
<Button.KeyboardAccelerators>
170192
<KeyboardAccelerator Key="F3" />
171193
</Button.KeyboardAccelerators>
@@ -174,13 +196,14 @@
174196
<Button x:Name="DismissButton"
175197
x:Uid="FindAndReplace_DismissButton"
176198
Grid.Column="2"
177-
Style="{StaticResource DismissButtonStyle}"
199+
Style="{StaticResource TransparentButtonStyle}"
178200
Width="36"
179201
Height="32"
180-
Content="&#xE894;"
181-
FontSize="16"
202+
Padding="0"
182203
Click="DismissButton_OnClick"
183-
IsTabStop="False" />
204+
IsTabStop="False">
205+
<FontIcon FontSize="16" Glyph="&#xE894;" />
206+
</Button>
184207
</Grid>
185208

186209
<Grid x:Name="ReplaceBarPlaceHolder"
@@ -215,14 +238,14 @@
215238
<Button x:Name="ReplaceButton"
216239
x:Uid="FindAndReplace_ReplaceButton"
217240
Grid.Column="0"
218-
Style="{StaticResource DismissButtonStyle}"
241+
Style="{StaticResource TransparentButtonStyle}"
219242
Width="36"
220243
Height="32"
221-
Content="&#xE8AB;"
222-
FontSize="16"
244+
Padding="0"
223245
Click="ReplaceButton_OnClick"
224246
IsEnabled="False"
225247
IsTabStop="False">
248+
<FontIcon FontSize="16" Glyph="&#xE8AB;" />
226249
<Button.KeyboardAccelerators>
227250
<KeyboardAccelerator Modifiers="Menu" Key="R" />
228251
</Button.KeyboardAccelerators>
@@ -231,14 +254,14 @@
231254
<Button x:Name="ReplaceAllButton"
232255
x:Uid="FindAndReplace_ReplaceAllButton"
233256
Grid.Column="1"
234-
Style="{StaticResource DismissButtonStyle}"
257+
Style="{StaticResource TransparentButtonStyle}"
235258
Width="36"
236259
Height="32"
237-
Content="&#xE7FD;"
238-
FontSize="16"
260+
Padding="0"
239261
Click="ReplaceAllButton_OnClick"
240262
IsEnabled="False"
241263
IsTabStop="False">
264+
<FontIcon FontSize="16" Glyph="&#xE7FD;" />
242265
<Button.KeyboardAccelerators>
243266
<KeyboardAccelerator Modifiers="Control,Menu" Key="Enter" />
244267
</Button.KeyboardAccelerators>

src/Notepads/Controls/FindAndReplace/FindAndReplaceControl.xaml.cs

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ public void ShowReplaceBar(bool showReplaceBar)
119119
{
120120
ToggleReplaceModeButtonGrid.SetValue(Grid.RowSpanProperty, 2);
121121
ToggleReplaceModeButton.VerticalAlignment = VerticalAlignment.Stretch;
122-
ToggleReplaceModeButton.Content = "\uE70D";
122+
ReplaceBarOpened.Begin();
123123
ReplaceBarPlaceHolder.Visibility = Visibility.Visible;
124124
if (!string.IsNullOrEmpty(FindBar.Text))
125125
{
@@ -130,8 +130,7 @@ public void ShowReplaceBar(bool showReplaceBar)
130130
else
131131
{
132132
ToggleReplaceModeButtonGrid.SetValue(Grid.RowSpanProperty, 1);
133-
ToggleReplaceModeButton.VerticalAlignment = VerticalAlignment.Top;
134-
ToggleReplaceModeButton.Content = "\uE76C";
133+
ReplaceBarClosed.Begin();
135134
ReplaceBarPlaceHolder.Visibility = Visibility.Collapsed;
136135
ReplaceButton.IsEnabled = false;
137136
ReplaceAllButton.IsEnabled = false;

src/Notepads/Controls/GoTo/GoToControl.xaml

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,10 @@
4848
<Button x:Name="SearchButton"
4949
x:Uid="GoTo_SearchButton"
5050
Grid.Column="2"
51-
Style="{StaticResource DismissButtonStyle}"
51+
Style="{StaticResource TransparentButtonStyle}"
5252
Width="36"
5353
Height="32"
54+
Padding="0"
5455
VerticalAlignment="Top"
5556
Content="&#xEBE7;"
5657
FontSize="16"
@@ -62,9 +63,10 @@
6263
<Button x:Name="DismissButton"
6364
x:Uid="FindAndReplace_DismissButton"
6465
Grid.Column="3"
65-
Style="{StaticResource DismissButtonStyle}"
66+
Style="{StaticResource TransparentButtonStyle}"
6667
Width="36"
6768
Height="32"
69+
Padding="0"
6870
VerticalAlignment="Top"
6971
Content="&#xE894;"
7072
FontSize="16"

src/Notepads/Notepads.csproj

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -401,7 +401,7 @@
401401
<SubType>Designer</SubType>
402402
<Generator>MSBuild:Compile</Generator>
403403
</Page>
404-
<Page Include="Resource\DismissButtonStyle.xaml">
404+
<Page Include="Resource\TransparentButtonStyle.xaml">
405405
<SubType>Designer</SubType>
406406
<Generator>MSBuild:Compile</Generator>
407407
</Page>

src/Notepads/Resource/DismissButtonStyle.xaml

Lines changed: 0 additions & 89 deletions
This file was deleted.

0 commit comments

Comments
 (0)