GoaLitiuM/FlaxEngine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better light theme (Style) support, and a Default light theme (as a secondary option)

Browse Source 
1) Added ForegroundViewport as a new color.  It is used in the main game viewport (ViewportWidgetButton), and the viewport for rendering of particles and materials.  It is needed because the default foreground in a Light theme is black, but black does not work well in a viewport.  A new color seemed appropriate.

2) Fixed the profiler window to use the Foreground color in multiple text elements, instead of Color.White (or no default TitleColor).  This includes  the Row class, Asset class, SingleChart class, Timeline Class, and more.

3) Added a second theme/Style (DefaultLight) to include with the engine.  It uses RGB float values because those were easier to transfer from the saved values that I had created (and they're easier for me to edit if necessary).  I tried to emulate how the Default theme is created/loaded/etc as closely as possible.
This commit is contained in:
Luke Schneider
2023-09-27 21:54:34 -05:00
parent bff9c3419d
commit ad28a3fdbf
13 changed files with 111 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Source/Editor/GUI/Row.cs
View File

@@ -95,7 +95,7 @@ namespace FlaxEditor.GUI
rect.Width -= leftDepthMargin;
Render2D.PushClip(rect);
Render2D.DrawText(style.FontMedium, text, rect, Color.White, column.CellAlignment, TextAlignment.Center);
Render2D.DrawText(style.FontMedium, text, rect, Style.Current.Foreground, column.CellAlignment, TextAlignment.Center);
Render2D.PopClip();
x += width;

66
Source/Editor/Options/OptionsModule.cs
View File

@@ -208,13 +208,20 @@ namespace FlaxEditor.Options
// If a non-default style was chosen, switch to that style
string styleName = themeOptions.SelectedStyle;
if (styleName != "Default" && themeOptions.Styles.TryGetValue(styleName, out var style) && style != null)
if (styleName != "Default" && styleName != "LightDefault" && themeOptions.Styles.TryGetValue(styleName, out var style) && style != null)
{
Style.Current = style;
}
else
{
Style.Current = CreateDefaultStyle();
if (styleName == "LightDefault")
{
Style.Current = CreateLightStyle();
}
else
{
Style.Current = CreateDefaultStyle();
}
}
}
@@ -233,6 +240,7 @@ namespace FlaxEditor.Options
Foreground = Color.FromBgra(0xFFFFFFFF),
ForegroundGrey = Color.FromBgra(0xFFA9A9B3),
ForegroundDisabled = Color.FromBgra(0xFF787883),
ForegroundViewport = Color.FromBgra(0xFFFFFFFF),
BackgroundHighlighted = Color.FromBgra(0xFF54545C),
BorderHighlighted = Color.FromBgra(0xFF6A6A75),
BackgroundSelected = Color.FromBgra(0xFF007ACC),
@@ -271,6 +279,60 @@ namespace FlaxEditor.Options
return style;
}
/// <summary>
/// Creates the light style (2nd default).
/// </summary>
/// <returns>The style object.</returns>
public Style CreateLightStyle()
{
// Metro Style colors
var options = Options;
var style = new Style
{
Background = new Color(0.92f, 0.92f, 0.92f, 1f),
LightBackground = new Color(0.84f, 0.84f, 0.88f, 1f),
DragWindow = new Color(0.0f, 0.26f, 0.43f, 0.70f),
Foreground = new Color(0.0f, 0.0f, 0.0f, 1f),
ForegroundGrey = new Color(0.30f, 0.30f, 0.31f, 1f),
ForegroundDisabled = new Color(0.45f, 0.45f, 0.49f, 1f),
ForegroundViewport = new Color(1.0f, 1.0f, 1.0f, 1f),
BackgroundHighlighted = new Color(0.59f, 0.59f, 0.64f, 1f),
BorderHighlighted = new Color(0.50f, 0.50f, 0.55f, 1f),
BackgroundSelected = new Color(0.00f, 0.46f, 0.78f, 0.78f),
BorderSelected = new Color(0.11f, 0.57f, 0.88f, 0.65f),
BackgroundNormal = new Color(0.67f, 0.67f, 0.75f, 1f),
BorderNormal = new Color(0.59f, 0.59f, 0.64f, 1f),
TextBoxBackground = new Color(0.75f, 0.75f, 0.81f, 1f),
TextBoxBackgroundSelected = new Color(0.73f, 0.73f, 0.80f, 1f),
CollectionBackgroundColor = new Color(0.25f, 0.25f, 0.25f, 1f),
ProgressNormal = new Color(0.03f, 0.65f, 0.12f, 1f),
// Fonts
FontTitle = options.Interface.TitleFont.GetFont(),
FontLarge = options.Interface.LargeFont.GetFont(),
FontMedium = options.Interface.MediumFont.GetFont(),
FontSmall = options.Interface.SmallFont.GetFont(),
// Icons
ArrowDown = Editor.Icons.ArrowDown12,
ArrowRight = Editor.Icons.ArrowRight12,
Search = Editor.Icons.Search12,
Settings = Editor.Icons.Settings12,
Cross = Editor.Icons.Cross12,
CheckBoxIntermediate = Editor.Icons.CheckBoxIntermediate12,
CheckBoxTick = Editor.Icons.CheckBoxTick12,
StatusBarSizeGrip = Editor.Icons.WindowDrag12,
Translate = Editor.Icons.Translate32,
Rotate = Editor.Icons.Rotate32,
Scale = Editor.Icons.Scale32,
Scalar = Editor.Icons.Scalar32,
SharedTooltip = new Tooltip()
};
return style;
}
/// <inheritdoc />
public override void OnInit()
{

5
Source/Editor/Options/ThemeOptions.cs
View File

@@ -63,13 +63,14 @@ namespace FlaxEditor.Options
private void ReloadOptions(ComboBox obj)
{
var themeOptions = (ThemeOptions)ParentEditor.Values[0];
var options = new string[themeOptions.Styles.Count + 1];
var options = new string[themeOptions.Styles.Count + 2];
options[0] = "Default";
options[1] = "LightDefault";
int i = 0;
foreach (var styleName in themeOptions.Styles.Keys)
{
options[i + 1] = styleName;
options[i + 2] = styleName;
i++;
}
_combobox.ComboBox.SetItems(options);

4
Source/Editor/Viewport/Widgets/ViewportWidgetButton.cs
View File

@@ -112,7 +112,7 @@ namespace FlaxEditor.Viewport.Widgets
if (Icon.IsValid)
{
// Draw icon
Render2D.DrawSprite(Icon, iconRect, style.Foreground);
Render2D.DrawSprite(Icon, iconRect, style.ForegroundViewport);
// Update text rectangle
textRect.Location.X += iconSize;
@@ -120,7 +120,7 @@ namespace FlaxEditor.Viewport.Widgets
}
// Draw text
Render2D.DrawText(style.FontMedium, _text, textRect, style.Foreground * (IsMouseOver ? 1.0f : 0.9f), TextAlignment.Center, TextAlignment.Center);
Render2D.DrawText(style.FontMedium, _text, textRect, style.ForegroundViewport * (IsMouseOver ? 1.0f : 0.9f), TextAlignment.Center, TextAlignment.Center);
}
/// <inheritdoc />

5
Source/Editor/Windows/Profiler/Assets.cs
View File

@@ -63,6 +63,7 @@ namespace FlaxEditor.Windows.Profiler
// Table
var headerColor = Style.Current.LightBackground;
var textColor = Style.Current.Foreground;
_table = new Table
{
Columns = new[]
@@ -73,22 +74,26 @@ namespace FlaxEditor.Windows.Profiler
CellAlignment = TextAlignment.Near,
Title = "Resource",
TitleBackgroundColor = headerColor,
TitleColor = textColor,
},
new ColumnDefinition
{
Title = "Type",
CellAlignment = TextAlignment.Center,
TitleBackgroundColor = headerColor,
TitleColor = textColor,
},
new ColumnDefinition
{
Title = "References",
TitleBackgroundColor = headerColor,
TitleColor = textColor,
},
new ColumnDefinition
{
Title = "Memory Usage",
TitleBackgroundColor = headerColor,
TitleColor = textColor,
FormatValue = v => Utilities.Utils.FormatBytesCount((ulong)v),
},
},

7
Source/Editor/Windows/Profiler/CPU.cs
View File

@@ -93,6 +93,7 @@ namespace FlaxEditor.Windows.Profiler
// Table
var headerColor = Style.Current.LightBackground;
var textColor = Style.Current.Foreground;
_table = new Table
{
Columns = new[]
@@ -103,36 +104,42 @@ namespace FlaxEditor.Windows.Profiler
CellAlignment = TextAlignment.Near,
Title = "Event",
TitleBackgroundColor = headerColor,
TitleColor = textColor,
},
new ColumnDefinition
{
Title = "Total",
TitleBackgroundColor = headerColor,
FormatValue = FormatCellPercentage,
TitleColor = textColor,
},
new ColumnDefinition
{
Title = "Self",
TitleBackgroundColor = headerColor,
FormatValue = FormatCellPercentage,
TitleColor = textColor,
},
new ColumnDefinition
{
Title = "Time ms",
TitleBackgroundColor = headerColor,
FormatValue = FormatCellMs,
TitleColor = textColor,
},
new ColumnDefinition
{
Title = "Self ms",
TitleBackgroundColor = headerColor,
FormatValue = FormatCellMs,
TitleColor = textColor,
},
new ColumnDefinition
{
Title = "Memory",
TitleBackgroundColor = headerColor,
FormatValue = FormatCellBytes,
TitleColor = textColor,
},
},
Parent = layout,

7
Source/Editor/Windows/Profiler/GPU.cs
View File

@@ -64,6 +64,7 @@ namespace FlaxEditor.Windows.Profiler
// Table
var headerColor = Style.Current.LightBackground;
var textColor = Style.Current.Foreground;
_table = new Table
{
Columns = new[]
@@ -74,35 +75,41 @@ namespace FlaxEditor.Windows.Profiler
CellAlignment = TextAlignment.Near,
Title = "Event",
TitleBackgroundColor = headerColor,
TitleColor = textColor,
},
new ColumnDefinition
{
Title = "Total",
TitleBackgroundColor = headerColor,
TitleColor = textColor,
FormatValue = (x) => ((float)x).ToString("0.0") + '%',
},
new ColumnDefinition
{
Title = "GPU ms",
TitleBackgroundColor = headerColor,
TitleColor = textColor,
FormatValue = (x) => ((float)x).ToString("0.000"),
},
new ColumnDefinition
{
Title = "Draw Calls",
TitleBackgroundColor = headerColor,
TitleColor = textColor,
FormatValue = FormatCountLong,
},
new ColumnDefinition
{
Title = "Triangles",
TitleBackgroundColor = headerColor,
TitleColor = textColor,
FormatValue = FormatCountLong,
},
new ColumnDefinition
{
Title = "Vertices",
TitleBackgroundColor = headerColor,
TitleColor = textColor,
FormatValue = FormatCountLong,
},
},

4
Source/Editor/Windows/Profiler/MemoryGPU.cs
View File

@@ -64,6 +64,7 @@ namespace FlaxEditor.Windows.Profiler
// Table
var headerColor = Style.Current.LightBackground;
var textColor = Style.Current.Foreground;
_table = new Table
{
Columns = new[]
@@ -74,18 +75,21 @@ namespace FlaxEditor.Windows.Profiler
CellAlignment = TextAlignment.Near,
Title = "Resource",
TitleBackgroundColor = headerColor,
TitleColor = textColor,
},
new ColumnDefinition
{
Title = "Type",
CellAlignment = TextAlignment.Center,
TitleBackgroundColor = headerColor,
TitleColor = textColor,
},
new ColumnDefinition
{
Title = "Memory Usage",
TitleBackgroundColor = headerColor,
FormatValue = v => Utilities.Utils.FormatBytesCount((ulong)v),
TitleColor = textColor,
},
},
Parent = layout,

6
Source/Editor/Windows/Profiler/Network.cs
View File

@@ -205,6 +205,7 @@ namespace FlaxEditor.Windows.Profiler
private static Table InitTable(ContainerControl parent, string name)
{
var headerColor = Style.Current.LightBackground;
var textColor = Style.Current.Foreground;
var table = new Table
{
Columns = new[]
@@ -215,28 +216,33 @@ namespace FlaxEditor.Windows.Profiler
CellAlignment = TextAlignment.Near,
Title = name,
TitleBackgroundColor = headerColor,
TitleColor = textColor,
},
new ColumnDefinition
{
Title = "Count",
TitleBackgroundColor = headerColor,
TitleColor = textColor,
},
new ColumnDefinition
{
Title = "Data Size",
TitleBackgroundColor = headerColor,
TitleColor = textColor,
FormatValue = FormatCellBytes,
},
new ColumnDefinition
{
Title = "Message Size",
TitleBackgroundColor = headerColor,
TitleColor = textColor,
FormatValue = FormatCellBytes,
},
new ColumnDefinition
{
Title = "Receivers",
TitleBackgroundColor = headerColor,
TitleColor = textColor,
},
},
Splits = new[]

6
Source/Editor/Windows/Profiler/SingleChart.cs
View File

@@ -105,7 +105,7 @@ namespace FlaxEditor.Windows.Profiler
if (_selectedSampleIndex != -1)
{
float selectedX = Width - (_samples.Count - _selectedSampleIndex - 1) * PointsOffset;
Render2D.DrawLine(new Float2(selectedX, 0), new Float2(selectedX, chartHeight), Color.White, 1.5f);
Render2D.DrawLine(new Float2(selectedX, 0), new Float2(selectedX, chartHeight), Style.Current.Foreground, 1.5f);
}
int samplesInViewCount = Math.Min((int)(Width / PointsOffset), _samples.Count) - 1;
@@ -138,8 +138,8 @@ namespace FlaxEditor.Windows.Profiler
var headerRect = new Rectangle(0, chartHeight, Width, TitleHeight);
var headerTextRect = new Rectangle(2, chartHeight, Width - 4, TitleHeight);
Render2D.FillRectangle(headerRect, style.BackgroundNormal);
Render2D.DrawText(style.FontMedium, Title, headerTextRect, Color.White * 0.8f, TextAlignment.Near, TextAlignment.Center);
Render2D.DrawText(style.FontMedium, _sample, headerTextRect, Color.White, TextAlignment.Far, TextAlignment.Center);
Render2D.DrawText(style.FontMedium, Title, headerTextRect, Style.Current.ForegroundGrey, TextAlignment.Near, TextAlignment.Center);
Render2D.DrawText(style.FontMedium, _sample, headerTextRect, Style.Current.Foreground, TextAlignment.Far, TextAlignment.Center);
}
private void OnClick(ref Float2 location)

4
Source/Editor/Windows/Profiler/Timeline.cs
View File

@@ -90,7 +90,7 @@ namespace FlaxEditor.Windows.Profiler
if (_nameLength < bounds.Width + 4)
{
Render2D.PushClip(bounds);
Render2D.DrawText(style.FontMedium, _name, bounds, Color.White, TextAlignment.Center, TextAlignment.Center);
Render2D.DrawText(style.FontMedium, _name, bounds, Style.Current.Foreground, TextAlignment.Center, TextAlignment.Center);
Render2D.PopClip();
}
}
@@ -115,7 +115,7 @@ namespace FlaxEditor.Windows.Profiler
var style = Style.Current;
var rect = new Rectangle(Float2.Zero, Size);
Render2D.PushClip(rect);
Render2D.DrawText(style.FontMedium, Name, rect, Color.White, TextAlignment.Center, TextAlignment.Center, TextWrapping.WrapChars);
Render2D.DrawText(style.FontMedium, Name, rect, Style.Current.Foreground, TextAlignment.Center, TextAlignment.Center, TextWrapping.WrapChars);
Render2D.PopClip();
}
}

1
Source/Engine/Scripting/Scripting.cs
View File

@@ -266,6 +266,7 @@ namespace FlaxEngine
Foreground = Color.FromBgra(0xFFFFFFFF),
ForegroundGrey = Color.FromBgra(0xFFA9A9B3),
ForegroundDisabled = Color.FromBgra(0xFF787883),
ForegroundViewport = Color.FromBgra(0xFFFFFFFF),
BackgroundHighlighted = Color.FromBgra(0xFF54545C),
BorderHighlighted = Color.FromBgra(0xFF6A6A75),
BackgroundSelected = Color.FromBgra(0xFF007ACC),

6
Source/Engine/UI/GUI/Style.cs
View File

@@ -104,6 +104,12 @@ namespace FlaxEngine.GUI
[EditorOrder(110)]
public Color ForegroundDisabled;
/// <summary>
/// The foreground color in viewports (usually have a dark background)
/// </summary>
[EditorOrder(115)]
public Color ForegroundViewport;
/// <summary>
/// The background highlighted color.
/// </summary>