RepoMirrors/osu
1
0
Fork 0
mirror of https://github.com/ppy/osu synced 2025-01-18 20:10:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #20030 from peppy/notification-design-update

Browse Source 
Update notification overlay design
This commit is contained in:
Dan Balasescu 2022-08-31 16:06:59 +09:00 committed by GitHub
commit ccc08b816c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 140 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
osu.Desktop/Security/ElevatedPrivilegesChecker.cs
View File

@ -76,7 +76,7 @@ namespace osu.Desktop.Security
private void load(OsuColour colours)
{
Icon = FontAwesome.Solid.ShieldAlt;
IconBackground.Colour = colours.YellowDark;
IconContent.Colour = colours.YellowDark;
}
}
}

2
osu.Game/Database/TooManyDownloadsNotification.cs
View File

@ -20,7 +20,7 @@ namespace osu.Game.Database
[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
IconBackground.Colour = colours.RedDark;
IconContent.Colour = colours.RedDark;
}
}
}

2
osu.Game/Online/Chat/MessageNotifier.cs
View File

@ -174,7 +174,7 @@ namespace osu.Game.Online.Chat
[BackgroundDependencyLoader]
private void load(OsuColour colours, ChatOverlay chatOverlay, INotificationOverlay notificationOverlay)
{
IconBackground.Colour = colours.PurpleDark;
IconContent.Colour = colours.PurpleDark;
Activated = delegate
{

6
osu.Game/Overlays/NotificationOverlay.cs
View File

@ -12,7 +12,6 @@ using osu.Framework.Graphics.Shapes;
using osu.Framework.Localisation;
using osu.Framework.Logging;
using osu.Framework.Threading;
using osu.Game.Graphics;
using osu.Game.Graphics.Containers;
using osu.Game.Overlays.Notifications;
using osu.Game.Resources.Localisation.Web;
@ -35,6 +34,9 @@ namespace osu.Game.Overlays
[Resolved]
private AudioManager audio { get; set; } = null!;
[Cached]
private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Purple);
private readonly IBindable<Visibility> firstRunSetupVisibility = new Bindable<Visibility>();
[BackgroundDependencyLoader]
@ -49,7 +51,7 @@ namespace osu.Game.Overlays
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = OsuColour.Gray(0.05f),
Colour = colourProvider.Background4,
},
new OsuScrollContainer
{

163
osu.Game/Overlays/Notifications/Notification.cs
View File

@ -46,22 +46,30 @@ namespace osu.Game.Overlays.Notifications
public virtual string PopInSampleName => "UI/notification-pop-in";
protected NotificationLight Light;
private readonly CloseButton closeButton;
protected Container IconContent;
private readonly Container content;
protected override Container<Drawable> Content => content;
protected Container NotificationContent;
protected Container MainContent;
public virtual bool Read { get; set; }
protected virtual IconUsage CloseButtonIcon => FontAwesome.Solid.Check;
[Resolved]
private OverlayColourProvider colourProvider { get; set; } = null!;
private Box background = null!;
protected Notification()
{
RelativeSizeAxes = Axes.X;
AutoSizeAxes = Axes.Y;
AddRangeInternal(new Drawable[]
InternalChildren = new Drawable[]
{
Light = new NotificationLight
{
@ -69,9 +77,9 @@ namespace osu.Game.Overlays.Notifications
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreRight,
},
NotificationContent = new Container
MainContent = new Container
{
CornerRadius = 8,
CornerRadius = 6,
Masking = true,
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
@ -79,61 +87,78 @@ namespace osu.Game.Overlays.Notifications
AutoSizeEasing = Easing.OutQuint,
Children = new Drawable[]
{
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = Color4.White,
},
new Container
new GridContainer
{
RelativeSizeAxes = Axes.X,
Padding = new MarginPadding(5),
AutoSizeAxes = Axes.Y,
Children = new Drawable[]
RowDimensions = new[]
{
IconContent = new Container
{
Size = new Vector2(40),
Masking = true,
CornerRadius = 5,
},
content = new Container
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Padding = new MarginPadding
{
Left = 45,
Right = 30
},
}
}
},
closeButton = new CloseButton
{
Alpha = 0,
Action = Close,
Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
Margin = new MarginPadding
{
Right = 5
new Dimension(GridSizeMode.AutoSize, minSize: 60)
},
}
ColumnDimensions = new[]
{
new Dimension(GridSizeMode.AutoSize),
new Dimension(),
new Dimension(GridSizeMode.AutoSize),
},
Content = new[]
{
new Drawable[]
{
IconContent = new Container
{
Width = 40,
RelativeSizeAxes = Axes.Y,
},
new Container
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Padding = new MarginPadding(10),
Children = new Drawable[]
{
content = new Container
{
Masking = true,
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
},
}
},
new CloseButton(CloseButtonIcon)
{
Action = Close,
Anchor = Anchor.TopRight,
Origin = Anchor.TopRight,
}
}
},
},
}
}
};
}
[BackgroundDependencyLoader]
private void load()
{
MainContent.Add(background = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = colourProvider.Background3,
Depth = float.MaxValue
});
}
protected override bool OnHover(HoverEvent e)
{
closeButton.FadeIn(75);
background.FadeColour(colourProvider.Background2, 200, Easing.OutQuint);
return base.OnHover(e);
}
protected override void OnHoverLost(HoverLostEvent e)
{
closeButton.FadeOut(75);
background.FadeColour(colourProvider.Background3, 200, Easing.OutQuint);
base.OnHoverLost(e);
}
@ -150,8 +175,9 @@ namespace osu.Game.Overlays.Notifications
base.LoadComplete();
this.FadeInFromZero(200);
NotificationContent.MoveToX(DrawSize.X);
NotificationContent.MoveToX(0, 500, Easing.OutQuint);
MainContent.MoveToX(DrawSize.X);
MainContent.MoveToX(0, 500, Easing.OutQuint);
}
public bool WasClosed;
@ -169,40 +195,55 @@ namespace osu.Game.Overlays.Notifications
private class CloseButton : OsuClickableContainer
{
private Color4 hoverColour;
private SpriteIcon icon = null!;
private Box background = null!;
public CloseButton()
private readonly IconUsage iconUsage;
[Resolved]
private OverlayColourProvider colourProvider { get; set; } = null!;
public CloseButton(IconUsage iconUsage)
{
Colour = OsuColour.Gray(0.2f);
AutoSizeAxes = Axes.Both;
this.iconUsage = iconUsage;
}
Children = new[]
[BackgroundDependencyLoader]
private void load()
{
RelativeSizeAxes = Axes.Y;
Width = 28;
Children = new Drawable[]
{
new SpriteIcon
background = new Box
{
Colour = OsuColour.Gray(0).Opacity(0.15f),
Alpha = 0,
RelativeSizeAxes = Axes.Both,
},
icon = new SpriteIcon
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Icon = FontAwesome.Solid.TimesCircle,
Size = new Vector2(20),
Icon = iconUsage,
Size = new Vector2(12),
Colour = colourProvider.Foreground1,
}
};
}
[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
hoverColour = colours.Yellow;
}
protected override bool OnHover(HoverEvent e)
{
this.FadeColour(hoverColour, 200);
background.FadeIn(200, Easing.OutQuint);
icon.FadeColour(colourProvider.Content1, 200, Easing.OutQuint);
return base.OnHover(e);
}
protected override void OnHoverLost(HoverLostEvent e)
{
this.FadeColour(OsuColour.Gray(0.2f), 200);
background.FadeOut(200, Easing.OutQuint);
icon.FadeColour(colourProvider.Foreground1, 200, Easing.OutQuint);
base.OnHoverLost(e);
}
}

2
osu.Game/Overlays/Notifications/ProgressCompletionNotification.cs
View File

@ -20,7 +20,7 @@ namespace osu.Game.Overlays.Notifications
[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
IconBackground.Colour = ColourInfo.GradientVertical(colours.GreenDark, colours.GreenLight);
IconContent.Colour = ColourInfo.GradientVertical(colours.GreenDark, colours.GreenLight);
}
}
}

26
osu.Game/Overlays/Notifications/ProgressNotification.cs
View File

@ -57,11 +57,14 @@ namespace osu.Game.Overlays.Notifications
set
{
progress = value;
Scheduler.AddOnce(updateProgress, progress);
Scheduler.AddOnce(p => progressBar.Progress = p, progress);
}
}
private void updateProgress(float progress) => progressBar.Progress = progress;
protected override IconUsage CloseButtonIcon => FontAwesome.Solid.Times;
[Resolved]
private OverlayColourProvider colourProvider { get; set; } = null!;
protected override void LoadComplete()
{
@ -100,7 +103,7 @@ namespace osu.Game.Overlays.Notifications
Light.Pulsate = false;
progressBar.Active = false;
iconBackground.FadeColour(ColourInfo.GradientVertical(colourQueued, colourQueued.Lighten(0.5f)), colour_fade_duration);
IconContent.FadeColour(ColourInfo.GradientVertical(colourQueued, colourQueued.Lighten(0.5f)), colour_fade_duration);
loadingSpinner.Show();
break;
@ -109,14 +112,14 @@ namespace osu.Game.Overlays.Notifications
Light.Pulsate = true;
progressBar.Active = true;
iconBackground.FadeColour(ColourInfo.GradientVertical(colourActive, colourActive.Lighten(0.5f)), colour_fade_duration);
IconContent.FadeColour(ColourInfo.GradientVertical(colourActive, colourActive.Lighten(0.5f)), colour_fade_duration);
loadingSpinner.Show();
break;
case ProgressNotificationState.Cancelled:
cancellationTokenSource.Cancel();
iconBackground.FadeColour(ColourInfo.GradientVertical(Color4.Gray, Color4.Gray.Lighten(0.5f)), colour_fade_duration);
IconContent.FadeColour(ColourInfo.GradientVertical(Color4.Gray, Color4.Gray.Lighten(0.5f)), colour_fade_duration);
loadingSpinner.Hide();
var icon = new SpriteIcon
@ -138,8 +141,7 @@ namespace osu.Game.Overlays.Notifications
case ProgressNotificationState.Completed:
loadingSpinner.Hide();
NotificationContent.MoveToY(-DrawSize.Y / 2, 200, Easing.OutQuint);
this.FadeOut(200).Finally(_ => Completed());
Completed();
break;
}
}
@ -165,21 +167,19 @@ namespace osu.Game.Overlays.Notifications
private Color4 colourActive;
private Color4 colourCancelled;
private Box iconBackground = null!;
private LoadingSpinner loadingSpinner = null!;
private readonly TextFlowContainer textDrawable;
public ProgressNotification()
{
Content.Add(textDrawable = new OsuTextFlowContainer
Content.Add(textDrawable = new OsuTextFlowContainer(t => t.Font = t.Font.With(size: 14, weight: FontWeight.Medium))
{
Colour = OsuColour.Gray(128),
AutoSizeAxes = Axes.Y,
RelativeSizeAxes = Axes.X,
});
NotificationContent.Add(progressBar = new ProgressBar
MainContent.Add(progressBar = new ProgressBar
{
Origin = Anchor.BottomLeft,
Anchor = Anchor.BottomLeft,
@ -204,10 +204,10 @@ namespace osu.Game.Overlays.Notifications
IconContent.AddRange(new Drawable[]
{
iconBackground = new Box
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = Color4.White,
Colour = colourProvider.Background5,
},
loadingSpinner = new LoadingSpinner
{

32
osu.Game/Overlays/Notifications/SimpleNotification.cs
View File

@ -3,7 +3,6 @@
using osu.Framework.Allocation;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Colour;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites;
@ -24,7 +23,8 @@ namespace osu.Game.Overlays.Notifications
set
{
text = value;
textDrawable.Text = text;
if (textDrawable != null)
textDrawable.Text = text;
}
}
@ -36,48 +36,44 @@ namespace osu.Game.Overlays.Notifications
set
{
icon = value;
iconDrawable.Icon = icon;
if (iconDrawable != null)
iconDrawable.Icon = icon;
}
}
private readonly TextFlowContainer textDrawable;
private readonly SpriteIcon iconDrawable;
private TextFlowContainer? textDrawable;
protected Box IconBackground;
private SpriteIcon? iconDrawable;
public SimpleNotification()
[BackgroundDependencyLoader]
private void load(OsuColour colours, OverlayColourProvider colourProvider)
{
Light.Colour = colours.Green;
IconContent.AddRange(new Drawable[]
{
IconBackground = new Box
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = ColourInfo.GradientVertical(OsuColour.Gray(0.2f), OsuColour.Gray(0.6f))
Colour = colourProvider.Background5,
},
iconDrawable = new SpriteIcon
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Icon = icon,
Size = new Vector2(20),
Size = new Vector2(16),
}
});
Content.Add(textDrawable = new OsuTextFlowContainer(t => t.Font = t.Font.With(size: 14))
Content.Add(textDrawable = new OsuTextFlowContainer(t => t.Font = t.Font.With(size: 14, weight: FontWeight.Medium))
{
Colour = OsuColour.Gray(128),
AutoSizeAxes = Axes.Y,
RelativeSizeAxes = Axes.X,
Text = text
});
}
[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
Light.Colour = colours.Green;
}
public override bool Read
{
get => base.Read;

4
osu.Game/Screens/Play/PlayerLoader.cs
View File

@ -530,7 +530,7 @@ namespace osu.Game.Screens.Play
private void load(OsuColour colours, AudioManager audioManager, INotificationOverlay notificationOverlay, VolumeOverlay volumeOverlay)
{
Icon = FontAwesome.Solid.VolumeMute;
IconBackground.Colour = colours.RedDark;
IconContent.Colour = colours.RedDark;
Activated = delegate
{
@ -584,7 +584,7 @@ namespace osu.Game.Screens.Play
private void load(OsuColour colours, INotificationOverlay notificationOverlay)
{
Icon = FontAwesome.Solid.BatteryQuarter;
IconBackground.Colour = colours.RedDark;
IconContent.Colour = colours.RedDark;
Activated = delegate
{

2
osu.Game/Updater/UpdateManager.cs
View File

@ -99,7 +99,7 @@ namespace osu.Game.Updater
private void load(OsuColour colours, ChangelogOverlay changelog, INotificationOverlay notificationOverlay)
{
Icon = FontAwesome.Solid.CheckSquare;
IconBackground.Colour = colours.BlueDark;
IconContent.Colour = colours.BlueDark;
Activated = delegate
{