Skip to content

Commit f7836c0

Browse files
committed
ux: prevent non-auto-hide scrollbar overlap contents (#1980) (#1794)
Signed-off-by: leo <longshuang@msn.cn>
1 parent cf528d6 commit f7836c0

File tree

5 files changed

+210
-18
lines changed

5 files changed

+210
-18
lines changed

src/Resources/Styles.axaml

Lines changed: 184 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,6 @@
1313
</StackPanel>
1414
</Design.PreviewWith>
1515

16-
<Style Selector="ScrollBar">
17-
<Style.Resources>
18-
<x:Double x:Key="ScrollBarSize">12</x:Double>
19-
</Style.Resources>
20-
21-
<Setter Property="AllowAutoHide" Value="{Binding Source={x:Static vm:Preferences.Instance}, Path=UseAutoHideScrollBars, Mode=OneWay}"/>
22-
<Setter Property="ShowDelay" Value="0:0:0.1"/>
23-
<Setter Property="HideDelay" Value="0:0:0.2"/>
24-
</Style>
25-
2616
<Style Selector="Window">
2717
<Style.Resources>
2818
<SolidColorBrush x:Key="SystemControlErrorTextForegroundBrush" Color="Red"/>
@@ -245,6 +235,190 @@
245235
</Setter>
246236
</Style>
247237

238+
<Style Selector="ScrollBar">
239+
<Setter Property="MinWidth" Value="12"/>
240+
<Setter Property="MinHeight" Value="12"/>
241+
<Setter Property="ShowDelay" Value="0:0:0.1"/>
242+
<Setter Property="HideDelay" Value="0:0:0.2"/>
243+
244+
<Style Selector="^ /template/ RepeatButton">
245+
<Setter Property="Background" Value="Transparent" />
246+
<Setter Property="Foreground" Value="{DynamicResource Brush.FG1}" />
247+
<Setter Property="BorderThickness" Value="0"/>
248+
<Setter Property="HorizontalAlignment" Value="Center"/>
249+
<Setter Property="VerticalAlignment" Value="Center"/>
250+
<Setter Property="HorizontalContentAlignment" Value="Center"/>
251+
<Setter Property="VerticalContentAlignment" Value="Center"/>
252+
<Setter Property="Template">
253+
<ControlTemplate>
254+
<Border Padding="0" Background="{TemplateBinding Background}">
255+
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
256+
Content="{TemplateBinding Content}"
257+
Foreground="{TemplateBinding Foreground}"/>
258+
</Border>
259+
</ControlTemplate>
260+
</Setter>
261+
</Style>
262+
263+
<Style Selector="^:horizontal">
264+
<Setter Property="Height" Value="8" />
265+
<Setter Property="Template">
266+
<ControlTemplate>
267+
<Border Background="Transparent" UseLayoutRounding="False">
268+
<Grid Name="PART_RootGrid" ColumnDefinitions="12,*,12">
269+
<RepeatButton Name="PART_LineUpButton"
270+
Grid.Row="0" Grid.Column="0"
271+
VerticalAlignment="Center"
272+
Focusable="False">
273+
<Path Width="8" Height="8"
274+
Data="M16.32 6.96v10.13a.5.5 0 0 1-.78.41l-7.6-5.06a.5.5 0 0 1 0-.83l7.6-5.07a.5.5 0 0 1 .78.42Z"
275+
Fill="{DynamicResource Brush.FG2}"/>
276+
</RepeatButton>
277+
<Track Grid.Column="1"
278+
DeferThumbDrag="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
279+
Maximum="{TemplateBinding Maximum}"
280+
Minimum="{TemplateBinding Minimum}"
281+
Orientation="{TemplateBinding Orientation}"
282+
ViewportSize="{TemplateBinding ViewportSize}"
283+
Value="{TemplateBinding Value, Mode=TwoWay}">
284+
<Track.DecreaseButton>
285+
<RepeatButton Name="PART_PageUpButton"
286+
MinWidth="0"
287+
HorizontalAlignment="Stretch"
288+
VerticalAlignment="Stretch"
289+
CornerRadius="0"
290+
Focusable="False"/>
291+
</Track.DecreaseButton>
292+
<Track.IncreaseButton>
293+
<RepeatButton Name="PART_PageDownButton"
294+
MinWidth="0"
295+
HorizontalAlignment="Stretch"
296+
VerticalAlignment="Stretch"
297+
CornerRadius="0"
298+
Focusable="False"/>
299+
</Track.IncreaseButton>
300+
<Thumb MinWidth="24" Height="8" VerticalAlignment="Center"/>
301+
</Track>
302+
<RepeatButton Name="PART_LineDownButton"
303+
Grid.Column="2"
304+
VerticalAlignment="Center"
305+
VerticalContentAlignment="Center"
306+
Focusable="False">
307+
<Path Width="8" Height="8"
308+
Data="M9 17.07V6.93c0-.4.45-.63.78-.41l7.6 5.06c.3.2.3.64 0 .84l-7.6 5.06a.5.5 0 0 1-.78-.41Z"
309+
Fill="{DynamicResource Brush.FG2}"/>
310+
</RepeatButton>
311+
</Grid>
312+
</Border>
313+
</ControlTemplate>
314+
</Setter>
315+
</Style>
316+
317+
<Style Selector="^:vertical">
318+
<Setter Property="Width" Value="8" />
319+
<Setter Property="Template">
320+
<ControlTemplate TargetType="ScrollBar">
321+
<Border Background="Transparent" UseLayoutRounding="False">
322+
<Grid RowDefinitions="12,*,12">
323+
<RepeatButton Name="PART_LineUpButton"
324+
Grid.Row="0"
325+
VerticalAlignment="Center"
326+
HorizontalContentAlignment="Center"
327+
VerticalContentAlignment="Center"
328+
Focusable="False">
329+
<Path Width="8" Height="8"
330+
Data="M17.08 16.32H6.95a.5.5 0 0 1-.41-.78l5.06-7.6c.2-.3.64-.3.83 0l5.07 7.6a.5.5 0 0 1-.42.78Z"
331+
Fill="{DynamicResource Brush.FG2}"/>
332+
</RepeatButton>
333+
<Track Grid.Row="1"
334+
DeferThumbDrag="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
335+
IsDirectionReversed="True"
336+
Maximum="{TemplateBinding Maximum}"
337+
Minimum="{TemplateBinding Minimum}"
338+
Orientation="{TemplateBinding Orientation}"
339+
ViewportSize="{TemplateBinding ViewportSize}"
340+
Value="{TemplateBinding Value, Mode=TwoWay}">
341+
<Track.DecreaseButton>
342+
<RepeatButton Name="PART_PageUpButton"
343+
MinHeight="0"
344+
HorizontalAlignment="Stretch"
345+
VerticalAlignment="Stretch"
346+
CornerRadius="0"
347+
Focusable="False"/>
348+
</Track.DecreaseButton>
349+
<Track.IncreaseButton>
350+
<RepeatButton Name="PART_PageDownButton"
351+
MinHeight="0"
352+
HorizontalAlignment="Stretch"
353+
VerticalAlignment="Stretch"
354+
CornerRadius="0"
355+
Focusable="False" />
356+
</Track.IncreaseButton>
357+
<Thumb MinHeight="24" Width="8" HorizontalAlignment="Center"/>
358+
</Track>
359+
<RepeatButton Name="PART_LineDownButton"
360+
Grid.Row="2"
361+
HorizontalContentAlignment="Center"
362+
VerticalContentAlignment="Center"
363+
Focusable="False">
364+
<Path Width="8" Height="8"
365+
Data="M6.95 7.72h10.13c.4 0 .64.45.42.78l-5.07 7.6a.5.5 0 0 1-.83 0L6.54 8.5a.5.5 0 0 1 .41-.78Z"
366+
Fill="{DynamicResource Brush.FG2}"/>
367+
</RepeatButton>
368+
</Grid>
369+
</Border>
370+
</ControlTemplate>
371+
</Setter>
372+
</Style>
373+
374+
<Style Selector="^ /template/ Thumb">
375+
<Setter Property="Transitions">
376+
<Transitions>
377+
<DoubleTransition Property="Width" Duration="0:0:0.1" />
378+
<DoubleTransition Property="Height" Duration="0:0:0.1" />
379+
</Transitions>
380+
</Setter>
381+
<Setter Property="Foreground" Value="{DynamicResource Brush.FG2}" />
382+
<Setter Property="Template">
383+
<ControlTemplate>
384+
<Border Background="{TemplateBinding Foreground}" CornerRadius="4" UseLayoutRounding="False" />
385+
</ControlTemplate>
386+
</Setter>
387+
</Style>
388+
389+
<Style Selector="^ /template/ RepeatButton:pointerover > Path">
390+
<Setter Property="Fill" Value="{DynamicResource Brush.FG1}" />
391+
</Style>
392+
393+
<Style Selector="^ /template/ Thumb:pointerover">
394+
<Setter Property="Foreground" Value="{DynamicResource Brush.FG1}" />
395+
</Style>
396+
397+
<Style Selector="^[IsExpanded=False]">
398+
<Style Selector="^ /template/ RepeatButton">
399+
<Setter Property="IsVisible" Value="False" />
400+
</Style>
401+
<Style Selector="^:vertical /template/ Thumb">
402+
<Setter Property="Width" Value="2" />
403+
</Style>
404+
<Style Selector="^:horizontal /template/ Thumb">
405+
<Setter Property="Height" Value="2" />
406+
</Style>
407+
</Style>
408+
</Style>
409+
410+
<Style Selector="ScrollViewer">
411+
<Setter Property="Classes.static_scrollbar" Value="{Binding Source={x:Static vm:Preferences.Instance}, Path=!UseAutoHideScrollBars, Mode=OneWay}"/>
412+
</Style>
413+
414+
<Style Selector="ScrollViewer.static_scrollbar">
415+
<Setter Property="AllowAutoHide" Value="False"/>
416+
<Style Selector="^ /template/ ScrollContentPresenter#PART_ContentPresenter">
417+
<Setter Property="Grid.RowSpan" Value="1"/>
418+
<Setter Property="Grid.ColumnSpan" Value="1"/>
419+
</Style>
420+
</Style>
421+
248422
<Style Selector="Path">
249423
<Setter Property="Fill" Value="{DynamicResource Brush.FG1}"/>
250424
<Setter Property="Stretch" Value="Uniform"/>

src/Views/BranchTree.axaml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
SelectionMode="Multiple"
1616
SelectionChanged="OnNodesSelectionChanged"
1717
KeyDown="OnTreeKeyDown"
18+
Padding="0,0,2,0"
1819
ContextRequested="OnTreeContextRequested">
1920
<ListBox.ItemsPanel>
2021
<ItemsPanelTemplate>
@@ -160,7 +161,7 @@
160161

161162
<!-- Filter Mode Switcher -->
162163
<v:FilterModeSwitchButton Grid.Column="3"
163-
Margin="0,0,12,0"
164+
Margin="0,0,8,0"
164165
Mode="{Binding FilterMode}"/>
165166
</Grid>
166167
</Grid>

src/Views/Histories.axaml

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@
2525

2626
<Grid Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3">
2727
<DataGrid x:Name="CommitListContainer"
28-
Background="{DynamicResource Brush.Contents}"
28+
Classes.static_scrollbar="{Binding Source={x:Static vm:Preferences.Instance}, Path=!UseAutoHideScrollBars, Mode=OneWay}"
29+
Background="{DynamicResource Brush.Window}"
2930
SelectionMode="Extended"
3031
ItemsSource="{Binding Commits, Mode=OneWay}"
3132
SelectedItem="{Binding AutoSelectedCommit, Mode=OneWay}"
@@ -51,7 +52,17 @@
5152
<SolidColorBrush x:Key="DataGridGridLinesBrush" Color="{DynamicResource Color.Border0}" />
5253
</DataGrid.Resources>
5354

54-
<DataGrid.Styles>
55+
<DataGrid.Styles>
56+
<Style Selector="DataGrid.static_scrollbar">
57+
<Style Selector="^ /template/ DataGridRowsPresenter#PART_RowsPresenter">
58+
<Setter Property="Grid.RowSpan" Value="1" />
59+
<Setter Property="Grid.ColumnSpan" Value="2" />
60+
</Style>
61+
<Style Selector="^ /template/ DataGridColumnHeadersPresenter#PART_ColumnHeadersPresenter">
62+
<Setter Property="Grid.ColumnSpan" Value="1" />
63+
</Style>
64+
</Style>
65+
5566
<Style Selector="DataGridColumnHeader">
5667
<Setter Property="MinHeight" Value="24"/>
5768
<Setter Property="Background" Value="{DynamicResource Brush.Window}"/>
@@ -93,6 +104,10 @@
93104
</ControlTemplate>
94105
</Setter>
95106
</Style>
107+
108+
<Style Selector="DataGridRowsPresenter">
109+
<Setter Property="Background" Value="{DynamicResource Brush.Contents}"/>
110+
</Style>
96111
</DataGrid.Styles>
97112

98113
<DataGrid.Columns>

src/Views/SubmodulesView.axaml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
x:Class="SourceGit.Views.SubmodulesView">
1111
<UserControl.DataTemplates>
1212
<DataTemplate DataType="vm:SubmoduleCollectionAsTree">
13-
<ListBox Classes="repo_left_content_list" ItemsSource="{Binding Rows}" SelectionMode="Single">
13+
<ListBox Classes="repo_left_content_list" Padding="0,0,2,0" ItemsSource="{Binding Rows}" SelectionMode="Single">
1414
<ListBox.Styles>
1515
<Style Selector="ListBoxItem">
1616
<Setter Property="CornerRadius" Value="4"/>
@@ -127,7 +127,7 @@
127127

128128
<Path Grid.Column="3"
129129
Width="8" Height="8"
130-
Margin="0,0,12,0"
130+
Margin="0,0,8,0"
131131
Fill="Goldenrod"
132132
Data="{StaticResource Icons.Modified}"
133133
IsVisible="{Binding IsDirty}"/>
@@ -235,7 +235,7 @@
235235
<TextBlock Grid.Column="1" Text="{Binding Path}" ClipToBounds="True" TextTrimming="CharacterEllipsis"/>
236236
<Path Grid.Column="2"
237237
Width="8" Height="8"
238-
Margin="8,0,12,0"
238+
Margin="8,0,8,0"
239239
Fill="Goldenrod"
240240
Data="{StaticResource Icons.Modified}"
241241
IsVisible="{Binding IsDirty}"/>

src/Views/TagsView.axaml

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
<ListBox Classes="repo_left_content_list"
2020
ItemsSource="{Binding Rows}"
2121
SelectionMode="Multiple"
22+
Padding="0,0,2,0"
2223
KeyDown="OnKeyDown"
2324
SelectionChanged="OnSelectionChanged"
2425
ContextRequested="OnTagsContextMenuRequested">
@@ -53,7 +54,7 @@
5354
</TextBlock>
5455

5556
<Border Grid.Column="3" IsVisible="{Binding !IsFolder}">
56-
<v:FilterModeSwitchButton Margin="0,0,12,0" Mode="{Binding FilterMode}"/>
57+
<v:FilterModeSwitchButton Margin="0,0,8,0" Mode="{Binding FilterMode}"/>
5758
</Border>
5859
</Grid>
5960
</Border>
@@ -65,6 +66,7 @@
6566
<DataTemplate DataType="vm:TagCollectionAsList">
6667
<ListBox Classes="repo_left_content_list"
6768
Margin="8,0,0,0"
69+
Padding="0,0,2,0"
6870
ItemsSource="{Binding TagItems}"
6971
SelectionMode="Multiple"
7072
KeyDown="OnKeyDown"
@@ -104,7 +106,7 @@
104106
Margin="8,0,0,0"
105107
TextTrimming="CharacterEllipsis"/>
106108

107-
<v:FilterModeSwitchButton Grid.Column="2" Margin="0,0,12,0" Mode="{Binding FilterMode}"/>
109+
<v:FilterModeSwitchButton Grid.Column="2" Margin="0,0,8,0" Mode="{Binding FilterMode}"/>
108110
</Grid>
109111
</Border>
110112
</DataTemplate>

0 commit comments

Comments
 (0)