Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update various editor design language (and centre playfield / timeline) #24220

Merged
merged 21 commits into from
Jul 21, 2023
Merged

Update various editor design language (and centre playfield / timeline) #24220

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
dd8774a
Vertically centre the editor osu! playfield
peppy Jul 14, 2023
56acc9e
Change `BeatDivisorControl` to retrive bindable divisor via DI
peppy Jul 14, 2023
ebaf63b
Apply NRT to timeline related classes
peppy Jul 14, 2023
5b2e704
Move beat divisor control inside of `TimelineArea` and adjust metrics…
peppy Jul 14, 2023
1dc293e
Allow specifying a custom width for nubs in `OsuCheckbox`es
peppy Jul 14, 2023
01750dd
Update metrics of checkboxes and backgrounds to match design better
peppy Jul 14, 2023
6b222cf
Fix slight misalignment so timeline is now completely centered
peppy Jul 14, 2023
00e9746
Implement longer design for timing point piece
peppy Jul 14, 2023
57abb15
Update design of timeline centre marker and adjust surrounding paddings
peppy Jul 14, 2023
e6b8cd0
Add editor header
peppy Jul 14, 2023
fe70f24
Update design of summary timeline current time marker
peppy Jul 14, 2023
7f336b8
Merge branch 'master' into editor-metrics
peppy Jul 19, 2023
8710567
Mark editor tile as non-localisable
peppy Jul 19, 2023
55a41b0
Fix overlap between header text and menu items
peppy Jul 19, 2023
ca3d153
Merge branch 'master' into editor-metrics
peppy Jul 21, 2023
870f3e3
Adjust "test" button to better align with rest of interface
peppy Jul 21, 2023
f489dbd
Reduce width of right toolbar ever so slightly (and use more shared c…
peppy Jul 21, 2023
b58354a
Fix playfield getting cut off (again) at tall aspect ratios
peppy Jul 21, 2023
cdcb10e
Fix timeline centre point being ever-so-slight off
peppy Jul 21, 2023
82a5ba6
Align mode switcher with rest of interface
peppy Jul 21, 2023
2ef8432
Adjust failing test after metrics changes
bdach Jul 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions osu.Game.Rulesets.Osu/Edit/OsuHitObjectComposer.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,8 @@ private void load()
PlayfieldContentContainer.Padding = new MarginPadding
{
Vertical = 10,
Left = TOOLBOX_CONTRACTED_SIZE_LEFT + 10,
Right = TOOLBOX_CONTRACTED_SIZE_RIGHT + 10,
// Intentionally use the left toolbox size for both sides to vertically centre the playfield.
Horizontal = TOOLBOX_CONTRACTED_SIZE_LEFT + 10,
};

LayerBelowRuleset.AddRange(new Drawable[]
Expand Down
9 changes: 7 additions & 2 deletions osu.Game.Tests/Visual/Editing/TestSceneBeatDivisorControl.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,21 +22,26 @@ namespace osu.Game.Tests.Visual.Editing
public partial class TestSceneBeatDivisorControl : OsuManualInputManagerTestScene
{
private BeatDivisorControl beatDivisorControl = null!;
private BindableBeatDivisor bindableBeatDivisor = null!;

private SliderBar<int> tickSliderBar => beatDivisorControl.ChildrenOfType<SliderBar<int>>().Single();
private Triangle tickMarkerHead => tickSliderBar.ChildrenOfType<Triangle>().Single();

[Cached]
private readonly OverlayColourProvider overlayColour = new OverlayColourProvider(OverlayColourScheme.Aquamarine);

[Cached]
private readonly BindableBeatDivisor bindableBeatDivisor = new BindableBeatDivisor(16);

[SetUp]
public void SetUp() => Schedule(() =>
{
bindableBeatDivisor.ValidDivisors.SetDefault();
bindableBeatDivisor.SetDefault();
Child = new PopoverContainer
{
RelativeSizeAxes = Axes.Both,
Child = beatDivisorControl = new BeatDivisorControl(bindableBeatDivisor = new BindableBeatDivisor(16))
Child = beatDivisorControl = new BeatDivisorControl
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Expand Down
2 changes: 1 addition & 1 deletion osu.Game.Tests/Visual/Editing/TestSceneTimelineTickDisplay.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ private void load()
{
BeatDivisor.Value = 4;

Add(new BeatDivisorControl(BeatDivisor)
Add(new BeatDivisorControl
{
Anchor = Anchor.TopRight,
Origin = Anchor.TopRight,
Expand Down
6 changes: 3 additions & 3 deletions osu.Game/Graphics/UserInterface/Nub.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,16 @@ public partial class Nub : Container, IHasCurrentValue<bool>, IHasAccentColour
{
public const float HEIGHT = 15;

public const float EXPANDED_SIZE = 50;
public const float DEFAULT_EXPANDED_SIZE = 50;

private const float border_width = 3;

private readonly Box fill;
private readonly Container main;

public Nub()
public Nub(float expandedSize = DEFAULT_EXPANDED_SIZE)
{
Size = new Vector2(EXPANDED_SIZE, HEIGHT);
Size = new Vector2(expandedSize, HEIGHT);

InternalChildren = new[]
{
Expand Down
8 changes: 4 additions & 4 deletions osu.Game/Graphics/UserInterface/OsuCheckbox.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ public MarginPadding LabelPadding
private Sample sampleChecked;
private Sample sampleUnchecked;

public OsuCheckbox(bool nubOnRight = true)
public OsuCheckbox(bool nubOnRight = true, float nubSize = Nub.DEFAULT_EXPANDED_SIZE)
{
AutoSizeAxes = Axes.Y;
RelativeSizeAxes = Axes.X;
Expand All @@ -61,7 +61,7 @@ public OsuCheckbox(bool nubOnRight = true)
AutoSizeAxes = Axes.Y,
RelativeSizeAxes = Axes.X,
},
Nub = new Nub(),
Nub = new Nub(nubSize),
new HoverSounds()
};

Expand All @@ -70,14 +70,14 @@ public OsuCheckbox(bool nubOnRight = true)
Nub.Anchor = Anchor.CentreRight;
Nub.Origin = Anchor.CentreRight;
Nub.Margin = new MarginPadding { Right = nub_padding };
LabelTextFlowContainer.Padding = new MarginPadding { Right = Nub.EXPANDED_SIZE + nub_padding * 2 };
LabelTextFlowContainer.Padding = new MarginPadding { Right = Nub.DEFAULT_EXPANDED_SIZE + nub_padding * 2 };
}
else
{
Nub.Anchor = Anchor.CentreLeft;
Nub.Origin = Anchor.CentreLeft;
Nub.Margin = new MarginPadding { Left = nub_padding };
LabelTextFlowContainer.Padding = new MarginPadding { Left = Nub.EXPANDED_SIZE + nub_padding * 2 };
LabelTextFlowContainer.Padding = new MarginPadding { Left = Nub.DEFAULT_EXPANDED_SIZE + nub_padding * 2 };
}

Nub.Current.BindTo(Current);
Expand Down
2 changes: 1 addition & 1 deletion osu.Game/Graphics/UserInterface/RoundedSliderBar.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ public Color4 BackgroundColour
public RoundedSliderBar()
{
Height = Nub.HEIGHT;
RangePadding = Nub.EXPANDED_SIZE / 2;
RangePadding = Nub.DEFAULT_EXPANDED_SIZE / 2;
Children = new Drawable[]
{
new Container
Expand Down
44 changes: 42 additions & 2 deletions osu.Game/Screens/Edit/Components/Menus/EditorMenuBar.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@

using osu.Framework.Allocation;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Sprites;
using osu.Framework.Graphics.Textures;
using osu.Framework.Graphics.UserInterface;
using osu.Framework.Input.Events;
using osu.Game.Graphics;
Expand All @@ -14,19 +17,56 @@ namespace osu.Game.Screens.Edit.Components.Menus
{
public partial class EditorMenuBar : OsuMenu
{
private const float heading_area = 114;

public EditorMenuBar()
: base(Direction.Horizontal, true)
{
RelativeSizeAxes = Axes.X;

MaskingContainer.CornerRadius = 0;
ItemsContainer.Padding = new MarginPadding { Left = 100 };
ItemsContainer.Padding = new MarginPadding { Left = heading_area };
bdach marked this conversation as resolved.
Show resolved Hide resolved
}

[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider)
private void load(OverlayColourProvider colourProvider, TextureStore textures)
{
BackgroundColour = colourProvider.Background3;

TextFlowContainer text;

AddRangeInternal(new[]
{
new Container
{
RelativeSizeAxes = Axes.Y,
Width = heading_area,
Padding = new MarginPadding(8),
Children = new Drawable[]
{
new Sprite
{
Size = new Vector2(26),
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
Texture = textures.Get("Icons/Hexacons/editor"),
},
text = new TextFlowContainer
{
Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
AutoSizeAxes = Axes.Both,
}
}
},
});

text.AddText("osu!", t => t.Font = OsuFont.TorusAlternate);
text.AddText("editor", t =>
{
t.Font = OsuFont.TorusAlternate;
t.Colour = colourProvider.Highlight1;
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This header is also present in the skin editor which may be confusing. I would rename it to beatmap/skin editor.

I also don't get why the prefixing of "osu!" in certain places is a thing (maybe just in the design mockups?). We had osu!news in the website for a while and osu!chat during the chat redesign PR before I renamed it in #18433 because of localisation.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's supposed to give emphasis to certain game areas or features. Think of it as visual flair, not helpful text that needs to be localised.

In this case, I'd argue the header here should not be localised if it is to remain at all. As in, it should either be present as osu!editor on all languages, or be removed completely.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So does this fall in the "Services and applications" listed in https://osu.ppy.sh/wiki/en/Brand_identity_guidelines#osu!? If so, it is a proper noun and shouldn't be localised.

And as a proper noun, osu!editor can only be the beatmap editor or skin editor and not both. That is where my problem is.

I also feel like we are returning back to using osu! prefixes (like osu!direct but is now beatmap listing).

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah well osu!direct is another point of contention. most people know it by this branding so we may actually return to it.

}

protected override Framework.Graphics.UserInterface.Menu CreateSubMenu() => new SubMenu();
Expand Down
22 changes: 19 additions & 3 deletions osu.Game/Screens/Edit/Components/Timelines/Summary/Parts/MarkerPart.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,39 +73,55 @@ private partial class MarkerVisualisation : CompositeDrawable
{
public MarkerVisualisation()
{
const float box_height = 4;

Anchor = Anchor.CentreLeft;
Origin = Anchor.Centre;
RelativePositionAxes = Axes.X;
RelativeSizeAxes = Axes.Y;
AutoSizeAxes = Axes.X;
InternalChildren = new Drawable[]
{
new Box
{
Anchor = Anchor.TopCentre,
Origin = Anchor.TopCentre,
Size = new Vector2(14, box_height),
},
new Triangle
{
Anchor = Anchor.TopCentre,
Origin = Anchor.BottomCentre,
Scale = new Vector2(1, -1),
Size = new Vector2(10, 5),
Y = box_height,
},
new Triangle
{
Anchor = Anchor.BottomCentre,
Origin = Anchor.BottomCentre,
Size = new Vector2(10, 5)
Size = new Vector2(10, 5),
Y = -box_height,
},
new Box
{
Anchor = Anchor.BottomCentre,
Origin = Anchor.BottomCentre,
Size = new Vector2(14, box_height),
},
new Box
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
RelativeSizeAxes = Axes.Y,
Width = 2,
Width = 1.4f,
EdgeSmoothness = new Vector2(1, 0)
}
};
}

[BackgroundDependencyLoader]
private void load(OsuColour colours) => Colour = colours.Red;
private void load(OsuColour colours) => Colour = colours.Red1;
}
}
}
8 changes: 2 additions & 6 deletions osu.Game/Screens/Edit/Compose/Components/BeatDivisorControl.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,8 @@ public partial class BeatDivisorControl : CompositeDrawable, IKeyBindingHandler<
{
private int? lastCustomDivisor;

private readonly BindableBeatDivisor beatDivisor = new BindableBeatDivisor();

public BeatDivisorControl(BindableBeatDivisor beatDivisor)
{
this.beatDivisor.BindTo(beatDivisor);
}
[Resolved]
private BindableBeatDivisor beatDivisor { get; set; } = null!;

[BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider)
Expand Down
20 changes: 7 additions & 13 deletions osu.Game/Screens/Edit/Compose/Components/Timeline/CentreMarker.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,17 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
{
public partial class CentreMarker : CompositeDrawable
{
private const float triangle_width = 15;
private const float triangle_height = 10;
private const float bar_width = 2;
private const float triangle_width = 8;

private const float bar_width = 1.6f;

public CentreMarker()
{
RelativeSizeAxes = Axes.Y;
Size = new Vector2(triangle_width, 1);

Anchor = Anchor.Centre;
Origin = Anchor.Centre;
Anchor = Anchor.TopCentre;
Origin = Anchor.TopCentre;

InternalChildren = new Drawable[]
{
Expand All @@ -37,22 +37,16 @@ public CentreMarker()
{
Anchor = Anchor.TopCentre,
Origin = Anchor.BottomCentre,
Size = new Vector2(triangle_width, triangle_height),
Size = new Vector2(triangle_width, triangle_width * 0.8f),
Scale = new Vector2(1, -1)
},
new Triangle
{
Anchor = Anchor.BottomCentre,
Origin = Anchor.BottomCentre,
Size = new Vector2(triangle_width, triangle_height),
}
};
}

[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
Colour = colours.RedDark;
Colour = colours.Red1;
}
}
}
Loading