Skip to content

Commit 6f50a94

Browse files
ferrariofilippoyaira2
ferrariofilippo
authored and
yaira2
committed
Responsive Layout
1 parent fe57c4f commit 6f50a94

File tree

4 files changed

+151
-52
lines changed

4 files changed

+151
-52
lines changed

‎src/Files.App/Strings/en-US/Resources.resw‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4070,4 +4070,7 @@
40704070
<data name="IDEPathPlaceholder" xml:space="preserve">
40714071
<value>Enter a path or launch alias</value>
40724072
</data>
4073+
<data name="InvalidFriendlyNameError" xml:space="preserve">
4074+
<value>Please, enter a name for the IDE</value>
4075+
</data>
40734076
</root>

‎src/Files.App/ViewModels/Settings/DevToolsViewModel.cs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@ public bool IsIDEPathValid
4949
private bool _IsFriendlyNameValid;
5050
public bool IsFriendlyNameValid
5151
{
52-
get => _IsIDEPathValid;
53-
set => SetProperty(ref _IsIDEPathValid, value);
52+
get => _IsFriendlyNameValid;
53+
set => SetProperty(ref _IsFriendlyNameValid, value);
5454
}
5555

5656
private string _IDEPath;

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

Lines changed: 131 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
xmlns:uc="using:Files.App.UserControls"
1313
xmlns:vm="using:Files.App.ViewModels.Settings"
1414
xmlns:wctconverters="using:CommunityToolkit.WinUI.Converters"
15+
SizeChanged="Page_SizeChanged"
1516
mc:Ignorable="d">
1617

1718
<Page.Resources>
@@ -70,14 +71,19 @@
7071
<ColumnDefinition Width="*" />
7172
<ColumnDefinition Width="Auto" />
7273
</Grid.ColumnDefinitions>
74+
7375
<Grid.RowDefinitions>
7476
<RowDefinition Height="*" />
7577
<RowDefinition Height="*" />
78+
<RowDefinition Height="Auto" />
7679
</Grid.RowDefinitions>
80+
81+
<!-- IDE Path -->
7782
<TextBlock
7883
x:Name="IDEPath"
7984
MaxWidth="200"
8085
VerticalAlignment="Center"
86+
x:Load="{x:Bind ViewModel.IsEditingIDEConfig, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}"
8187
LineHeight="18"
8288
Text="{helpers:ResourceString Name=PathOrAlias}"
8389
TextTrimming="CharacterEllipsis" />
@@ -90,11 +96,24 @@
9096
TextTrimming="CharacterEllipsis"
9197
Visibility="{x:Bind ViewModel.IsEditingIDEConfig, Converter={StaticResource InvertedBoolVisibilityConverter}, Mode=OneWay}" />
9298

93-
<StackPanel
94-
Grid.Column="1"
95-
Orientation="Horizontal"
96-
Spacing="8"
99+
<Grid
100+
x:Name="IDEPathGrid"
101+
Grid.ColumnSpan="3"
102+
Margin="0,0,0,8"
103+
ColumnSpacing="8"
97104
Visibility="{x:Bind ViewModel.IsEditingIDEConfig, Converter={StaticResource BoolVisibilityConverter}, Mode=OneWay}">
105+
<Grid.ColumnDefinitions>
106+
<ColumnDefinition Width="Auto" />
107+
<ColumnDefinition Width="Auto" />
108+
<ColumnDefinition Width="*" />
109+
</Grid.ColumnDefinitions>
110+
111+
<Grid.RowDefinitions>
112+
<RowDefinition Height="*" />
113+
<RowDefinition Height="Auto" />
114+
<RowDefinition Height="Auto" />
115+
</Grid.RowDefinitions>
116+
98117
<TextBox
99118
x:Name="IDEPathTextBox"
100119
Width="300"
@@ -106,57 +125,70 @@
106125
</TextBox.Resources>
107126
</TextBox>
108127

109-
<Button
110-
x:Name="PickIDEExe"
111-
Command="{x:Bind ViewModel.OpenFilePickerForIDECommand, Mode=OneWay}"
112-
Content="{helpers:ResourceString Name=Browse}" />
113-
<Button
114-
x:Name="TestIDE"
115-
Command="{x:Bind ViewModel.TestIDECommand, Mode=OneWay}"
116-
Content="{helpers:ResourceString Name=Test}" />
117-
</StackPanel>
118-
119-
<Grid
120-
x:Name="InvalidPathWarning"
121-
Grid.Column="2"
122-
Padding="12,4"
123-
VerticalAlignment="Stretch"
124-
x:Load="{x:Bind ViewModel.IsEditingIDEConfig, Mode=OneWay}"
125-
Background="{ThemeResource SystemFillColorCriticalBackgroundBrush}"
126-
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
127-
BorderThickness="1"
128-
ColumnSpacing="8"
129-
CornerRadius="4"
130-
ToolTipService.ToolTip="{helpers:ResourceString Name=InvalidLocation}"
131-
Visibility="{x:Bind ViewModel.IsIDEPathValid, Mode=OneWay, Converter={StaticResource InvertedBoolVisibilityConverter}}">
132-
<Grid.ColumnDefinitions>
133-
<ColumnDefinition Width="Auto" />
134-
<ColumnDefinition Width="Auto" />
135-
</Grid.ColumnDefinitions>
136-
<TextBlock
137-
VerticalAlignment="Center"
138-
AutomationProperties.AccessibilityView="Raw"
139-
FontFamily="{ThemeResource SymbolThemeFontFamily}"
140-
FontSize="{StaticResource InfoBarIconFontSize}"
141-
Foreground="{ThemeResource InfoBarErrorSeverityIconBackground}"
142-
Text="{StaticResource InfoBarIconBackgroundGlyph}" />
143-
<TextBlock
144-
VerticalAlignment="Center"
145-
FontFamily="{ThemeResource SymbolThemeFontFamily}"
146-
FontSize="{StaticResource InfoBarIconFontSize}"
147-
Foreground="{ThemeResource InfoBarInformationalSeverityIconForeground}"
148-
Text="{StaticResource InfoBarErrorIconGlyph}" />
149-
<TextBlock
128+
<StackPanel
129+
x:Name="IDEPathButtons"
150130
Grid.Column="1"
151-
VerticalAlignment="Center"
152-
Text="{helpers:ResourceString Name=InvalidPath}" />
131+
VerticalAlignment="Bottom"
132+
Orientation="Horizontal"
133+
Spacing="16">
134+
<Button
135+
x:Name="PickIDEExe"
136+
Command="{x:Bind ViewModel.OpenFilePickerForIDECommand, Mode=OneWay}"
137+
Content="{helpers:ResourceString Name=Browse}" />
138+
139+
<Button
140+
x:Name="TestIDE"
141+
Command="{x:Bind ViewModel.TestIDECommand, Mode=OneWay}"
142+
Content="{helpers:ResourceString Name=Test}" />
143+
</StackPanel>
144+
145+
<Grid
146+
x:Name="InvalidPathWarning"
147+
Grid.Column="2"
148+
Padding="12,4"
149+
VerticalAlignment="Stretch"
150+
x:Load="{x:Bind ViewModel.IsEditingIDEConfig, Mode=OneWay}"
151+
Background="{ThemeResource SystemFillColorCriticalBackgroundBrush}"
152+
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
153+
BorderThickness="1"
154+
ColumnSpacing="8"
155+
CornerRadius="4"
156+
ToolTipService.ToolTip="{helpers:ResourceString Name=InvalidLocation}"
157+
Visibility="{x:Bind ViewModel.IsIDEPathValid, Mode=OneWay, Converter={StaticResource InvertedBoolVisibilityConverter}}">
158+
<Grid.ColumnDefinitions>
159+
<ColumnDefinition Width="Auto" />
160+
<ColumnDefinition Width="Auto" />
161+
</Grid.ColumnDefinitions>
162+
163+
<TextBlock
164+
VerticalAlignment="Center"
165+
AutomationProperties.AccessibilityView="Raw"
166+
FontFamily="{ThemeResource SymbolThemeFontFamily}"
167+
FontSize="{StaticResource InfoBarIconFontSize}"
168+
Foreground="{ThemeResource InfoBarErrorSeverityIconBackground}"
169+
Text="{StaticResource InfoBarIconBackgroundGlyph}" />
170+
171+
<TextBlock
172+
VerticalAlignment="Center"
173+
FontFamily="{ThemeResource SymbolThemeFontFamily}"
174+
FontSize="{StaticResource InfoBarIconFontSize}"
175+
Foreground="{ThemeResource InfoBarInformationalSeverityIconForeground}"
176+
Text="{StaticResource InfoBarErrorIconGlyph}" />
177+
178+
<TextBlock
179+
Grid.Column="1"
180+
VerticalAlignment="Center"
181+
Text="{helpers:ResourceString Name=InvalidPath}" />
182+
</Grid>
153183
</Grid>
154184

185+
<!-- IDE Friendly Name -->
155186
<TextBlock
156187
x:Name="IDEFriendlyName"
157188
Grid.Row="1"
158189
MaxWidth="200"
159190
VerticalAlignment="Center"
191+
x:Load="{x:Bind ViewModel.IsEditingIDEConfig, Converter={StaticResource BoolNegationConverter}, Mode=OneWay}"
160192
LineHeight="18"
161193
Text="{helpers:ResourceString Name=FriendlyName}"
162194
TextTrimming="CharacterEllipsis" />
@@ -172,10 +204,11 @@
172204
<TextBox
173205
x:Name="IDEFriendlyNameTextBox"
174206
Grid.Row="1"
175-
Grid.Column="1"
207+
Grid.ColumnSpan="2"
176208
Width="300"
177209
HorizontalAlignment="Left"
178210
VerticalAlignment="Center"
211+
PlaceholderText="{helpers:ResourceString Name=FriendlyName}"
179212
Text="{x:Bind ViewModel.IDEFriendlyName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
180213
Visibility="{x:Bind ViewModel.IsEditingIDEConfig, Converter={StaticResource BoolVisibilityConverter}, Mode=OneWay}">
181214
<TextBox.Resources>
@@ -201,6 +234,7 @@
201234
<ColumnDefinition Width="Auto" />
202235
<ColumnDefinition Width="Auto" />
203236
</Grid.ColumnDefinitions>
237+
204238
<TextBlock
205239
VerticalAlignment="Center"
206240
AutomationProperties.AccessibilityView="Raw"
@@ -217,13 +251,13 @@
217251
<TextBlock
218252
Grid.Column="1"
219253
VerticalAlignment="Center"
220-
Text="{helpers:ResourceString Name=InvalidTagNameWarning}" />
254+
Text="{helpers:ResourceString Name=InvalidFriendlyNameError}" />
221255
</Grid>
222256

223257
<!-- Edit -->
224258
<Button
225259
x:Name="EditIDEConfigButton"
226-
Grid.RowSpan="2"
260+
Grid.RowSpan="3"
227261
Grid.Column="2"
228262
Padding="8,4"
229263
Background="Transparent"
@@ -279,5 +313,52 @@
279313
</local:SettingsBlockControl>
280314

281315
</StackPanel>
316+
317+
<VisualStateManager.VisualStateGroups>
318+
<VisualStateGroup>
319+
<VisualState x:Name="DefaultState">
320+
<VisualState.Setters>
321+
<Setter Target="IDEPathTextBox.Width" Value="300" />
322+
<Setter Target="IDEPathTextBox.HorizontalAlignment" Value="Left" />
323+
<Setter Target="IDEPathTextBox.(Grid.Column)" Value="0" />
324+
<Setter Target="IDEFriendlyNameTextBox.Width" Value="300" />
325+
<Setter Target="IDEFriendlyNameTextBox.HorizontalAlignment" Value="Left" />
326+
<Setter Target="IDEFriendlyNameTextBox.(Grid.ColumnSpan)" Value="2" />
327+
<Setter Target="IDEPathButtons.(Grid.Column)" Value="1" />
328+
<Setter Target="IDEPathButtons.(Grid.Row)" Value="0" />
329+
<Setter Target="IDEPathButtons.Orientation" Value="Horizontal" />
330+
<Setter Target="IDEPathButtons.Spacing" Value="16" />
331+
<Setter Target="InvalidPathWarning.(Grid.Column)" Value="2" />
332+
<Setter Target="InvalidPathWarning.(Grid.Row)" Value="0" />
333+
<Setter Target="IDEPathGrid.RowSpacing" Value="0" />
334+
<Setter Target="IDEPathGrid.ColumnSpacing" Value="8" />
335+
<Setter Target="InvalidFriendlyNameWarning.(Grid.Column)" Value="2" />
336+
<Setter Target="InvalidFriendlyNameWarning.(Grid.Row)" Value="1" />
337+
<Setter Target="InvalidFriendlyNameWarning.(Grid.ColumnSpan)" Value="1" />
338+
</VisualState.Setters>
339+
</VisualState>
340+
<VisualState x:Name="CompactState">
341+
<VisualState.Setters>
342+
<Setter Target="IDEPathTextBox.Width" Value="Auto" />
343+
<Setter Target="IDEPathTextBox.HorizontalAlignment" Value="Stretch" />
344+
<Setter Target="IDEPathTextBox.(Grid.Column)" Value="2" />
345+
<Setter Target="IDEFriendlyNameTextBox.Width" Value="Auto" />
346+
<Setter Target="IDEFriendlyNameTextBox.HorizontalAlignment" Value="Stretch" />
347+
<Setter Target="IDEFriendlyNameTextBox.(Grid.ColumnSpan)" Value="3" />
348+
<Setter Target="IDEPathButtons.(Grid.Column)" Value="2" />
349+
<Setter Target="IDEPathButtons.(Grid.Row)" Value="1" />
350+
<Setter Target="IDEPathButtons.Orientation" Value="Vertical" />
351+
<Setter Target="IDEPathButtons.Spacing" Value="8" />
352+
<Setter Target="InvalidPathWarning.(Grid.Column)" Value="2" />
353+
<Setter Target="InvalidPathWarning.(Grid.Row)" Value="2" />
354+
<Setter Target="IDEPathGrid.RowSpacing" Value="12" />
355+
<Setter Target="IDEPathGrid.ColumnSpacing" Value="0" />
356+
<Setter Target="InvalidFriendlyNameWarning.(Grid.Column)" Value="0" />
357+
<Setter Target="InvalidFriendlyNameWarning.(Grid.Row)" Value="2" />
358+
<Setter Target="InvalidFriendlyNameWarning.(Grid.ColumnSpan)" Value="3" />
359+
</VisualState.Setters>
360+
</VisualState>
361+
</VisualStateGroup>
362+
</VisualStateManager.VisualStateGroups>
282363
</Grid>
283364
</Page>

‎src/Files.App/Views/Settings/DevToolsPage.xaml.cs‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// Copyright (c) Files Community
22
// Licensed under the MIT License.
33

4+
using Microsoft.UI.Xaml;
45
using Microsoft.UI.Xaml.Controls;
56

67
namespace Files.App.Views.Settings
@@ -11,5 +12,19 @@ public DevToolsPage()
1112
{
1213
InitializeComponent();
1314
}
15+
16+
private void Page_SizeChanged(object sender, SizeChangedEventArgs e)
17+
{
18+
if (e.NewSize.Width == e.PreviousSize.Width)
19+
return;
20+
21+
var defaultPathWidth = 300;
22+
var testIDEWidth = TestIDE.ActualWidth == 0 ? 64 : TestIDE.ActualWidth;
23+
var pickIDEWidth = PickIDEExe.ActualWidth == 0 ? 64 : PickIDEExe.ActualWidth;
24+
25+
var minWidth = defaultPathWidth + testIDEWidth + pickIDEWidth;
26+
var state = minWidth > e.NewSize.Width / 1.6 ? "CompactState" : "DefaultState";
27+
VisualStateManager.GoToState(this, state, false);
28+
}
1429
}
1530
}

0 commit comments

Comments
 (0)