Skip to content

Commit 8ee9f99

Browse files
niels9001niels9001
authored
[Settings] Tweaking removing recent/favorite samples UX (#2012)
To avoid potential accessibility issues, switching from a flyout to a dialog when removing favorites or recents. While at it, I simplified the UI a bit. <img width="1674" height="607" alt="image" src="https://github.com/user-attachments/assets/ca58c599-2f15-4781-8527-c4d7b807a7d4" /> <img width="826" height="441" alt="image" src="https://github.com/user-attachments/assets/01e0799e-2f26-4a26-b8b3-fb26f0b2ab66" />
1 parent 69c444c commit 8ee9f99

File tree

2 files changed

+61
-74
lines changed

2 files changed

+61
-74
lines changed

‎WinUIGallery/Pages/SettingsPage.xaml

Lines changed: 19 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@
2929
x:Name="PageHeader"
3030
MaxWidth="1064"
3131
Margin="36,24,36,0"
32+
AutomationProperties.HeadingLevel="Level1"
3233
Style="{StaticResource TitleTextBlockStyle}"
33-
Text="Settings"
34-
AutomationProperties.HeadingLevel="Level1" />
34+
Text="Settings" />
3535
<ScrollView
3636
Grid.Row="1"
3737
Padding="36,0,36,0"
@@ -85,65 +85,24 @@
8585
</toolkit:SettingsExpander.Items>
8686
</toolkit:SettingsExpander>
8787

88-
<toolkit:SettingsExpander x:Name="SamplesSettingsExpander"
89-
Description="Manage samples personalization preferences"
90-
Header="Sample preferences">
91-
<toolkit:SettingsExpander.HeaderIcon>
88+
<toolkit:SettingsCard Description="Clear your recent or favorite samples" Header="Manage samples">
89+
<toolkit:SettingsCard.HeaderIcon>
9290
<FontIcon Glyph="&#xE8A9;" />
93-
</toolkit:SettingsExpander.HeaderIcon>
94-
<toolkit:SettingsExpander.Items>
95-
<toolkit:SettingsCard x:Name="ClearVisitedSamplesCard"
96-
Header="Clear recently visited"
97-
Description="Clear the list of recently visited samples.">
98-
<toolkit:SettingsCard.HeaderIcon>
99-
<FontIcon Glyph="&#xEA99;" />
100-
</toolkit:SettingsCard.HeaderIcon>
101-
<Button Content="Clear list"
102-
MinWidth="120">
103-
<Button.Flyout>
104-
<Flyout x:Name="ClearRecentlyVisitedSamplesFlyout"
105-
Placement="LeftEdgeAlignedBottom">
106-
<StackPanel Spacing="8"
107-
Width="240">
108-
<TextBlock Style="{ThemeResource BodyStrongTextBlockStyle}"
109-
Text="Clear recently visited?" />
110-
<TextBlock Style="{ThemeResource BodyTextBlockStyle}"
111-
Text="This will permanently remove all recently visited samples." />
112-
<Button Click="ClearRecentlyVisitedSamples_Click"
113-
Content="Yes, clear"
114-
MinWidth="120"/>
115-
</StackPanel>
116-
</Flyout>
117-
</Button.Flyout>
118-
</Button>
119-
</toolkit:SettingsCard>
120-
<toolkit:SettingsCard x:Name="UnfavoriteSamplesCard"
121-
Header="Unfavorite all samples"
122-
Description="Remove all samples from your favorites list.">
123-
<toolkit:SettingsCard.HeaderIcon>
124-
<FontIcon Glyph="&#xE8D9;" />
125-
</toolkit:SettingsCard.HeaderIcon>
126-
<Button Content="Unfavorite all"
127-
MinWidth="120">
128-
<Button.Flyout>
129-
<Flyout x:Name="UnfavoriteAllSamplesFlyout"
130-
Placement="LeftEdgeAlignedBottom">
131-
<StackPanel Spacing="8"
132-
Width="240">
133-
<TextBlock Style="{ThemeResource BodyStrongTextBlockStyle}"
134-
Text="Unfavorite all samples?" />
135-
<TextBlock Style="{ThemeResource BodyTextBlockStyle}"
136-
Text="This will remove all samples from your favorites." />
137-
<Button Click="UnfavoriteAllSamples_Click"
138-
Content="Yes, unfavorite"
139-
MinWidth="120" />
140-
</StackPanel>
141-
</Flyout>
142-
</Button.Flyout>
143-
</Button>
144-
</toolkit:SettingsCard>
145-
</toolkit:SettingsExpander.Items>
146-
</toolkit:SettingsExpander>
91+
</toolkit:SettingsCard.HeaderIcon>
92+
<StackPanel Orientation="Horizontal" Spacing="8">
93+
<Button
94+
x:Name="ClearRecentBtn"
95+
MinWidth="120"
96+
Click="ClearRecentBtn_Click"
97+
Content="Clear recents" />
98+
<Button
99+
x:Name="UnfavoriteBtn"
100+
MinWidth="120"
101+
Click="UnfavoriteBtn_Click"
102+
Content="Remove favorites" />
103+
</StackPanel>
104+
</toolkit:SettingsCard>
105+
147106

148107
<!-- About -->
149108
<TextBlock Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" Text="About" />

‎WinUIGallery/Pages/SettingsPage.xaml.cs

Lines changed: 42 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
using System;
99
using Windows.ApplicationModel.DataTransfer;
1010
using Windows.System;
11+
using WinUIGallery.ControlPages;
1112
using WinUIGallery.Helpers;
1213

1314
namespace WinUIGallery.Pages;
@@ -33,18 +34,22 @@ public SettingsPage()
3334
{
3435
this.InitializeComponent();
3536
Loaded += OnSettingsPageLoaded;
36-
ClearVisitedSamplesCard.IsEnabled = SettingsHelper.Exists(SettingsKeys.RecentlyVisited);
37-
UnfavoriteSamplesCard.IsEnabled = SettingsHelper.Exists(SettingsKeys.Favorites);
38-
SamplesSettingsExpander.IsExpanded = ClearVisitedSamplesCard.IsEnabled || UnfavoriteSamplesCard.IsEnabled;
3937
}
4038

4139
protected override void OnNavigatedTo(NavigationEventArgs e)
4240
{
4341
base.OnNavigatedTo(e);
4442
}
4543

44+
private void CheckRecentAndFavoriteButtonStates()
45+
{
46+
ClearRecentBtn.IsEnabled = SettingsHelper.Exists(SettingsKeys.RecentlyVisited);
47+
UnfavoriteBtn.IsEnabled = SettingsHelper.Exists(SettingsKeys.Favorites);
48+
}
49+
4650
private void OnSettingsPageLoaded(object sender, RoutedEventArgs e)
4751
{
52+
CheckRecentAndFavoriteButtonStates();
4853
var currentTheme = ThemeHelper.RootTheme;
4954
switch (currentTheme)
5055
{
@@ -161,20 +166,43 @@ private async void bugRequestCard_Click(object sender, RoutedEventArgs e)
161166
await Launcher.LaunchUriAsync(new Uri("https://github.com/microsoft/WinUI-Gallery/issues/new/choose"));
162167

163168
}
164-
165-
private void ClearRecentlyVisitedSamples_Click(object sender, RoutedEventArgs e)
169+
private async void UnfavoriteBtn_Click(object sender, RoutedEventArgs e)
166170
{
167-
ClearRecentlyVisitedSamplesFlyout.Hide();
168-
SettingsHelper.Delete(SettingsKeys.RecentlyVisited);
169-
ClearVisitedSamplesCard.IsEnabled = false;
170-
SamplesSettingsExpander.IsExpanded = ClearVisitedSamplesCard.IsEnabled || UnfavoriteSamplesCard.IsEnabled;
171+
ContentDialog dialog = new()
172+
{
173+
XamlRoot = this.XamlRoot,
174+
Style = Application.Current.Resources["DefaultContentDialogStyle"] as Style,
175+
Title = "Remove all favorites?",
176+
PrimaryButtonText = "Remove",
177+
CloseButtonText = "Cancel",
178+
DefaultButton = ContentDialogButton.Primary,
179+
Content = "This will unfavorite all your samples."
180+
};
181+
dialog.PrimaryButtonClick += (s, args) =>
182+
{
183+
SettingsHelper.Delete(SettingsKeys.Favorites);
184+
CheckRecentAndFavoriteButtonStates();
185+
};
186+
var result = await dialog.ShowAsync();
171187
}
172188

173-
private void UnfavoriteAllSamples_Click(object sender, RoutedEventArgs e)
189+
private async void ClearRecentBtn_Click(object sender, RoutedEventArgs e)
174190
{
175-
UnfavoriteAllSamplesFlyout.Hide();
176-
SettingsHelper.Delete(SettingsKeys.Favorites);
177-
UnfavoriteSamplesCard.IsEnabled = false;
178-
SamplesSettingsExpander.IsExpanded = ClearVisitedSamplesCard.IsEnabled || UnfavoriteSamplesCard.IsEnabled;
191+
ContentDialog dialog = new()
192+
{
193+
XamlRoot = this.XamlRoot,
194+
Style = Application.Current.Resources["DefaultContentDialogStyle"] as Style,
195+
Title = "Clear recently visited samples?",
196+
PrimaryButtonText = "Clear",
197+
CloseButtonText = "Cancel",
198+
DefaultButton = ContentDialogButton.Primary,
199+
Content = "This will remove all samples from your recent history."
200+
};
201+
dialog.PrimaryButtonClick += (s, args) =>
202+
{
203+
SettingsHelper.Delete(SettingsKeys.RecentlyVisited);
204+
CheckRecentAndFavoriteButtonStates();
205+
};
206+
var result = await dialog.ShowAsync();
179207
}
180208
}

0 commit comments

Comments
 (0)