Fix up header sizing + styling

This commit is contained in:
smoogipoo 2018-12-14 14:20:03 +09:00
parent c9c04a6200
commit b83f99d90a
7 changed files with 120 additions and 67 deletions

View File

@ -1,6 +1,8 @@
// Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
using System;
using System.Collections.Generic;
using NUnit.Framework;
using osu.Framework.Allocation;
using osu.Game.Beatmaps;
@ -13,6 +15,14 @@ namespace osu.Game.Tests.Visual
[TestFixture]
public class TestCaseMatchInfo : OsuTestCase
{
public override IReadOnlyList<Type> RequiredTypes => new[]
{
typeof(Info),
typeof(HeaderButton),
typeof(ReadyButton),
typeof(ViewBeatmapButton)
};
[BackgroundDependencyLoader]
private void load(RulesetStore rulesets)
{

View File

@ -98,7 +98,7 @@ namespace osu.Game.Screens.Multi.Match.Components
tabStrip.Colour = colours.Yellow;
}
private class BeatmapSelectButton : TriangleButton
private class BeatmapSelectButton : HeaderButton
{
private readonly IBindable<int?> roomIDBind = new Bindable<int?>();

View File

@ -0,0 +1,48 @@
// Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
using osu.Framework.Allocation;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites;
using osu.Game.Graphics;
using osu.Game.Graphics.Sprites;
using osu.Game.Graphics.UserInterface;
namespace osu.Game.Screens.Multi.Match.Components
{
public class HeaderButton : TriangleButton
{
[BackgroundDependencyLoader]
private void load()
{
BackgroundColour = OsuColour.FromHex(@"1187aa");
Triangles.ColourLight = OsuColour.FromHex(@"277b9c");
Triangles.ColourDark = OsuColour.FromHex(@"1f6682");
Triangles.TriangleScale = 1.5f;
Add(new Container
{
RelativeSizeAxes = Axes.Both,
Alpha = 1f,
Child = new Box
{
RelativeSizeAxes = Axes.Both,
Alpha = 0.15f,
Blending = BlendingMode.Additive,
},
});
}
protected override SpriteText CreateText() => new OsuSpriteText
{
Depth = -1,
Origin = Anchor.Centre,
Anchor = Anchor.Centre,
Font = @"Exo2.0-Light",
TextSize = 30,
};
}
}

View File

@ -23,8 +23,6 @@ namespace osu.Game.Screens.Multi.Match.Components
{
public class Info : Container
{
public const float HEIGHT = 156;
public Action OnStart;
private readonly OsuSpriteText availabilityStatus;
@ -41,7 +39,7 @@ namespace osu.Game.Screens.Multi.Match.Components
public Info()
{
RelativeSizeAxes = Axes.X;
Height = HEIGHT;
AutoSizeAxes = Axes.Y;
BeatmapTypeInfo beatmapTypeInfo;
OsuSpriteText name;
@ -56,14 +54,16 @@ namespace osu.Game.Screens.Multi.Match.Components
},
new Container
{
RelativeSizeAxes = Axes.Both,
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Padding = new MarginPadding { Horizontal = SearchableListOverlay.WIDTH_PADDING },
Children = new Drawable[]
{
new Container
new FillFlowContainer
{
RelativeSizeAxes = Axes.Y,
AutoSizeAxes = Axes.X,
AutoSizeAxes = Axes.Both,
Direction = FillDirection.Vertical,
Spacing = new Vector2(0, 10),
Padding = new MarginPadding { Vertical = 20 },
Children = new Drawable[]
{
@ -75,12 +75,10 @@ namespace osu.Game.Screens.Multi.Match.Components
{
name = new OsuSpriteText { TextSize = 30 },
availabilityStatus = new OsuSpriteText { TextSize = 14 },
},
}
},
new FillFlowContainer
{
Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft,
AutoSizeAxes = Axes.Both,
Direction = FillDirection.Vertical,
Children = new Drawable[]
@ -93,18 +91,25 @@ namespace osu.Game.Screens.Multi.Match.Components
},
}
}
},
},
new ReadyButton
new FillFlowContainer
{
Anchor = Anchor.TopRight,
Origin = Anchor.TopRight,
RelativeSizeAxes = Axes.Y,
Size = new Vector2(200, 1),
Padding = new MarginPadding { Vertical = 10 },
Action = () => OnStart?.Invoke()
},
Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
AutoSizeAxes = Axes.X,
Height = 70,
Spacing = new Vector2(10, 0),
Direction = FillDirection.Horizontal,
Children = new Drawable[]
{
new ViewBeatmapButton(),
new ReadyButton
{
Action = () => OnStart?.Invoke()
}
}
}
},
},
};

View File

@ -1,50 +1,19 @@
// Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
using osu.Framework.Allocation;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites;
using osu.Game.Graphics;
using osu.Game.Graphics.Sprites;
using osu.Game.Graphics.UserInterface;
using osuTK;
namespace osu.Game.Screens.Multi.Match.Components
{
public class ReadyButton : TriangleButton
public class ReadyButton : HeaderButton
{
[BackgroundDependencyLoader]
private void load()
public ReadyButton()
{
BackgroundColour = OsuColour.FromHex(@"1187aa");
Triangles.ColourLight = OsuColour.FromHex(@"277b9c");
Triangles.ColourDark = OsuColour.FromHex(@"1f6682");
Triangles.TriangleScale = 1.5f;
RelativeSizeAxes = Axes.Y;
Size = new Vector2(200, 1);
Text = "Start";
Add(new Container
{
RelativeSizeAxes = Axes.Both,
Alpha = 1f,
Child = new Box
{
RelativeSizeAxes = Axes.Both,
Alpha = 0.15f,
Blending = BlendingMode.Additive,
},
});
}
protected override SpriteText CreateText() => new OsuSpriteText
{
Depth = -1,
Origin = Anchor.Centre,
Anchor = Anchor.Centre,
Font = @"Exo2.0-Light",
TextSize = 30,
};
}
}

View File

@ -0,0 +1,19 @@
// Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
using osu.Framework.Graphics;
using osuTK;
namespace osu.Game.Screens.Multi.Match.Components
{
public class ViewBeatmapButton : HeaderButton
{
public ViewBeatmapButton()
{
RelativeSizeAxes = Axes.Y;
Size = new Vector2(200, 1);
Text = "View beatmap";
}
}
}

View File

@ -66,19 +66,21 @@ namespace osu.Game.Screens.Multi.Match
Children = new Drawable[]
{
header = new Components.Header
{
Depth = -1,
},
info = new Info
{
Margin = new MarginPadding { Top = Components.Header.HEIGHT },
OnStart = onStart
},
participants = new Participants
new GridContainer
{
RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding { Top = Components.Header.HEIGHT + Info.HEIGHT },
Content = new[]
{
new Drawable[] { header = new Components.Header { Depth = -1 } },
new Drawable[] { info = new Info { OnStart = onStart } },
new Drawable[] { participants = new Participants { RelativeSizeAxes = Axes.Both } },
},
RowDimensions = new[]
{
new Dimension(GridSizeMode.AutoSize),
new Dimension(GridSizeMode.AutoSize),
new Dimension(GridSizeMode.Distributed),
}
},
new Container
{