Skip to content

Commit d86b34f

Browse files
carlos-zamoracarlos-zamora
committed
Rejuvenate the Dropdown page
1 parent 84ae7ad commit d86b34f

File tree

3 files changed

+189
-110
lines changed

3 files changed

+189
-110
lines changed

‎src/cascadia/TerminalSettingsEditor/MainPage.xaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@
7878
<Grid Padding="16,0">
7979
<!-- Wrapping the BreadcrumbBar in a Grid to avoid the title to drift (and no longer being aligned with the content of the page) when resizing the window. It's weird, I know. I believe it has to do with https://github.com/microsoft/microsoft-ui-xaml/issues/3842 doing funky things when setting a MaxWidth -->
8080
<muxc:BreadcrumbBar x:Name="NavigationBreadcrumbBar"
81+
HorizontalAlignment="Left"
8182
MaxWidth="1000"
8283
ItemClicked="BreadcrumbBar_ItemClicked"
8384
ItemsSource="{x:Bind Breadcrumbs}">

‎src/cascadia/TerminalSettingsEditor/NewTabMenu.xaml‎

Lines changed: 186 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -227,13 +227,7 @@
227227
</ResourceDictionary>
228228
</Page.Resources>
229229

230-
<Grid RowSpacing="12">
231-
<Grid.RowDefinitions>
232-
<RowDefinition Height="Auto" />
233-
<RowDefinition Height="Auto" />
234-
<RowDefinition Height="*" />
235-
</Grid.RowDefinitions>
236-
230+
<Grid>
237231
<!-- Folder Picker Dialog: used to select a folder to move entries to -->
238232
<ContentDialog x:Name="FolderPickerDialog"
239233
x:Uid="NewTabMenu_FolderPickerDialog"
@@ -267,113 +261,100 @@
267261
</muxc:TreeView>
268262
</ContentDialog>
269263

270-
<!-- New Tab Menu Content -->
271-
<StackPanel Grid.Row="0"
272-
MaxWidth="{StaticResource StandardControlMaxWidth}"
273-
Spacing="8">
274-
<Border Height="300"
275-
MaxWidth="{StaticResource StandardControlMaxWidth}"
276-
Margin="0,12,0,0"
277-
BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
278-
BorderThickness="1"
279-
CornerRadius="{ThemeResource ControlCornerRadius}">
280-
<ListView x:Name="NewTabMenuListView"
281-
AllowDrop="True"
282-
CanDragItems="True"
283-
CanReorderItems="True"
284-
ItemTemplateSelector="{StaticResource NewTabMenuEntryTemplateSelector}"
285-
ItemsSource="{x:Bind ViewModel.CurrentView, Mode=OneWay}"
286-
SelectionMode="Multiple" />
287-
</Border>
264+
<!--
265+
Main layout Grid: supports both side-by-side (wide) and stacked (narrow) modes.
266+
In wide mode: left column = controls, right column = preview (always visible).
267+
In narrow mode: single column, preview on top (current behavior).
268+
-->
269+
<Grid x:Name="MainLayoutGrid"
270+
ColumnSpacing="16">
271+
<Grid.ColumnDefinitions>
272+
<ColumnDefinition x:Name="ControlsColumn" Width="*" MaxWidth="600" />
273+
<ColumnDefinition x:Name="PreviewColumn" Width="*" MaxWidth="600" />
274+
</Grid.ColumnDefinitions>
275+
<Grid.RowDefinitions>
276+
<RowDefinition Height="Auto" />
277+
<RowDefinition Height="*" />
278+
</Grid.RowDefinitions>
288279

289-
<!-- General Controls -->
290-
<StackPanel Orientation="Horizontal"
291-
Spacing="10">
292-
<Button x:Name="MoveToFolderButton"
293-
Click="MoveMultiple_Click"
294-
IsEnabled="False">
295-
<StackPanel Orientation="Horizontal">
296-
<FontIcon FontSize="{StaticResource StandardIconSize}"
297-
Glyph="&#xE8DE;" />
298-
<TextBlock x:Uid="NewTabMenu_MoveToFolderTextBlock"
299-
Margin="8,0,0,0" />
300-
</StackPanel>
301-
</Button>
302-
<Button x:Name="DeleteMultipleButton"
303-
Click="DeleteMultiple_Click"
304-
IsEnabled="False"
305-
Style="{StaticResource DeleteButtonStyle}">
306-
<StackPanel Orientation="Horizontal">
307-
<FontIcon FontSize="{StaticResource StandardIconSize}"
308-
Glyph="&#xE74D;" />
309-
<TextBlock x:Uid="NewTabMenu_DeleteMultipleTextBlock"
310-
Margin="8,0,0,0" />
311-
</StackPanel>
312-
</Button>
313-
</StackPanel>
314-
</StackPanel>
280+
<!-- Left column: all controls -->
281+
<ScrollViewer x:Name="ControlsScrollViewer"
282+
Grid.Row="0"
283+
Grid.RowSpan="2"
284+
Grid.Column="0"
285+
VerticalScrollBarVisibility="Auto">
286+
<StackPanel Spacing="0">
315287

316-
<!-- Folder View Controls -->
317-
<StackPanel Grid.Row="1"
318-
MaxWidth="{StaticResource StandardControlMaxWidth}"
319-
Visibility="{x:Bind ViewModel.IsFolderView, Mode=OneWay}">
320-
<TextBlock x:Uid="NewTabMenu_CurrentFolderTextBlock"
321-
Style="{StaticResource TextBlockSubHeaderStyle}" />
322-
<!-- Name -->
323-
<local:SettingContainer x:Name="CurrentFolderName"
324-
x:Uid="NewTabMenu_CurrentFolderName"
325-
CurrentValue="{x:Bind ViewModel.CurrentFolderName, Mode=OneWay}"
326-
Style="{StaticResource ExpanderSettingContainerStyle}">
327-
<TextBox Style="{StaticResource TextBoxSettingStyle}"
328-
Text="{x:Bind ViewModel.CurrentFolderName, Mode=TwoWay}" />
329-
</local:SettingContainer>
288+
<!-- Current Folder Properties header -->
289+
<TextBlock x:Name="FolderControlsHeader"
290+
Margin="0,0,0,0"
291+
x:Uid="NewTabMenu_CurrentFolderTextBlock"
292+
Style="{StaticResource TextBlockSubHeaderStyle}"
293+
Visibility="{x:Bind ViewModel.IsFolderView, Mode=OneWay}" />
330294

331-
<!-- Icon -->
332-
<local:SettingContainer x:Name="CurrentFolderIcon"
333-
x:Uid="NewTabMenu_CurrentFolderIcon"
334-
CurrentValueAccessibleName="{x:Bind ViewModel.CurrentFolderLocalizedIcon, Mode=OneWay}"
335-
Style="{StaticResource ExpanderSettingContainerStyleWithComplexPreview}">
336-
<local:SettingContainer.CurrentValue>
337-
<Grid>
338-
<ContentControl Width="16"
339-
Height="16"
340-
Content="{x:Bind ViewModel.CurrentFolderIconPreview, Mode=OneWay}"
341-
IsTabStop="False"
342-
Visibility="{x:Bind mtu:Converters.InvertedBooleanToVisibility(ViewModel.CurrentFolderUsingNoIcon), Mode=OneWay}" />
343-
<TextBlock Margin="0,0,0,0"
344-
HorizontalAlignment="Right"
345-
VerticalAlignment="Center"
346-
FontFamily="Segoe UI, Segoe Fluent Icons, Segoe MDL2 Assets"
347-
Style="{StaticResource SettingsPageItemDescriptionStyle}"
348-
Text="{x:Bind ViewModel.CurrentFolderLocalizedIcon, Mode=OneWay}"
349-
Visibility="{x:Bind ViewModel.CurrentFolderUsingNoIcon, Mode=OneWay}" />
350-
</Grid>
351-
</local:SettingContainer.CurrentValue>
352-
<local:SettingContainer.Content>
353-
<local:IconPicker CurrentIconPath="{x:Bind ViewModel.CurrentFolderIconPath, Mode=TwoWay}"
354-
WindowRoot="{x:Bind WindowRoot, Mode=OneWay}" />
355-
</local:SettingContainer.Content>
356-
</local:SettingContainer>
295+
<!-- Folder View Controls -->
296+
<StackPanel x:Name="FolderControlsPanel"
297+
MaxWidth="{StaticResource StandardControlMaxWidth}"
298+
Visibility="{x:Bind ViewModel.IsFolderView, Mode=OneWay}">
299+
<!-- Name -->
300+
<local:SettingContainer x:Name="CurrentFolderName"
301+
x:Uid="NewTabMenu_CurrentFolderName"
302+
CurrentValue="{x:Bind ViewModel.CurrentFolderName, Mode=OneWay}"
303+
Style="{StaticResource ExpanderSettingContainerStyle}">
304+
<TextBox Style="{StaticResource TextBoxSettingStyle}"
305+
Text="{x:Bind ViewModel.CurrentFolderName, Mode=TwoWay}" />
306+
</local:SettingContainer>
357307

358-
<!-- Inlining -->
359-
<local:SettingContainer x:Name="CurrentFolderInlining"
360-
x:Uid="NewTabMenu_CurrentFolderInlining">
361-
<ToggleSwitch IsOn="{x:Bind ViewModel.CurrentFolderInlining, Mode=TwoWay}"
362-
Style="{StaticResource ToggleSwitchInExpanderStyle}" />
363-
</local:SettingContainer>
308+
<!-- Icon -->
309+
<local:SettingContainer x:Name="CurrentFolderIcon"
310+
x:Uid="NewTabMenu_CurrentFolderIcon"
311+
CurrentValueAccessibleName="{x:Bind ViewModel.CurrentFolderLocalizedIcon, Mode=OneWay}"
312+
Style="{StaticResource ExpanderSettingContainerStyleWithComplexPreview}">
313+
<local:SettingContainer.CurrentValue>
314+
<Grid>
315+
<ContentControl Width="16"
316+
Height="16"
317+
Content="{x:Bind ViewModel.CurrentFolderIconPreview, Mode=OneWay}"
318+
IsTabStop="False"
319+
Visibility="{x:Bind mtu:Converters.InvertedBooleanToVisibility(ViewModel.CurrentFolderUsingNoIcon), Mode=OneWay}" />
320+
<TextBlock Margin="0,0,0,0"
321+
HorizontalAlignment="Right"
322+
VerticalAlignment="Center"
323+
FontFamily="Segoe UI, Segoe Fluent Icons, Segoe MDL2 Assets"
324+
Style="{StaticResource SettingsPageItemDescriptionStyle}"
325+
Text="{x:Bind ViewModel.CurrentFolderLocalizedIcon, Mode=OneWay}"
326+
Visibility="{x:Bind ViewModel.CurrentFolderUsingNoIcon, Mode=OneWay}" />
327+
</Grid>
328+
</local:SettingContainer.CurrentValue>
329+
<local:SettingContainer.Content>
330+
<local:IconPicker CurrentIconPath="{x:Bind ViewModel.CurrentFolderIconPath, Mode=TwoWay}"
331+
WindowRoot="{x:Bind WindowRoot, Mode=OneWay}" />
332+
</local:SettingContainer.Content>
333+
</local:SettingContainer>
364334

365-
<!-- Allow Empty -->
366-
<local:SettingContainer x:Name="CurrentFolderAllowEmpty"
367-
x:Uid="NewTabMenu_CurrentFolderAllowEmpty">
368-
<ToggleSwitch IsOn="{x:Bind ViewModel.CurrentFolderAllowEmpty, Mode=TwoWay}"
369-
Style="{StaticResource ToggleSwitchInExpanderStyle}" />
370-
</local:SettingContainer>
371-
</StackPanel>
335+
<!-- Inlining -->
336+
<local:SettingContainer x:Name="CurrentFolderInlining"
337+
x:Uid="NewTabMenu_CurrentFolderInlining">
338+
<ToggleSwitch IsOn="{x:Bind ViewModel.CurrentFolderInlining, Mode=TwoWay}"
339+
Style="{StaticResource ToggleSwitchInExpanderStyle}" />
340+
</local:SettingContainer>
341+
342+
<!-- Allow Empty -->
343+
<local:SettingContainer x:Name="CurrentFolderAllowEmpty"
344+
x:Uid="NewTabMenu_CurrentFolderAllowEmpty">
345+
<ToggleSwitch IsOn="{x:Bind ViewModel.CurrentFolderAllowEmpty, Mode=TwoWay}"
346+
Style="{StaticResource ToggleSwitchInExpanderStyle}" />
347+
</local:SettingContainer>
348+
</StackPanel>
372349

373-
<!-- Add Entries -->
374-
<StackPanel Grid.Row="2">
375-
<TextBlock x:Uid="NewTabMenu_AddEntriesTextBlock"
376-
Style="{StaticResource TextBlockSubHeaderStyle}" />
350+
<!-- Add Entries header -->
351+
<TextBlock x:Name="AddEntriesHeader"
352+
Margin="0,0,0,0"
353+
x:Uid="NewTabMenu_AddEntriesTextBlock"
354+
Style="{StaticResource TextBlockSubHeaderStyle}" />
355+
356+
<!-- Add Entries -->
357+
<StackPanel x:Name="AddEntriesPanel">
377358

378359
<!-- Add Profile -->
379360
<local:SettingContainer x:Name="AddProfile"
@@ -515,5 +496,102 @@
515496
</Button>
516497
</local:SettingContainer>
517498
</StackPanel>
499+
</StackPanel>
500+
</ScrollViewer>
501+
502+
<!-- Dropdown Menu Content (Preview) -->
503+
<StackPanel x:Name="PreviewPanel"
504+
Grid.Row="0"
505+
Grid.RowSpan="2"
506+
Grid.Column="1">
507+
<!-- Spacer matching left column header height so preview aligns with first setting card -->
508+
<Border x:Name="PreviewSpacer"
509+
Height="24" />
510+
<Border x:Name="PreviewBorder"
511+
Height="300"
512+
VerticalAlignment="Top"
513+
BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
514+
BorderThickness="1"
515+
CornerRadius="{ThemeResource ControlCornerRadius}">
516+
<Grid>
517+
<Grid.RowDefinitions>
518+
<RowDefinition Height="*" />
519+
<RowDefinition Height="Auto" />
520+
</Grid.RowDefinitions>
521+
<ListView x:Name="NewTabMenuListView"
522+
Grid.Row="0"
523+
AllowDrop="True"
524+
CanDragItems="True"
525+
CanReorderItems="True"
526+
ItemTemplateSelector="{StaticResource NewTabMenuEntryTemplateSelector}"
527+
ItemsSource="{x:Bind ViewModel.CurrentView, Mode=OneWay}"
528+
SelectionMode="Multiple" />
529+
530+
<!-- General Controls -->
531+
<StackPanel Grid.Row="1"
532+
Padding="8"
533+
Orientation="Horizontal"
534+
Spacing="10">
535+
<Button x:Name="MoveToFolderButton"
536+
Click="MoveMultiple_Click"
537+
IsEnabled="False">
538+
<StackPanel Orientation="Horizontal">
539+
<FontIcon FontSize="{StaticResource StandardIconSize}"
540+
Glyph="&#xE8DE;" />
541+
<TextBlock x:Uid="NewTabMenu_MoveToFolderTextBlock"
542+
Margin="8,0,0,0" />
543+
</StackPanel>
544+
</Button>
545+
<Button x:Name="DeleteMultipleButton"
546+
Click="DeleteMultiple_Click"
547+
IsEnabled="False"
548+
Style="{StaticResource DeleteButtonStyle}">
549+
<StackPanel Orientation="Horizontal">
550+
<FontIcon FontSize="{StaticResource StandardIconSize}"
551+
Glyph="&#xE74D;" />
552+
<TextBlock x:Uid="NewTabMenu_DeleteMultipleTextBlock"
553+
Margin="8,0,0,0" />
554+
</StackPanel>
555+
</Button>
556+
</StackPanel>
557+
</Grid>
558+
</Border>
559+
</StackPanel>
560+
561+
<VisualStateManager.VisualStateGroups>
562+
<VisualStateGroup>
563+
<!-- Narrow: single column, stacked vertically -->
564+
<VisualState x:Name="Narrow">
565+
<VisualState.StateTriggers>
566+
<AdaptiveTrigger MinWindowWidth="0" />
567+
</VisualState.StateTriggers>
568+
<VisualState.Setters>
569+
<Setter Target="ControlsColumn.Width" Value="0" />
570+
<Setter Target="ControlsColumn.MaxWidth" Value="0" />
571+
<Setter Target="PreviewColumn.Width" Value="*" />
572+
<Setter Target="PreviewColumn.MaxWidth" Value="Infinity" />
573+
<Setter Target="MainLayoutGrid.ColumnSpacing" Value="0" />
574+
<Setter Target="PreviewPanel.(Grid.Column)" Value="1" />
575+
<Setter Target="PreviewPanel.(Grid.Row)" Value="0" />
576+
<Setter Target="PreviewBorder.MaxWidth" Value="{StaticResource StandardControlMaxWidth}" />
577+
<Setter Target="PreviewBorder.Height" Value="300" />
578+
<Setter Target="PreviewSpacer.Height" Value="0" />
579+
<Setter Target="ControlsScrollViewer.(Grid.Column)" Value="1" />
580+
<Setter Target="ControlsScrollViewer.(Grid.Row)" Value="1" />
581+
</VisualState.Setters>
582+
</VisualState>
583+
<!-- Wide: two columns, preview on the right -->
584+
<VisualState x:Name="Wide">
585+
<VisualState.StateTriggers>
586+
<AdaptiveTrigger MinWindowWidth="900" />
587+
</VisualState.StateTriggers>
588+
<VisualState.Setters>
589+
<Setter Target="PreviewBorder.Height" Value="NaN" />
590+
<Setter Target="PreviewBorder.MinHeight" Value="300" />
591+
</VisualState.Setters>
592+
</VisualState>
593+
</VisualStateGroup>
594+
</VisualStateManager.VisualStateGroups>
595+
</Grid>
518596
</Grid>
519597
</Page>

0 commit comments

Comments
 (0)