mirror of
https://github.com/ppy/osu
synced 2024-12-14 19:06:07 +00:00
Merge pull request #6529 from EVAST9919/comments-vote-pill
Implement working VotePill for CommentsContainer
This commit is contained in:
commit
2b7115f5fb
@ -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;
|
||||
|
85
osu.Game/Graphics/UserInterface/LoadingButton.cs
Normal file
85
osu.Game/Graphics/UserInterface/LoadingButton.cs
Normal 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();
|
||||
}
|
||||
}
|
@ -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
|
||||
{
|
||||
|
36
osu.Game/Online/API/Requests/CommentVoteRequest.cs
Normal file
36
osu.Game/Online/API/Requests/CommentVoteRequest.cs
Normal 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
|
||||
}
|
||||
}
|
@ -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);
|
||||
|
@ -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")]
|
||||
|
@ -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}"
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
183
osu.Game/Overlays/Comments/VotePill.cs
Normal file
183
osu.Game/Overlays/Comments/VotePill.cs
Normal 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();
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user