mirror of
https://github.com/ppy/osu.git
synced 2024-11-11 17:47:29 +08:00
Merge pull request #11659 from peppy/playlists-item-visual-improvements
Improve appearance of playlist items display
This commit is contained in:
Dan Balasescu
GitHub
commit
19cbcd556c
@ -11,8 +11,8 @@ using osu.Framework.Graphics.Containers;
|
||||
using osu.Framework.Platform;
|
||||
using osu.Framework.Testing;
|
||||
using osu.Game.Beatmaps;
|
||||
using osu.Game.Beatmaps.Drawables;
|
||||
using osu.Game.Graphics.Containers;
|
||||
using osu.Game.Graphics.UserInterface;
|
||||
using osu.Game.Online.Rooms;
|
||||
using osu.Game.Overlays;
|
||||
using osu.Game.Rulesets;
|
||||
@ -20,6 +20,7 @@ using osu.Game.Rulesets.Osu;
|
||||
using osu.Game.Rulesets.Osu.Mods;
|
||||
using osu.Game.Screens.OnlinePlay;
|
||||
using osu.Game.Tests.Beatmaps;
|
||||
using osu.Game.Users;
|
||||
using osuTK;
|
||||
using osuTK.Input;
|
||||
|
||||
@ -241,7 +242,7 @@ namespace osu.Game.Tests.Visual.Multiplayer
|
||||
}
|
||||
|
||||
private void moveToItem(int index, Vector2? offset = null)
|
||||
=> AddStep($"move mouse to item {index}", () => InputManager.MoveMouseTo(playlist.ChildrenOfType<OsuRearrangeableListItem<PlaylistItem>>().ElementAt(index), offset));
|
||||
=> AddStep($"move mouse to item {index}", () => InputManager.MoveMouseTo(playlist.ChildrenOfType<DifficultyIcon>().ElementAt(index), offset));
|
||||
|
||||
private void moveToDragger(int index, Vector2? offset = null) => AddStep($"move mouse to dragger {index}", () =>
|
||||
{
|
||||
@ -252,7 +253,7 @@ namespace osu.Game.Tests.Visual.Multiplayer
|
||||
private void moveToDeleteButton(int index, Vector2? offset = null) => AddStep($"move mouse to delete button {index}", () =>
|
||||
{
|
||||
var item = playlist.ChildrenOfType<OsuRearrangeableListItem<PlaylistItem>>().ElementAt(index);
|
||||
InputManager.MoveMouseTo(item.ChildrenOfType<IconButton>().ElementAt(0), offset);
|
||||
InputManager.MoveMouseTo(item.ChildrenOfType<DrawableRoomPlaylistItem.PlaylistRemoveButton>().ElementAt(0), offset);
|
||||
});
|
||||
|
||||
private void assertHandleVisibility(int index, bool visible)
|
||||
@ -260,7 +261,7 @@ namespace osu.Game.Tests.Visual.Multiplayer
|
||||
() => (playlist.ChildrenOfType<OsuRearrangeableListItem<PlaylistItem>.PlaylistItemHandle>().ElementAt(index).Alpha > 0) == visible);
|
||||
|
||||
private void assertDeleteButtonVisibility(int index, bool visible)
|
||||
=> AddAssert($"delete button {index} {(visible ? "is" : "is not")} visible", () => (playlist.ChildrenOfType<IconButton>().ElementAt(2 + index * 2).Alpha > 0) == visible);
|
||||
=> AddAssert($"delete button {index} {(visible ? "is" : "is not")} visible", () => (playlist.ChildrenOfType<DrawableRoomPlaylistItem.PlaylistRemoveButton>().ElementAt(2 + index * 2).Alpha > 0) == visible);
|
||||
|
||||
private void createPlaylist(bool allowEdit, bool allowSelection)
|
||||
{
|
||||
@ -278,7 +279,21 @@ namespace osu.Game.Tests.Visual.Multiplayer
|
||||
playlist.Items.Add(new PlaylistItem
|
||||
{
|
||||
ID = i,
|
||||
Beatmap = { Value = new TestBeatmap(new OsuRuleset().RulesetInfo).BeatmapInfo },
|
||||
Beatmap =
|
||||
{
|
||||
Value = i % 2 == 1
|
||||
? new TestBeatmap(new OsuRuleset().RulesetInfo).BeatmapInfo
|
||||
: new BeatmapInfo
|
||||
{
|
||||
Metadata = new BeatmapMetadata
|
||||
{
|
||||
Artist = "Artist",
|
||||
Author = new User { Username = "Creator name here" },
|
||||
Title = "Long title used to check background colour",
|
||||
},
|
||||
BeatmapSet = new BeatmapSetInfo()
|
||||
}
|
||||
},
|
||||
Ruleset = { Value = new OsuRuleset().RulesetInfo },
|
||||
RequiredMods =
|
||||
{
|
||||
|
||||
@ -4,54 +4,38 @@
|
||||
using osu.Framework.Allocation;
|
||||
using osu.Framework.Bindables;
|
||||
using osu.Framework.Graphics;
|
||||
using osu.Framework.Graphics.Shapes;
|
||||
using osu.Framework.Graphics.Sprites;
|
||||
using osu.Game.Online;
|
||||
using osuTK;
|
||||
|
||||
namespace osu.Game.Graphics.UserInterface
|
||||
{
|
||||
public class DownloadButton : OsuAnimatedButton
|
||||
public class DownloadButton : GrayButton
|
||||
{
|
||||
public readonly Bindable<DownloadState> State = new Bindable<DownloadState>();
|
||||
|
||||
private readonly SpriteIcon icon;
|
||||
private readonly SpriteIcon checkmark;
|
||||
private readonly Box background;
|
||||
|
||||
[Resolved]
|
||||
private OsuColour colours { get; set; }
|
||||
|
||||
public readonly Bindable<DownloadState> State = new Bindable<DownloadState>();
|
||||
|
||||
private SpriteIcon checkmark;
|
||||
|
||||
public DownloadButton()
|
||||
: base(FontAwesome.Solid.Download)
|
||||
{
|
||||
Children = new Drawable[]
|
||||
{
|
||||
background = new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Depth = float.MaxValue
|
||||
},
|
||||
icon = new SpriteIcon
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
Size = new Vector2(13),
|
||||
Icon = FontAwesome.Solid.Download,
|
||||
},
|
||||
checkmark = new SpriteIcon
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
X = 8,
|
||||
Size = Vector2.Zero,
|
||||
Icon = FontAwesome.Solid.Check,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
[BackgroundDependencyLoader]
|
||||
private void load()
|
||||
{
|
||||
AddInternal(checkmark = new SpriteIcon
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
X = 8,
|
||||
Size = Vector2.Zero,
|
||||
Icon = FontAwesome.Solid.Check,
|
||||
});
|
||||
|
||||
State.BindValueChanged(updateState, true);
|
||||
}
|
||||
|
||||
@ -60,27 +44,27 @@ namespace osu.Game.Graphics.UserInterface
|
||||
switch (state.NewValue)
|
||||
{
|
||||
case DownloadState.NotDownloaded:
|
||||
background.FadeColour(colours.Gray4, 500, Easing.InOutExpo);
|
||||
icon.MoveToX(0, 500, Easing.InOutExpo);
|
||||
Background.FadeColour(colours.Gray4, 500, Easing.InOutExpo);
|
||||
Icon.MoveToX(0, 500, Easing.InOutExpo);
|
||||
checkmark.ScaleTo(Vector2.Zero, 500, Easing.InOutExpo);
|
||||
TooltipText = "Download";
|
||||
break;
|
||||
|
||||
case DownloadState.Downloading:
|
||||
background.FadeColour(colours.Blue, 500, Easing.InOutExpo);
|
||||
icon.MoveToX(0, 500, Easing.InOutExpo);
|
||||
Background.FadeColour(colours.Blue, 500, Easing.InOutExpo);
|
||||
Icon.MoveToX(0, 500, Easing.InOutExpo);
|
||||
checkmark.ScaleTo(Vector2.Zero, 500, Easing.InOutExpo);
|
||||
TooltipText = "Downloading...";
|
||||
break;
|
||||
|
||||
case DownloadState.Importing:
|
||||
background.FadeColour(colours.Yellow, 500, Easing.InOutExpo);
|
||||
Background.FadeColour(colours.Yellow, 500, Easing.InOutExpo);
|
||||
TooltipText = "Importing";
|
||||
break;
|
||||
|
||||
case DownloadState.LocallyAvailable:
|
||||
background.FadeColour(colours.Green, 500, Easing.InOutExpo);
|
||||
icon.MoveToX(-8, 500, Easing.InOutExpo);
|
||||
Background.FadeColour(colours.Green, 500, Easing.InOutExpo);
|
||||
Icon.MoveToX(-8, 500, Easing.InOutExpo);
|
||||
checkmark.ScaleTo(new Vector2(13), 500, Easing.InOutExpo);
|
||||
break;
|
||||
}
|
||||
|
||||
48
osu.Game/Graphics/UserInterface/GrayButton.cs
Normal file
48
osu.Game/Graphics/UserInterface/GrayButton.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.Allocation;
|
||||
using osu.Framework.Graphics;
|
||||
using osu.Framework.Graphics.Shapes;
|
||||
using osu.Framework.Graphics.Sprites;
|
||||
using osuTK;
|
||||
|
||||
namespace osu.Game.Graphics.UserInterface
|
||||
{
|
||||
public class GrayButton : OsuAnimatedButton
|
||||
{
|
||||
protected SpriteIcon Icon { get; private set; }
|
||||
protected Box Background { get; private set; }
|
||||
|
||||
private readonly IconUsage icon;
|
||||
|
||||
[Resolved]
|
||||
private OsuColour colours { get; set; }
|
||||
|
||||
public GrayButton(IconUsage icon)
|
||||
{
|
||||
this.icon = icon;
|
||||
}
|
||||
|
||||
[BackgroundDependencyLoader]
|
||||
private void load()
|
||||
{
|
||||
Children = new Drawable[]
|
||||
{
|
||||
Background = new Box
|
||||
{
|
||||
Colour = colours.Gray4,
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Depth = float.MaxValue
|
||||
},
|
||||
Icon = new SpriteIcon
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
Size = new Vector2(13),
|
||||
Icon = icon,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -124,101 +124,111 @@ namespace osu.Game.Screens.OnlinePlay
|
||||
modDisplay.Current.Value = requiredMods.ToArray();
|
||||
}
|
||||
|
||||
protected override Drawable CreateContent() => maskingContainer = new Container
|
||||
protected override Drawable CreateContent()
|
||||
{
|
||||
RelativeSizeAxes = Axes.X,
|
||||
Height = 50,
|
||||
Masking = true,
|
||||
CornerRadius = 10,
|
||||
Children = new Drawable[]
|
||||
Action<SpriteText> fontParameters = s => s.Font = OsuFont.Default.With(weight: FontWeight.SemiBold);
|
||||
|
||||
return maskingContainer = new Container
|
||||
{
|
||||
new Box // A transparent box that forces the border to be drawn if the panel background is opaque
|
||||
RelativeSizeAxes = Axes.X,
|
||||
Height = 50,
|
||||
Masking = true,
|
||||
CornerRadius = 10,
|
||||
Children = new Drawable[]
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Alpha = 0,
|
||||
AlwaysPresent = true
|
||||
},
|
||||
new PanelBackground
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Beatmap = { BindTarget = beatmap }
|
||||
},
|
||||
new FillFlowContainer
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Padding = new MarginPadding { Left = 8 },
|
||||
Spacing = new Vector2(8, 0),
|
||||
Direction = FillDirection.Horizontal,
|
||||
Children = new Drawable[]
|
||||
new Box // A transparent box that forces the border to be drawn if the panel background is opaque
|
||||
{
|
||||
difficultyIconContainer = new Container
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Alpha = 0,
|
||||
AlwaysPresent = true
|
||||
},
|
||||
new PanelBackground
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Beatmap = { BindTarget = beatmap }
|
||||
},
|
||||
new FillFlowContainer
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Padding = new MarginPadding { Left = 8 },
|
||||
Spacing = new Vector2(8, 0),
|
||||
Direction = FillDirection.Horizontal,
|
||||
Children = new Drawable[]
|
||||
{
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft,
|
||||
AutoSizeAxes = Axes.Both,
|
||||
},
|
||||
new FillFlowContainer
|
||||
{
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft,
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Direction = FillDirection.Vertical,
|
||||
Children = new Drawable[]
|
||||
difficultyIconContainer = new Container
|
||||
{
|
||||
beatmapText = new LinkFlowContainer { AutoSizeAxes = Axes.Both },
|
||||
new FillFlowContainer
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft,
|
||||
AutoSizeAxes = Axes.Both,
|
||||
},
|
||||
new FillFlowContainer
|
||||
{
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft,
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Direction = FillDirection.Vertical,
|
||||
Children = new Drawable[]
|
||||
{
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Direction = FillDirection.Horizontal,
|
||||
Spacing = new Vector2(10f, 0),
|
||||
Children = new Drawable[]
|
||||
beatmapText = new LinkFlowContainer(fontParameters) { AutoSizeAxes = Axes.Both },
|
||||
new FillFlowContainer
|
||||
{
|
||||
new FillFlowContainer
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Direction = FillDirection.Horizontal,
|
||||
Spacing = new Vector2(10f, 0),
|
||||
Children = new Drawable[]
|
||||
{
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Direction = FillDirection.Horizontal,
|
||||
Spacing = new Vector2(10f, 0),
|
||||
Children = new Drawable[]
|
||||
new FillFlowContainer
|
||||
{
|
||||
authorText = new LinkFlowContainer { AutoSizeAxes = Axes.Both },
|
||||
explicitContentPill = new ExplicitContentBeatmapPill
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Direction = FillDirection.Horizontal,
|
||||
Spacing = new Vector2(10f, 0),
|
||||
Children = new Drawable[]
|
||||
{
|
||||
Alpha = 0f,
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft,
|
||||
Margin = new MarginPadding { Top = 3f },
|
||||
}
|
||||
authorText = new LinkFlowContainer(fontParameters) { AutoSizeAxes = Axes.Both },
|
||||
explicitContentPill = new ExplicitContentBeatmapPill
|
||||
{
|
||||
Alpha = 0f,
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft,
|
||||
Margin = new MarginPadding { Top = 3f },
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
new Container
|
||||
{
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft,
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Child = modDisplay = new ModDisplay
|
||||
new Container
|
||||
{
|
||||
Scale = new Vector2(0.4f),
|
||||
DisplayUnrankedText = false,
|
||||
ExpansionMode = ExpansionMode.AlwaysExpanded
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft,
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Child = modDisplay = new ModDisplay
|
||||
{
|
||||
Scale = new Vector2(0.4f),
|
||||
DisplayUnrankedText = false,
|
||||
ExpansionMode = ExpansionMode.AlwaysExpanded
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
new FillFlowContainer
|
||||
{
|
||||
Anchor = Anchor.CentreRight,
|
||||
Origin = Anchor.CentreRight,
|
||||
Direction = FillDirection.Horizontal,
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Spacing = new Vector2(5),
|
||||
X = -10,
|
||||
ChildrenEnumerable = CreateButtons().Select(button => button.With(b =>
|
||||
{
|
||||
b.Anchor = Anchor.Centre;
|
||||
b.Origin = Anchor.Centre;
|
||||
}))
|
||||
}
|
||||
},
|
||||
new FillFlowContainer
|
||||
{
|
||||
Anchor = Anchor.CentreRight,
|
||||
Origin = Anchor.CentreRight,
|
||||
Direction = FillDirection.Horizontal,
|
||||
AutoSizeAxes = Axes.Both,
|
||||
X = -18,
|
||||
ChildrenEnumerable = CreateButtons()
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
protected virtual IEnumerable<Drawable> CreateButtons() =>
|
||||
new Drawable[]
|
||||
@ -227,14 +237,29 @@ namespace osu.Game.Screens.OnlinePlay
|
||||
{
|
||||
Size = new Vector2(50, 30)
|
||||
},
|
||||
new IconButton
|
||||
new PlaylistRemoveButton
|
||||
{
|
||||
Icon = FontAwesome.Solid.MinusSquare,
|
||||
Size = new Vector2(30, 30),
|
||||
Alpha = allowEdit ? 1 : 0,
|
||||
Action = () => RequestDeletion?.Invoke(Model),
|
||||
},
|
||||
};
|
||||
|
||||
public class PlaylistRemoveButton : GrayButton
|
||||
{
|
||||
public PlaylistRemoveButton()
|
||||
: base(FontAwesome.Solid.MinusSquare)
|
||||
{
|
||||
TooltipText = "Remove from playlist";
|
||||
}
|
||||
|
||||
[BackgroundDependencyLoader]
|
||||
private void load()
|
||||
{
|
||||
Icon.Scale = new Vector2(0.8f);
|
||||
}
|
||||
}
|
||||
|
||||
protected override bool OnClick(ClickEvent e)
|
||||
{
|
||||
if (allowSelection)
|
||||
@ -318,24 +343,18 @@ namespace osu.Game.Screens.OnlinePlay
|
||||
Colour = Color4.Black,
|
||||
Width = 0.4f,
|
||||
},
|
||||
// Piecewise-linear gradient with 3 segments to make it appear smoother
|
||||
// Piecewise-linear gradient with 2 segments to make it appear smoother
|
||||
new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Colour = ColourInfo.GradientHorizontal(Color4.Black, new Color4(0f, 0f, 0f, 0.9f)),
|
||||
Width = 0.05f,
|
||||
Colour = ColourInfo.GradientHorizontal(Color4.Black, new Color4(0f, 0f, 0f, 0.7f)),
|
||||
Width = 0.4f,
|
||||
},
|
||||
new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Colour = ColourInfo.GradientHorizontal(new Color4(0f, 0f, 0f, 0.9f), new Color4(0f, 0f, 0f, 0.1f)),
|
||||
Width = 0.2f,
|
||||
},
|
||||
new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Colour = ColourInfo.GradientHorizontal(new Color4(0f, 0f, 0f, 0.1f), new Color4(0, 0, 0, 0)),
|
||||
Width = 0.05f,
|
||||
Colour = ColourInfo.GradientHorizontal(new Color4(0f, 0f, 0f, 0.7f), new Color4(0, 0, 0, 0.4f)),
|
||||
Width = 0.4f,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user