ux: new commit graph decorator style (#564)

src/Models/Commit.cs

@@ -31,18 +31,19 @@ namespace SourceGit.Models
         public List<Decorator> Decorators { get; set; } = new List<Decorator>();
         public bool HasDecorators => Decorators.Count > 0;
 
-        public bool IsMerged { get; set; } = false;
-        public Thickness Margin { get; set; } = new Thickness(0);
-
         public string AuthorTimeStr => DateTime.UnixEpoch.AddSeconds(AuthorTime).ToLocalTime().ToString("yyyy/MM/dd HH:mm:ss");
         public string CommitterTimeStr => DateTime.UnixEpoch.AddSeconds(CommitterTime).ToLocalTime().ToString("yyyy/MM/dd HH:mm:ss");
         public string AuthorTimeShortStr => DateTime.UnixEpoch.AddSeconds(AuthorTime).ToLocalTime().ToString("yyyy/MM/dd");
 
+        public bool IsMerged { get; set; } = false;
         public bool IsCommitterVisible => !Author.Equals(Committer) || AuthorTime != CommitterTime;
         public bool IsCurrentHead => Decorators.Find(x => x.Type is DecoratorType.CurrentBranchHead or DecoratorType.CurrentCommitHead) != null;
 
+        public int Color { get; set; } = 0;
         public double Opacity => IsMerged ? 1 : OpacityForNotMerged;
         public FontWeight FontWeight => IsCurrentHead ? FontWeight.Bold : FontWeight.Regular;
+        public Thickness Margin { get; set; } = new Thickness(0);
+        public IBrush Brush => CommitGraph.Pens[Color].Brush;
 
         public void ParseDecorators(string data)
         {

src/Models/CommitGraph.cs

@@ -186,6 +186,7 @@ namespace SourceGit.Models
                 // Margins & merge state (used by Views.Histories).
                 commit.IsMerged = isMerged;
                 commit.Margin = new Thickness(Math.Max(offsetX, maxOffsetOld) + halfWidth + 2, 0, 0, 0);
+                commit.Color = dotColor;
             }
 
             // Deal with curves haven't ended yet.

src/Resources/Icons.axaml

@@ -50,6 +50,7 @@
   <StreamGeometry x:Key="Icons.GitFlow.Release">M884 159l-18-18a43 43 0 00-38-12l-235 43a166 166 0 00-101 60L400 349a128 128 0 00-148 47l-120 171a21 21 0 005 29l17 12a128 128 0 00178-32l27-38 124 124-38 27a128 128 0 00-32 178l12 17a21 21 0 0029 5l171-120a128 128 0 0047-148l117-92A166 166 0 00853 431l43-235a43 43 0 00-12-38zm-177 249a64 64 0 110-90 64 64 0 010 90zm-373 312a21 21 0 010 30l-139 139a21 21 0 01-30 0l-30-30a21 21 0 010-30l139-139a21 21 0 0130 0z</StreamGeometry>
   <StreamGeometry x:Key="Icons.GitIgnore">M590 74 859 342V876c0 38-31 68-68 68H233c-38 0-68-31-68-68V142c0-38 31-68 68-68h357zm-12 28H233a40 40 0 00-40 38L193 142v734a40 40 0 0038 40L233 916h558a40 40 0 0040-38L831 876V354L578 102zM855 371h-215c-46 0-83-36-84-82l0-2V74h28v213c0 30 24 54 54 55l2 0h215v28zM57 489m28 0 853 0q28 0 28 28l0 284q0 28-28 28l-853 0q-28 0-28-28l0-284q0-28 28-28ZM157 717c15 0 29-6 37-13v-51h-41v22h17v18c-2 2-6 3-10 3-21 0-30-13-30-34 0-21 12-34 28-34 9 0 15 4 20 9l14-17C184 610 172 603 156 603c-29 0-54 21-54 57 0 37 24 56 54 56zM245 711v-108h-34v108h34zm69 0v-86H341V603H262v22h28V711h24zM393 711v-108h-34v108h34zm66 6c15 0 29-6 37-13v-51h-41v22h17v18c-2 2-6 3-10 3-21 0-30-13-30-34 0-21 12-34 28-34 9 0 15 4 20 9l14-17C485 610 474 603 458 603c-29 0-54 21-54 57 0 37 24 56 54 56zm88-6v-36c0-13-2-28-3-40h1l10 24 25 52H603v-108h-23v36c0 13 2 28 3 40h-1l-10-24L548 603H523v108h23zM677 717c30 0 51-22 51-57 0-36-21-56-51-56-30 0-51 20-51 56 0 36 21 57 51 57zm3-23c-16 0-26-12-26-32 0-19 10-31 26-31 16 0 26 11 26 31S696 694 680 694zm93 17v-38h13l21 38H836l-25-43c12-5 19-15 19-31 0-26-20-34-44-34H745v108h27zm16-51H774v-34h15c16 0 25 4 25 16s-9 18-25 18zM922 711v-22h-43v-23h35v-22h-35V625h41V603H853v108h68z</StreamGeometry>
   <StreamGeometry x:Key="Icons.Grid">M30 271l241 0 0-241-241 0 0 241zM392 271l241 0 0-241-241 0 0 241zM753 30l0 241 241 0 0-241-241 0zM30 632l241 0 0-241-241 0 0 241zM392 632l241 0 0-241-241 0 0 241zM753 632l241 0 0-241-241 0 0 241zM30 994l241 0 0-241-241 0 0 241zM392 994l241 0 0-241-241 0 0 241zM753 994l241 0 0-241-241 0 0 241z</StreamGeometry>
+  <StreamGeometry x:Key="Icons.Head">M0 512M1024 512M512 0M512 1024M955 323q0 23-16 39l-414 414-78 78q-16 16-39 16t-39-16l-78-78-207-207q-16-16-16-39t16-39l78-78q16-16 39-16t39 16l168 169 375-375q16-16 39-16t39 16l78 78q16 16 16 39z</StreamGeometry>
   <StreamGeometry x:Key="Icons.HiddenSymbol">M416 64H768v64h-64v704h64v64H448v-64h64V512H416a224 224 0 1 1 0-448zM576 832h64V128H576v704zM416 128H512v320H416a160 160 0 0 1 0-320z</StreamGeometry>
   <StreamGeometry x:Key="Icons.Histories">M24 512A488 488 0 01512 24A488 488 0 011000 512A488 488 0 01512 1000A488 488 0 0124 512zm447-325v327L243 619l51 111 300-138V187H471z</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>

src/Resources/Themes.axaml

@@ -10,12 +10,7 @@
       <Color x:Key="Color.Contents">#FFFAFAFA</Color>
       <Color x:Key="Color.Badge">#FFB0CEE8</Color>
       <Color x:Key="Color.BadgeFG">#FF1F1F1F</Color>
-      <Color x:Key="Color.DecoratorIconBG">#A0A0A0</Color>
-      <Color x:Key="Color.DecoratorIcon">White</Color>
-      <Color x:Key="Color.DecoratorBranch">#008585</Color>
-      <Color x:Key="Color.DecoratorHead">#0C0E21</Color>
       <Color x:Key="Color.DecoratorTag">#79855f</Color>
-      <Color x:Key="Color.DecoratorFG">White</Color>
       <Color x:Key="Color.Conflict">#FF836C2E</Color>
       <Color x:Key="Color.ConflictForeground">#FFFFFFFF</Color>
       <Color x:Key="Color.Border0">#FFCFCFCF</Color>
@@ -42,12 +37,7 @@
       <Color x:Key="Color.Contents">#FF1C1C1C</Color>
       <Color x:Key="Color.Badge">#FF8F8F8F</Color>
       <Color x:Key="Color.BadgeFG">#FFDDDDDD</Color>
-      <Color x:Key="Color.DecoratorIconBG">#FF505050</Color>
-      <Color x:Key="Color.DecoratorIcon">#FFF8F8F8</Color>
-      <Color x:Key="Color.DecoratorBranch">#FFFFB835</Color>
-      <Color x:Key="Color.DecoratorHead">#f4f1de</Color>
       <Color x:Key="Color.DecoratorTag">#84c88a</Color>
-      <Color x:Key="Color.DecoratorFG">Black</Color>
       <Color x:Key="Color.Conflict">#FFFAFAD2</Color>
       <Color x:Key="Color.ConflictForeground">#FF252525</Color>
       <Color x:Key="Color.Border0">#FF181818</Color>
@@ -74,12 +64,7 @@
   <SolidColorBrush x:Key="Brush.Contents" Color="{DynamicResource Color.Contents}"/>
   <SolidColorBrush x:Key="Brush.Badge" Color="{DynamicResource Color.Badge}"/>
   <SolidColorBrush x:Key="Brush.BadgeFG" Color="{DynamicResource Color.BadgeFG}"/>
-  <SolidColorBrush x:Key="Brush.DecoratorIconBG" Color="{DynamicResource Color.DecoratorIconBG}"/>
-  <SolidColorBrush x:Key="Brush.DecoratorIcon" Color="{DynamicResource Color.DecoratorIcon}"/>
-  <SolidColorBrush x:Key="Brush.DecoratorBranch" Color="{DynamicResource Color.DecoratorBranch}"/>
-  <SolidColorBrush x:Key="Brush.DecoratorHead" Color="{DynamicResource Color.DecoratorHead}"/>
   <SolidColorBrush x:Key="Brush.DecoratorTag" Color="{DynamicResource Color.DecoratorTag}"/>
-  <SolidColorBrush x:Key="Brush.DecoratorFG" Color="{DynamicResource Color.DecoratorFG}"/>
   <SolidColorBrush x:Key="Brush.Conflict" Color="{DynamicResource Color.Conflict}"/>
   <SolidColorBrush x:Key="Brush.ConflictForeground" Color="{DynamicResource Color.ConflictForeground}"/>
   <SolidColorBrush x:Key="Brush.Border0" Color="{DynamicResource Color.Border0}"/>

src/Views/CommitBaseInfo.axaml

@@ -98,16 +98,11 @@
           <!-- REFS -->
           <TextBlock Grid.Row="2" Grid.Column="0" Classes="info_label" Text="{DynamicResource Text.CommitDetail.Info.Refs}" IsVisible="{Binding HasDecorators}"/>
           <Border Grid.Row="2" Grid.Column="1" Margin="12,0,0,0" Height="24" IsVisible="{Binding HasDecorators}">
-            <v:CommitRefsPresenter IconBackground="{DynamicResource Brush.DecoratorIconBG}"
+            <v:CommitRefsPresenter TagBackground="{DynamicResource Brush.DecoratorTag}"
-                                   IconForeground="{DynamicResource Brush.DecoratorIcon}"
+                                   Foreground="{DynamicResource Brush.FG1}"
-                                   BranchNameBackground="{DynamicResource Brush.DecoratorBranch}"
-                                   HeadBranchNameBackground="{DynamicResource Brush.DecoratorHead}"
-                                   TagNameBackground="{DynamicResource Brush.DecoratorTag}"
-                                   LabelForeground="{DynamicResource Brush.DecoratorFG}"
                                    FontFamily="{DynamicResource Fonts.Primary}"
                                    FontSize="11"
-                                   VerticalAlignment="Center"
+                                   VerticalAlignment="Center"/>
-                                   Refs="{Binding Decorators}"/>
           </Border>
           
           <!-- Messages -->

src/Views/CommitRefsPresenter.cs

@@ -14,16 +14,9 @@ namespace SourceGit.Views
         {
             public Geometry Icon { get; set; } = null;
             public FormattedText Label { get; set; } = null;
-            public IBrush LabelBG { get; set; } = null;
+            public IBrush Brush { get; set; } = null;
-        }
+            public bool IsHead { get; set; } = false;
-
+            public double Width { get; set; } = 0.0;
-        public static readonly StyledProperty<List<Models.Decorator>> RefsProperty =
-            AvaloniaProperty.Register<CommitRefsPresenter, List<Models.Decorator>>(nameof(Refs));
-
-        public List<Models.Decorator> Refs
-        {
-            get => GetValue(RefsProperty);
-            set => SetValue(RefsProperty, value);
         }
 
         public static readonly StyledProperty<FontFamily> FontFamilyProperty =
@@ -44,73 +37,32 @@ namespace SourceGit.Views
             set => SetValue(FontSizeProperty, value);
         }
 
-        public static readonly StyledProperty<IBrush> IconBackgroundProperty =
+        public static readonly StyledProperty<IBrush> ForegroundProperty =
-            AvaloniaProperty.Register<CommitRefsPresenter, IBrush>(nameof(IconBackground), Brushes.White);
+            AvaloniaProperty.Register<CommitRefsPresenter, IBrush>(nameof(Foreground), Brushes.White);
 
-        public IBrush IconBackground
+        public IBrush Foreground
         {
-            get => GetValue(IconBackgroundProperty);
+            get => GetValue(ForegroundProperty);
-            set => SetValue(IconBackgroundProperty, value);
+            set => SetValue(ForegroundProperty, value);
         }
 
-        public static readonly StyledProperty<IBrush> IconForegroundProperty =
+        public static readonly StyledProperty<IBrush> TagBackgroundProperty =
-            AvaloniaProperty.Register<CommitRefsPresenter, IBrush>(nameof(IconForeground), Brushes.White);
+            AvaloniaProperty.Register<CommitRefsPresenter, IBrush>(nameof(TagBackground), Brushes.White);
 
-        public IBrush IconForeground
+        public IBrush TagBackground
         {
-            get => GetValue(IconForegroundProperty);
+            get => GetValue(TagBackgroundProperty);
-            set => SetValue(IconForegroundProperty, value);
+            set => SetValue(TagBackgroundProperty, value);
-        }
-
-        public static readonly StyledProperty<IBrush> LabelForegroundProperty =
-            AvaloniaProperty.Register<CommitRefsPresenter, IBrush>(nameof(LabelForeground), Brushes.White);
-
-        public IBrush LabelForeground
-        {
-            get => GetValue(LabelForegroundProperty);
-            set => SetValue(LabelForegroundProperty, value);
-        }
-
-        public static readonly StyledProperty<IBrush> BranchNameBackgroundProperty =
-            AvaloniaProperty.Register<CommitRefsPresenter, IBrush>(nameof(BranchNameBackground), Brushes.White);
-
-        public IBrush BranchNameBackground
-        {
-            get => GetValue(BranchNameBackgroundProperty);
-            set => SetValue(BranchNameBackgroundProperty, value);
-        }
-
-        public static readonly StyledProperty<IBrush> HeadBranchNameBackgroundProperty =
-            AvaloniaProperty.Register<CommitRefsPresenter, IBrush>(nameof(HeadBranchNameBackground), Brushes.White);
-
-        public IBrush HeadBranchNameBackground
-        {
-            get => GetValue(HeadBranchNameBackgroundProperty);
-            set => SetValue(HeadBranchNameBackgroundProperty, value);
-        }
-
-        public static readonly StyledProperty<IBrush> TagNameBackgroundProperty =
-            AvaloniaProperty.Register<CommitRefsPresenter, IBrush>(nameof(TagNameBackground), Brushes.White);
-
-        public IBrush TagNameBackground
-        {
-            get => GetValue(TagNameBackgroundProperty);
-            set => SetValue(TagNameBackgroundProperty, value);
         }
 
         static CommitRefsPresenter()
         {
             AffectsMeasure<CommitRefsPresenter>(
                 FontFamilyProperty,
-                FontSizeProperty,
+                FontSizeProperty);
-                LabelForegroundProperty,
-                RefsProperty);
 
             AffectsRender<CommitRefsPresenter>(
-                IconBackgroundProperty,
+                TagBackgroundProperty);
-                IconForegroundProperty,
-                BranchNameBackgroundProperty,
-                TagNameBackgroundProperty);
         }
 
         public override void Render(DrawingContext context)
@@ -118,39 +70,60 @@ namespace SourceGit.Views
             if (_items.Count == 0)
                 return;
 
-            var iconFG = IconForeground;
+            var fg = Foreground;
-            var iconBG = IconBackground;
+            var x = 1.0;
-            var x = 0.0;
-
             foreach (var item in _items)
             {
                 var iconRect = new RoundedRect(new Rect(x, 0, 16, 16), new CornerRadius(2, 0, 0, 2));
-                var labelRect = new RoundedRect(new Rect(x + 16, 0, item.Label.Width + 8, 16), new CornerRadius(0, 2, 2, 0));
+                var entireRect = new RoundedRect(new Rect(x, 0, item.Width, 16), new CornerRadius(2));
 
-                context.DrawRectangle(iconBG, null, iconRect);
+                using (context.PushTransform(Matrix.CreateTranslation(x + 3, 3)))
-                context.DrawRectangle(item.LabelBG, null, labelRect);
+                    context.DrawGeometry(fg, null, item.Icon);
-                context.DrawText(item.Label, new Point(x + 20, 8.0 - item.Label.Height * 0.5));
 
-                using (context.PushTransform(Matrix.CreateTranslation(x + 4, 4)))
+                if (item.IsHead)
-                    context.DrawGeometry(iconFG, null, item.Icon);
+                {
+                    using (context.PushOpacity(.4))
+                        context.DrawRectangle(item.Brush, null, entireRect);
 
-                x += item.Label.Width + 16 + 8 + 4;
+                    context.DrawText(item.Label, new Point(x + 16, 8.0 - item.Label.Height * 0.5));
+                    context.DrawRectangle(null, new Pen(item.Brush), entireRect);
                 }
+                else
+                {
+                    var labelRect = new RoundedRect(new Rect(x + 16, 0, item.Label.Width + 8, 16), new CornerRadius(0, 2, 2, 0));
+                    using (context.PushOpacity(.2))
+                        context.DrawRectangle(item.Brush, null, labelRect);
+
+                    context.DrawLine(new Pen(item.Brush), new Point(x + 16, 0), new Point(x + 16, 16));
+                    context.DrawText(item.Label, new Point(x + 20, 8.0 - item.Label.Height * 0.5));
+                    context.DrawRectangle(null, new Pen(item.Brush), entireRect);
+                }
+
+                x += item.Width + 4;
+            }
+        }
+
+        protected override void OnDataContextChanged(EventArgs e)
+        {
+            base.OnDataContextChanged(e);
+            InvalidateMeasure();
         }
 
         protected override Size MeasureOverride(Size availableSize)
         {
             _items.Clear();
 
-            var refs = Refs;
+            var commit = DataContext as Models.Commit;
+            if (commit == null)
+                return new Size(0, 0);
+
+            var refs = commit.Decorators;
             if (refs != null && refs.Count > 0)
             {
                 var typeface = new Typeface(FontFamily);
                 var typefaceBold = new Typeface(FontFamily, FontStyle.Normal, FontWeight.Bold);
-                var labelFG = LabelForeground;
+                var fg = Foreground;
-                var branchBG = BranchNameBackground;
+                var tagBG = TagBackground;
-                var headBG = HeadBranchNameBackground;
-                var tagBG = TagNameBackground;
                 var labelSize = FontSize;
                 var requiredWidth = 0.0;
 
@@ -164,28 +137,25 @@ namespace SourceGit.Views
                         CultureInfo.CurrentCulture,
                         FlowDirection.LeftToRight,
                         isHead ? typefaceBold : typeface,
-                        labelSize,
+                        isHead ? labelSize + 1 : labelSize,
-                        labelFG);
+                        fg);
 
-                    var item = new RenderItem() { Label = label };
+                    var item = new RenderItem() { Label = label, Brush = commit.Brush, IsHead = isHead };
                     StreamGeometry geo;
                     switch (decorator.Type)
                     {
                         case Models.DecoratorType.CurrentBranchHead:
                         case Models.DecoratorType.CurrentCommitHead:
-                            item.LabelBG = headBG;
+                            geo = this.FindResource("Icons.Head") as StreamGeometry;
-                            geo = this.FindResource("Icons.Check") as StreamGeometry;
                             break;
                         case Models.DecoratorType.RemoteBranchHead:
-                            item.LabelBG = branchBG;
                             geo = this.FindResource("Icons.Remote") as StreamGeometry;
                             break;
                         case Models.DecoratorType.Tag:
-                            item.LabelBG = tagBG;
+                            item.Brush = tagBG;
                             geo = this.FindResource("Icons.Tag") as StreamGeometry;
                             break;
                         default:
-                            item.LabelBG = branchBG;
                             geo = this.FindResource("Icons.Branch") as StreamGeometry;
                             break;
                     }
@@ -193,7 +163,7 @@ namespace SourceGit.Views
                     var drawGeo = geo!.Clone();
                     var iconBounds = drawGeo.Bounds;
                     var translation = Matrix.CreateTranslation(-(Vector)iconBounds.Position);
-                    var scale = Math.Min(8.0 / iconBounds.Width, 8.0 / iconBounds.Height);
+                    var scale = Math.Min(10.0 / iconBounds.Width, 10.0 / iconBounds.Height);
                     var transform = translation * Matrix.CreateScale(scale, scale);
                     if (drawGeo.Transform == null || drawGeo.Transform.Value == Matrix.Identity)
                         drawGeo.Transform = new MatrixTransform(transform);
@@ -201,12 +171,14 @@ namespace SourceGit.Views
                         drawGeo.Transform = new MatrixTransform(drawGeo.Transform.Value * transform);
 
                     item.Icon = drawGeo;
+                    item.Width = 16 + (isHead ? 0 : 4) + label.Width + 4;
                     _items.Add(item);
-                    requiredWidth += label.Width + 16 /* icon */ + 8 /* label margin */ + 4 /* item right margin */;
+
+                    requiredWidth += item.Width + 4;
                 }
 
                 InvalidateVisual();
-                return new Size(requiredWidth, 16);
+                return new Size(requiredWidth + 2, 16);
             }
 
             InvalidateVisual();

src/Views/Histories.axaml

@@ -138,16 +138,11 @@
                                                VerticalAlignment="Center"/>
 
                       <v:CommitRefsPresenter Grid.Column="1"
-                                             IconBackground="{DynamicResource Brush.DecoratorIconBG}"
+                                             TagBackground="{DynamicResource Brush.DecoratorTag}"
-                                             IconForeground="{DynamicResource Brush.DecoratorIcon}"
+                                             Foreground="{DynamicResource Brush.FG1}"
-                                             BranchNameBackground="{DynamicResource Brush.DecoratorBranch}"
-                                             HeadBranchNameBackground="{DynamicResource Brush.DecoratorHead}"
-                                             TagNameBackground="{DynamicResource Brush.DecoratorTag}"
-                                             LabelForeground="{DynamicResource Brush.DecoratorFG}"
                                              FontFamily="{DynamicResource Fonts.Primary}"
                                              FontSize="11"
-                                             VerticalAlignment="Center"
+                                             VerticalAlignment="Center"/>
-                                             Refs="{Binding Decorators}"/>
 
                       <v:CommitSubjectPresenter Grid.Column="2"
                                                 Classes="primary"