Skip to content

Commit 707a227

Browse files
love-lingerlove-linger
committed
ux: make Welcome page responsive (#821)
1 parent f418b72 commit 707a227

File tree

1 file changed

+132
-133
lines changed

1 file changed

+132
-133
lines changed

‎src/Views/Welcome.axaml‎

Lines changed: 132 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -9,149 +9,148 @@
99
x:Class="SourceGit.Views.Welcome"
1010
x:DataType="vm:Welcome">
1111
<Grid RowDefinitions="*,36">
12-
<Grid Grid.Row="0" Margin="0,8" ColumnDefinitions="*,600,*">
13-
<Grid Grid.Column="1" RowDefinitions="Auto,*">
14-
<!-- Search Box -->
15-
<TextBox Grid.Row="0"
16-
x:Name="SearchBox"
17-
Height="32"
18-
Padding="0"
19-
CornerRadius="16"
20-
BorderBrush="{DynamicResource Brush.Border0}"
21-
BorderThickness="1"
22-
Background="{DynamicResource Brush.Contents}"
23-
Watermark="{DynamicResource Text.Welcome.Search}"
24-
VerticalContentAlignment="Center"
25-
Text="{Binding SearchFilter, Mode=TwoWay}"
26-
v:AutoFocusBehaviour.IsEnabled="True">
27-
<TextBox.Styles>
28-
<Style Selector="TextBox:pointerover /template/ Border#PART_BorderElement">
29-
<Setter Property="BorderBrush" Value="{DynamicResource Brush.Border0}"/>
30-
</Style>
31-
<Style Selector="TextBox:focus /template/ Border#PART_BorderElement">
32-
<Setter Property="BorderBrush" Value="{DynamicResource Brush.Border0}"/>
33-
</Style>
34-
</TextBox.Styles>
35-
36-
<TextBox.InnerLeftContent>
37-
<Path Width="16" Height="16" Margin="6,0,3,0" Data="{StaticResource Icons.Search}" Fill="{DynamicResource Brush.FG2}"/>
38-
</TextBox.InnerLeftContent>
12+
<!-- Managed Repositories -->
13+
<Grid Grid.Column="1" MinWidth="600" Margin="8" RowDefinitions="Auto,*" HorizontalAlignment="Center">
14+
<!-- Search Box -->
15+
<TextBox Grid.Row="0"
16+
x:Name="SearchBox"
17+
Height="32"
18+
Padding="0"
19+
CornerRadius="16"
20+
BorderBrush="{DynamicResource Brush.Border0}"
21+
BorderThickness="1"
22+
Background="{DynamicResource Brush.Contents}"
23+
Watermark="{DynamicResource Text.Welcome.Search}"
24+
VerticalContentAlignment="Center"
25+
Text="{Binding SearchFilter, Mode=TwoWay}"
26+
v:AutoFocusBehaviour.IsEnabled="True">
27+
<TextBox.Styles>
28+
<Style Selector="TextBox:pointerover /template/ Border#PART_BorderElement">
29+
<Setter Property="BorderBrush" Value="{DynamicResource Brush.Border0}"/>
30+
</Style>
31+
<Style Selector="TextBox:focus /template/ Border#PART_BorderElement">
32+
<Setter Property="BorderBrush" Value="{DynamicResource Brush.Border0}"/>
33+
</Style>
34+
</TextBox.Styles>
3935

40-
<TextBox.InnerRightContent>
41-
<Button Classes="icon_button" IsVisible="{Binding SearchFilter, Converter={x:Static StringConverters.IsNotNullOrEmpty}}" Command="{Binding ClearSearchFilter}">
42-
<Path Width="16" Height="16" Margin="0,0,0,0" Data="{StaticResource Icons.Clear}" Fill="{DynamicResource Brush.FG1}"/>
43-
</Button>
44-
</TextBox.InnerRightContent>
45-
</TextBox>
36+
<TextBox.InnerLeftContent>
37+
<Path Width="16" Height="16" Margin="6,0,3,0" Data="{StaticResource Icons.Search}" Fill="{DynamicResource Brush.FG2}"/>
38+
</TextBox.InnerLeftContent>
4639

47-
<!-- Repository Tree -->
48-
<v:RepositoryListBox Grid.Row="1"
49-
x:Name="TreeContainer"
50-
Margin="0,8,8,0"
51-
Focusable="True"
52-
Background="Transparent"
53-
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
54-
ScrollViewer.VerticalScrollBarVisibility="Auto"
55-
ItemsSource="{Binding Rows}"
56-
SelectionMode="Single"
57-
Loaded="SetupTreeViewDragAndDrop"
58-
LostFocus="OnTreeViewLostFocus"
59-
KeyDown="OnTreeViewKeyDown">
60-
<ListBox.Styles>
61-
<Style Selector="ListBox">
62-
<Setter Property="FocusAdorner">
63-
<FocusAdornerTemplate>
64-
<Border Background="Transparent" BorderThickness="0"/>
65-
</FocusAdornerTemplate>
66-
</Setter>
67-
</Style>
68-
69-
<Style Selector="ListBoxItem" x:DataType="vm:RepositoryNode">
70-
<Setter Property="Margin" Value="0"/>
71-
<Setter Property="Padding" Value="0"/>
72-
<Setter Property="Height" Value="30"/>
73-
<Setter Property="CornerRadius" Value="4"/>
74-
<Setter Property="FocusAdorner">
75-
<FocusAdornerTemplate>
76-
<Border Background="Transparent" BorderThickness="0"/>
77-
</FocusAdornerTemplate>
78-
</Setter>
79-
</Style>
80-
</ListBox.Styles>
40+
<TextBox.InnerRightContent>
41+
<Button Classes="icon_button" IsVisible="{Binding SearchFilter, Converter={x:Static StringConverters.IsNotNullOrEmpty}}" Command="{Binding ClearSearchFilter}">
42+
<Path Width="16" Height="16" Margin="0,0,0,0" Data="{StaticResource Icons.Clear}" Fill="{DynamicResource Brush.FG1}"/>
43+
</Button>
44+
</TextBox.InnerRightContent>
45+
</TextBox>
8146

82-
<ListBox.ItemsPanel>
83-
<ItemsPanelTemplate>
84-
<VirtualizingStackPanel Orientation="Vertical"/>
85-
</ItemsPanelTemplate>
86-
</ListBox.ItemsPanel>
47+
<!-- Repository Tree -->
48+
<v:RepositoryListBox Grid.Row="1"
49+
x:Name="TreeContainer"
50+
Margin="0,8,8,0"
51+
Focusable="True"
52+
Background="Transparent"
53+
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
54+
ScrollViewer.VerticalScrollBarVisibility="Auto"
55+
ItemsSource="{Binding Rows}"
56+
SelectionMode="Single"
57+
Loaded="SetupTreeViewDragAndDrop"
58+
LostFocus="OnTreeViewLostFocus"
59+
KeyDown="OnTreeViewKeyDown">
60+
<ListBox.Styles>
61+
<Style Selector="ListBox">
62+
<Setter Property="FocusAdorner">
63+
<FocusAdornerTemplate>
64+
<Border Background="Transparent" BorderThickness="0"/>
65+
</FocusAdornerTemplate>
66+
</Setter>
67+
</Style>
8768

88-
<ListBox.ContextMenu>
89-
<ContextMenu>
90-
<MenuItem Header="{DynamicResource Text.Welcome.AddRootFolder}" Command="{Binding AddRootNode}">
91-
<MenuItem.Icon>
92-
<Path Width="12" Height="12" Data="{DynamicResource Icons.Folder.Add}"/>
93-
</MenuItem.Icon>
94-
</MenuItem>
95-
</ContextMenu>
96-
</ListBox.ContextMenu>
69+
<Style Selector="ListBoxItem" x:DataType="vm:RepositoryNode">
70+
<Setter Property="Margin" Value="0"/>
71+
<Setter Property="Padding" Value="0"/>
72+
<Setter Property="Height" Value="30"/>
73+
<Setter Property="CornerRadius" Value="4"/>
74+
<Setter Property="FocusAdorner">
75+
<FocusAdornerTemplate>
76+
<Border Background="Transparent" BorderThickness="0"/>
77+
</FocusAdornerTemplate>
78+
</Setter>
79+
</Style>
80+
</ListBox.Styles>
9781

98-
<ListBox.ItemTemplate>
99-
<DataTemplate DataType="vm:RepositoryNode">
100-
<Grid Background="Transparent"
101-
Height="30"
102-
ColumnDefinitions="16,18,Auto,*"
103-
Margin="{Binding Depth, Converter={x:Static c:IntConverters.ToTreeMargin}}"
104-
Loaded="SetupTreeNodeDragAndDrop"
105-
ContextRequested="OnTreeNodeContextRequested"
106-
PointerPressed="OnPointerPressedTreeNode"
107-
PointerMoved="OnPointerMovedOverTreeNode"
108-
PointerReleased="OnPointerReleasedOnTreeNode"
109-
DoubleTapped="OnDoubleTappedTreeNode"
110-
ClipToBounds="True">
111-
<v:RepositoryTreeNodeToggleButton Grid.Column="0"
112-
Classes="tree_expander"
113-
Focusable="False"
114-
HorizontalAlignment="Center"
115-
IsChecked="{Binding IsExpanded, Mode=OneWay}"
116-
IsVisible="{Binding !IsRepository}"/>
117-
118-
<Path Grid.Column="1"
119-
Width="14" Height="14"
120-
Fill="{Binding Bookmark, Converter={x:Static c:IntConverters.ToBookmarkBrush}}"
121-
HorizontalAlignment="Center"
122-
Data="{StaticResource Icons.Bookmark}"
123-
IsVisible="{Binding IsRepository}"/>
82+
<ListBox.ItemsPanel>
83+
<ItemsPanelTemplate>
84+
<VirtualizingStackPanel Orientation="Vertical"/>
85+
</ItemsPanelTemplate>
86+
</ListBox.ItemsPanel>
12487

125-
<ToggleButton Grid.Column="1"
126-
Classes="folder"
127-
Focusable="False"
128-
Width="14" Height="14"
129-
HorizontalAlignment="Left"
130-
Foreground="{DynamicResource Brush.FG1}"
131-
IsChecked="{Binding IsExpanded}"
132-
IsVisible="{Binding !IsRepository}"/>
88+
<ListBox.ContextMenu>
89+
<ContextMenu>
90+
<MenuItem Header="{DynamicResource Text.Welcome.AddRootFolder}" Command="{Binding AddRootNode}">
91+
<MenuItem.Icon>
92+
<Path Width="12" Height="12" Data="{DynamicResource Icons.Folder.Add}"/>
93+
</MenuItem.Icon>
94+
</MenuItem>
95+
</ContextMenu>
96+
</ListBox.ContextMenu>
13397

134-
<StackPanel Grid.Column="2" Orientation="Horizontal">
135-
<TextBlock Classes="primary" VerticalAlignment="Center" Text="{Binding Name}"/>
136-
<Path Margin="2,0,0,0"
137-
Width="12" Height="12"
138-
Data="{StaticResource Icons.Error}"
139-
Fill="Orange"
140-
IsVisible="{Binding IsInvalid}"/>
141-
</StackPanel>
142-
143-
<TextBlock Grid.Column="3"
144-
Classes="primary"
145-
Margin="8,0"
146-
HorizontalAlignment="Right" VerticalAlignment="Center"
98+
<ListBox.ItemTemplate>
99+
<DataTemplate DataType="vm:RepositoryNode">
100+
<Grid Background="Transparent"
101+
Height="30"
102+
ColumnDefinitions="16,18,Auto,*"
103+
Margin="{Binding Depth, Converter={x:Static c:IntConverters.ToTreeMargin}}"
104+
Loaded="SetupTreeNodeDragAndDrop"
105+
ContextRequested="OnTreeNodeContextRequested"
106+
PointerPressed="OnPointerPressedTreeNode"
107+
PointerMoved="OnPointerMovedOverTreeNode"
108+
PointerReleased="OnPointerReleasedOnTreeNode"
109+
DoubleTapped="OnDoubleTappedTreeNode"
110+
ClipToBounds="True">
111+
<v:RepositoryTreeNodeToggleButton Grid.Column="0"
112+
Classes="tree_expander"
113+
Focusable="False"
114+
HorizontalAlignment="Center"
115+
IsChecked="{Binding IsExpanded, Mode=OneWay}"
116+
IsVisible="{Binding !IsRepository}"/>
117+
118+
<Path Grid.Column="1"
119+
Width="14" Height="14"
120+
Fill="{Binding Bookmark, Converter={x:Static c:IntConverters.ToBookmarkBrush}}"
121+
HorizontalAlignment="Center"
122+
Data="{StaticResource Icons.Bookmark}"
123+
IsVisible="{Binding IsRepository}"/>
124+
125+
<ToggleButton Grid.Column="1"
126+
Classes="folder"
127+
Focusable="False"
128+
Width="14" Height="14"
129+
HorizontalAlignment="Left"
130+
Foreground="{DynamicResource Brush.FG1}"
131+
IsChecked="{Binding IsExpanded}"
132+
IsVisible="{Binding !IsRepository}"/>
133+
134+
<StackPanel Grid.Column="2" Orientation="Horizontal">
135+
<TextBlock Classes="primary" VerticalAlignment="Center" Text="{Binding Name}"/>
136+
<Path Margin="2,0,0,0"
137+
Width="12" Height="12"
138+
Data="{StaticResource Icons.Error}"
139+
Fill="Orange"
140+
IsVisible="{Binding IsInvalid}"/>
141+
</StackPanel>
142+
143+
<Border Grid.Column="3" Margin="8,0" VerticalAlignment="Center" ClipToBounds="True">
144+
<TextBlock Classes="primary"
145+
HorizontalAlignment="Right"
147146
Foreground="{DynamicResource Brush.FG2}"
148147
Text="{Binding Id, Converter={x:Static c:PathConverters.RelativeToHome}}"
149148
IsVisible="{Binding IsRepository}"/>
150-
</Grid>
151-
</DataTemplate>
152-
</ListBox.ItemTemplate>
153-
</v:RepositoryListBox>
154-
</Grid>
149+
</Border>
150+
</Grid>
151+
</DataTemplate>
152+
</ListBox.ItemTemplate>
153+
</v:RepositoryListBox>
155154
</Grid>
156155

157156
<!-- Tips -->

0 commit comments

Comments
 (0)