Merge pull request #7366 from EVAST9919/overlay-headers-update-two

Update overlay headers layout in line with the new web design
This commit is contained in:
Dean Herbert 2019-12-27 13:53:48 +09:00 committed by GitHub
commit ebbd32fb28
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 91 additions and 43 deletions

View File

@ -16,7 +16,7 @@ namespace osu.Game.Graphics.UserInterface
{
public const float ICON_WIDTH = ICON_SIZE + spacing;
public const float ICON_SIZE = 30;
public const float ICON_SIZE = 25;
private const float spacing = 6;
private const int text_offset = 2;

View File

@ -33,6 +33,7 @@ namespace osu.Game.Graphics.UserInterface
Texture = textures.Get(textureName),
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
FillMode = FillMode.Fit
};
}
}

View File

@ -47,6 +47,8 @@ namespace osu.Game.Overlays.Changelog
private void load(OsuColour colours)
{
TabControl.AccentColour = colours.Violet;
TitleBackgroundColour = colours.GreyVioletDarker;
ControlBackgroundColour = colours.GreyVioletDark;
}
private ChangelogHeaderTitle title;

View File

@ -4,7 +4,6 @@
using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Sprites;
using osu.Framework.Graphics.Textures;
using osu.Game.Graphics;
@ -37,9 +36,11 @@ namespace osu.Game.Overlays.News
}
[BackgroundDependencyLoader]
private void load(OsuColour colour)
private void load(OsuColour colours)
{
TabControl.AccentColour = colour.Violet;
TabControl.AccentColour = colours.Violet;
TitleBackgroundColour = colours.GreyVioletDarker;
ControlBackgroundColour = colours.GreyVioletDark;
}
private void showPost(ValueChangedEvent<string> e)
@ -63,8 +64,6 @@ namespace osu.Game.Overlays.News
protected override Drawable CreateBackground() => new NewsHeaderBackground();
protected override Drawable CreateContent() => new Container();
protected override ScreenTitle CreateTitle() => title = new NewsHeaderTitle();
private class NewsHeaderBackground : Sprite

View File

@ -1,9 +1,12 @@
// 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 JetBrains.Annotations;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Game.Graphics.UserInterface;
using osuTK.Graphics;
namespace osu.Game.Overlays
{
@ -11,59 +14,96 @@ namespace osu.Game.Overlays
{
protected readonly OverlayHeaderTabControl TabControl;
private const float cover_height = 150;
private const float cover_info_height = 75;
private readonly Box titleBackground;
private readonly Box controlBackground;
private readonly Container background;
protected Color4 TitleBackgroundColour
{
set => titleBackground.Colour = value;
}
protected Color4 ControlBackgroundColour
{
set => controlBackground.Colour = value;
}
protected float BackgroundHeight
{
set => background.Height = value;
}
protected OverlayHeader()
{
RelativeSizeAxes = Axes.X;
AutoSizeAxes = Axes.Y;
Children = new Drawable[]
Add(new FillFlowContainer
{
new Container
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Direction = FillDirection.Vertical,
Children = new[]
{
RelativeSizeAxes = Axes.X,
Height = cover_height,
Masking = true,
Child = CreateBackground()
},
new Container
{
Margin = new MarginPadding { Left = UserProfileOverlay.CONTENT_X_MARGIN },
Y = cover_height,
Height = cover_info_height,
RelativeSizeAxes = Axes.X,
Anchor = Anchor.TopLeft,
Origin = Anchor.BottomLeft,
Depth = -float.MaxValue,
Children = new Drawable[]
background = new Container
{
CreateTitle().With(t => t.X = -ScreenTitle.ICON_WIDTH),
TabControl = new OverlayHeaderTabControl
RelativeSizeAxes = Axes.X,
Height = 80,
Masking = true,
Child = CreateBackground()
},
new Container
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Children = new Drawable[]
{
Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft,
RelativeSizeAxes = Axes.X,
Height = cover_info_height - 30,
Margin = new MarginPadding { Left = -UserProfileOverlay.CONTENT_X_MARGIN },
Padding = new MarginPadding { Left = UserProfileOverlay.CONTENT_X_MARGIN }
titleBackground = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = Color4.Gray,
},
CreateTitle().With(title =>
{
title.Margin = new MarginPadding
{
Vertical = 10,
Left = UserProfileOverlay.CONTENT_X_MARGIN
};
})
}
}
},
new Container
{
Margin = new MarginPadding { Top = cover_height },
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Child = CreateContent()
},
new Container
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Depth = -float.MaxValue,
Children = new Drawable[]
{
controlBackground = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = Color4.Gray,
},
TabControl = new OverlayHeaderTabControl
{
Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft,
RelativeSizeAxes = Axes.X,
Height = 30,
Padding = new MarginPadding { Left = UserProfileOverlay.CONTENT_X_MARGIN },
}
}
},
CreateContent()
}
};
});
}
protected abstract Drawable CreateBackground();
protected abstract Drawable CreateContent();
[NotNull]
protected virtual Drawable CreateContent() => new Container();
protected abstract ScreenTitle CreateTitle();
}

View File

@ -26,6 +26,8 @@ namespace osu.Game.Overlays.Profile
public ProfileHeader()
{
BackgroundHeight = 150;
User.ValueChanged += e => updateDisplay(e.NewValue);
TabControl.AddItem("Info");
@ -38,6 +40,8 @@ namespace osu.Game.Overlays.Profile
private void load(OsuColour colours)
{
TabControl.AccentColour = colours.Seafoam;
TitleBackgroundColour = colours.GreySeafoamDarker;
ControlBackgroundColour = colours.GreySeafoam;
}
protected override Drawable CreateBackground() =>
@ -110,6 +114,8 @@ namespace osu.Game.Overlays.Profile
{
AccentColour = colours.Seafoam;
}
protected override Drawable CreateIcon() => new ScreenTitleTextureIcon(@"Icons/profile");
}
}
}