Merge pull request #1475 from EVAST9919/profile-overlay-visual

Drawable Score visual improvements

osu.Game/Overlays/Profile/Sections/Ranks/DrawablePerformanceScore.cs

@@ -20,7 +20,7 @@ namespace osu.Game.Overlays.Profile.Sections.Ranks
         }
 
         [BackgroundDependencyLoader]
-        private new void load(OsuColour colour)
+        private void load(OsuColour colour)
         {
             double pp = Score.PP ?? 0;
             Stats.Add(new OsuSpriteText

osu.Game/Overlays/Profile/Sections/Ranks/DrawableScore.cs

@@ -7,7 +7,6 @@ using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Game.Graphics;
-using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Rulesets.Mods;
 using osu.Game.Screens.Select.Leaderboards;
@@ -15,66 +14,113 @@ using System.Linq;
 using osu.Framework.Localisation;
 using osu.Game.Rulesets.Scoring;
 using osu.Game.Rulesets.UI;
+using OpenTK.Graphics;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.Cursor;
+using osu.Framework.Input;
+using osu.Framework.Extensions.Color4Extensions;
+using osu.Game.Graphics.Containers;
 
 namespace osu.Game.Overlays.Profile.Sections.Ranks
 {
     public abstract class DrawableScore : Container
     {
+        private const int fade_duration = 200;
+
         protected readonly FillFlowContainer<OsuSpriteText> Stats;
         private readonly FillFlowContainer metadata;
         private readonly ModContainer modContainer;
         protected readonly Score Score;
+        private readonly Box underscoreLine;
+        private readonly Box coloredBackground;
+        private readonly Container background;
 
         protected DrawableScore(Score score)
         {
             Score = score;
 
+            RelativeSizeAxes = Axes.X;
+            Height = 60;
             Children = new Drawable[]
             {
-                new DrawableRank(score.Rank)
+                background = new Container
                 {
-                    RelativeSizeAxes = Axes.Y,
+                    RelativeSizeAxes = Axes.Both,
-                    Width = 60,
+                    Masking = true,
-                    FillMode = FillMode.Fit,
+                    CornerRadius = 3,
-                },
+                    Alpha = 0,
-                Stats = new FillFlowContainer<OsuSpriteText>
+                    EdgeEffect = new EdgeEffectParameters
-                {
-                    RelativeSizeAxes = Axes.X,
-                    AutoSizeAxes = Axes.Y,
-                    Anchor = Anchor.CentreRight,
-                    Origin = Anchor.CentreRight,
-                    Direction = FillDirection.Vertical,
-                },
-                metadata = new FillFlowContainer
-                {
-                    RelativeSizeAxes = Axes.X,
-                    AutoSizeAxes = Axes.Y,
-                    Anchor = Anchor.CentreLeft,
-                    Origin = Anchor.CentreLeft,
-                    Margin = new MarginPadding { Left = 70 },
-                    Direction = FillDirection.Vertical,
-                    Child = new OsuSpriteText
                     {
-                        Text = score.Date.LocalDateTime.ToShortDateString(),
+                        Type = EdgeEffectType.Shadow,
-                        TextSize = 11,
+                        Offset = new Vector2(0f, 1f),
-                        Colour = OsuColour.Gray(0xAA),
+                        Radius = 1f,
-                        Depth = -1,
+                        Colour = Color4.Black.Opacity(0.2f),
                     },
+                    Child = coloredBackground = new Box { RelativeSizeAxes = Axes.Both }
                 },
-                modContainer = new ModContainer
+                new Container
                 {
-                    AutoSizeAxes = Axes.Y,
+                    RelativeSizeAxes = Axes.Both,
-                    Anchor = Anchor.CentreRight,
+                    Anchor = Anchor.TopCentre,
-                    Origin = Anchor.CentreRight,
+                    Origin = Anchor.TopCentre,
-                    Width = 60,
+                    Width = 0.97f,
-                    Margin = new MarginPadding { Right = 150 }
+                    Children = new Drawable[]
-                }
+                    {
+                        underscoreLine = new Box
+                        {
+                            Anchor = Anchor.BottomCentre,
+                            Origin = Anchor.BottomCentre,
+                            RelativeSizeAxes = Axes.X,
+                            Height = 1,
+                        },
+                        new DrawableRank(score.Rank)
+                        {
+                            RelativeSizeAxes = Axes.Y,
+                            Width = 60,
+                            FillMode = FillMode.Fit,
+                        },
+                        Stats = new FillFlowContainer<OsuSpriteText>
+                        {
+                            RelativeSizeAxes = Axes.X,
+                            AutoSizeAxes = Axes.Y,
+                            Anchor = Anchor.CentreRight,
+                            Origin = Anchor.CentreRight,
+                            Direction = FillDirection.Vertical,
+                        },
+                        metadata = new FillFlowContainer
+                        {
+                            RelativeSizeAxes = Axes.X,
+                            AutoSizeAxes = Axes.Y,
+                            Anchor = Anchor.CentreLeft,
+                            Origin = Anchor.CentreLeft,
+                            Margin = new MarginPadding { Left = 70 },
+                            Direction = FillDirection.Vertical,
+                            Child = new OsuSpriteText
+                            {
+                                Text = score.Date.LocalDateTime.ToShortDateString(),
+                                TextSize = 11,
+                                Colour = OsuColour.Gray(0xAA),
+                                Depth = -1,
+                            },
+                        },
+                        modContainer = new ModContainer
+                        {
+                            AutoSizeAxes = Axes.Y,
+                            Anchor = Anchor.CentreRight,
+                            Origin = Anchor.CentreRight,
+                            Width = 60,
+                            Margin = new MarginPadding { Right = 160 }
+                        }
+                    }
+                },
             };
         }
 
         [BackgroundDependencyLoader(true)]
         private void load(OsuColour colour, LocalisationEngine locale, BeatmapSetOverlay beatmapSetOverlay)
         {
+            coloredBackground.Colour = underscoreLine.Colour = colour.Gray4;
+
             Stats.Add(new OsuSpriteText
             {
                 Text = $"accuracy: {Score.Accuracy:P2}",
@@ -86,7 +132,7 @@ namespace osu.Game.Overlays.Profile.Sections.Ranks
                 Depth = -1,
             });
 
-            metadata.Add(new OsuHoverContainer
+            metadata.Add(new MetadataContainer(Score.Beatmap.Metadata.Title, Score.Beatmap.Metadata.Artist)
             {
                 AutoSizeAxes = Axes.Both,
                 Action = () =>
@@ -126,6 +172,22 @@ namespace osu.Game.Overlays.Profile.Sections.Ranks
                 });
         }
 
+        protected override bool OnClick(InputState state) => true;
+
+        protected override bool OnHover(InputState state)
+        {
+            background.FadeIn(fade_duration, Easing.OutQuint);
+            underscoreLine.FadeOut(fade_duration, Easing.OutQuint);
+            return true;
+        }
+
+        protected override void OnHoverLost(InputState state)
+        {
+            background.FadeOut(fade_duration, Easing.OutQuint);
+            underscoreLine.FadeIn(fade_duration, Easing.OutQuint);
+            base.OnHoverLost(state);
+        }
+
         private class ModContainer : FlowContainer<ModIcon>
         {
             protected override IEnumerable<Vector2> ComputeLayoutPositions()
@@ -135,5 +197,15 @@ namespace osu.Game.Overlays.Profile.Sections.Ranks
                     yield return new Vector2(DrawWidth * i * (count == 1 ? 0 : 1f / (count - 1)), 0);
             }
         }
+
+        private class MetadataContainer : OsuHoverContainer, IHasTooltip
+        {
+            public string TooltipText { get; set; }
+
+            public MetadataContainer(string title, string artist)
+            {
+                TooltipText = $"{artist} - {title}";
+            }
+        }
     }
 }

osu.Game/Overlays/Profile/Sections/Ranks/DrawableTotalScore.cs

@@ -16,7 +16,7 @@ namespace osu.Game.Overlays.Profile.Sections.Ranks
         }
 
         [BackgroundDependencyLoader]
-        private new void load()
+        private void load()
         {
             Stats.Add(new OsuSpriteText
             {

osu.Game/Overlays/Profile/Sections/Ranks/PaginatedScoreContainer.cs

@@ -63,9 +63,6 @@ namespace osu.Game.Overlays.Profile.Sections.Ranks
                             break;
                     }
 
-                    drawableScore.RelativeSizeAxes = Axes.X;
-                    drawableScore.Height = 60;
-
                     ItemsContainer.Add(drawableScore);
                 }
             };

osu.Game/Overlays/UserProfileOverlay.cs

@@ -91,7 +91,7 @@ namespace osu.Game.Overlays
 
             sections = new ProfileSection[]
             {
-                new AboutSection(),
+                //new AboutSection(),
                 //new RecentSection(),
                 new RanksSection(),
                 //new MedalsSection(),