Skip to content

Commit fa0341b

Browse files
committed
Layout Page
1 parent 3b8806f commit fa0341b

File tree

1 file changed

+93
-102
lines changed

1 file changed

+93
-102
lines changed

src/Files.App/Views/Settings/LayoutPage.xaml

Lines changed: 93 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@
66
xmlns:converters="using:CommunityToolkit.WinUI.Converters"
77
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
88
xmlns:helpers="using:Files.App.Helpers"
9-
xmlns:local="using:Files.App.UserControls.Settings"
109
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
1110
xmlns:uc="using:Files.App.UserControls"
1211
xmlns:vm="using:Files.App.ViewModels.Settings"
12+
xmlns:wctcontrols="using:CommunityToolkit.WinUI.Controls"
1313
mc:Ignorable="d">
1414

1515
<Page.Resources>
@@ -40,26 +40,23 @@
4040
Text="{helpers:ResourceString Name=Layout}" />
4141

4242
<!-- Folder Overrides -->
43-
<local:SettingsBlockControl
44-
Title="{helpers:ResourceString Name=SyncFolderPreferencesAcrossDirectories}"
45-
HorizontalAlignment="Stretch"
46-
IsExpanded="True">
47-
<local:SettingsBlockControl.Icon>
43+
<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=SyncFolderPreferencesAcrossDirectories}">
44+
<wctcontrols:SettingsCard.HeaderIcon>
4845
<FontIcon Glyph="&#xE621;" />
49-
</local:SettingsBlockControl.Icon>
46+
</wctcontrols:SettingsCard.HeaderIcon>
5047

5148
<ToggleSwitch
5249
x:Name="SyncPreferencesToggleSwitch"
5350
AutomationProperties.Name="{helpers:ResourceString Name=SyncFolderPreferencesAcrossDirectories}"
5451
IsOn="{x:Bind ViewModel.SyncFolderPreferencesAcrossDirectories, Mode=TwoWay}"
5552
Style="{StaticResource RightAlignedToggleSwitchStyle}" />
56-
</local:SettingsBlockControl>
53+
</wctcontrols:SettingsCard>
5754

5855
<!-- Layout Type -->
59-
<local:SettingsBlockControl Title="{helpers:ResourceString Name=LayoutType}" HorizontalAlignment="Stretch">
60-
<local:SettingsBlockControl.Icon>
56+
<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=LayoutType}">
57+
<wctcontrols:SettingsCard.HeaderIcon>
6158
<FontIcon Glyph="&#xE8BA;" />
62-
</local:SettingsBlockControl.Icon>
59+
</wctcontrols:SettingsCard.HeaderIcon>
6360

6461
<uc:ComboBoxEx AutomationProperties.Name="{helpers:ResourceString Name=LayoutType}" SelectedIndex="{x:Bind ViewModel.SelectedDefaultLayoutModeIndex, Mode=TwoWay}">
6562
<ComboBoxItem Content="{helpers:ResourceString Name=Details}" />
@@ -69,7 +66,7 @@
6966
<ComboBoxItem Content="{helpers:ResourceString Name=Grid}" />
7067
<ComboBoxItem Content="{helpers:ResourceString Name=Adaptive}" IsEnabled="{x:Bind ViewModel.SyncFolderPreferencesAcrossDirectories, Mode=OneWay, Converter={StaticResource BoolNegationConverter}}" />
7168
</uc:ComboBoxEx>
72-
</local:SettingsBlockControl>
69+
</wctcontrols:SettingsCard>
7370

7471
<!-- Sorting & grouping -->
7572
<TextBlock
@@ -79,10 +76,10 @@
7976
Text="{helpers:ResourceString Name=SortingAndGrouping}" />
8077

8178
<!-- Default sorting options -->
82-
<local:SettingsBlockControl Title="{helpers:ResourceString Name=SortBy}" HorizontalAlignment="Stretch">
83-
<local:SettingsBlockControl.Icon>
79+
<wctcontrols:SettingsExpander Header="{helpers:ResourceString Name=SortBy}">
80+
<wctcontrols:SettingsExpander.HeaderIcon>
8481
<FontIcon Glyph="&#xE8CB;" />
85-
</local:SettingsBlockControl.Icon>
82+
</wctcontrols:SettingsExpander.HeaderIcon>
8683

8784
<uc:ComboBoxEx AutomationProperties.Name="{helpers:ResourceString Name=SortBy}" SelectedIndex="{x:Bind ViewModel.SelectedDefaultSortingIndex, Mode=TwoWay}">
8885
<ComboBoxItem Content="{helpers:ResourceString Name=Name}" />
@@ -92,33 +89,31 @@
9289
<ComboBoxItem Content="{helpers:ResourceString Name=Type}" />
9390
<ComboBoxItem Content="{helpers:ResourceString Name=Tag}" />
9491
</uc:ComboBoxEx>
95-
<local:SettingsBlockControl.ExpandableContent>
96-
<StackPanel>
97-
<!-- Sort in Descending order -->
98-
<local:SettingsBlockControl Title="{helpers:ResourceString Name=SortInDescendingOrder}" HorizontalAlignment="Stretch">
99-
<ToggleSwitch
100-
AutomationProperties.Name="{helpers:ResourceString Name=SortInDescendingOrder}"
101-
IsOn="{x:Bind ViewModel.SortInDescendingOrder, Mode=TwoWay}"
102-
Style="{StaticResource RightAlignedToggleSwitchStyle}" />
103-
</local:SettingsBlockControl>
104-
105-
<!-- Sort Priority -->
106-
<local:SettingsBlockControl Title="{helpers:ResourceString Name=SortPriority}" HorizontalAlignment="Stretch">
107-
<uc:ComboBoxEx AutomationProperties.Name="{helpers:ResourceString Name=SortPriority}" SelectedIndex="{x:Bind ViewModel.SelectedDefaultSortPriorityIndex, Mode=TwoWay}">
108-
<ComboBoxItem Content="{helpers:ResourceString Name=SortFoldersFirst}" />
109-
<ComboBoxItem Content="{helpers:ResourceString Name=SortFilesFirst}" />
110-
<ComboBoxItem Content="{helpers:ResourceString Name=SortFilesAndFoldersTogether}" />
111-
</uc:ComboBoxEx>
112-
</local:SettingsBlockControl>
113-
</StackPanel>
114-
</local:SettingsBlockControl.ExpandableContent>
115-
</local:SettingsBlockControl>
92+
<wctcontrols:SettingsExpander.Items>
93+
<!-- Sort in Descending order -->
94+
<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=SortInDescendingOrder}">
95+
<ToggleSwitch
96+
AutomationProperties.Name="{helpers:ResourceString Name=SortInDescendingOrder}"
97+
IsOn="{x:Bind ViewModel.SortInDescendingOrder, Mode=TwoWay}"
98+
Style="{StaticResource RightAlignedToggleSwitchStyle}" />
99+
</wctcontrols:SettingsCard>
100+
101+
<!-- Sort Priority -->
102+
<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=SortPriority}">
103+
<uc:ComboBoxEx AutomationProperties.Name="{helpers:ResourceString Name=SortPriority}" SelectedIndex="{x:Bind ViewModel.SelectedDefaultSortPriorityIndex, Mode=TwoWay}">
104+
<ComboBoxItem Content="{helpers:ResourceString Name=SortFoldersFirst}" />
105+
<ComboBoxItem Content="{helpers:ResourceString Name=SortFilesFirst}" />
106+
<ComboBoxItem Content="{helpers:ResourceString Name=SortFilesAndFoldersTogether}" />
107+
</uc:ComboBoxEx>
108+
</wctcontrols:SettingsCard>
109+
</wctcontrols:SettingsExpander.Items>
110+
</wctcontrols:SettingsExpander>
116111

117112
<!-- Default grouping options -->
118-
<local:SettingsBlockControl Title="{helpers:ResourceString Name=GroupBy}" HorizontalAlignment="Stretch">
119-
<local:SettingsBlockControl.Icon>
113+
<wctcontrols:SettingsExpander Header="{helpers:ResourceString Name=GroupBy}">
114+
<wctcontrols:SettingsExpander.HeaderIcon>
120115
<FontIcon Glyph="&#xF168;" />
121-
</local:SettingsBlockControl.Icon>
116+
</wctcontrols:SettingsExpander.HeaderIcon>
122117

123118
<uc:ComboBoxEx AutomationProperties.Name="{helpers:ResourceString Name=GroupBy}" SelectedIndex="{x:Bind ViewModel.SelectedDefaultGroupingIndex, Mode=TwoWay}">
124119
<ComboBoxItem Content="{helpers:ResourceString Name=None}" />
@@ -129,31 +124,29 @@
129124
<ComboBoxItem Content="{helpers:ResourceString Name=Type}" />
130125
<ComboBoxItem Content="{helpers:ResourceString Name=Tag}" />
131126
</uc:ComboBoxEx>
132-
<local:SettingsBlockControl.ExpandableContent>
133-
<StackPanel>
134-
<!-- Group in Descending order -->
135-
<local:SettingsBlockControl Title="{helpers:ResourceString Name=GroupInDescendingOrder}" HorizontalAlignment="Stretch">
136-
<ToggleSwitch
137-
AutomationProperties.Name="{helpers:ResourceString Name=GroupInDescendingOrder}"
138-
IsEnabled="{x:Bind ViewModel.IsDefaultGrouped, Mode=OneWay}"
139-
IsOn="{x:Bind ViewModel.GroupInDescendingOrder, Mode=TwoWay}"
140-
Style="{StaticResource RightAlignedToggleSwitchStyle}" />
141-
</local:SettingsBlockControl>
142-
143-
<!-- Group by date unit -->
144-
<local:SettingsBlockControl Title="{helpers:ResourceString Name=GroupByDateUnit}" HorizontalAlignment="Stretch">
145-
<uc:ComboBoxEx
146-
AutomationProperties.Name="{helpers:ResourceString Name=GroupByDateUnit}"
147-
IsEnabled="{x:Bind ViewModel.IsGroupByDate, Mode=OneWay}"
148-
SelectedIndex="{x:Bind ViewModel.SelectedDefaultGroupByDateUnitIndex, Mode=TwoWay}">
149-
<ComboBoxItem Content="{helpers:ResourceString Name=Year}" />
150-
<ComboBoxItem Content="{helpers:ResourceString Name=Month}" />
151-
<ComboBoxItem Content="{helpers:ResourceString Name=Day}" />
152-
</uc:ComboBoxEx>
153-
</local:SettingsBlockControl>
154-
</StackPanel>
155-
</local:SettingsBlockControl.ExpandableContent>
156-
</local:SettingsBlockControl>
127+
<wctcontrols:SettingsExpander.Items>
128+
<!-- Group in Descending order -->
129+
<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=GroupInDescendingOrder}">
130+
<ToggleSwitch
131+
AutomationProperties.Name="{helpers:ResourceString Name=GroupInDescendingOrder}"
132+
IsEnabled="{x:Bind ViewModel.IsDefaultGrouped, Mode=OneWay}"
133+
IsOn="{x:Bind ViewModel.GroupInDescendingOrder, Mode=TwoWay}"
134+
Style="{StaticResource RightAlignedToggleSwitchStyle}" />
135+
</wctcontrols:SettingsCard>
136+
137+
<!-- Group by date unit -->
138+
<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=GroupByDateUnit}">
139+
<uc:ComboBoxEx
140+
AutomationProperties.Name="{helpers:ResourceString Name=GroupByDateUnit}"
141+
IsEnabled="{x:Bind ViewModel.IsGroupByDate, Mode=OneWay}"
142+
SelectedIndex="{x:Bind ViewModel.SelectedDefaultGroupByDateUnitIndex, Mode=TwoWay}">
143+
<ComboBoxItem Content="{helpers:ResourceString Name=Year}" />
144+
<ComboBoxItem Content="{helpers:ResourceString Name=Month}" />
145+
<ComboBoxItem Content="{helpers:ResourceString Name=Day}" />
146+
</uc:ComboBoxEx>
147+
</wctcontrols:SettingsCard>
148+
</wctcontrols:SettingsExpander.Items>
149+
</wctcontrols:SettingsExpander>
157150

158151
<!-- Details View -->
159152
<TextBlock
@@ -163,45 +156,43 @@
163156
Text="{helpers:ResourceString Name=DetailsView}" />
164157

165158
<!-- Columns -->
166-
<local:SettingsBlockControl Title="{helpers:ResourceString Name=Columns}" HorizontalAlignment="Stretch">
167-
<local:SettingsBlockControl.Icon>
159+
<wctcontrols:SettingsExpander Header="{helpers:ResourceString Name=Columns}">
160+
<wctcontrols:SettingsExpander.HeaderIcon>
168161
<FontIcon Glyph="&#xE71D;" />
169-
</local:SettingsBlockControl.Icon>
170-
<local:SettingsBlockControl.ExpandableContent>
171-
<StackPanel>
172-
<local:SettingsBlockControl Title="{helpers:ResourceString Name=TagColumn}" HorizontalAlignment="Stretch">
173-
<ToggleSwitch
174-
AutomationProperties.Name="{helpers:ResourceString Name=TagColumn}"
175-
IsOn="{x:Bind ViewModel.ShowFileTagColumn, Mode=TwoWay}"
176-
Style="{StaticResource RightAlignedToggleSwitchStyle}" />
177-
</local:SettingsBlockControl>
178-
<local:SettingsBlockControl Title="{helpers:ResourceString Name=SizeColumn}" HorizontalAlignment="Stretch">
179-
<ToggleSwitch
180-
AutomationProperties.Name="{helpers:ResourceString Name=SizeColumn}"
181-
IsOn="{x:Bind ViewModel.ShowSizeColumn, Mode=TwoWay}"
182-
Style="{StaticResource RightAlignedToggleSwitchStyle}" />
183-
</local:SettingsBlockControl>
184-
<local:SettingsBlockControl Title="{helpers:ResourceString Name=TypeColumn}" HorizontalAlignment="Stretch">
185-
<ToggleSwitch
186-
AutomationProperties.Name="{helpers:ResourceString Name=TypeColumn}"
187-
IsOn="{x:Bind ViewModel.ShowTypeColumn, Mode=TwoWay}"
188-
Style="{StaticResource RightAlignedToggleSwitchStyle}" />
189-
</local:SettingsBlockControl>
190-
<local:SettingsBlockControl Title="{helpers:ResourceString Name=DateColumn}" HorizontalAlignment="Stretch">
191-
<ToggleSwitch
192-
AutomationProperties.Name="{helpers:ResourceString Name=DateColumn}"
193-
IsOn="{x:Bind ViewModel.ShowDateColumn, Mode=TwoWay}"
194-
Style="{StaticResource RightAlignedToggleSwitchStyle}" />
195-
</local:SettingsBlockControl>
196-
<local:SettingsBlockControl Title="{helpers:ResourceString Name=DateCreatedColumn}" HorizontalAlignment="Stretch">
197-
<ToggleSwitch
198-
AutomationProperties.Name="{helpers:ResourceString Name=DateCreatedColumn}"
199-
IsOn="{x:Bind ViewModel.ShowDateCreatedColumn, Mode=TwoWay}"
200-
Style="{StaticResource RightAlignedToggleSwitchStyle}" />
201-
</local:SettingsBlockControl>
202-
</StackPanel>
203-
</local:SettingsBlockControl.ExpandableContent>
204-
</local:SettingsBlockControl>
162+
</wctcontrols:SettingsExpander.HeaderIcon>
163+
<wctcontrols:SettingsExpander.Items>
164+
<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=TagColumn}">
165+
<ToggleSwitch
166+
AutomationProperties.Name="{helpers:ResourceString Name=TagColumn}"
167+
IsOn="{x:Bind ViewModel.ShowFileTagColumn, Mode=TwoWay}"
168+
Style="{StaticResource RightAlignedToggleSwitchStyle}" />
169+
</wctcontrols:SettingsCard>
170+
<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=SizeColumn}">
171+
<ToggleSwitch
172+
AutomationProperties.Name="{helpers:ResourceString Name=SizeColumn}"
173+
IsOn="{x:Bind ViewModel.ShowSizeColumn, Mode=TwoWay}"
174+
Style="{StaticResource RightAlignedToggleSwitchStyle}" />
175+
</wctcontrols:SettingsCard>
176+
<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=TypeColumn}">
177+
<ToggleSwitch
178+
AutomationProperties.Name="{helpers:ResourceString Name=TypeColumn}"
179+
IsOn="{x:Bind ViewModel.ShowTypeColumn, Mode=TwoWay}"
180+
Style="{StaticResource RightAlignedToggleSwitchStyle}" />
181+
</wctcontrols:SettingsCard>
182+
<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=DateColumn}">
183+
<ToggleSwitch
184+
AutomationProperties.Name="{helpers:ResourceString Name=DateColumn}"
185+
IsOn="{x:Bind ViewModel.ShowDateColumn, Mode=TwoWay}"
186+
Style="{StaticResource RightAlignedToggleSwitchStyle}" />
187+
</wctcontrols:SettingsCard>
188+
<wctcontrols:SettingsCard Header="{helpers:ResourceString Name=DateCreatedColumn}">
189+
<ToggleSwitch
190+
AutomationProperties.Name="{helpers:ResourceString Name=DateCreatedColumn}"
191+
IsOn="{x:Bind ViewModel.ShowDateCreatedColumn, Mode=TwoWay}"
192+
Style="{StaticResource RightAlignedToggleSwitchStyle}" />
193+
</wctcontrols:SettingsCard>
194+
</wctcontrols:SettingsExpander.Items>
195+
</wctcontrols:SettingsExpander>
205196

206197
</StackPanel>
207198

0 commit comments

Comments
 (0)