1
0
mirror of https://github.com/ppy/osu.git synced 2024-12-14 10:52:53 +08:00

Merge pull request #9696 from EVAST9919/comments-footer-colours

Comments container visual improvements
This commit is contained in:
Dan Balasescu 2020-07-28 15:36:29 +09:00 committed by GitHub
commit 1ff3b20a5e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 157 additions and 159 deletions

View 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;
}
}
}

View File

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

View File

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

View File

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

View File

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

View File

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