ux: new design for repository left side bar

src/Converters/BoolConverters.cs

@@ -1,4 +1,7 @@
-using Avalonia.Data.Converters;
+using System;
+using System.Globalization;
+
+using Avalonia.Data.Converters;
 using Avalonia.Media;
 
 namespace SourceGit.Converters
@@ -13,5 +16,21 @@ namespace SourceGit.Converters
 
         public static readonly FuncValueConverter<bool, FontWeight> BoldIfTrue =
             new FuncValueConverter<bool, FontWeight>(x => x ? FontWeight.Bold : FontWeight.Regular);
+
+        public class InverseConverter : IValueConverter
+        {
+            public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+            {
+                return !(bool)value;
+            }
+
+            public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+            {
+                return !(bool)value;
+            }
+        }
+
+        public static readonly InverseConverter Inverse = new InverseConverter();
+
     }
 }

src/Resources/Icons.axaml

@@ -103,4 +103,5 @@
   <StreamGeometry x:Key="Icons.Track">M897 673v13c0 51-42 93-93 93h-10c-1 0-2 0-2 0H220c-23 0-42 19-42 42v13c0 23 19 42 42 42h552c14 0 26 12 26 26 0 14-12 26-26 26H220c-51 0-93-42-93-93v-13c0-51 42-93 93-93h20c1-0 2-0 2-0h562c23 0 42-19 42-42v-13c0-11-5-22-13-29-8-7-17-11-28-10H660c-14 0-26-12-26-26 0-14 12-26 26-26h144c24-1 47 7 65 24 18 17 29 42 29 67zM479 98c-112 0-203 91-203 203 0 44 14 85 38 118l132 208c15 24 50 24 66 0l133-209c23-33 37-73 37-117 0-112-91-203-203-203zm0 327c-68 0-122-55-122-122s55-122 122-122 122 55 122 122-55 122-122 122z</StreamGeometry>
   <StreamGeometry x:Key="Icons.Whitespace">M416 64H768v64h-64v704h64v64H448v-64h64V512H416a224 224 0 1 1 0-448zM576 832h64V128H576v704zM416 128H512v320H416a160 160 0 0 1 0-320z</StreamGeometry>
   <StreamGeometry x:Key="Icons.InteractiveRebase">M512 64A447 447 0 0064 512c0 248 200 448 448 448s448-200 448-448S760 64 512 64zM218 295h31c54 0 105 19 145 55 13 12 13 31 3 43a35 35 0 01-22 10 36 36 0 01-21-7 155 155 0 00-103-39h-31a32 32 0 01-31-31c0-18 13-31 30-31zm31 433h-31a32 32 0 01-31-31c0-16 13-31 31-31h31A154 154 0 00403 512 217 217 0 01620 295h75l-93-67a33 33 0 01-7-43 33 33 0 0143-7l205 148-205 148a29 29 0 01-18 6 32 32 0 01-31-31c0-10 4-19 13-25l93-67H620a154 154 0 00-154 154c0 122-97 220-217 220zm390 118a29 29 0 01-18 6 32 32 0 01-31-31c0-10 4-19 13-25l93-67h-75c-52 0-103-19-143-54-12-12-13-31-1-43a30 30 0 0142-3 151 151 0 00102 39h75L602 599a33 33 0 01-7-43 33 33 0 0143-7l205 148-203 151z</StreamGeometry>
+  <StreamGeometry x:Key="Icons.Home">M832 64h128v278l-128-146V64zm64 448L512 73 128 512H0L448 0h128l448 512h-128zm0 83V1024H640V704c0-35-29-64-64-64h-128a64 64 0 00-64 64v320H128V595l384-424 384 424z</StreamGeometry>
 </ResourceDictionary>

src/Resources/Locales/en_US.axaml

@@ -435,7 +435,6 @@
   <x:String x:Key="Text.Repository.Tags" xml:space="preserve">TAGS</x:String>
   <x:String x:Key="Text.Repository.Tags.Add" xml:space="preserve">NEW TAG</x:String>
   <x:String x:Key="Text.Repository.Terminal" xml:space="preserve">Open In Terminal</x:String>
-  <x:String x:Key="Text.Repository.Workspace" xml:space="preserve">WORKSPACE</x:String>
   <x:String x:Key="Text.RepositoryURL" xml:space="preserve">Git Repository URL</x:String>
   <x:String x:Key="Text.Reset" xml:space="preserve">Reset Current Branch To Revision</x:String>
   <x:String x:Key="Text.Reset.Mode" xml:space="preserve">Reset Mode:</x:String>

src/Resources/Locales/zh_CN.axaml

@@ -437,7 +437,6 @@
   <x:String x:Key="Text.Repository.Tags" xml:space="preserve">标签列表</x:String>
   <x:String x:Key="Text.Repository.Tags.Add" xml:space="preserve">新建标签</x:String>
   <x:String x:Key="Text.Repository.Terminal" xml:space="preserve">在终端中打开</x:String>
-  <x:String x:Key="Text.Repository.Workspace" xml:space="preserve">工作区</x:String>
   <x:String x:Key="Text.RepositoryURL" xml:space="preserve">远程仓库地址</x:String>
   <x:String x:Key="Text.Reset" xml:space="preserve">重置(reset)当前分支到指定版本</x:String>
   <x:String x:Key="Text.Reset.Mode" xml:space="preserve">重置模式 ：</x:String>

src/Resources/Locales/zh_TW.axaml

@@ -437,7 +437,6 @@
   <x:String x:Key="Text.Repository.Tags" xml:space="preserve">標籤列表</x:String>
   <x:String x:Key="Text.Repository.Tags.Add" xml:space="preserve">新建標籤</x:String>
   <x:String x:Key="Text.Repository.Terminal" xml:space="preserve">在終端中開啟</x:String>
-  <x:String x:Key="Text.Repository.Workspace" xml:space="preserve">工作區</x:String>
   <x:String x:Key="Text.RepositoryURL" xml:space="preserve">遠端倉庫地址</x:String>
   <x:String x:Key="Text.Reset" xml:space="preserve">重置(reset)當前分支到指定版本</x:String>
   <x:String x:Key="Text.Reset.Mode" xml:space="preserve">重置模式 ：</x:String>

src/Resources/Styles.axaml

@@ -972,6 +972,30 @@
     </Style>
   </Style>
 
+  <Style Selector="RadioButton.icon_button">
+    <Setter Property="BorderThickness" Value="0"/>
+    <Setter Property="Background" Value="Transparent"/>
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border Background="Transparent">
+          <ContentPresenter x:Name="PART_ContentPresenter"
+                            Margin="0"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            Foreground="{TemplateBinding Foreground}"
+                            RecognizesAccessKey="True" />
+        </Border>
+      </ControlTemplate>
+    </Setter>
+
+    <Style Selector="^:checked Path">
+      <Setter Property="Fill" Value="{DynamicResource Brush.Accent}"/>
+      <Setter Property="Opacity" Value="0.65"/>
+    </Style>
+  </Style>
+
   <Style Selector="ToggleButton.group_expander">
     <Setter Property="Margin" Value="0"/>
     <Setter Property="Padding" Value="0"/>

src/Views/Launcher.axaml.cs

@@ -129,12 +129,6 @@ namespace SourceGit.Views
             else if (e.Key == Key.Escape)
             {
                 vm.ActivePage.CancelPopup();
-
-                if (vm.ActivePage.Data is ViewModels.Repository repo)
-                {
-                    repo.IsSearching = false;
-                }
-
                 e.Handled = true;
                 return;
             }

src/Views/Repository.axaml

@@ -25,18 +25,6 @@
           <Button Classes="icon_button" Width="32" Click="OpenWithExternalTools" ToolTip.Tip="{DynamicResource Text.Repository.OpenWithExternalTools}">
             <Path Width="13" Height="13" Data="{StaticResource Icons.OpenWith}"/>
           </Button>
-          
-          <ToggleButton Width="32"
-                        Background="Transparent"
-                        IsChecked="{Binding IsSearching, Mode=TwoWay}">
-            <ToolTip.Tip>
-              <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
-                <TextBlock Text="{DynamicResource Text.Repository.Search}" VerticalAlignment="Center"/>
-                <TextBlock Margin="16,0,0,0" Text="{OnPlatform Ctrl+F, macOS=⌘+F}" Opacity=".6" FontSize="11" VerticalAlignment="Center"/>
-              </StackPanel>
-            </ToolTip.Tip>
-            <Path Width="14" Height="14" Data="{StaticResource Icons.Search}"/>
-          </ToggleButton>
         </StackPanel>
 
         <StackPanel Grid.Column="1" Orientation="Horizontal">
@@ -79,16 +67,6 @@
         </StackPanel>
 
         <StackPanel Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,0,4,0">
-          <ToggleButton Classes="layout_direction"
-                        Width="32" Height="26"
-                        IsChecked="{Binding Source={x:Static vm:Preference.Instance}, Path=UseTwoColumnsLayoutInHistories, Mode=TwoWay}"
-                        IsVisible="{Binding SelectedViewIndex, Converter={x:Static c:IntConverters.IsZero}}"
-                        ToolTip.Tip="{DynamicResource Text.Histories.DisplayMode}"/>
-
-          <Button Classes="icon_button" Width="32" Command="{Binding NavigateToCurrentHead}" ToolTip.Tip="{DynamicResource Text.Repository.NavigateToCurrentHead}">
-            <Path Width="14" Height="14" Data="{StaticResource Icons.Target}"/>
-          </Button>
-
           <Button Classes="icon_button" Width="32" Command="{Binding Cleanup}" ToolTip.Tip="{DynamicResource Text.Repository.Clean}">
             <Path Width="14" Height="14" Data="{StaticResource Icons.Clean}"/>
           </Button>
@@ -112,11 +90,10 @@
         <ColumnDefinition Width="*"/>
       </Grid.ColumnDefinitions>
 
-      <!-- Left Normal Mode -->
-      <Grid Grid.Column="0" Classes="repository_leftpanel" RowDefinitions="28,Auto,28,28,Auto,28,*,28,Auto,28,Auto" Margin="0,0,0,4" IsVisible="{Binding !IsSearching}">
-        <!-- WorkingCopy -->
-        <TextBlock Grid.Row="0" Classes="group_header_label" Text="{DynamicResource Text.Repository.Workspace}"/>
-        <ListBox Grid.Row="1" Margin="8,4,4,0" Classes="page_switcher" Background="Transparent" SelectedIndex="{Binding SelectedViewIndex, Mode=TwoWay}">
+      <!-- Left Panel -->
+      <Grid Grid.Column="0" Classes="repository_leftpanel" RowDefinitions="Auto,Auto,*">
+        <!-- Page Switcher for Right Panel -->
+        <ListBox Grid.Row="0" Margin="8,4,4,0" Classes="page_switcher" Background="Transparent" SelectedIndex="{Binding SelectedViewIndex, Mode=TwoWay}">
           <ListBox.ItemsPanel>
             <ItemsPanelTemplate>
               <StackPanel Orientation="Vertical"/>
@@ -124,9 +101,17 @@
           </ListBox.ItemsPanel>
 
           <ListBoxItem Height="28" BorderThickness="1,1,1,1" CornerRadius="6,6,0,0">
-            <Grid Height="28" ColumnDefinitions="32,*">
+            <Grid Height="28" ColumnDefinitions="32,*,Auto,Auto">
               <Path Grid.Column="0" Width="12" Height="12" Data="{StaticResource Icons.Histories}"/>
               <TextBlock Grid.Column="1" Classes="monospace" Text="{DynamicResource Text.Histories}"/>
+              <ToggleButton Grid.Column="2" 
+                            Classes="layout_direction"
+                            Width="32" Height="26"
+                            IsChecked="{Binding Source={x:Static vm:Preference.Instance}, Path=UseTwoColumnsLayoutInHistories, Mode=TwoWay}"
+                            ToolTip.Tip="{DynamicResource Text.Histories.DisplayMode}"/>
+              <Button Grid.Column="3" Classes="icon_button" Width="32" Command="{Binding NavigateToCurrentHead}" ToolTip.Tip="{DynamicResource Text.Repository.NavigateToCurrentHead}">
+                <Path Width="14" Height="14" Data="{StaticResource Icons.Target}" Fill="{DynamicResource Brush.FG1}"/>
+              </Button>
             </Grid>
           </ListBoxItem>
 
@@ -163,10 +148,37 @@
           </ListBoxItem>
         </ListBox>
 
-        <!-- Filter Branches -->
-        <TextBox Grid.Row="2"
-                 Margin="8,6,4,0"
+        <!-- Page Switcher for Left Contents (Dashboard or CommitSearch) -->
+        <Grid Grid.Row="1" Height="24" Margin="0,6" HorizontalAlignment="Center" ColumnDefinitions="48,1,48">
+          <Border Grid.Column="0" Grid.ColumnSpan="3"
                   Height="24"
+                  BorderThickness="1" BorderBrush="{DynamicResource Brush.Border2}"
+                  CornerRadius="12"/>
+
+          <RadioButton Grid.Column="0" 
+                       Classes="icon_button"
+                       Width="48"
+                       GroupName="SearchGroup" 
+                       IsChecked="{Binding IsSearching, Mode=TwoWay, Converter={x:Static c:BoolConverters.Inverse}}">
+            <Path Width="14" Height="14" Stretch="Fill" HorizontalAlignment="Center" Data="{StaticResource Icons.Home}"/>
+          </RadioButton>
+          
+          <Rectangle Grid.Column="1" Width="0.65" HorizontalAlignment="Center" VerticalAlignment="Stretch" Fill="{DynamicResource Brush.Border2}"/>
+
+          <RadioButton Grid.Column="2"
+                       Width="48"
+                       Classes="icon_button"
+                       GroupName="SearchGroup">
+            <Path Width="14" Height="14" Stretch="Fill" HorizontalAlignment="Center" Data="{StaticResource Icons.Search}"/>
+          </RadioButton>
+        </Grid>
+        
+        <!-- Dashboard -->
+        <Grid Grid.Row="2" RowDefinitions="Auto,28,Auto,28,*,28,Auto,28,Auto" IsVisible="{Binding !IsSearching}">
+          <!-- Filter Branches -->
+          <TextBox Grid.Row="0"
+                   Height="24"
+                   Margin="8,0,4,4"
                    BorderThickness="1"
                    CornerRadius="4"
                    BorderBrush="{DynamicResource Brush.Border2}"
@@ -197,11 +209,11 @@
           </TextBox>
 
           <!-- Local Branches -->
-        <TextBlock Grid.Row="3" Classes="group_header_label" Text="{DynamicResource Text.Repository.LocalBranches}"/>
-        <TreeView Grid.Row="4"
+          <TextBlock Grid.Row="1" Classes="group_header_label" Text="{DynamicResource Text.Repository.LocalBranches}"/>
+          <TreeView Grid.Row="2"
                     x:Name="localBranchTree"
                     MaxHeight="400"
-                  Margin="4,0,2,0"
+                    Margin="8,0,4,0"
                     SelectionMode="Multiple"
                     ItemsSource="{Binding LocalBranchTrees}"
                     ScrollViewer.HorizontalScrollBarVisibility="Disabled"
@@ -266,15 +278,15 @@
           </TreeView>
 
           <!-- Remotes -->
-        <Grid Grid.Row="5" ColumnDefinitions="*,Auto">
+          <Grid Grid.Row="3" ColumnDefinitions="*,Auto">
             <TextBlock Grid.Column="0" Classes="group_header_label" Text="{DynamicResource Text.Repository.Remotes}"/>
             <Button Grid.Column="1" Classes="icon_button" Width="14" Margin="8,0" Command="{Binding AddRemote}" ToolTip.Tip="{DynamicResource Text.Repository.Remotes.Add}">
               <Path Width="12" Height="12" Data="{StaticResource Icons.Remote.Add}"/>
             </Button>
           </Grid>
-        <TreeView Grid.Row="6"
+          <TreeView Grid.Row="4"
                     x:Name="remoteBranchTree"
-                  Margin="4,0,2,0"
+                    Margin="8,0,4,0"
                     SelectionMode="Multiple"
                     ItemsSource="{Binding RemoteBranchTrees}"
                     ScrollViewer.HorizontalScrollBarVisibility="Disabled"
@@ -329,7 +341,7 @@
           </TreeView>
 
           <!-- Tags -->
-        <ToggleButton Grid.Row="7" Classes="group_expander" IsChecked="{Binding IsTagGroupExpanded, Mode=TwoWay}">
+          <ToggleButton Grid.Row="5" Classes="group_expander" IsChecked="{Binding IsTagGroupExpanded, Mode=TwoWay}">
             <Grid ColumnDefinitions="Auto,*,Auto">
               <TextBlock Grid.Column="0" Classes="group_header_label" Margin="4,0,0,0" Text="{DynamicResource Text.Repository.Tags}"/>
               <TextBlock Grid.Column="1" Text="{Binding Tags, Converter={x:Static c:ListConverters.ToCount}}" Foreground="{DynamicResource Brush.FG2}" FontWeight="Bold"/>
@@ -338,10 +350,10 @@
               </Button>
             </Grid>
           </ToggleButton>
-        <DataGrid Grid.Row="8"
+          <DataGrid Grid.Row="6"
                     x:Name="tagsList"
                     MaxHeight="200"
-                  Margin="4,0,2,0"
+                    Margin="8,0,4,0"
                     Background="Transparent"
                     ItemsSource="{Binding Tags}"
                     SelectionMode="Single"
@@ -417,7 +429,7 @@
           </DataGrid>
 
           <!-- Submodules -->
-        <ToggleButton Grid.Row="9" Classes="group_expander" IsChecked="{Binding IsSubmoduleGroupExpanded, Mode=TwoWay}">
+          <ToggleButton Grid.Row="7" Classes="group_expander" IsChecked="{Binding IsSubmoduleGroupExpanded, Mode=TwoWay}">
             <Grid ColumnDefinitions="Auto,*,Auto,Auto">
               <TextBlock Grid.Column="0" Classes="group_header_label" Margin="4,0,0,0" Text="{DynamicResource Text.Repository.Submodules}"/>
               <TextBlock Grid.Column="1" Text="{Binding Submodules, Converter={x:Static c:ListConverters.ToCount}}" Foreground="{DynamicResource Brush.FG2}" FontWeight="Bold"/>
@@ -440,9 +452,9 @@
               </Button>
             </Grid>
           </ToggleButton>
-        <DataGrid Grid.Row="10"
+          <DataGrid Grid.Row="8"
                     MaxHeight="200"
-                  Margin="4,0,6,0"
+                    Margin="8,0,4,0"
                     Background="Transparent"
                     ItemsSource="{Binding Submodules}"
                     SelectionMode="Single"
@@ -496,12 +508,11 @@
           </DataGrid>
         </Grid>
 
-      <!-- Left Search Mode -->
-      <Grid Grid.Column="0" RowDefinitions="32,32,*" IsVisible="{Binding IsSearching}" PropertyChanged="OnSearchCommitPanelPropertyChanged">
-        <!-- Search -->
+        <!-- Commit Search Panel -->
+        <Grid Grid.Row="2" RowDefinitions="Auto,32,*" Margin="8,0,4,8" IsVisible="{Binding IsSearching}" PropertyChanged="OnSearchCommitPanelPropertyChanged">
+          <!-- Search Input Box -->
           <TextBox Grid.Row="0"
                    x:Name="txtSearchCommitsBox"
-                 Margin="4,2,4,0"
                    Height="24"
                    BorderThickness="1"
                    BorderBrush="{DynamicResource Brush.Border2}"
@@ -533,7 +544,7 @@
             </TextBox.InnerRightContent>
           </TextBox>
 
-        <Grid Grid.Row="1" ColumnDefinitions="Auto,*" Margin="4,0">
+          <Grid Grid.Row="1" ColumnDefinitions="Auto,*">
             <TextBlock Grid.Column="0"
                        Text="{DynamicResource Text.Repository.Search.By}"
                        Foreground="{DynamicResource Brush.FG2}"
@@ -567,7 +578,6 @@
                     BorderThickness="1"
                     BorderBrush="{DynamicResource Brush.Border2}"
                     Background="{DynamicResource Brush.Contents}"
-                  Margin="4,0,4,4"
                     CornerRadius="4"
                     HorizontalScrollBarVisibility="Disabled"
                     VerticalScrollBarVisibility="Auto"
@@ -604,6 +614,7 @@
                 Fill="{DynamicResource Brush.FG2}"
                 IsVisible="{Binding SearchedCommits.Count, Converter={x:Static c:IntConverters.IsZero}}"/>
         </Grid>
+      </Grid>
 
       <!-- Splitter -->
       <GridSplitter Grid.Column="1"