From d2ea90be232dfcb76f0e4e24bf026990e8ff0732 Mon Sep 17 00:00:00 2001
From: leo <longshuang@msn.cn>
Date: Tue, 4 Jun 2024 17:29:08 +0800
Subject: [PATCH] ux: Opacity for selected items

---
 src/Resources/Styles.axaml   | 58 ++++++++++++++++++++++--------------
 src/Views/CommitDetail.axaml | 15 ++++++++--
 src/Views/Repository.axaml   | 43 +++++++++++++++++++++-----
 3 files changed, 82 insertions(+), 34 deletions(-)

diff --git a/src/Resources/Styles.axaml b/src/Resources/Styles.axaml
index c373d891..114ac72d 100644
--- a/src/Resources/Styles.axaml
+++ b/src/Resources/Styles.axaml
@@ -1045,32 +1045,33 @@
       <ControlTemplate>
         <StackPanel>
           <Border Name="PART_LayoutRoot"
-                  Classes="TreeViewItemLayoutRoot"
-                  Focusable="True"
-                  Background="{TemplateBinding Background}"
-                  BorderBrush="{TemplateBinding BorderBrush}"
-                  BorderThickness="{TemplateBinding BorderThickness}"
-                  CornerRadius="{TemplateBinding CornerRadius}"
+                  Background="Transparent"
+                  BorderThickness="0"
+                  CornerRadius="0"
                   MinHeight="{TemplateBinding MinHeight}"
                   TemplatedControl.IsTemplateFocusTarget="True">
-            <Grid Name="PART_Header" ColumnDefinitions="16,*" Margin="{TemplateBinding Level, Mode=OneWay, Converter={StaticResource TreeViewItemLeftMarginConverter}}">
-              <Panel Name="PART_ExpandCollapseChevronContainer">
-                <ToggleButton Name="PART_ExpandCollapseChevron"
-                              Classes="tree_expander"
-                              Focusable="False"
-                              HorizontalAlignment="Center"
-                              IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" />
-              </Panel>
-              <ContentPresenter Name="PART_HeaderPresenter"
-                                Grid.Column="1"
+            <Grid>
+              <Border Name="PART_Background" CornerRadius="{TemplateBinding CornerRadius}" Background="Transparent"/>
+              
+              <Grid Name="PART_Header" ColumnDefinitions="16,*" Margin="{TemplateBinding Level, Mode=OneWay, Converter={StaticResource TreeViewItemLeftMarginConverter}}">
+                <Panel Name="PART_ExpandCollapseChevronContainer">
+                  <ToggleButton Name="PART_ExpandCollapseChevron"
+                                Classes="tree_expander"
                                 Focusable="False"
-                                Background="Transparent"
-                                Content="{TemplateBinding Header}"
-                                ContentTemplate="{TemplateBinding HeaderTemplate}"
-                                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
-                                VerticalAlignment="{TemplateBinding VerticalAlignment}"
-                                Margin="{TemplateBinding Padding}" />
-            </Grid>
+                                HorizontalAlignment="Center"
+                                IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}" />
+                </Panel>
+                <ContentPresenter Name="PART_HeaderPresenter"
+                                  Grid.Column="1"
+                                  Focusable="False"
+                                  Background="Transparent"
+                                  Content="{TemplateBinding Header}"
+                                  ContentTemplate="{TemplateBinding HeaderTemplate}"
+                                  HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                                  VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                                  Margin="{TemplateBinding Padding}" />
+              </Grid>
+            </Grid>            
           </Border>
           <ItemsPresenter Name="PART_ItemsPresenter"
                           IsVisible="{TemplateBinding IsExpanded}"
@@ -1080,11 +1081,22 @@
     </Setter>
 
     <Style Selector="^ /template/ Border#PART_LayoutRoot:pointerover">
+      <Setter Property="Background" Value="Transparent" />
+    </Style>
+    <Style Selector="^ /template/ Border#PART_LayoutRoot:pointerover Border#PART_Background">
       <Setter Property="Background" Value="{DynamicResource Brush.AccentHovered}" />
     </Style>
 
     <Style Selector="^:selected /template/ Border#PART_LayoutRoot">
+      <Setter Property="Background" Value="Transparent" />
+    </Style>
+    <Style Selector="^:selected /template/ Border#PART_LayoutRoot Border#PART_Background">
       <Setter Property="Background" Value="{DynamicResource Brush.Accent}" />
+      <Setter Property="Opacity" Value=".4"/>
+    </Style>
+    <Style Selector="^:selected /template/ Border#PART_LayoutRoot:pointerover Border#PART_Background">
+      <Setter Property="Background" Value="{DynamicResource Brush.Accent}" />
+      <Setter Property="Opacity" Value=".65"/>
     </Style>
   </Style>
   <Style Selector="TreeViewItem[IsExpanded=True] Path.folder_icon">
diff --git a/src/Views/CommitDetail.axaml b/src/Views/CommitDetail.axaml
index 0231ef08..70618e8f 100644
--- a/src/Views/CommitDetail.axaml
+++ b/src/Views/CommitDetail.axaml
@@ -36,16 +36,25 @@
                   HeadersVisibility="None"
                   Focusable="False"
                   RowHeight="26"
-                  Margin="80,0,8,16"
+                  Margin="64,0,8,16"
                   HorizontalScrollBarVisibility="Disabled"
                   VerticalScrollBarVisibility="Auto"
                   ContextRequested="OnChangeListContextRequested"
                   DoubleTapped="OnChangeListDoubleTapped">
+          <DataGrid.Styles>
+            <Style Selector="DataGridRow">
+              <Setter Property="CornerRadius" Value="4"/>
+            </Style>
+            <Style Selector="DataGridRow /template/ Border#RowBorder">
+              <Setter Property="ClipToBounds" Value="True"/>
+            </Style>
+          </DataGrid.Styles>
+          
           <DataGrid.Columns>
-            <DataGridTemplateColumn Header="ICON">
+            <DataGridTemplateColumn Width="36" Header="ICON">
               <DataGridTemplateColumn.CellTemplate>
                 <DataTemplate>
-                  <v:ChangeStatusIcon Width="14" Height="14" IsWorkingCopyChange="False" Change="{Binding}"/>
+                  <v:ChangeStatusIcon Width="14" Height="14" HorizontalAlignment="Left" Margin="16,0,0,0" IsWorkingCopyChange="False" Change="{Binding}"/>
                 </DataTemplate>
               </DataGridTemplateColumn.CellTemplate>
             </DataGridTemplateColumn>
diff --git a/src/Views/Repository.axaml b/src/Views/Repository.axaml
index 9731da6f..d393f508 100644
--- a/src/Views/Repository.axaml
+++ b/src/Views/Repository.axaml
@@ -212,12 +212,21 @@
               <Setter Property="CornerRadius" Value="{Binding CornerRadius}"/>
             </Style>
 
-            <Style Selector="Grid.repository_leftpanel TreeViewItem:selected /template/ Border#PART_LayoutRoot">
+            <Style Selector="Grid.repository_leftpanel TreeViewItem /template/ Border#PART_LayoutRoot:pointerover Border#PART_Background">
               <Setter Property="Background" Value="{DynamicResource Brush.AccentHovered}" />
+              <Setter Property="Opacity" Value=".65"/>
             </Style>
-            
-            <Style Selector="Grid.repository_leftpanel:focus-within TreeViewItem:selected /template/ Border#PART_LayoutRoot">
+            <Style Selector="Grid.repository_leftpanel TreeViewItem:selected /template/ Border#PART_LayoutRoot Border#PART_Background">
+              <Setter Property="Background" Value="{DynamicResource Brush.AccentHovered}" />
+              <Setter Property="Opacity" Value="1"/>
+            </Style>
+            <Style Selector="Grid.repository_leftpanel:focus-within TreeViewItem:selected /template/ Border#PART_LayoutRoot Border#PART_Background">
               <Setter Property="Background" Value="{DynamicResource Brush.Accent}" />
+              <Setter Property="Opacity" Value=".65"/>
+            </Style>
+            <Style Selector="Grid.repository_leftpanel:focus-within TreeViewItem:selected /template/ Border#PART_LayoutRoot:pointerover Border#PART_Background">
+              <Setter Property="Background" Value="{DynamicResource Brush.Accent}" />
+              <Setter Property="Opacity" Value=".8"/>
             </Style>
           </TreeView.Styles>
           <TreeView.ItemTemplate>
@@ -276,12 +285,21 @@
               <Setter Property="CornerRadius" Value="{Binding CornerRadius}"/>
             </Style>
 
-            <Style Selector="Grid.repository_leftpanel TreeViewItem:selected /template/ Border#PART_LayoutRoot">
+            <Style Selector="Grid.repository_leftpanel TreeViewItem /template/ Border#PART_LayoutRoot:pointerover Border#PART_Background">
               <Setter Property="Background" Value="{DynamicResource Brush.AccentHovered}" />
+              <Setter Property="Opacity" Value=".65"/>
             </Style>
-
-            <Style Selector="Grid.repository_leftpanel:focus-within TreeViewItem:selected /template/ Border#PART_LayoutRoot">
+            <Style Selector="Grid.repository_leftpanel TreeViewItem:selected /template/ Border#PART_LayoutRoot Border#PART_Background">
+              <Setter Property="Background" Value="{DynamicResource Brush.AccentHovered}" />
+              <Setter Property="Opacity" Value="1"/>
+            </Style>
+            <Style Selector="Grid.repository_leftpanel:focus-within TreeViewItem:selected /template/ Border#PART_LayoutRoot Border#PART_Background">
               <Setter Property="Background" Value="{DynamicResource Brush.Accent}" />
+              <Setter Property="Opacity" Value=".65"/>
+            </Style>
+            <Style Selector="Grid.repository_leftpanel:focus-within TreeViewItem:selected /template/ Border#PART_LayoutRoot:pointerover Border#PART_Background">
+              <Setter Property="Background" Value="{DynamicResource Brush.Accent}" />
+              <Setter Property="Opacity" Value=".8"/>
             </Style>
           </TreeView.Styles>
 
@@ -344,13 +362,22 @@
             <Style Selector="DataGridRow /template/ Border#RowBorder">
               <Setter Property="ClipToBounds" Value="True" />
             </Style>
-            
+
+            <Style Selector="Grid.repository_leftpanel DataGridRow:pointerover /template/ Rectangle#BackgroundRectangle">
+              <Setter Property="Fill" Value="{DynamicResource Brush.AccentHovered}" />
+              <Setter Property="Opacity" Value=".5"/>
+            </Style>
             <Style Selector="Grid.repository_leftpanel DataGridRow:selected /template/ Rectangle#BackgroundRectangle">
               <Setter Property="Fill" Value="{DynamicResource Brush.AccentHovered}" />
+              <Setter Property="Opacity" Value="1"/>
             </Style>
-
             <Style Selector="Grid.repository_leftpanel:focus-within DataGridRow:selected /template/ Rectangle#BackgroundRectangle">
               <Setter Property="Fill" Value="{DynamicResource Brush.Accent}" />
+              <Setter Property="Opacity" Value=".65"/>
+            </Style>
+            <Style Selector="Grid.repository_leftpanel:focus-within DataGridRow:selected:pointerover /template/ Rectangle#BackgroundRectangle">
+              <Setter Property="Fill" Value="{DynamicResource Brush.Accent}" />
+              <Setter Property="Opacity" Value=".8"/>
             </Style>
           </DataGrid.Styles>