1
0
mirror of https://github.com/ppy/osu.git synced 2025-02-20 05:36:05 +08:00

Implement CommentsHeader component

This commit is contained in:
Andrei Zavatski 2019-10-10 12:06:25 +03:00
parent c6a6ea3890
commit 64f62bd2bf
5 changed files with 357 additions and 0 deletions

View File

@ -0,0 +1,39 @@
// 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 System;
using System.Collections.Generic;
using NUnit.Framework;
using osu.Framework.Bindables;
using osu.Game.Overlays.Comments;
namespace osu.Game.Tests.Visual.Online
{
[TestFixture]
public class TestSceneCommentsHeader : OsuTestScene
{
public override IReadOnlyList<Type> RequiredTypes => new[]
{
typeof(CommentsHeader),
typeof(HeaderButton),
typeof(SortSelector),
};
private readonly Bindable<SortCommentsBy> sort = new Bindable<SortCommentsBy>();
private readonly BindableBool showDeleted = new BindableBool();
public TestSceneCommentsHeader()
{
Add(new CommentsHeader
{
Sort = { BindTarget = sort },
ShowDeleted = { BindTarget = showDeleted }
});
AddStep("Trigger ShowDeleted", () => showDeleted.Value = !showDeleted.Value);
AddStep("Select old", () => sort.Value = SortCommentsBy.Old);
AddStep("Select new", () => sort.Value = SortCommentsBy.New);
AddStep("Select top", () => sort.Value = SortCommentsBy.Top);
}
}
}

View File

@ -0,0 +1,137 @@
// 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.Allocation;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics;
using osu.Framework.Bindables;
using osu.Framework.Graphics.Shapes;
using osu.Game.Graphics;
using osu.Framework.Graphics.Sprites;
using osuTK;
using osu.Framework.Input.Events;
namespace osu.Game.Overlays.Comments
{
public class CommentsHeader : CompositeDrawable
{
private const int height = 40;
private const int spacing = 10;
private const int padding = 50;
private const int text_size = 14;
public readonly Bindable<SortCommentsBy> Sort = new Bindable<SortCommentsBy>();
public readonly BindableBool ShowDeleted = new BindableBool();
private readonly Box background;
public CommentsHeader()
{
RelativeSizeAxes = Axes.X;
Height = height;
AddRangeInternal(new Drawable[]
{
background = new Box
{
RelativeSizeAxes = Axes.Both,
},
new Container
{
RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding { Horizontal = padding },
Children = new Drawable[]
{
new FillFlowContainer
{
AutoSizeAxes = Axes.Both,
Direction = FillDirection.Horizontal,
Spacing = new Vector2(spacing, 0),
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Children = new Drawable[]
{
new SpriteText
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Font = OsuFont.GetFont(size: text_size),
Text = @"Sort by"
},
new SortSelector
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Current = Sort
}
}
},
new ShowDeletedButton
{
Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
Checked = { BindTarget = ShowDeleted }
}
}
}
});
}
[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
background.Colour = colours.Gray3;
}
private class ShowDeletedButton : HeaderButton
{
private const int spacing = 5;
public readonly BindableBool Checked = new BindableBool();
private readonly SpriteIcon checkboxIcon;
public ShowDeletedButton()
{
Add(new FillFlowContainer
{
AutoSizeAxes = Axes.Both,
Direction = FillDirection.Horizontal,
Spacing = new Vector2(spacing, 0),
Children = new Drawable[]
{
checkboxIcon = new SpriteIcon
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Size = new Vector2(10),
},
new SpriteText
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Font = OsuFont.GetFont(size: text_size),
Text = @"Show deleted"
}
},
});
}
protected override void LoadComplete()
{
Checked.BindValueChanged(onCheckedChanged, true);
base.LoadComplete();
}
private void onCheckedChanged(ValueChangedEvent<bool> isChecked)
{
checkboxIcon.Icon = isChecked.NewValue ? FontAwesome.Solid.CheckSquare : FontAwesome.Regular.Square;
}
protected override bool OnClick(ClickEvent e)
{
Checked.Value = !Checked.Value;
return base.OnClick(e);
}
}
}
}

View File

@ -0,0 +1,72 @@
// 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.Allocation;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Shapes;
using osu.Game.Graphics;
using osu.Framework.Input.Events;
using osu.Game.Graphics.UserInterface;
namespace osu.Game.Overlays.Comments
{
public class HeaderButton : Container
{
private const int height = 20;
private const int corner_radius = 3;
private const int margin = 10;
private const int duration = 200;
protected override Container<Drawable> Content => content;
private readonly Box background;
private readonly Container content;
public HeaderButton()
{
AutoSizeAxes = Axes.X;
Height = height;
Masking = true;
CornerRadius = corner_radius;
AddRangeInternal(new Drawable[]
{
background = new Box
{
RelativeSizeAxes = Axes.Both,
Alpha = 0,
},
content = new Container
{
AutoSizeAxes = Axes.Both,
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Margin = new MarginPadding { Horizontal = margin }
},
new HoverClickSounds(),
});
}
[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
background.Colour = colours.Gray4;
}
protected override bool OnHover(HoverEvent e)
{
FadeInBackground();
return base.OnHover(e);
}
protected override void OnHoverLost(HoverLostEvent e)
{
base.OnHoverLost(e);
FadeOutBackground();
}
protected void FadeInBackground() => background.FadeIn(duration, Easing.OutQuint);
protected void FadeOutBackground() => background.FadeOut(duration, Easing.OutQuint);
}
}

View File

@ -0,0 +1,106 @@
// 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.Framework.Graphics.UserInterface;
using osu.Framework.Graphics.Sprites;
using osu.Game.Graphics;
using osuTK;
using osu.Game.Graphics.UserInterface;
using osu.Framework.Input.Events;
using osu.Framework.Bindables;
using osu.Framework.Allocation;
using osuTK.Graphics;
namespace osu.Game.Overlays.Comments
{
public class SortSelector : OsuTabControl<SortCommentsBy>
{
private const int spacing = 5;
protected override Dropdown<SortCommentsBy> CreateDropdown() => null;
protected override TabItem<SortCommentsBy> CreateTabItem(SortCommentsBy value) => new SortTabItem(value);
protected override TabFillFlowContainer CreateTabFlow() => new TabFillFlowContainer
{
AutoSizeAxes = Axes.Both,
Direction = FillDirection.Horizontal,
Spacing = new Vector2(spacing, 0),
};
public SortSelector()
{
AutoSizeAxes = Axes.Both;
}
private class SortTabItem : TabItem<SortCommentsBy>
{
private readonly TabContent content;
public SortTabItem(SortCommentsBy value)
: base(value)
{
AutoSizeAxes = Axes.Both;
Child = content = new TabContent(value)
{
Active = { BindTarget = Active }
};
}
protected override void OnActivated() => content.Activate();
protected override void OnDeactivated() => content.Deactivate();
private class TabContent : HeaderButton
{
private const int text_size = 14;
public readonly BindableBool Active = new BindableBool();
[Resolved]
private OsuColour colours { get; set; }
private readonly SpriteText text;
public TabContent(SortCommentsBy value)
{
Add(text = new SpriteText
{
Font = OsuFont.GetFont(size: text_size),
Text = value.ToString()
});
}
public void Activate()
{
FadeInBackground();
text.Font = text.Font.With(weight: FontWeight.Bold);
text.Colour = colours.BlueLighter;
}
public void Deactivate()
{
if (!IsHovered)
FadeOutBackground();
text.Font = text.Font.With(weight: FontWeight.Medium);
text.Colour = Color4.White;
}
protected override void OnHoverLost(HoverLostEvent e)
{
if (!Active.Value) base.OnHoverLost(e);
}
}
}
}
public enum SortCommentsBy
{
New,
Old,
Top
}
}

View File

@ -32,4 +32,7 @@
<PackageReference Include="SharpRaven" Version="2.4.0" />
<PackageReference Include="System.ComponentModel.Annotations" Version="4.6.0" />
</ItemGroup>
<ItemGroup>
<Folder Include="Overlays\Comments\" />
</ItemGroup>
</Project>