mirror of
https://github.com/ppy/osu.git
synced 2024-12-14 13:22:55 +08:00
Merge pull request #9696 from EVAST9919/comments-footer-colours
Comments container visual improvements
This commit is contained in:
Dan Balasescu
GitHub
commit
1ff3b20a5e
48
osu.Game/Overlays/Comments/Buttons/ChevronButton.cs
Normal file
48
osu.Game/Overlays/Comments/Buttons/ChevronButton.cs
Normal file
@ -0,0 +1,48 @@
|
||||
// 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.Game.Graphics.Containers;
|
||||
using osu.Framework.Bindables;
|
||||
using osu.Framework.Graphics.Sprites;
|
||||
using osuTK;
|
||||
using osu.Framework.Allocation;
|
||||
|
||||
namespace osu.Game.Overlays.Comments.Buttons
|
||||
{
|
||||
public class ChevronButton : OsuHoverContainer
|
||||
{
|
||||
public readonly BindableBool Expanded = new BindableBool(true);
|
||||
|
||||
private readonly SpriteIcon icon;
|
||||
|
||||
public ChevronButton()
|
||||
{
|
||||
Size = new Vector2(40, 22);
|
||||
Child = icon = new SpriteIcon
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
Size = new Vector2(12),
|
||||
};
|
||||
}
|
||||
|
||||
[BackgroundDependencyLoader]
|
||||
private void load(OverlayColourProvider colourProvider)
|
||||
{
|
||||
IdleColour = HoverColour = colourProvider.Foreground1;
|
||||
}
|
||||
|
||||
protected override void LoadComplete()
|
||||
{
|
||||
base.LoadComplete();
|
||||
Action = Expanded.Toggle;
|
||||
Expanded.BindValueChanged(onExpandedChanged, true);
|
||||
}
|
||||
|
||||
private void onExpandedChanged(ValueChangedEvent<bool> expanded)
|
||||
{
|
||||
icon.Icon = expanded.NewValue ? FontAwesome.Solid.ChevronUp : FontAwesome.Solid.ChevronDown;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -32,10 +32,6 @@ namespace osu.Game.Overlays.Comments.Buttons
|
||||
protected CommentRepliesButton()
|
||||
{
|
||||
AutoSizeAxes = Axes.Both;
|
||||
Margin = new MarginPadding
|
||||
{
|
||||
Vertical = 2
|
||||
};
|
||||
InternalChildren = new Drawable[]
|
||||
{
|
||||
new CircularContainer
|
||||
|
||||
@ -8,38 +8,42 @@ using osu.Framework.Graphics.Containers;
|
||||
using osu.Game.Graphics.Sprites;
|
||||
using System.Collections.Generic;
|
||||
using osuTK;
|
||||
using osu.Framework.Allocation;
|
||||
|
||||
namespace osu.Game.Overlays.Comments
|
||||
namespace osu.Game.Overlays.Comments.Buttons
|
||||
{
|
||||
public abstract class GetCommentRepliesButton : LoadingButton
|
||||
public class ShowMoreButton : LoadingButton
|
||||
{
|
||||
private const int duration = 200;
|
||||
|
||||
protected override IEnumerable<Drawable> EffectTargets => new[] { text };
|
||||
|
||||
private OsuSpriteText text;
|
||||
|
||||
protected GetCommentRepliesButton()
|
||||
public ShowMoreButton()
|
||||
{
|
||||
AutoSizeAxes = Axes.Both;
|
||||
LoadingAnimationSize = new Vector2(8);
|
||||
}
|
||||
|
||||
[BackgroundDependencyLoader]
|
||||
private void load(OverlayColourProvider colourProvider)
|
||||
{
|
||||
IdleColour = colourProvider.Light2;
|
||||
HoverColour = colourProvider.Light1;
|
||||
}
|
||||
|
||||
protected override Drawable CreateContent() => new Container
|
||||
{
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Child = text = new OsuSpriteText
|
||||
{
|
||||
AlwaysPresent = true,
|
||||
Font = OsuFont.GetFont(size: 12, weight: FontWeight.Bold),
|
||||
Text = GetText()
|
||||
Font = OsuFont.GetFont(size: 12, weight: FontWeight.SemiBold),
|
||||
Text = "show more"
|
||||
}
|
||||
};
|
||||
|
||||
protected abstract string GetText();
|
||||
protected override void OnLoadStarted() => text.FadeOut(200, Easing.OutQuint);
|
||||
|
||||
protected override void OnLoadStarted() => text.FadeOut(duration, Easing.OutQuint);
|
||||
|
||||
protected override void OnLoadFinished() => text.FadeIn(duration, Easing.OutQuint);
|
||||
protected override void OnLoadFinished() => text.FadeIn(200, Easing.OutQuint);
|
||||
}
|
||||
}
|
||||
@ -23,8 +23,6 @@ namespace osu.Game.Overlays.Comments
|
||||
public DeletedCommentsCounter()
|
||||
{
|
||||
AutoSizeAxes = Axes.Both;
|
||||
Margin = new MarginPadding { Vertical = 10, Left = 80 };
|
||||
|
||||
InternalChild = new FillFlowContainer
|
||||
{
|
||||
AutoSizeAxes = Axes.Both,
|
||||
|
||||
@ -28,7 +28,6 @@ namespace osu.Game.Overlays.Comments
|
||||
public class DrawableComment : CompositeDrawable
|
||||
{
|
||||
private const int avatar_size = 40;
|
||||
private const int margin = 10;
|
||||
|
||||
public Action<DrawableComment, int> RepliesRequested;
|
||||
|
||||
@ -58,7 +57,7 @@ namespace osu.Game.Overlays.Comments
|
||||
}
|
||||
|
||||
[BackgroundDependencyLoader]
|
||||
private void load()
|
||||
private void load(OverlayColourProvider colourProvider)
|
||||
{
|
||||
LinkFlowContainer username;
|
||||
FillFlowContainer info;
|
||||
@ -70,25 +69,25 @@ namespace osu.Game.Overlays.Comments
|
||||
AutoSizeAxes = Axes.Y;
|
||||
InternalChildren = new Drawable[]
|
||||
{
|
||||
new FillFlowContainer
|
||||
new Container
|
||||
{
|
||||
RelativeSizeAxes = Axes.X,
|
||||
AutoSizeAxes = Axes.Y,
|
||||
Direction = FillDirection.Vertical,
|
||||
Children = new Drawable[]
|
||||
Padding = getPadding(Comment.IsTopLevel),
|
||||
Child = new FillFlowContainer
|
||||
{
|
||||
new Container
|
||||
RelativeSizeAxes = Axes.X,
|
||||
AutoSizeAxes = Axes.Y,
|
||||
Direction = FillDirection.Vertical,
|
||||
Children = new Drawable[]
|
||||
{
|
||||
RelativeSizeAxes = Axes.X,
|
||||
AutoSizeAxes = Axes.Y,
|
||||
Padding = new MarginPadding(margin) { Left = margin + 5, Top = Comment.IsTopLevel ? 10 : 0 },
|
||||
Child = content = new GridContainer
|
||||
content = new GridContainer
|
||||
{
|
||||
RelativeSizeAxes = Axes.X,
|
||||
AutoSizeAxes = Axes.Y,
|
||||
ColumnDimensions = new[]
|
||||
{
|
||||
new Dimension(GridSizeMode.AutoSize),
|
||||
new Dimension(GridSizeMode.Absolute, size: avatar_size + 10),
|
||||
new Dimension(),
|
||||
},
|
||||
RowDimensions = new[]
|
||||
@ -99,93 +98,84 @@ namespace osu.Game.Overlays.Comments
|
||||
{
|
||||
new Drawable[]
|
||||
{
|
||||
new FillFlowContainer
|
||||
new Container
|
||||
{
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Margin = new MarginPadding { Horizontal = margin },
|
||||
Direction = FillDirection.Horizontal,
|
||||
Spacing = new Vector2(5, 0),
|
||||
Size = new Vector2(avatar_size),
|
||||
Children = new Drawable[]
|
||||
{
|
||||
new Container
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
Width = 40,
|
||||
AutoSizeAxes = Axes.Y,
|
||||
Child = votePill = new VotePill(Comment)
|
||||
{
|
||||
Anchor = Anchor.CentreRight,
|
||||
Origin = Anchor.CentreRight,
|
||||
}
|
||||
},
|
||||
new UpdateableAvatar(Comment.User)
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
Size = new Vector2(avatar_size),
|
||||
Masking = true,
|
||||
CornerRadius = avatar_size / 2f,
|
||||
CornerExponent = 2,
|
||||
},
|
||||
votePill = new VotePill(Comment)
|
||||
{
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreRight,
|
||||
Margin = new MarginPadding
|
||||
{
|
||||
Right = 5
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
new FillFlowContainer
|
||||
{
|
||||
RelativeSizeAxes = Axes.X,
|
||||
AutoSizeAxes = Axes.Y,
|
||||
Spacing = new Vector2(0, 3),
|
||||
Direction = FillDirection.Vertical,
|
||||
Spacing = new Vector2(0, 4),
|
||||
Margin = new MarginPadding
|
||||
{
|
||||
Vertical = 2
|
||||
},
|
||||
Children = new Drawable[]
|
||||
{
|
||||
new FillFlowContainer
|
||||
{
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Direction = FillDirection.Horizontal,
|
||||
Spacing = new Vector2(7, 0),
|
||||
Spacing = new Vector2(10, 0),
|
||||
Children = new Drawable[]
|
||||
{
|
||||
username = new LinkFlowContainer(s => s.Font = OsuFont.GetFont(size: 14, weight: FontWeight.Bold, italics: true))
|
||||
username = new LinkFlowContainer(s => s.Font = OsuFont.GetFont(size: 14, weight: FontWeight.Bold))
|
||||
{
|
||||
AutoSizeAxes = Axes.Both,
|
||||
AutoSizeAxes = Axes.Both
|
||||
},
|
||||
new ParentUsername(Comment),
|
||||
new OsuSpriteText
|
||||
{
|
||||
Alpha = Comment.IsDeleted ? 1 : 0,
|
||||
Font = OsuFont.GetFont(size: 14, weight: FontWeight.Bold, italics: true),
|
||||
Text = @"deleted",
|
||||
Font = OsuFont.GetFont(size: 14, weight: FontWeight.Bold),
|
||||
Text = "deleted"
|
||||
}
|
||||
}
|
||||
},
|
||||
message = new LinkFlowContainer(s => s.Font = OsuFont.GetFont(size: 14))
|
||||
{
|
||||
RelativeSizeAxes = Axes.X,
|
||||
AutoSizeAxes = Axes.Y,
|
||||
Padding = new MarginPadding { Right = 40 }
|
||||
AutoSizeAxes = Axes.Y
|
||||
},
|
||||
new FillFlowContainer
|
||||
info = new FillFlowContainer
|
||||
{
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Direction = FillDirection.Vertical,
|
||||
Direction = FillDirection.Horizontal,
|
||||
Spacing = new Vector2(10, 0),
|
||||
Children = new Drawable[]
|
||||
{
|
||||
info = new FillFlowContainer
|
||||
new DrawableDate(Comment.CreatedAt, 12, false)
|
||||
{
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Direction = FillDirection.Horizontal,
|
||||
Spacing = new Vector2(10, 0),
|
||||
Children = new Drawable[]
|
||||
{
|
||||
new OsuSpriteText
|
||||
{
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft,
|
||||
Font = OsuFont.GetFont(size: 12),
|
||||
Colour = OsuColour.Gray(0.7f),
|
||||
Text = HumanizerUtils.Humanize(Comment.CreatedAt)
|
||||
},
|
||||
}
|
||||
},
|
||||
Colour = colourProvider.Foreground1
|
||||
}
|
||||
}
|
||||
},
|
||||
new Container
|
||||
{
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Children = new Drawable[]
|
||||
{
|
||||
showRepliesButton = new ShowRepliesButton(Comment.RepliesCount)
|
||||
{
|
||||
Expanded = { BindTarget = childrenExpanded }
|
||||
@ -200,41 +190,51 @@ namespace osu.Game.Overlays.Comments
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
childCommentsVisibilityContainer = new FillFlowContainer
|
||||
{
|
||||
RelativeSizeAxes = Axes.X,
|
||||
AutoSizeAxes = Axes.Y,
|
||||
Direction = FillDirection.Vertical,
|
||||
Children = new Drawable[]
|
||||
},
|
||||
childCommentsVisibilityContainer = new FillFlowContainer
|
||||
{
|
||||
childCommentsContainer = new FillFlowContainer
|
||||
RelativeSizeAxes = Axes.X,
|
||||
AutoSizeAxes = Axes.Y,
|
||||
Direction = FillDirection.Vertical,
|
||||
Padding = new MarginPadding { Left = 20 },
|
||||
Children = new Drawable[]
|
||||
{
|
||||
Padding = new MarginPadding { Left = 20 },
|
||||
RelativeSizeAxes = Axes.X,
|
||||
AutoSizeAxes = Axes.Y,
|
||||
Direction = FillDirection.Vertical
|
||||
},
|
||||
deletedCommentsCounter = new DeletedCommentsCounter
|
||||
{
|
||||
ShowDeleted = { BindTarget = ShowDeleted }
|
||||
},
|
||||
showMoreButton = new ShowMoreButton
|
||||
{
|
||||
Action = () => RepliesRequested(this, ++currentPage)
|
||||
childCommentsContainer = new FillFlowContainer
|
||||
{
|
||||
RelativeSizeAxes = Axes.X,
|
||||
AutoSizeAxes = Axes.Y,
|
||||
Direction = FillDirection.Vertical
|
||||
},
|
||||
deletedCommentsCounter = new DeletedCommentsCounter
|
||||
{
|
||||
ShowDeleted = { BindTarget = ShowDeleted },
|
||||
Margin = new MarginPadding
|
||||
{
|
||||
Top = 10
|
||||
}
|
||||
},
|
||||
showMoreButton = new ShowMoreButton
|
||||
{
|
||||
Action = () => RepliesRequested(this, ++currentPage)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
chevronButton = new ChevronButton
|
||||
new Container
|
||||
{
|
||||
Size = new Vector2(70, 40),
|
||||
Anchor = Anchor.TopRight,
|
||||
Origin = Anchor.TopRight,
|
||||
Margin = new MarginPadding { Right = 30, Top = margin },
|
||||
Expanded = { BindTarget = childrenExpanded },
|
||||
Alpha = 0
|
||||
Margin = new MarginPadding { Horizontal = 5 },
|
||||
Child = chevronButton = new ChevronButton
|
||||
{
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft,
|
||||
Expanded = { BindTarget = childrenExpanded },
|
||||
Alpha = 0
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -247,10 +247,9 @@ namespace osu.Game.Overlays.Comments
|
||||
{
|
||||
info.Add(new OsuSpriteText
|
||||
{
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft,
|
||||
Font = OsuFont.GetFont(size: 12),
|
||||
Text = $@"edited {HumanizerUtils.Humanize(Comment.EditedAt.Value)} by {Comment.EditedUser.Username}"
|
||||
Font = OsuFont.GetFont(size: 12, weight: FontWeight.Regular),
|
||||
Text = $@"edited {HumanizerUtils.Humanize(Comment.EditedAt.Value)} by {Comment.EditedUser.Username}",
|
||||
Colour = colourProvider.Foreground1
|
||||
});
|
||||
}
|
||||
|
||||
@ -357,35 +356,21 @@ namespace osu.Game.Overlays.Comments
|
||||
showMoreButton.IsLoading = loadRepliesButton.IsLoading = false;
|
||||
}
|
||||
|
||||
private class ChevronButton : ShowChildrenButton
|
||||
private MarginPadding getPadding(bool isTopLevel)
|
||||
{
|
||||
private readonly SpriteIcon icon;
|
||||
|
||||
public ChevronButton()
|
||||
if (isTopLevel)
|
||||
{
|
||||
Child = icon = new SpriteIcon
|
||||
return new MarginPadding
|
||||
{
|
||||
Size = new Vector2(12),
|
||||
Horizontal = 70,
|
||||
Vertical = 15
|
||||
};
|
||||
}
|
||||
|
||||
protected override void OnExpandedChanged(ValueChangedEvent<bool> expanded)
|
||||
return new MarginPadding
|
||||
{
|
||||
icon.Icon = expanded.NewValue ? FontAwesome.Solid.ChevronUp : FontAwesome.Solid.ChevronDown;
|
||||
}
|
||||
}
|
||||
|
||||
private class ShowMoreButton : GetCommentRepliesButton
|
||||
{
|
||||
[BackgroundDependencyLoader]
|
||||
private void load(OverlayColourProvider colourProvider)
|
||||
{
|
||||
Margin = new MarginPadding { Vertical = 10, Left = 80 };
|
||||
IdleColour = colourProvider.Light2;
|
||||
HoverColour = colourProvider.Light1;
|
||||
}
|
||||
|
||||
protected override string GetText() => @"Show More";
|
||||
Top = 10
|
||||
};
|
||||
}
|
||||
|
||||
private class ParentUsername : FillFlowContainer, IHasTooltip
|
||||
|
||||
@ -1,33 +0,0 @@
|
||||
// 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.Game.Graphics.Containers;
|
||||
using osu.Framework.Bindables;
|
||||
using osuTK.Graphics;
|
||||
using osu.Game.Graphics;
|
||||
|
||||
namespace osu.Game.Overlays.Comments
|
||||
{
|
||||
public abstract class ShowChildrenButton : OsuHoverContainer
|
||||
{
|
||||
public readonly BindableBool Expanded = new BindableBool(true);
|
||||
|
||||
protected ShowChildrenButton()
|
||||
{
|
||||
AutoSizeAxes = Axes.Both;
|
||||
IdleColour = OsuColour.Gray(0.7f);
|
||||
HoverColour = Color4.White;
|
||||
}
|
||||
|
||||
protected override void LoadComplete()
|
||||
{
|
||||
Action = Expanded.Toggle;
|
||||
|
||||
Expanded.BindValueChanged(OnExpandedChanged, true);
|
||||
base.LoadComplete();
|
||||
}
|
||||
|
||||
protected abstract void OnExpandedChanged(ValueChangedEvent<bool> expanded);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user