Skip to content

Commit 2a74810

Browse files
yaira2yaira2
committed
Appearance Page
1 parent 3fef5a5 commit 2a74810

File tree

1 file changed

+95
-104
lines changed

1 file changed

+95
-104
lines changed

‎src/Files.App/Views/Settings/AppearancePage.xaml‎

Lines changed: 95 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,10 @@
77
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
88
xmlns:dataitem="using:Files.App.Data.Items"
99
xmlns:helpers="using:Files.App.Helpers"
10-
xmlns:local="using:Files.App.UserControls.Settings"
1110
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
12-
xmlns:toolkit="using:CommunityToolkit.WinUI.Controls"
1311
xmlns:uc="using:Files.App.UserControls"
1412
xmlns:vm="using:Files.App.ViewModels.Settings"
13+
xmlns:wctcontrols="using:CommunityToolkit.WinUI.Controls"
1514
xmlns:wctconverters="using:CommunityToolkit.WinUI.Converters"
1615
mc:Ignorable="d">
1716

@@ -100,36 +99,36 @@
10099
Text="{helpers:ResourceString Name=Appearance}" />
101100

102101
<!-- Theme -->
103-
<local:SettingsBlockControl Title="{helpers:ResourceString Name=SettingsAppearanceTheme}" HorizontalAlignment="Stretch">
104-
<local:SettingsBlockControl.Icon>
102+
<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=SettingsAppearanceTheme}">
103+
<wctcontrols:SettingsCard.HeaderIcon>
105104
<FontIcon Glyph="&#xE790;" />
106-
</local:SettingsBlockControl.Icon>
105+
</wctcontrols:SettingsCard.HeaderIcon>
107106
<uc:ComboBoxEx
108107
x:Name="ThemeChooser"
109108
AutomationProperties.Name="{helpers:ResourceString Name=SettingsAppearanceTheme}"
110109
ItemsSource="{x:Bind ViewModel.Themes, Mode=OneWay}"
111110
SelectedIndex="{x:Bind ViewModel.SelectedThemeIndex, Mode=TwoWay}" />
112-
</local:SettingsBlockControl>
111+
</wctcontrols:SettingsCard>
113112

114113
<!-- Backdrop Material -->
115-
<local:SettingsBlockControl Title="{helpers:ResourceString Name=BackdropMaterial}" HorizontalAlignment="Stretch">
116-
<local:SettingsBlockControl.Icon>
114+
<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=BackdropMaterial}">
115+
<wctcontrols:SettingsCard.HeaderIcon>
117116
<FontIcon Glyph="&#xEF1F;" />
118-
</local:SettingsBlockControl.Icon>
117+
</wctcontrols:SettingsCard.HeaderIcon>
119118
<uc:ComboBoxEx
120119
AutomationProperties.Name="{helpers:ResourceString Name=BackdropMaterial}"
121120
ItemsSource="{x:Bind ViewModel.BackdropMaterialTypes.Values}"
122121
SelectedItem="{x:Bind ViewModel.SelectedBackdropMaterial, Mode=TwoWay}" />
123-
</local:SettingsBlockControl>
122+
</wctcontrols:SettingsCard>
124123

125124
<!-- App Background -->
126-
<local:SettingsBlockControl
127-
Title="{helpers:ResourceString Name=BackgroundColor}"
125+
<wctcontrols:SettingsExpander
128126
HorizontalAlignment="Stretch"
127+
Header="{helpers:ResourceString Name=BackgroundColor}"
129128
IsExpanded="True">
130-
<local:SettingsBlockControl.Icon>
129+
<wctcontrols:SettingsExpander.HeaderIcon>
131130
<FontIcon Glyph="&#xE771;" />
132-
</local:SettingsBlockControl.Icon>
131+
</wctcontrols:SettingsExpander.HeaderIcon>
133132
<Button Padding="0" AutomationProperties.Name="{helpers:ResourceString Name=BackgroundColor}">
134133
<StackPanel Orientation="Horizontal">
135134
<Border
@@ -150,32 +149,32 @@
150149
</StackPanel>
151150
<Button.Flyout>
152151
<Flyout>
153-
<toolkit:ColorPicker
152+
<wctcontrols:ColorPicker
154153
IsAlphaEnabled="True"
155154
IsColorSpectrumVisible="False"
156155
Color="{x:Bind ViewModel.AppThemeBackgroundColor, Mode=TwoWay}" />
157156
</Flyout>
158157
</Button.Flyout>
159158
</Button>
160-
<local:SettingsBlockControl.ExpandableContent>
159+
<wctcontrols:SettingsExpander.Items>
161160
<GridView
162161
Padding="8"
163162
HorizontalAlignment="Stretch"
164163
ItemTemplate="{StaticResource AppThemeResourcesItemTemplate}"
165164
ItemsSource="{x:Bind ViewModel.AppThemeResources, Mode=OneWay}"
166165
SelectedItem="{x:Bind ViewModel.SelectedAppThemeResources, Mode=TwoWay}" />
167-
</local:SettingsBlockControl.ExpandableContent>
168-
</local:SettingsBlockControl>
166+
</wctcontrols:SettingsExpander.Items>
167+
</wctcontrols:SettingsExpander>
169168

170169
<!-- App Background Image -->
171-
<local:SettingsBlockControl
172-
Title="{helpers:ResourceString Name=BackgroundImage}"
170+
<wctcontrols:SettingsExpander
173171
HorizontalAlignment="Stretch"
174172
Description="{x:Bind ViewModel.AppThemeBackgroundImageSource, Mode=OneWay}"
173+
Header="{helpers:ResourceString Name=BackgroundImage}"
175174
IsExpanded="False">
176-
<local:SettingsBlockControl.Icon>
175+
<wctcontrols:SettingsExpander.HeaderIcon>
177176
<FontIcon Glyph="&#xE91B;" />
178-
</local:SettingsBlockControl.Icon>
177+
</wctcontrols:SettingsExpander.HeaderIcon>
179178

180179
<!-- Browse Button -->
181180
<SplitButton
@@ -192,106 +191,98 @@
192191
</SplitButton.Flyout>
193192
</SplitButton>
194193

195-
<local:SettingsBlockControl.ExpandableContent>
196-
<StackPanel>
197-
<!-- Opactiy Slider -->
198-
<local:SettingsBlockControl Title="{helpers:ResourceString Name=Opacity}" HorizontalAlignment="Stretch">
199-
<Slider
200-
Width="140"
201-
HorizontalAlignment="Right"
202-
AutomationProperties.Name="{helpers:ResourceString Name=Opacity}"
203-
IsThumbToolTipEnabled="False"
204-
Maximum="1"
205-
Minimum=".1"
206-
StepFrequency=".1"
207-
Value="{x:Bind ViewModel.AppThemeBackgroundImageOpacity, Mode=TwoWay}" />
208-
</local:SettingsBlockControl>
194+
<wctcontrols:SettingsExpander.Items>
195+
<!-- Opactiy Slider -->
196+
<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=Opacity}">
197+
<Slider
198+
Width="140"
199+
HorizontalAlignment="Right"
200+
AutomationProperties.Name="{helpers:ResourceString Name=Opacity}"
201+
IsThumbToolTipEnabled="False"
202+
Maximum="1"
203+
Minimum=".1"
204+
StepFrequency=".1"
205+
Value="{x:Bind ViewModel.AppThemeBackgroundImageOpacity, Mode=TwoWay}" />
206+
</wctcontrols:SettingsCard>
209207

210-
<!-- Image Fit -->
211-
<local:SettingsBlockControl Title="{helpers:ResourceString Name=ImageFit}" HorizontalAlignment="Stretch">
212-
<uc:ComboBoxEx
213-
MinWidth="140"
214-
AutomationProperties.Name="{helpers:ResourceString Name=ImageFit}"
215-
ItemsSource="{x:Bind ViewModel.ImageStretchTypes.Values}"
216-
SelectedItem="{x:Bind ViewModel.SelectedImageStretchType, Mode=TwoWay}" />
217-
</local:SettingsBlockControl>
208+
<!-- Image Fit -->
209+
<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=ImageFit}">
210+
<uc:ComboBoxEx
211+
MinWidth="140"
212+
AutomationProperties.Name="{helpers:ResourceString Name=ImageFit}"
213+
ItemsSource="{x:Bind ViewModel.ImageStretchTypes.Values}"
214+
SelectedItem="{x:Bind ViewModel.SelectedImageStretchType, Mode=TwoWay}" />
215+
</wctcontrols:SettingsCard>
218216

219-
<!-- VerticalAlignment -->
220-
<local:SettingsBlockControl Title="{helpers:ResourceString Name=VerticalAlignment}" HorizontalAlignment="Stretch">
221-
<uc:ComboBoxEx
222-
MinWidth="140"
223-
AutomationProperties.Name="{helpers:ResourceString Name=VerticalAlignment}"
224-
ItemsSource="{x:Bind ViewModel.ImageVerticalAlignmentTypes.Values}"
225-
SelectedItem="{x:Bind ViewModel.SelectedImageVerticalAlignmentType, Mode=TwoWay}" />
226-
</local:SettingsBlockControl>
217+
<!-- VerticalAlignment -->
218+
<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=VerticalAlignment}">
219+
<uc:ComboBoxEx
220+
MinWidth="140"
221+
AutomationProperties.Name="{helpers:ResourceString Name=VerticalAlignment}"
222+
ItemsSource="{x:Bind ViewModel.ImageVerticalAlignmentTypes.Values}"
223+
SelectedItem="{x:Bind ViewModel.SelectedImageVerticalAlignmentType, Mode=TwoWay}" />
224+
</wctcontrols:SettingsCard>
227225

228-
<!-- HorizontalAlignment -->
229-
<local:SettingsBlockControl Title="{helpers:ResourceString Name=HorizontalAlignment}" HorizontalAlignment="Stretch">
230-
<uc:ComboBoxEx
231-
MinWidth="140"
232-
AutomationProperties.Name="{helpers:ResourceString Name=HorizontalAlignment}"
233-
ItemsSource="{x:Bind ViewModel.ImageHorizontalAlignmentTypes.Values}"
234-
SelectedItem="{x:Bind ViewModel.SelectedImageHorizontalAlignmentType, Mode=TwoWay}" />
235-
</local:SettingsBlockControl>
226+
<!-- HorizontalAlignment -->
227+
<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=HorizontalAlignment}">
228+
<uc:ComboBoxEx
229+
MinWidth="140"
230+
AutomationProperties.Name="{helpers:ResourceString Name=HorizontalAlignment}"
231+
ItemsSource="{x:Bind ViewModel.ImageHorizontalAlignmentTypes.Values}"
232+
SelectedItem="{x:Bind ViewModel.SelectedImageHorizontalAlignmentType, Mode=TwoWay}" />
233+
</wctcontrols:SettingsCard>
236234

237-
</StackPanel>
238-
</local:SettingsBlockControl.ExpandableContent>
239-
</local:SettingsBlockControl>
235+
</wctcontrols:SettingsExpander.Items>
236+
</wctcontrols:SettingsExpander>
240237

241238
<!-- Show tab actions -->
242-
<local:SettingsBlockControl Title="{helpers:ResourceString Name=ShowTabActions}" HorizontalAlignment="Stretch">
243-
<local:SettingsBlockControl.Icon>
239+
<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=ShowTabActions}">
240+
<wctcontrols:SettingsCard.HeaderIcon>
244241
<PathIcon Data="{StaticResource App.Theme.PathIcon.TabActions}" />
245-
</local:SettingsBlockControl.Icon>
242+
</wctcontrols:SettingsCard.HeaderIcon>
246243
<ToggleSwitch
247244
AutomationProperties.AutomationControlType="Custom"
248245
AutomationProperties.Name="{helpers:ResourceString Name=ShowTabActions}"
249246
IsOn="{x:Bind ViewModel.ShowTabActions, Mode=TwoWay}"
250247
Style="{StaticResource RightAlignedToggleSwitchStyle}" />
251-
</local:SettingsBlockControl>
248+
</wctcontrols:SettingsCard>
252249

253250
<!-- Toolbar -->
254-
<local:SettingsBlockControl
255-
Title="{helpers:ResourceString Name=Toolbars}"
256-
HorizontalAlignment="Stretch"
257-
IsExpanded="False">
258-
<local:SettingsBlockControl.Icon>
251+
<wctcontrols:SettingsExpander Header="{helpers:ResourceString Name=Toolbars}">
252+
<wctcontrols:SettingsExpander.HeaderIcon>
259253
<PathIcon Data="{StaticResource App.Theme.PathIcon.WebAsset}" />
260-
</local:SettingsBlockControl.Icon>
254+
</wctcontrols:SettingsExpander.HeaderIcon>
261255

262-
<local:SettingsBlockControl.ExpandableContent>
263-
<StackPanel>
264-
<!-- Show home button -->
265-
<local:SettingsBlockControl Title="{helpers:ResourceString Name=ShowHomeButton}" HorizontalAlignment="Stretch">
266-
<ToggleSwitch
267-
AutomationProperties.AutomationControlType="Custom"
268-
AutomationProperties.Name="{helpers:ResourceString Name=ShowHomeButton}"
269-
IsOn="{x:Bind ViewModel.ShowHomeButton, Mode=TwoWay}"
270-
Style="{StaticResource RightAlignedToggleSwitchStyle}" />
271-
</local:SettingsBlockControl>
256+
<wctcontrols:SettingsExpander.Items>
257+
<!-- Show home button -->
258+
<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=ShowHomeButton}">
259+
<ToggleSwitch
260+
AutomationProperties.AutomationControlType="Custom"
261+
AutomationProperties.Name="{helpers:ResourceString Name=ShowHomeButton}"
262+
IsOn="{x:Bind ViewModel.ShowHomeButton, Mode=TwoWay}"
263+
Style="{StaticResource RightAlignedToggleSwitchStyle}" />
264+
</wctcontrols:SettingsCard>
272265

273-
<!-- Show shelf pane toggle button -->
274-
<local:SettingsBlockControl
275-
x:Name="ShowShelfPaneSetting"
276-
Title="{helpers:ResourceString Name=ShowShelfPaneButtonInAddressBar}"
277-
HorizontalAlignment="Stretch"
278-
x:Load="{x:Bind ViewModel.IsAppEnvironmentDev}">
279-
<ToggleSwitch
280-
AutomationProperties.Name="{helpers:ResourceString Name=ShowShelfPaneButtonInAddressBar}"
281-
IsOn="{x:Bind ViewModel.ShowShelfPaneToggleButton, Mode=TwoWay}"
282-
Style="{StaticResource RightAlignedToggleSwitchStyle}" />
283-
</local:SettingsBlockControl>
266+
<!-- Show shelf pane toggle button -->
267+
<wctcontrols:SettingsCard
268+
x:Name="ShowShelfPaneSetting"
269+
Visibility="{x:Bind ViewModel.IsAppEnvironmentDev, Mode=OneTime}"
270+
Header="{helpers:ResourceString Name=ShowShelfPaneButtonInAddressBar}">
271+
<ToggleSwitch
272+
AutomationProperties.Name="{helpers:ResourceString Name=ShowShelfPaneButtonInAddressBar}"
273+
IsOn="{x:Bind ViewModel.ShowShelfPaneToggleButton, Mode=TwoWay}"
274+
Style="{StaticResource RightAlignedToggleSwitchStyle}" />
275+
</wctcontrols:SettingsCard>
284276

285-
<!-- Show toolbar -->
286-
<local:SettingsBlockControl Title="{helpers:ResourceString Name=ShowToolbar}" HorizontalAlignment="Stretch">
287-
<ToggleSwitch
288-
AutomationProperties.Name="{helpers:ResourceString Name=ShowToolbar}"
289-
IsOn="{x:Bind ViewModel.ShowToolbar, Mode=TwoWay}"
290-
Style="{StaticResource RightAlignedToggleSwitchStyle}" />
291-
</local:SettingsBlockControl>
292-
</StackPanel>
293-
</local:SettingsBlockControl.ExpandableContent>
294-
</local:SettingsBlockControl>
277+
<!-- Show toolbar -->
278+
<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=ShowToolbar}">
279+
<ToggleSwitch
280+
AutomationProperties.Name="{helpers:ResourceString Name=ShowToolbar}"
281+
IsOn="{x:Bind ViewModel.ShowToolbar, Mode=TwoWay}"
282+
Style="{StaticResource RightAlignedToggleSwitchStyle}" />
283+
</wctcontrols:SettingsCard>
284+
</wctcontrols:SettingsExpander.Items>
285+
</wctcontrols:SettingsExpander>
295286
</StackPanel>
296287
</Grid>
297288
</Page>

0 commit comments

Comments
 (0)