Merge pull request #6529 from EVAST9919/comments-vote-pill

Implement working VotePill for CommentsContainer

osu.Game.Tests/Visual/Online/TestSceneCommentsContainer.cs

@@ -22,7 +22,8 @@ namespace osu.Game.Tests.Visual.Online
             typeof(HeaderButton),
             typeof(SortTabControl),
             typeof(ShowChildrenButton),
-            typeof(DeletedChildrenPlaceholder)
+            typeof(DeletedChildrenPlaceholder),
+            typeof(VotePill)
         };
 
         protected override bool UseOnlineAPI => true;

osu.Game/Graphics/UserInterface/LoadingButton.cs

@@ -0,0 +1,85 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using osu.Framework.Graphics;
+using osu.Framework.Input.Events;
+using osu.Game.Graphics.Containers;
+using osuTK;
+
+namespace osu.Game.Graphics.UserInterface
+{
+    public abstract class LoadingButton : OsuHoverContainer
+    {
+        private bool isLoading;
+
+        public bool IsLoading
+        {
+            get => isLoading;
+            set
+            {
+                isLoading = value;
+
+                Enabled.Value = !isLoading;
+
+                if (value)
+                {
+                    loading.Show();
+                    OnLoadStarted();
+                }
+                else
+                {
+                    loading.Hide();
+                    OnLoadFinished();
+                }
+            }
+        }
+
+        public Vector2 LoadingAnimationSize
+        {
+            get => loading.Size;
+            set => loading.Size = value;
+        }
+
+        private readonly LoadingAnimation loading;
+
+        protected LoadingButton()
+        {
+            AddRange(new[]
+            {
+                CreateContent(),
+                loading = new LoadingAnimation
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Size = new Vector2(12)
+                }
+            });
+        }
+
+        protected override bool OnClick(ClickEvent e)
+        {
+            if (!Enabled.Value)
+                return false;
+
+            try
+            {
+                return base.OnClick(e);
+            }
+            finally
+            {
+                // run afterwards as this will disable this button.
+                IsLoading = true;
+            }
+        }
+
+        protected virtual void OnLoadStarted()
+        {
+        }
+
+        protected virtual void OnLoadFinished()
+        {
+        }
+
+        protected abstract Drawable CreateContent();
+    }
+}

osu.Game/Graphics/UserInterface/ShowMoreButton.cs

@@ -5,8 +5,6 @@ using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.Sprites;
-using osu.Framework.Input.Events;
-using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Sprites;
 using osuTK;
 using osuTK.Graphics;
@@ -14,9 +12,9 @@ using System.Collections.Generic;
 
 namespace osu.Game.Graphics.UserInterface
 {
-    public class ShowMoreButton : OsuHoverContainer
+    public class ShowMoreButton : LoadingButton
     {
-        private const float fade_duration = 200;
+        private const int duration = 200;
 
         private Color4 chevronIconColour;
 
@@ -32,45 +30,20 @@ namespace osu.Game.Graphics.UserInterface
             set => text.Text = value;
         }
 
-        private bool isLoading;
-
-        public bool IsLoading
-        {
-            get => isLoading;
-            set
-            {
-                isLoading = value;
-
-                Enabled.Value = !isLoading;
-
-                if (value)
-                {
-                    loading.Show();
-                    content.FadeOut(fade_duration, Easing.OutQuint);
-                }
-                else
-                {
-                    loading.Hide();
-                    content.FadeIn(fade_duration, Easing.OutQuint);
-                }
-            }
-        }
-
-        private readonly Box background;
-        private readonly LoadingAnimation loading;
-        private readonly FillFlowContainer content;
-        private readonly ChevronIcon leftChevron;
-        private readonly ChevronIcon rightChevron;
-        private readonly SpriteText text;
-
         protected override IEnumerable<Drawable> EffectTargets => new[] { background };
 
+        private ChevronIcon leftChevron;
+        private ChevronIcon rightChevron;
+        private SpriteText text;
+        private Box background;
+        private FillFlowContainer textContainer;
+
         public ShowMoreButton()
         {
             AutoSizeAxes = Axes.Both;
-            Children = new Drawable[]
+        }
-            {
+
-                new CircularContainer
+        protected override Drawable CreateContent() => new CircularContainer
         {
             Masking = true,
             Size = new Vector2(140, 30),
@@ -80,7 +53,7 @@ namespace osu.Game.Graphics.UserInterface
                 {
                     RelativeSizeAxes = Axes.Both,
                 },
-                        content = new FillFlowContainer
+                textContainer = new FillFlowContainer
                 {
                     Anchor = Anchor.Centre,
                     Origin = Anchor.Centre,
@@ -99,33 +72,13 @@ namespace osu.Game.Graphics.UserInterface
                         },
                         rightChevron = new ChevronIcon(),
                     }
-                        },
-                        loading = new LoadingAnimation
-                        {
-                            Anchor = Anchor.Centre,
-                            Origin = Anchor.Centre,
-                            Size = new Vector2(12)
-                        },
                 }
             }
         };
-        }
 
-        protected override bool OnClick(ClickEvent e)
+        protected override void OnLoadStarted() => textContainer.FadeOut(duration, Easing.OutQuint);
-        {
-            if (!Enabled.Value)
-                return false;
 
-            try
+        protected override void OnLoadFinished() => textContainer.FadeIn(duration, Easing.OutQuint);
-            {
-                return base.OnClick(e);
-            }
-            finally
-            {
-                // run afterwards as this will disable this button.
-                IsLoading = true;
-            }
-        }
 
         private class ChevronIcon : SpriteIcon
         {

osu.Game/Online/API/Requests/CommentVoteRequest.cs

@@ -0,0 +1,36 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using osu.Framework.IO.Network;
+using osu.Game.Online.API.Requests.Responses;
+using System.Net.Http;
+
+namespace osu.Game.Online.API.Requests
+{
+    public class CommentVoteRequest : APIRequest<CommentBundle>
+    {
+        private readonly long id;
+        private readonly CommentVoteAction action;
+
+        public CommentVoteRequest(long id, CommentVoteAction action)
+        {
+            this.id = id;
+            this.action = action;
+        }
+
+        protected override WebRequest CreateWebRequest()
+        {
+            var req = base.CreateWebRequest();
+            req.Method = action == CommentVoteAction.Vote ? HttpMethod.Post : HttpMethod.Delete;
+            return req;
+        }
+
+        protected override string Target => $@"comments/{id}/vote";
+    }
+
+    public enum CommentVoteAction
+    {
+        Vote,
+        UnVote
+    }
+}

osu.Game/Online/API/Requests/Responses/Comment.cs

@@ -72,6 +72,8 @@ namespace osu.Game.Online.API.Requests.Responses
 
         public bool HasMessage => !string.IsNullOrEmpty(MessageHtml);
 
+        public bool IsVoted { get; set; }
+
         public string GetMessage => HasMessage ? WebUtility.HtmlDecode(Regex.Replace(MessageHtml, @"<(.|\n)*?>", string.Empty)) : string.Empty;
 
         public int DeletedChildrenCount => ChildComments.Count(c => c.IsDeleted);

osu.Game/Online/API/Requests/Responses/CommentBundle.cs

@@ -47,6 +47,22 @@ namespace osu.Game.Online.API.Requests.Responses
         [JsonProperty(@"included_comments")]
         public List<Comment> IncludedComments { get; set; }
 
+        [JsonProperty(@"user_votes")]
+        private List<long> userVotes
+        {
+            set
+            {
+                value.ForEach(v =>
+                {
+                    Comments.ForEach(c =>
+                    {
+                        if (v == c.Id)
+                            c.IsVoted = true;
+                    });
+                });
+            }
+        }
+
         private List<User> users;
 
         [JsonProperty(@"users")]

osu.Game/Overlays/Comments/DrawableComment.cs

@@ -55,7 +55,7 @@ namespace osu.Game.Overlays.Comments
                     {
                         RelativeSizeAxes = Axes.X,
                         AutoSizeAxes = Axes.Y,
-                        Padding = new MarginPadding(margin),
+                        Padding = new MarginPadding(margin) { Left = margin + 5 },
                         Child = content = new GridContainer
                         {
                             RelativeSizeAxes = Axes.X,
@@ -81,11 +81,17 @@ namespace osu.Game.Overlays.Comments
                                         Spacing = new Vector2(5, 0),
                                         Children = new Drawable[]
                                         {
-                                            votePill = new VotePill(comment.VotesCount)
+                                            new Container
                                             {
                                                 Anchor = Anchor.Centre,
                                                 Origin = Anchor.Centre,
-                                                AlwaysPresent = true,
+                                                Width = 40,
+                                                AutoSizeAxes = Axes.Y,
+                                                Child = votePill = new VotePill(comment)
+                                                {
+                                                    Anchor = Anchor.CentreRight,
+                                                    Origin = Anchor.CentreRight,
+                                                }
                                             },
                                             new UpdateableAvatar(comment.User)
                                             {
@@ -333,31 +339,5 @@ namespace osu.Game.Overlays.Comments
                 return parentComment.HasMessage ? parentComment.GetMessage : parentComment.IsDeleted ? @"deleted" : string.Empty;
             }
         }
-
-        private class VotePill : CircularContainer
-        {
-            public VotePill(int count)
-            {
-                AutoSizeAxes = Axes.X;
-                Height = 20;
-                Masking = true;
-                Children = new Drawable[]
-                {
-                    new Box
-                    {
-                        RelativeSizeAxes = Axes.Both,
-                        Colour = OsuColour.Gray(0.05f)
-                    },
-                    new SpriteText
-                    {
-                        Anchor = Anchor.Centre,
-                        Origin = Anchor.Centre,
-                        Margin = new MarginPadding { Horizontal = margin },
-                        Font = OsuFont.GetFont(size: 14),
-                        Text = $"+{count}"
-                    }
-                };
-            }
-        }
     }
 }

osu.Game/Overlays/Comments/VotePill.cs

@@ -0,0 +1,183 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics;
+using osu.Game.Graphics;
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Online.API.Requests.Responses;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Allocation;
+using osu.Game.Graphics.Sprites;
+using osuTK.Graphics;
+using osu.Framework.Extensions.Color4Extensions;
+using osu.Framework.Input.Events;
+using osu.Game.Graphics.UserInterface;
+using System.Collections.Generic;
+using osuTK;
+using osu.Game.Online.API;
+using osu.Game.Online.API.Requests;
+using osu.Framework.Bindables;
+using System.Linq;
+
+namespace osu.Game.Overlays.Comments
+{
+    public class VotePill : LoadingButton, IHasAccentColour
+    {
+        private const int duration = 200;
+
+        public Color4 AccentColour { get; set; }
+
+        protected override IEnumerable<Drawable> EffectTargets => null;
+
+        [Resolved]
+        private IAPIProvider api { get; set; }
+
+        private readonly Comment comment;
+        private Box background;
+        private Box hoverLayer;
+        private CircularContainer borderContainer;
+        private SpriteText sideNumber;
+        private OsuSpriteText votesCounter;
+        private CommentVoteRequest request;
+
+        private readonly BindableBool isVoted = new BindableBool();
+        private readonly BindableInt votesCount = new BindableInt();
+
+        public VotePill(Comment comment)
+        {
+            this.comment = comment;
+
+            Action = onAction;
+
+            AutoSizeAxes = Axes.X;
+            Height = 20;
+            LoadingAnimationSize = new Vector2(10);
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            AccentColour = borderContainer.BorderColour = sideNumber.Colour = colours.GreenLight;
+            hoverLayer.Colour = Color4.Black.Opacity(0.5f);
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+            isVoted.Value = comment.IsVoted;
+            votesCount.Value = comment.VotesCount;
+            isVoted.BindValueChanged(voted => background.Colour = voted.NewValue ? AccentColour : OsuColour.Gray(0.05f), true);
+            votesCount.BindValueChanged(count => votesCounter.Text = $"+{count.NewValue}", true);
+        }
+
+        private void onAction()
+        {
+            request = new CommentVoteRequest(comment.Id, isVoted.Value ? CommentVoteAction.UnVote : CommentVoteAction.Vote);
+            request.Success += onSuccess;
+            api.Queue(request);
+        }
+
+        private void onSuccess(CommentBundle response)
+        {
+            var receivedComment = response.Comments.Single();
+            isVoted.Value = receivedComment.IsVoted;
+            votesCount.Value = receivedComment.VotesCount;
+            IsLoading = false;
+        }
+
+        protected override Drawable CreateContent() => new Container
+        {
+            RelativeSizeAxes = Axes.Y,
+            AutoSizeAxes = Axes.X,
+            Children = new Drawable[]
+            {
+                borderContainer = new CircularContainer
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Masking = true,
+                    Children = new Drawable[]
+                    {
+                        background = new Box
+                        {
+                            RelativeSizeAxes = Axes.Both
+                        },
+                        hoverLayer = new Box
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Alpha = 0
+                        }
+                    }
+                },
+                sideNumber = new SpriteText
+                {
+                    Anchor = Anchor.CentreLeft,
+                    Origin = Anchor.CentreRight,
+                    Text = "+1",
+                    Font = OsuFont.GetFont(size: 14),
+                    Margin = new MarginPadding { Right = 3 },
+                    Alpha = 0,
+                },
+                votesCounter = new OsuSpriteText
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Margin = new MarginPadding { Horizontal = 10 },
+                    Font = OsuFont.GetFont(size: 14),
+                    AlwaysPresent = true,
+                }
+            },
+        };
+
+        protected override void OnLoadStarted()
+        {
+            votesCounter.FadeOut(duration, Easing.OutQuint);
+            updateDisplay();
+        }
+
+        protected override void OnLoadFinished()
+        {
+            votesCounter.FadeIn(duration, Easing.OutQuint);
+
+            if (IsHovered)
+                onHoverAction();
+        }
+
+        protected override bool OnHover(HoverEvent e)
+        {
+            onHoverAction();
+            return base.OnHover(e);
+        }
+
+        protected override void OnHoverLost(HoverLostEvent e)
+        {
+            updateDisplay();
+            base.OnHoverLost(e);
+        }
+
+        private void updateDisplay()
+        {
+            if (isVoted.Value)
+            {
+                hoverLayer.FadeTo(IsHovered ? 1 : 0);
+                sideNumber.Hide();
+            }
+            else
+                sideNumber.FadeTo(IsHovered ? 1 : 0);
+
+            borderContainer.BorderThickness = IsHovered ? 3 : 0;
+        }
+
+        private void onHoverAction()
+        {
+            if (!IsLoading)
+                updateDisplay();
+        }
+
+        protected override void Dispose(bool isDisposing)
+        {
+            base.Dispose(isDisposing);
+            request?.Cancel();
+        }
+    }
+}