ux: changes view mode style (#533)

* move changes view mode switch button to right button group * change the style for ChangeViewModeSwitcher * remove used code
2024-12-23 20:47:25 -08:00 · 2024-10-01 23:16:25 +08:00 · 2024-10-01 23:16:25 +08:00 · 6d1dfad8a1
commit 6d1dfad8a1
parent 2d24244ee2
8 changed files with 34 additions and 47 deletions
--- a/src/Converters/ChangeViewModeConverters.cs
+++ b/src/Converters/ChangeViewModeConverters.cs
@ -1,24 +0,0 @@
-using Avalonia;
-using Avalonia.Controls;
-using Avalonia.Data.Converters;
-using Avalonia.Media;
-
-namespace SourceGit.Converters
-{
-    public static class ChangeViewModeConverters
-    {
-        public static readonly FuncValueConverter<Models.ChangeViewMode, StreamGeometry> ToIcon =
-            new FuncValueConverter<Models.ChangeViewMode, StreamGeometry>(v =>
-            {
-                switch (v)
-                {
-                    case Models.ChangeViewMode.List:
-                        return Application.Current?.FindResource("Icons.List") as StreamGeometry;
-                    case Models.ChangeViewMode.Grid:
-                        return Application.Current?.FindResource("Icons.Grid") as StreamGeometry;
-                    default:
-                        return Application.Current?.FindResource("Icons.Tree") as StreamGeometry;
-                }
-            });
-    }
-}
--- a/src/Resources/Icons.axaml
+++ b/src/Resources/Icons.axaml
@ -76,7 +76,7 @@
  <StreamGeometry x:Key="Icons.Merge">M824 645V307c0-56-46-102-102-102h-102V102l-154 154 154 154V307h102v338c-46 20-82 67-82 123 0 72 61 133 133 133 72 0 133-61 133-133 0-56-36-102-82-123zm-51 195c-41 0-72-31-72-72s31-72 72-72c41 0 72 31 72 72s-31 72-72 72zM384 256c0-72-61-133-133-133-72 0-133 61-133 133 0 56 36 102 82 123v266C154 666 118 712 118 768c0 72 61 133 133 133 72 0 133-61 133-133 0-56-36-102-82-123V379C348 358 384 312 384 256zM323 768c0 41-31 72-72 72-41 0-72-31-72-72s31-72 72-72c41 0 72 31 72 72zM251 328c-41 0-72-31-72-72s31-72 72-72c41 0 72 31 72 72s-31 72-72 72z</StreamGeometry>
  <StreamGeometry x:Key="Icons.Modified">M896 64H128C96 64 64 96 64 128v768c0 32 32 64 64 64h768c32 0 64-32 64-64V128c0-32-32-64-64-64z m-64 736c0 16-17 32-32 32H224c-18 0-32-12-32-32V224c0-16 16-32 32-32h576c15 0 32 16 32 32v576zM512 384c-71 0-128 57-128 128s57 128 128 128 128-57 128-128-57-128-128-128z</StreamGeometry>
  <StreamGeometry x:Key="Icons.Move">M299 811 299 725 384 725 384 811 299 811M469 811 469 725 555 725 555 811 469 811M640 811 640 725 725 725 725 811 640 811M299 640 299 555 384 555 384 640 299 640M469 640 469 555 555 555 555 640 469 640M640 640 640 555 725 555 725 640 640 640M299 469 299 384 384 384 384 469 299 469M469 469 469 384 555 384 555 469 469 469M640 469 640 384 725 384 725 469 640 469M299 299 299 213 384 213 384 299 299 299M469 299 469 213 555 213 555 299 469 299M640 299 640 213 725 213 725 299 640 299Z</StreamGeometry>
-  <StreamGeometry x:Key="Icons.MoveToAnthorGroup">M64 363l0 204 265 0L329 460c0-11 6-18 14-20C349 437 355 437 362 441c93 60 226 149 226 149 33 22 34 60 0 82 0 0-133 89-226 149-14 9-32-3-32-18l-1-110L64 693l0 117c0 41 34 75 75 75l746 0c41 0 75-34 75-74L960 364c0-0 0-1 0-1L64 363zM64 214l0 75 650 0-33-80c-16-38-62-69-103-69l-440 0C97 139 64 173 64 214z</StreamGeometry>
+  <StreamGeometry x:Key="Icons.MoveToAnotherGroup">M64 363l0 204 265 0L329 460c0-11 6-18 14-20C349 437 355 437 362 441c93 60 226 149 226 149 33 22 34 60 0 82 0 0-133 89-226 149-14 9-32-3-32-18l-1-110L64 693l0 117c0 41 34 75 75 75l746 0c41 0 75-34 75-74L960 364c0-0 0-1 0-1L64 363zM64 214l0 75 650 0-33-80c-16-38-62-69-103-69l-440 0C97 139 64 173 64 214z</StreamGeometry>
  <StreamGeometry x:Key="Icons.OpenWith">M683 409v204L1024 308 683 0v191c-413 0-427 526-427 526c117-229 203-307 427-307zm85 492H102V327h153s38-63 114-122H51c-28 0-51 27-51 61v697c0 34 23 61 51 61h768c28 0 51-27 51-61V614l-102 100v187z</StreamGeometry>
  <StreamGeometry x:Key="Icons.Password">M640 96c-158 0-288 130-288 288 0 17 3 31 5 46L105 681 96 691V928h224v-96h96v-96h96v-95c38 18 82 31 128 31 158 0 288-130 288-288s-130-288-288-288zm0 64c123 0 224 101 224 224s-101 224-224 224a235 235 0 01-109-28l-8-4H448v96h-96v96H256v96H160v-146l253-254 12-11-3-17C419 417 416 400 416 384c0-123 101-224 224-224zm64 96a64 64 0 100 128 64 64 0 100-128z</StreamGeometry>
  <StreamGeometry x:Key="Icons.Paste">M544 85c49 0 90 37 95 85h75a96 96 0 0196 89L811 267a32 32 0 01-28 32L779 299a32 32 0 01-32-28L747 267a32 32 0 00-28-32L715 235h-91a96 96 0 01-80 42H395c-33 0-62-17-80-42L224 235a32 32 0 00-32 28L192 267v576c0 16 12 30 28 32l4 0h128a32 32 0 0132 28l0 4a32 32 0 01-32 32h-128a96 96 0 01-96-89L128 843V267a96 96 0 0189-96L224 171h75a96 96 0 0195-85h150zm256 256a96 96 0 0196 89l0 7v405a96 96 0 01-89 96L800 939h-277a96 96 0 01-96-89L427 843v-405a96 96 0 0189-96L523 341h277zm-256-192H395a32 32 0 000 64h150a32 32 0 100-64z</StreamGeometry>
--- a/src/Resources/Styles.axaml
+++ b/src/Resources/Styles.axaml
@ -265,12 +265,6 @@
      </Animation>
    </Style.Animations>
  </Style>
-  <Style Selector="Path.change_mode_switcher_icon">
-    <Setter Property="Fill" Value="{DynamicResource Brush.FG2}"/>
-  </Style>
-  <Style Selector="Button:pointerover Path.change_mode_switcher_icon">
-    <Setter Property="Fill" Value="{DynamicResource Brush.Accent}"/>
-  </Style>
  <Style Selector="Button.max_or_restore_btn Path">
    <Setter Property="Data" Value="{StaticResource Icons.Window.Maximize}"/>
  </Style>
--- a/src/ViewModels/Welcome.cs
+++ b/src/ViewModels/Welcome.cs
@ -221,7 +221,7 @@ namespace SourceGit.ViewModels

            var move = new MenuItem();
            move.Header = App.Text("Welcome.Move");
-            move.Icon = App.CreateMenuIcon("Icons.MoveToAnthorGroup");
+            move.Icon = App.CreateMenuIcon("Icons.MoveToAnotherGroup");
            move.Click += (_, e) =>
            {
                if (PopupHost.CanCreatePopup())
--- a/src/Views/ChangeViewModeSwitcher.axaml
+++ b/src/Views/ChangeViewModeSwitcher.axaml
@ -4,11 +4,10 @@
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:m="using:SourceGit.Models"
             xmlns:v="using:SourceGit.Views"
-             xmlns:c="using:SourceGit.Converters"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="SourceGit.Views.ChangeViewModeSwitcher"
             x:DataType="v:ChangeViewModeSwitcher">
-  <Button Classes="icon_button" Padding="0" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center" ToolTip.Tip="{DynamicResource Text.ChangeDisplayMode}">
+  <Button Classes="icon_button" ToolTip.Tip="{DynamicResource Text.ChangeDisplayMode}">
    <Button.Flyout>
      <MenuFlyout Placement="BottomEdgeAlignedLeft">
        <MenuItem Header="{DynamicResource Text.ChangeDisplayMode.List}" Command="{Binding SwitchMode}" CommandParameter="{x:Static m:ChangeViewMode.List}">
@ -28,7 +27,17 @@
        </MenuItem>
      </MenuFlyout>
    </Button.Flyout>
-
-    <Path Classes="change_mode_switcher_icon" Stretch="Uniform" Data="{Binding ViewMode, Converter={x:Static c:ChangeViewModeConverters.ToIcon}}"/>
+    
+    <Grid Width="14" Height="14" HorizontalAlignment="Center" VerticalAlignment="Center">
+      <Path Width="14" Height="14"
+            Data="{StaticResource Icons.List}"
+            IsVisible="{Binding ViewMode, Converter={x:Static ObjectConverters.Equal}, ConverterParameter={x:Static m:ChangeViewMode.List}}"/>
+      <Path Width="14" Height="14"
+            Data="{StaticResource Icons.Grid}"
+            IsVisible="{Binding ViewMode, Converter={x:Static ObjectConverters.Equal}, ConverterParameter={x:Static m:ChangeViewMode.Grid}}"/>
+      <Path Width="14" Height="14"
+            Data="{StaticResource Icons.Tree}"
+            IsVisible="{Binding ViewMode, Converter={x:Static ObjectConverters.Equal}, ConverterParameter={x:Static m:ChangeViewMode.Tree}}"/>
+    </Grid>
  </Button>
 </UserControl>
--- a/src/Views/CommitChanges.axaml
+++ b/src/Views/CommitChanges.axaml
@ -16,7 +16,7 @@

    <Grid Grid.Column="0" RowDefinitions="26,*">
      <!-- Search & Display Mode -->
-      <Grid Grid.Row="0" ColumnDefinitions="*,18">
+      <Grid Grid.Row="0" ColumnDefinitions="*,Auto">
        <TextBox Grid.Column="0"
                 Height="26"
                 BorderThickness="1" BorderBrush="{DynamicResource Brush.Border2}" 
@ -38,8 +38,8 @@
        </TextBox>

        <v:ChangeViewModeSwitcher Grid.Column="1"
-                                  Width="14" Height="14"
-                                  HorizontalAlignment="Right"
+                                  Width="18" Height="18"
+                                  Margin="4,0,0,0"
                                  ViewMode="{Binding Source={x:Static vm:Preference.Instance}, Path=CommitChangeViewMode, Mode=TwoWay}"/>
      </Grid>

--- a/src/Views/StashesPage.axaml
+++ b/src/Views/StashesPage.axaml
@ -21,7 +21,7 @@
      <!-- Stash Bar -->
      <Grid Grid.Row="0" ColumnDefinitions="Auto,Auto,Auto,*,Auto">
        <Path Grid.Column="0" Margin="8,0,0,0" Width="14" Height="14" Fill="{DynamicResource Brush.FG2}" Data="{StaticResource Icons.Stashes}"/>
-        <TextBlock Grid.Column="1" Text="{DynamicResource Text.Stashes.Stashes}" Foreground="{DynamicResource Brush.FG2}" FontWeight="Bold" Margin="8,0,0,0"/>
+        <TextBlock Grid.Column="1" Text="{DynamicResource Text.Stashes.Stashes}" Foreground="{DynamicResource Brush.FG2}" FontWeight="Bold" Margin="4,0,0,0"/>
        <TextBlock Grid.Column="2" Text="{Binding Stashes, Converter={x:Static c:ListConverters.ToCount}}" Foreground="{DynamicResource Brush.FG2}" FontWeight="Bold"/>
        <Button Grid.Column="4"
                Classes="icon_button"
@ -107,7 +107,7 @@
      <Border Grid.Row="3" BorderThickness="0,1" BorderBrush="{DynamicResource Brush.Border0}">
        <Grid ColumnDefinitions="Auto,Auto,*">
          <Path Grid.Column="0" Margin="8,0,0,0" Width="14" Height="14" Fill="{DynamicResource Brush.FG2}" Data="{StaticResource Icons.Changes}"/>
-          <TextBlock Grid.Column="1" Text="{DynamicResource Text.Stashes.Changes}" Foreground="{DynamicResource Brush.FG2}" FontWeight="Bold" Margin="8,0,0,0"/>
+          <TextBlock Grid.Column="1" Text="{DynamicResource Text.Stashes.Changes}" Foreground="{DynamicResource Brush.FG2}" FontWeight="Bold" Margin="4,0,0,0"/>
          <TextBlock Grid.Column="2" Text="{Binding Changes, Converter={x:Static c:ListConverters.ToCount}}" Foreground="{DynamicResource Brush.FG2}" FontWeight="Bold"/>
        </Grid>
      </Border>
--- a/src/Views/WorkingCopy.axaml
+++ b/src/Views/WorkingCopy.axaml
@ -19,9 +19,9 @@
    <Grid Grid.Column="0" RowDefinitions="28,*,28,*">
      <!-- Unstaged Toolbar -->
      <Border Grid.Row="0" BorderThickness="0,0,0,1" BorderBrush="{DynamicResource Brush.Border0}">
-        <Grid ColumnDefinitions="Auto,Auto,Auto,Auto,*,Auto,Auto,Auto,Auto">
-          <v:ChangeViewModeSwitcher Grid.Column="0" Width="12" Height="12" Margin="8,0,0,0" ViewMode="{Binding Source={x:Static vm:Preference.Instance}, Path=UnstagedChangeViewMode, Mode=TwoWay}"/>
-          <TextBlock Grid.Column="1" Text="{DynamicResource Text.WorkingCopy.Unstaged}" Foreground="{DynamicResource Brush.FG2}" FontWeight="Bold" Margin="8,0,0,0"/>
+        <Grid ColumnDefinitions="Auto,Auto,Auto,Auto,*,Auto,Auto,Auto,Auto,Auto">
+          <Path Grid.Column="0" Margin="8,0,0,0" Width="14" Height="14" Fill="{DynamicResource Brush.FG2}" Data="{StaticResource Icons.Changes}"/>
+          <TextBlock Grid.Column="1" Text="{DynamicResource Text.WorkingCopy.Unstaged}" Foreground="{DynamicResource Brush.FG2}" FontWeight="Bold" Margin="4,0,0,0"/>
          <TextBlock Grid.Column="2" FontWeight="Bold" Foreground="{DynamicResource Brush.FG2}" Text="{Binding Unstaged, Converter={x:Static c:ListConverters.ToCount}}"/>
          <v:LoadingIcon Grid.Column="3" Width="14" Height="14" Margin="8,0,0,0" IsVisible="{Binding IsStaging}"/>

@ -59,6 +59,10 @@
                  Command="{Binding StageAll}">
            <Path Width="14" Height="14" Data="{StaticResource Icons.DoubleDown}"/>
          </Button>
+          <v:ChangeViewModeSwitcher Grid.Column="9"
+                                    Width="26" Height="14"
+                                    Margin="0,1,0,0"
+                                    ViewMode="{Binding Source={x:Static vm:Preference.Instance}, Path=UnstagedChangeViewMode, Mode=TwoWay}"/>
        </Grid>
      </Border>

@ -78,9 +82,9 @@

      <!-- Staged Toolbar -->
      <Border Grid.Row="2" BorderThickness="0,1" BorderBrush="{DynamicResource Brush.Border0}">
-        <Grid ColumnDefinitions="Auto,Auto,Auto,Auto,*,Auto,Auto">
-          <v:ChangeViewModeSwitcher Grid.Column="0" Width="12" Height="12" Margin="8,0,0,0" ViewMode="{Binding Source={x:Static vm:Preference.Instance}, Path=StagedChangeViewMode, Mode=TwoWay}"/>
-          <TextBlock Grid.Column="1" Text="{DynamicResource Text.WorkingCopy.Staged}" Foreground="{DynamicResource Brush.FG2}" FontWeight="Bold" Margin="8,0,0,0"/>
+        <Grid ColumnDefinitions="Auto,Auto,Auto,Auto,*,Auto,Auto,Auto">
+          <Path Grid.Column="0" Margin="8,0,0,0" Width="14" Height="14" Fill="{DynamicResource Brush.FG2}" Data="{StaticResource Icons.Changes}"/>
+          <TextBlock Grid.Column="1" Text="{DynamicResource Text.WorkingCopy.Staged}" Foreground="{DynamicResource Brush.FG2}" FontWeight="Bold" Margin="4,0,0,0"/>
          <TextBlock Grid.Column="2" FontWeight="Bold" Foreground="{DynamicResource Brush.FG2}" Text="{Binding Staged, Converter={x:Static c:ListConverters.ToCount}}"/>
          <v:LoadingIcon Grid.Column="3" Width="14" Height="14" Margin="8,0,0,0" IsVisible="{Binding IsUnstaging}"/>
          <Button Grid.Column="5" Classes="icon_button" Width="26" Height="14" Padding="0" Click="OnUnstageSelectedButtonClicked">
@ -95,6 +99,10 @@
          <Button Grid.Column="6" Classes="icon_button" Width="26" Height="14" Padding="0" ToolTip.Tip="{DynamicResource Text.WorkingCopy.Staged.UnstageAll}" Command="{Binding UnstageAll}">
            <Path Width="14" Height="14" Data="{StaticResource Icons.DoubleUp}"/>
          </Button>
+          <v:ChangeViewModeSwitcher Grid.Column="7" 
+                                    Width="26" Height="14"
+                                    Margin="0,1,0,0"
+                                    ViewMode="{Binding Source={x:Static vm:Preference.Instance}, Path=StagedChangeViewMode, Mode=TwoWay}"/>
        </Grid>
      </Border>