Skip to content

Commit b27d934

Browse files
chrisgreganchrisgregan
committed
Improve Split Editor flyout and icons
1 parent 273c0a2 commit b27d934

File tree

5 files changed

+170
-39
lines changed

5 files changed

+170
-39
lines changed

‎app/Workspace/Celbridge.Documents/Views/Controls/SplitEditorIcon.xaml‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<UserControl
2+
x:Class="Celbridge.Documents.Views.Controls.SplitEditorIcon"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
5+
6+
<Viewbox Width="16" Height="16">
7+
<Grid Width="16" Height="16">
8+
<!-- Outer rounded rectangle border -->
9+
<Rectangle Stroke="{ThemeResource SystemControlForegroundBaseHighBrush}"
10+
StrokeThickness="1.2"
11+
RadiusX="2" RadiusY="2"/>
12+
13+
<!-- Center divider for 2 sections -->
14+
<Line x:Name="CenterDivider"
15+
X1="8" Y1="1" X2="8" Y2="15"
16+
Stroke="{ThemeResource SystemControlForegroundBaseHighBrush}"
17+
StrokeThickness="1.2"
18+
Visibility="Collapsed"/>
19+
20+
<!-- Left divider for 3 sections (at 1/3 position) -->
21+
<Line x:Name="LeftDivider"
22+
X1="5.4" Y1="1" X2="5.3" Y2="15"
23+
Stroke="{ThemeResource SystemControlForegroundBaseHighBrush}"
24+
StrokeThickness="1.2"
25+
Visibility="Collapsed"/>
26+
27+
<!-- Right divider for 3 sections (at 2/3 position) -->
28+
<Line x:Name="RightDivider"
29+
X1="10.6" Y1="1" X2="10.7" Y2="15"
30+
Stroke="{ThemeResource SystemControlForegroundBaseHighBrush}"
31+
StrokeThickness="1.2"
32+
Visibility="Collapsed"/>
33+
</Grid>
34+
</Viewbox>
35+
</UserControl>

‎app/Workspace/Celbridge.Documents/Views/Controls/SplitEditorIcon.xaml.cs‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
namespace Celbridge.Documents.Views.Controls;
2+
3+
/// <summary>
4+
/// An icon representing editor split layout with 1, 2, or 3 vertical sections.
5+
/// Set the SectionCount property to control how many sections are displayed.
6+
/// </summary>
7+
public sealed partial class SplitEditorIcon : UserControl
8+
{
9+
public static readonly DependencyProperty SectionCountProperty =
10+
DependencyProperty.Register(
11+
nameof(SectionCount),
12+
typeof(int),
13+
typeof(SplitEditorIcon),
14+
new PropertyMetadata(1, OnSectionCountChanged));
15+
16+
/// <summary>
17+
/// Gets or sets the number of sections to display (1, 2, or 3).
18+
/// </summary>
19+
public int SectionCount
20+
{
21+
get => (int)GetValue(SectionCountProperty);
22+
set => SetValue(SectionCountProperty, value);
23+
}
24+
25+
public SplitEditorIcon()
26+
{
27+
InitializeComponent();
28+
UpdateDividers();
29+
}
30+
31+
private static void OnSectionCountChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
32+
{
33+
if (d is SplitEditorIcon icon)
34+
{
35+
icon.UpdateDividers();
36+
}
37+
}
38+
39+
private void UpdateDividers()
40+
{
41+
// Clamp section count to valid range
42+
var count = Math.Clamp(SectionCount, 1, 3);
43+
44+
// 1 section: no dividers
45+
// 2 sections: center divider only
46+
// 3 sections: left and right dividers
47+
if (count == 1)
48+
{
49+
CenterDivider.Visibility = Visibility.Collapsed;
50+
LeftDivider.Visibility = Visibility.Collapsed;
51+
RightDivider.Visibility = Visibility.Collapsed;
52+
}
53+
else if (count == 2)
54+
{
55+
CenterDivider.Visibility = Visibility.Visible;
56+
LeftDivider.Visibility = Visibility.Collapsed;
57+
RightDivider.Visibility = Visibility.Collapsed;
58+
}
59+
else // count == 3
60+
{
61+
CenterDivider.Visibility = Visibility.Collapsed;
62+
LeftDivider.Visibility = Visibility.Visible;
63+
RightDivider.Visibility = Visibility.Visible;
64+
}
65+
}
66+
}

‎app/Workspace/Celbridge.Documents/Views/DocumentToolbar.xaml‎

Lines changed: 33 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,49 @@
33
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
44
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
55
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6+
xmlns:controls="using:Celbridge.Documents.Views.Controls"
67
HorizontalAlignment="Right">
78

89
<!-- Toolbar Buttons -->
910
<StackPanel x:Name="ToolbarPanel"
1011
Orientation="Horizontal"
1112
Spacing="0"
1213
VerticalAlignment="Center"
13-
Margin="0,0,4,0">
14+
Margin="0, 0, 4, 0">
1415
<Button x:Name="SplitEditorButton"
1516
ToolTipService.ToolTip="{x:Bind SplitEditorTooltipString}"
16-
Padding="4">
17-
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}"
18-
Glyph="&#xE8C0;"/>
17+
Padding="4"
18+
VerticalAlignment="Center">
19+
<controls:SplitEditorIcon x:Name="ButtonIcon" SectionCount="2"/>
1920
<Button.Flyout>
20-
<MenuFlyout x:Name="SplitEditorFlyout" Placement="Bottom">
21-
<MenuFlyoutItem x:Name="OneSection" Text="{x:Bind OneSectionString}" Click="OneSection_Click">
22-
<MenuFlyoutItem.Icon>
23-
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE745;"/>
24-
</MenuFlyoutItem.Icon>
25-
</MenuFlyoutItem>
26-
<MenuFlyoutItem x:Name="TwoSections" Text="{x:Bind TwoSectionsString}" Click="TwoSections_Click">
27-
<MenuFlyoutItem.Icon>
28-
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE746;"/>
29-
</MenuFlyoutItem.Icon>
30-
</MenuFlyoutItem>
31-
<MenuFlyoutItem x:Name="ThreeSections" Text="{x:Bind ThreeSectionsString}" Click="ThreeSections_Click">
32-
<MenuFlyoutItem.Icon>
33-
<FontIcon FontFamily="{StaticResource SymbolThemeFontFamily}" Glyph="&#xE747;"/>
34-
</MenuFlyoutItem.Icon>
35-
</MenuFlyoutItem>
36-
</MenuFlyout>
21+
<Flyout x:Name="SplitEditorFlyout" Placement="Bottom">
22+
<StackPanel Spacing="4">
23+
<RadioButton x:Name="OneSection"
24+
GroupName="SectionCount"
25+
Checked="OneSection_Checked">
26+
<StackPanel Orientation="Horizontal" Spacing="8">
27+
<controls:SplitEditorIcon SectionCount="1"/>
28+
<TextBlock Text="{x:Bind OneSectionString}" VerticalAlignment="Center"/>
29+
</StackPanel>
30+
</RadioButton>
31+
<RadioButton x:Name="TwoSections"
32+
GroupName="SectionCount"
33+
Checked="TwoSections_Checked">
34+
<StackPanel Orientation="Horizontal" Spacing="8">
35+
<controls:SplitEditorIcon SectionCount="2"/>
36+
<TextBlock Text="{x:Bind TwoSectionsString}" VerticalAlignment="Center"/>
37+
</StackPanel>
38+
</RadioButton>
39+
<RadioButton x:Name="ThreeSections"
40+
GroupName="SectionCount"
41+
Checked="ThreeSections_Checked">
42+
<StackPanel Orientation="Horizontal" Spacing="8">
43+
<controls:SplitEditorIcon SectionCount="3"/>
44+
<TextBlock Text="{x:Bind ThreeSectionsString}" VerticalAlignment="Center"/>
45+
</StackPanel>
46+
</RadioButton>
47+
</StackPanel>
48+
</Flyout>
3749
</Button.Flyout>
3850
</Button>
3951
</StackPanel>

‎app/Workspace/Celbridge.Documents/Views/DocumentToolbar.xaml.cs‎

Lines changed: 34 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ public sealed partial class DocumentToolbar : UserControl
77
private readonly IStringLocalizer _stringLocalizer;
88

99
private int _currentSectionCount = 1;
10+
private bool _isUpdatingSelection = false;
1011

1112
// Toolbar tooltip strings
1213
private string SplitEditorTooltipString => _stringLocalizer.GetString("DocumentToolbar_SplitEditorTooltip");
@@ -41,31 +42,47 @@ public void UpdateSectionCount(int sectionCount)
4142

4243
private void UpdateMenuItemStates()
4344
{
44-
// Use a checkmark or similar indicator for the current selection
45-
// WinUI MenuFlyoutItem doesn't have IsChecked, so we use FontWeight
46-
OneSection.FontWeight = _currentSectionCount == 1
47-
? Microsoft.UI.Text.FontWeights.Bold
48-
: Microsoft.UI.Text.FontWeights.Normal;
49-
TwoSections.FontWeight = _currentSectionCount == 2
50-
? Microsoft.UI.Text.FontWeights.Bold
51-
: Microsoft.UI.Text.FontWeights.Normal;
52-
ThreeSections.FontWeight = _currentSectionCount == 3
53-
? Microsoft.UI.Text.FontWeights.Bold
54-
: Microsoft.UI.Text.FontWeights.Normal;
45+
_isUpdatingSelection = true;
46+
try
47+
{
48+
// Update radio button selection
49+
OneSection.IsChecked = _currentSectionCount == 1;
50+
TwoSections.IsChecked = _currentSectionCount == 2;
51+
ThreeSections.IsChecked = _currentSectionCount == 3;
52+
53+
// Update the button icon to reflect current section count
54+
ButtonIcon.SectionCount = _currentSectionCount;
55+
}
56+
finally
57+
{
58+
_isUpdatingSelection = false;
59+
}
5560
}
5661

57-
private void OneSection_Click(object sender, RoutedEventArgs e)
62+
private void OneSection_Checked(object sender, RoutedEventArgs e)
5863
{
59-
SectionCountChangeRequested?.Invoke(1);
64+
if (!_isUpdatingSelection)
65+
{
66+
SectionCountChangeRequested?.Invoke(1);
67+
SplitEditorFlyout.Hide();
68+
}
6069
}
6170

62-
private void TwoSections_Click(object sender, RoutedEventArgs e)
71+
private void TwoSections_Checked(object sender, RoutedEventArgs e)
6372
{
64-
SectionCountChangeRequested?.Invoke(2);
73+
if (!_isUpdatingSelection)
74+
{
75+
SectionCountChangeRequested?.Invoke(2);
76+
SplitEditorFlyout.Hide();
77+
}
6578
}
6679

67-
private void ThreeSections_Click(object sender, RoutedEventArgs e)
80+
private void ThreeSections_Checked(object sender, RoutedEventArgs e)
6881
{
69-
SectionCountChangeRequested?.Invoke(3);
82+
if (!_isUpdatingSelection)
83+
{
84+
SectionCountChangeRequested?.Invoke(3);
85+
SplitEditorFlyout.Hide();
86+
}
7087
}
7188
}

‎app/Workspace/Celbridge.Documents/Views/DocumentsPanel.xaml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<local:DocumentSectionContainer x:Name="SectionContainer"/>
1010
<local:DocumentToolbar x:Name="DocumentToolbar"
1111
HorizontalAlignment="Right"
12-
VerticalAlignment="Top"/>
12+
VerticalAlignment="Top"
13+
Margin="0,6"/>
1314
</Grid>
1415
</UserControl>

0 commit comments

Comments
 (0)