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

Implement working VotePill for CommentsContainer
This commit is contained in:
Dan Balasescu 2019-10-25 19:56:03 +09:00 committed by GitHub
commit 2b7115f5fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 367 additions and 111 deletions

View File

@ -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;

View File

@ -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();
}
}

View File

@ -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,100 +30,55 @@ 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;
}
protected override Drawable CreateContent() => new CircularContainer
{
Masking = true,
Size = new Vector2(140, 30),
Children = new Drawable[]
{
new CircularContainer
background = new Box
{
Masking = true,
Size = new Vector2(140, 30),
RelativeSizeAxes = Axes.Both,
},
textContainer = new FillFlowContainer
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
AutoSizeAxes = Axes.Both,
Direction = FillDirection.Horizontal,
Spacing = new Vector2(7),
Children = new Drawable[]
{
background = new Box
{
RelativeSizeAxes = Axes.Both,
},
content = new FillFlowContainer
leftChevron = new ChevronIcon(),
text = new OsuSpriteText
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
AutoSizeAxes = Axes.Both,
Direction = FillDirection.Horizontal,
Spacing = new Vector2(7),
Children = new Drawable[]
{
leftChevron = new ChevronIcon(),
text = new OsuSpriteText
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Font = OsuFont.GetFont(size: 12, weight: FontWeight.Bold),
Text = "show more".ToUpper(),
},
rightChevron = new ChevronIcon(),
}
},
loading = new LoadingAnimation
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Size = new Vector2(12)
Font = OsuFont.GetFont(size: 12, weight: FontWeight.Bold),
Text = "show more".ToUpper(),
},
rightChevron = new ChevronIcon(),
}
}
};
}
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 override void OnLoadStarted() => textContainer.FadeOut(duration, Easing.OutQuint);
protected override void OnLoadFinished() => textContainer.FadeIn(duration, Easing.OutQuint);
private class ChevronIcon : SpriteIcon
{

View File

@ -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
}
}

View File

@ -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);

View File

@ -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")]

View File

@ -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}"
}
};
}
}
}
}

View File

@ -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();
}
}
}