From 6908216de554de2b762136bdc47bbc50fef77691 Mon Sep 17 00:00:00 2001 From: leo Date: Mon, 14 Oct 2024 21:09:03 +0800 Subject: [PATCH] ux: new commit graph decorator style (#564) --- src/Models/Commit.cs | 7 +- src/Models/CommitGraph.cs | 1 + src/Resources/Icons.axaml | 1 + src/Resources/Themes.axaml | 15 --- src/Views/CommitBaseInfo.axaml | 11 +-- src/Views/CommitRefsPresenter.cs | 152 +++++++++++++------------------ src/Views/Histories.axaml | 11 +-- 7 files changed, 74 insertions(+), 124 deletions(-) diff --git a/src/Models/Commit.cs b/src/Models/Commit.cs index 9549e4a4..534cf5bb 100644 --- a/src/Models/Commit.cs +++ b/src/Models/Commit.cs @@ -31,18 +31,19 @@ namespace SourceGit.Models public List Decorators { get; set; } = new List(); 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) { diff --git a/src/Models/CommitGraph.cs b/src/Models/CommitGraph.cs index 3872fcc6..ce1700bc 100644 --- a/src/Models/CommitGraph.cs +++ b/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. diff --git a/src/Resources/Icons.axaml b/src/Resources/Icons.axaml index 737b7fef..98ed4bf3 100644 --- a/src/Resources/Icons.axaml +++ b/src/Resources/Icons.axaml @@ -50,6 +50,7 @@ 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 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 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 + 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 M416 64H768v64h-64v704h64v64H448v-64h64V512H416a224 224 0 1 1 0-448zM576 832h64V128H576v704zM416 128H512v320H416a160 160 0 0 1 0-320z M24 512A488 488 0 01512 24A488 488 0 011000 512A488 488 0 01512 1000A488 488 0 0124 512zm447-325v327L243 619l51 111 300-138V187H471z 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 diff --git a/src/Resources/Themes.axaml b/src/Resources/Themes.axaml index 5f8dca57..34b18b79 100644 --- a/src/Resources/Themes.axaml +++ b/src/Resources/Themes.axaml @@ -10,12 +10,7 @@ #FFFAFAFA #FFB0CEE8 #FF1F1F1F - #A0A0A0 - White - #008585 - #0C0E21 #79855f - White #FF836C2E #FFFFFFFF #FFCFCFCF @@ -42,12 +37,7 @@ #FF1C1C1C #FF8F8F8F #FFDDDDDD - #FF505050 - #FFF8F8F8 - #FFFFB835 - #f4f1de #84c88a - Black #FFFAFAD2 #FF252525 #FF181818 @@ -74,12 +64,7 @@ - - - - - diff --git a/src/Views/CommitBaseInfo.axaml b/src/Views/CommitBaseInfo.axaml index 2ded8ac7..3c699122 100644 --- a/src/Views/CommitBaseInfo.axaml +++ b/src/Views/CommitBaseInfo.axaml @@ -98,16 +98,11 @@ - + VerticalAlignment="Center"/> diff --git a/src/Views/CommitRefsPresenter.cs b/src/Views/CommitRefsPresenter.cs index ecb2c982..71eddc66 100644 --- a/src/Views/CommitRefsPresenter.cs +++ b/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 static readonly StyledProperty> RefsProperty = - AvaloniaProperty.Register>(nameof(Refs)); - - public List Refs - { - get => GetValue(RefsProperty); - set => SetValue(RefsProperty, value); + public IBrush Brush { get; set; } = null; + public bool IsHead { get; set; } = false; + public double Width { get; set; } = 0.0; } public static readonly StyledProperty FontFamilyProperty = @@ -44,73 +37,32 @@ namespace SourceGit.Views set => SetValue(FontSizeProperty, value); } - public static readonly StyledProperty IconBackgroundProperty = - AvaloniaProperty.Register(nameof(IconBackground), Brushes.White); + public static readonly StyledProperty ForegroundProperty = + AvaloniaProperty.Register(nameof(Foreground), Brushes.White); - public IBrush IconBackground + public IBrush Foreground { - get => GetValue(IconBackgroundProperty); - set => SetValue(IconBackgroundProperty, value); + get => GetValue(ForegroundProperty); + set => SetValue(ForegroundProperty, value); } - public static readonly StyledProperty IconForegroundProperty = - AvaloniaProperty.Register(nameof(IconForeground), Brushes.White); + public static readonly StyledProperty TagBackgroundProperty = + AvaloniaProperty.Register(nameof(TagBackground), Brushes.White); - public IBrush IconForeground + public IBrush TagBackground { - get => GetValue(IconForegroundProperty); - set => SetValue(IconForegroundProperty, value); - } - - public static readonly StyledProperty LabelForegroundProperty = - AvaloniaProperty.Register(nameof(LabelForeground), Brushes.White); - - public IBrush LabelForeground - { - get => GetValue(LabelForegroundProperty); - set => SetValue(LabelForegroundProperty, value); - } - - public static readonly StyledProperty BranchNameBackgroundProperty = - AvaloniaProperty.Register(nameof(BranchNameBackground), Brushes.White); - - public IBrush BranchNameBackground - { - get => GetValue(BranchNameBackgroundProperty); - set => SetValue(BranchNameBackgroundProperty, value); - } - - public static readonly StyledProperty HeadBranchNameBackgroundProperty = - AvaloniaProperty.Register(nameof(HeadBranchNameBackground), Brushes.White); - - public IBrush HeadBranchNameBackground - { - get => GetValue(HeadBranchNameBackgroundProperty); - set => SetValue(HeadBranchNameBackgroundProperty, value); - } - - public static readonly StyledProperty TagNameBackgroundProperty = - AvaloniaProperty.Register(nameof(TagNameBackground), Brushes.White); - - public IBrush TagNameBackground - { - get => GetValue(TagNameBackgroundProperty); - set => SetValue(TagNameBackgroundProperty, value); + get => GetValue(TagBackgroundProperty); + set => SetValue(TagBackgroundProperty, value); } static CommitRefsPresenter() { AffectsMeasure( FontFamilyProperty, - FontSizeProperty, - LabelForegroundProperty, - RefsProperty); + FontSizeProperty); AffectsRender( - IconBackgroundProperty, - IconForegroundProperty, - BranchNameBackgroundProperty, - TagNameBackgroundProperty); + TagBackgroundProperty); } public override void Render(DrawingContext context) @@ -118,39 +70,60 @@ namespace SourceGit.Views if (_items.Count == 0) return; - var iconFG = IconForeground; - var iconBG = IconBackground; - var x = 0.0; - + var fg = Foreground; + var x = 1.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); - context.DrawRectangle(item.LabelBG, null, labelRect); - context.DrawText(item.Label, new Point(x + 20, 8.0 - item.Label.Height * 0.5)); + using (context.PushTransform(Matrix.CreateTranslation(x + 3, 3))) + context.DrawGeometry(fg, null, item.Icon); - using (context.PushTransform(Matrix.CreateTranslation(x + 4, 4))) - context.DrawGeometry(iconFG, null, item.Icon); + if (item.IsHead) + { + 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 branchBG = BranchNameBackground; - var headBG = HeadBranchNameBackground; - var tagBG = TagNameBackground; + var fg = Foreground; + var tagBG = TagBackground; var labelSize = FontSize; var requiredWidth = 0.0; @@ -164,28 +137,25 @@ namespace SourceGit.Views CultureInfo.CurrentCulture, FlowDirection.LeftToRight, isHead ? typefaceBold : typeface, - labelSize, - labelFG); + isHead ? labelSize + 1 : labelSize, + 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.Check") as StreamGeometry; + geo = this.FindResource("Icons.Head") 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(); diff --git a/src/Views/Histories.axaml b/src/Views/Histories.axaml index 65ec029d..201375f7 100644 --- a/src/Views/Histories.axaml +++ b/src/Views/Histories.axaml @@ -138,16 +138,11 @@ VerticalAlignment="Center"/> + VerticalAlignment="Center"/>