Skip to content

Commit 633a867

Browse files
fuzzzerdfuzzzerd
committed
chore: clean up ui spacing
1 parent 8521291 commit 633a867

File tree

2 files changed

+244
-51
lines changed

2 files changed

+244
-51
lines changed

‎App.axaml

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,110 @@
77
<Application.Styles>
88
<FluentTheme />
99
<StyleInclude Source="avares://AvaloniaEdit/Themes/Fluent/AvaloniaEdit.xaml" />
10+
11+
<!-- Fluent 2 Design System Tokens and Styles -->
12+
<Style>
13+
<Style.Resources>
14+
<!-- Fluent 2 Spacing Tokens -->
15+
<x:Double x:Key="Fluent2SpacingXXS">2</x:Double>
16+
<x:Double x:Key="Fluent2SpacingXS">4</x:Double>
17+
<x:Double x:Key="Fluent2SpacingSM">8</x:Double>
18+
<x:Double x:Key="Fluent2SpacingMD">12</x:Double>
19+
<x:Double x:Key="Fluent2SpacingLG">16</x:Double>
20+
<x:Double x:Key="Fluent2SpacingXL">20</x:Double>
21+
<x:Double x:Key="Fluent2SpacingXXL">24</x:Double>
22+
<x:Double x:Key="Fluent2SpacingXXXL">32</x:Double>
23+
24+
<!-- Fluent 2 Corner Radius Tokens -->
25+
<x:Double x:Key="Fluent2CornerRadiusNone">0</x:Double>
26+
<x:Double x:Key="Fluent2CornerRadiusXS">2</x:Double>
27+
<x:Double x:Key="Fluent2CornerRadiusSM">4</x:Double>
28+
<x:Double x:Key="Fluent2CornerRadiusMD">8</x:Double>
29+
<x:Double x:Key="Fluent2CornerRadiusLG">12</x:Double>
30+
<x:Double x:Key="Fluent2CornerRadiusXL">16</x:Double>
31+
<x:Double x:Key="Fluent2CornerRadiusXXL">20</x:Double>
32+
33+
<!-- Fluent 2 Typography Tokens -->
34+
<x:Double x:Key="Fluent2FontSizeCaption">10</x:Double>
35+
<x:Double x:Key="Fluent2FontSizeBody">14</x:Double>
36+
<x:Double x:Key="Fluent2FontSizeSubtitle">16</x:Double>
37+
<x:Double x:Key="Fluent2FontSizeTitle3">18</x:Double>
38+
<x:Double x:Key="Fluent2FontSizeTitle2">20</x:Double>
39+
<x:Double x:Key="Fluent2FontSizeTitle1">22</x:Double>
40+
41+
<!-- Fluent 2 Shadow Tokens -->
42+
<BoxShadows x:Key="Fluent2ShadowElevation2">0 1 2 0 #00000014</BoxShadows>
43+
<BoxShadows x:Key="Fluent2ShadowElevation4">0 2 4 0 #00000014</BoxShadows>
44+
<BoxShadows x:Key="Fluent2ShadowElevation8">0 4 8 0 #00000014</BoxShadows>
45+
<BoxShadows x:Key="Fluent2ShadowElevation16">0 8 16 0 #00000014</BoxShadows>
46+
</Style.Resources>
47+
</Style>
48+
49+
<!-- Fluent 2 Component Styles -->
50+
<!-- Enhanced Button Style -->
51+
<Style Selector="Button.Fluent2Primary">
52+
<Setter Property="CornerRadius" Value="4" />
53+
<Setter Property="Padding" Value="12,8" />
54+
<Setter Property="MinHeight" Value="32" />
55+
<Setter Property="FontSize" Value="14" />
56+
<Setter Property="FontWeight" Value="Medium" />
57+
</Style>
58+
59+
<!-- Enhanced TextBox Style -->
60+
<Style Selector="TextBox.Fluent2">
61+
<Setter Property="CornerRadius" Value="4" />
62+
<Setter Property="Padding" Value="12,8" />
63+
<Setter Property="MinHeight" Value="32" />
64+
<Setter Property="FontSize" Value="14" />
65+
<Setter Property="BorderThickness" Value="1" />
66+
</Style>
67+
68+
<!-- Enhanced ComboBox Style -->
69+
<Style Selector="ComboBox.Fluent2">
70+
<Setter Property="CornerRadius" Value="4" />
71+
<Setter Property="Padding" Value="12,8" />
72+
<Setter Property="MinHeight" Value="32" />
73+
<Setter Property="FontSize" Value="14" />
74+
</Style>
75+
76+
<!-- Fluent 2 Surface Styles -->
77+
<Style Selector="Border.Fluent2Surface">
78+
<Setter Property="CornerRadius" Value="8" />
79+
<Setter Property="BoxShadow" Value="0 1 2 0 #00000014" />
80+
<Setter Property="Background" Value="{DynamicResource SystemControlBackgroundChromeMediumLowBrush}" />
81+
</Style>
82+
83+
<Style Selector="Border.Fluent2SurfaceElevated">
84+
<Setter Property="CornerRadius" Value="8" />
85+
<Setter Property="BoxShadow" Value="0 2 4 0 #00000014" />
86+
<Setter Property="Background" Value="{DynamicResource SystemControlBackgroundChromeMediumBrush}" />
87+
</Style>
88+
89+
<!-- Enhanced ListBox Item Style -->
90+
<Style Selector="ListBox.Fluent2">
91+
<Setter Property="Background" Value="Transparent" />
92+
<Setter Property="BorderThickness" Value="0" />
93+
</Style>
94+
95+
<Style Selector="ListBox.Fluent2 ListBoxItem">
96+
<Setter Property="CornerRadius" Value="4" />
97+
<Setter Property="Padding" Value="12" />
98+
<Setter Property="Margin" Value="0,0,0,4" />
99+
</Style>
100+
101+
<!-- Typography Styles -->
102+
<Style Selector="TextBlock.Fluent2Caption">
103+
<Setter Property="FontSize" Value="10" />
104+
<Setter Property="Opacity" Value="0.8" />
105+
</Style>
106+
107+
<Style Selector="TextBlock.Fluent2Body">
108+
<Setter Property="FontSize" Value="14" />
109+
</Style>
110+
111+
<Style Selector="TextBlock.Fluent2Subtitle">
112+
<Setter Property="FontSize" Value="16" />
113+
<Setter Property="FontWeight" Value="Medium" />
114+
</Style>
10115
</Application.Styles>
11116
</Application>

‎MainWindow.axaml

Lines changed: 139 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -40,66 +40,154 @@
4040
</Menu>
4141
<Grid>
4242
<Grid.RowDefinitions>
43-
<RowDefinition Height="50" />
43+
<RowDefinition Height="Auto" />
4444
<RowDefinition Height="*" />
4545
</Grid.RowDefinitions>
46-
<Grid.ColumnDefinitions>
47-
<ColumnDefinition Width="*" />
48-
</Grid.ColumnDefinitions>
4946

50-
<Grid
47+
<!-- Header section with Fluent 2 design tokens -->
48+
<Border
5149
Grid.Row="0"
52-
Margin="8">
50+
Classes="Fluent2Surface"
51+
Margin="24,16,24,0"
52+
Padding="16">
53+
<Grid>
54+
<Grid.ColumnDefinitions>
55+
<ColumnDefinition Width="Auto" />
56+
<ColumnDefinition Width="*" />
57+
<ColumnDefinition Width="Auto"/>
58+
</Grid.ColumnDefinitions>
59+
<TextBlock
60+
Grid.Column="0"
61+
Classes="Fluent2Body"
62+
Margin="0,0,12,0"
63+
VerticalAlignment="Center"
64+
Text="Clip path:" />
65+
<TextBox
66+
Grid.Column="1"
67+
Classes="Fluent2"
68+
Margin="0,0,12,0"
69+
Text="{Binding CurrentPath, Mode=OneWay}" />
70+
<Button
71+
Grid.Column="2"
72+
Classes="Fluent2Primary"
73+
Command="{Binding OpenFolderPicker}"
74+
Content="Browse" />
75+
</Grid>
76+
</Border>
77+
78+
<!-- Main content area with Fluent 2 elevation and spacing -->
79+
<Grid
80+
Grid.Row="1"
81+
Margin="24,16,24,24">
5382
<Grid.ColumnDefinitions>
54-
<ColumnDefinition Width="75" />
83+
<ColumnDefinition Width="320" />
84+
<ColumnDefinition Width="16" />
5585
<ColumnDefinition Width="*" />
56-
<ColumnDefinition Width="75"/>
5786
</Grid.ColumnDefinitions>
58-
<Label Grid.Column="0" HorizontalAlignment="Left" VerticalContentAlignment="Center" Content="Clip path:"></Label>
59-
<TextBox Grid.Column="1" Text="{Binding CurrentPath, Mode=OneWay}" />
60-
<Button Grid.Column="2" HorizontalAlignment="Right" Command="{Binding OpenFolderPicker}" Content="Browse" />
61-
</Grid>
6287

63-
<DockPanel Grid.Row="1">
64-
<StackPanel
65-
Width="225"
66-
DockPanel.Dock="Left">
67-
<TextBox Margin="8" Watermark="Search" Text="{Binding SearchText}" />
68-
<ListBox
69-
ItemsSource="{Binding FilteredClips}"
70-
SelectedItem="{Binding SelectedClip}">
71-
<ListBox.Styles>
72-
<Style Selector="ListBoxItem">
73-
<Setter Property="Padding" Value="0"/>
74-
</Style>
75-
</ListBox.Styles>
76-
<ListBox.ItemTemplate>
77-
<DataTemplate>
78-
<StackPanel Margin="8">
79-
<TextBox Text="{Binding Name, Mode=TwoWay}" />
80-
<ComboBox
81-
DisplayMemberBinding="{Binding DisplayName}"
82-
ItemsSource="{Binding Clip.ClipTypes}"
83-
SelectedValue="{Binding ClipType, Mode=TwoWay}"
84-
SelectedValueBinding="{Binding KeyId}" />
85-
<TextBlock MaxLines="1" Text="{Binding ClipType}" />
86-
</StackPanel>
87-
</DataTemplate>
88-
</ListBox.ItemTemplate>
89-
</ListBox>
90-
</StackPanel>
88+
<!-- Left panel: Clips navigation with Fluent 2 surface treatment -->
89+
<Border
90+
Grid.Column="0"
91+
Classes="Fluent2SurfaceElevated">
92+
<ScrollViewer>
93+
<StackPanel Margin="16" Spacing="16">
94+
<!-- Search section -->
95+
<StackPanel Spacing="8">
96+
<TextBlock
97+
Classes="Fluent2Subtitle"
98+
Text="Search Clips" />
99+
<TextBox
100+
Classes="Fluent2"
101+
Watermark="Type to search clips..."
102+
Text="{Binding SearchText}" />
103+
</StackPanel>
104+
105+
<!-- Clips list section -->
106+
<StackPanel Spacing="8">
107+
<TextBlock
108+
Classes="Fluent2Subtitle"
109+
Text="Available Clips" />
110+
<ListBox
111+
Classes="Fluent2"
112+
ItemsSource="{Binding FilteredClips}"
113+
SelectedItem="{Binding SelectedClip}">
114+
<ListBox.ItemTemplate>
115+
<DataTemplate>
116+
<Border
117+
CornerRadius="4"
118+
Padding="12">
119+
<StackPanel Spacing="8">
120+
<TextBox
121+
Classes="Fluent2"
122+
Text="{Binding Name, Mode=TwoWay}"
123+
Watermark="Clip name" />
124+
<ComboBox
125+
Classes="Fluent2"
126+
DisplayMemberBinding="{Binding DisplayName}"
127+
ItemsSource="{Binding Clip.ClipTypes}"
128+
SelectedValue="{Binding ClipType, Mode=TwoWay}"
129+
SelectedValueBinding="{Binding KeyId}" />
130+
<TextBlock
131+
Classes="Fluent2Caption"
132+
MaxLines="1"
133+
Text="{Binding ClipType}" />
134+
</StackPanel>
135+
</Border>
136+
</DataTemplate>
137+
</ListBox.ItemTemplate>
138+
</ListBox>
139+
</StackPanel>
140+
</StackPanel>
141+
</ScrollViewer>
142+
</Border>
143+
144+
<!-- Splitter space -->
145+
<GridSplitter
146+
Grid.Column="1"
147+
Background="Transparent"
148+
ResizeDirection="Columns"
149+
Width="16" />
91150

92-
<AvaloniaEdit:TextEditor
93-
x:Name="avaloniaEditor"
94-
FontFamily="Cascadia Code,Consolas,Menlo,Monospace"
95-
ShowLineNumbers="True"
96-
SyntaxHighlighting="Xml"
97-
WordWrap="False">
98-
<i:Interaction.Behaviors>
99-
<behaviors:DocumentTextBindingBehavior Text="{Binding SelectedClip.ClipXml, Mode=TwoWay}" />
100-
</i:Interaction.Behaviors>
101-
</AvaloniaEdit:TextEditor>
102-
</DockPanel>
151+
<!-- Right panel: Code editor with Fluent 2 surface treatment -->
152+
<Border
153+
Grid.Column="2"
154+
Classes="Fluent2SurfaceElevated">
155+
<Grid>
156+
<Grid.RowDefinitions>
157+
<RowDefinition Height="Auto" />
158+
<RowDefinition Height="*" />
159+
</Grid.RowDefinitions>
160+
161+
<!-- Editor header -->
162+
<Border
163+
Grid.Row="0"
164+
Background="{DynamicResource SystemControlBackgroundChromeMediumBrush}"
165+
CornerRadius="8,8,0,0"
166+
Padding="16,12">
167+
<TextBlock
168+
Classes="Fluent2Subtitle"
169+
Text="Clip Content" />
170+
</Border>
171+
172+
<!-- AvaloniaEdit component (unchanged) -->
173+
<Border
174+
Grid.Row="1"
175+
CornerRadius="0,0,8,8"
176+
ClipToBounds="True">
177+
<AvaloniaEdit:TextEditor
178+
x:Name="avaloniaEditor"
179+
FontFamily="Cascadia Code,Consolas,Menlo,Monospace"
180+
ShowLineNumbers="True"
181+
SyntaxHighlighting="Xml"
182+
WordWrap="False">
183+
<i:Interaction.Behaviors>
184+
<behaviors:DocumentTextBindingBehavior Text="{Binding SelectedClip.ClipXml, Mode=TwoWay}" />
185+
</i:Interaction.Behaviors>
186+
</AvaloniaEdit:TextEditor>
187+
</Border>
188+
</Grid>
189+
</Border>
190+
</Grid>
103191
</Grid>
104192
</DockPanel>
105193

0 commit comments

Comments
 (0)