From a2a3926aee835670fa2dfded0d552ddd10f8f6a5 Mon Sep 17 00:00:00 2001 From: Chandler Cox Date: Thu, 9 May 2024 21:53:04 -0500 Subject: [PATCH 1/4] Expose colors in scrollbar --- Source/Engine/UI/GUI/Panels/ScrollBar.cs | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/Source/Engine/UI/GUI/Panels/ScrollBar.cs b/Source/Engine/UI/GUI/Panels/ScrollBar.cs index e6064e881..bb45accf7 100644 --- a/Source/Engine/UI/GUI/Panels/ScrollBar.cs +++ b/Source/Engine/UI/GUI/Panels/ScrollBar.cs @@ -74,6 +74,21 @@ namespace FlaxEngine.GUI /// public bool EnableSmoothing { get; set; } = true; + /// + /// The track color. + /// + public Color TrackColor; + + /// + /// The thumb color. + /// + public Color ThumbColor; + + /// + /// The selected thumb color. + /// + public Color ThumbSelectedColor; + /// /// Gets or sets the minimum value. /// @@ -209,6 +224,10 @@ namespace FlaxEngine.GUI AutoFocus = false; _orientation = orientation; + var style = Style.Current; + TrackColor = style.BackgroundHighlighted; + ThumbColor = style.BackgroundNormal; + ThumbSelectedColor = style.BackgroundSelected; } /// @@ -377,8 +396,8 @@ namespace FlaxEngine.GUI base.Draw(); var style = Style.Current; - Render2D.FillRectangle(_trackRect, style.BackgroundHighlighted * _thumbOpacity); - Render2D.FillRectangle(_thumbRect, (_thumbClicked ? style.BackgroundSelected : style.BackgroundNormal) * _thumbOpacity); + Render2D.FillRectangle(_trackRect, TrackColor * _thumbOpacity); + Render2D.FillRectangle(_thumbRect, (_thumbClicked ? ThumbSelectedColor : ThumbColor) * _thumbOpacity); } /// From ee790ff3a971121082fec2107700c61a8a0ed3af Mon Sep 17 00:00:00 2001 From: Chandler Cox Date: Thu, 9 May 2024 21:53:22 -0500 Subject: [PATCH 2/4] Change colors for tabs to be seen better. --- Source/Editor/GUI/Tabs/Tabs.cs | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/Source/Editor/GUI/Tabs/Tabs.cs b/Source/Editor/GUI/Tabs/Tabs.cs index 9a010f733..aefc25c90 100644 --- a/Source/Editor/GUI/Tabs/Tabs.cs +++ b/Source/Editor/GUI/Tabs/Tabs.cs @@ -418,9 +418,19 @@ namespace FlaxEditor.GUI.Tabs { // If scroll bar is visible it covers part of the tab header so include this in tab size to improve usability if (_orientation == Orientation.Horizontal && TabsPanel.HScrollBar.Visible) + { tabsSize.Y += TabsPanel.HScrollBar.Height; + var style = Style.Current; + TabsPanel.HScrollBar.TrackColor = style.Background; + TabsPanel.HScrollBar.ThumbColor = style.ForegroundGrey; + } else if (_orientation == Orientation.Vertical && TabsPanel.VScrollBar.Visible) + { tabsSize.X += TabsPanel.VScrollBar.Width; + var style = Style.Current; + TabsPanel.VScrollBar.TrackColor = style.Background; + TabsPanel.VScrollBar.ThumbColor = style.ForegroundGrey; + } } // Fit the tabs panel From dc0aa61a14e59ef076ba0cc0c9977f60b59840f0 Mon Sep 17 00:00:00 2001 From: Chandler Cox Date: Thu, 9 May 2024 22:14:08 -0500 Subject: [PATCH 3/4] Add scrollbar colors to `Panel` --- Source/Engine/UI/GUI/Panels/Panel.cs | 78 ++++++++++++++++++++++++++-- 1 file changed, 74 insertions(+), 4 deletions(-) diff --git a/Source/Engine/UI/GUI/Panels/Panel.cs b/Source/Engine/UI/GUI/Panels/Panel.cs index 8c90b6544..8ae178c0f 100644 --- a/Source/Engine/UI/GUI/Panels/Panel.cs +++ b/Source/Engine/UI/GUI/Panels/Panel.cs @@ -17,6 +17,9 @@ namespace FlaxEngine.GUI private ScrollBars _scrollBars; private float _scrollBarsSize = ScrollBar.DefaultSize; private Margin _scrollMargin; + private Color _scrollbarTrackColor; + private Color _scrollbarThumbColor; + private Color _scrollbarThumbSelectedColor; /// /// The cached scroll area bounds. Used to scroll contents of the panel control. Cached during performing layout. @@ -49,7 +52,7 @@ namespace FlaxEngine.GUI /// /// Gets or sets the scroll bars usage by this panel. /// - [EditorOrder(0), Tooltip("The scroll bars usage.")] + [EditorDisplay("Scrollbar Style"), EditorOrder(0), Tooltip("The scroll bars usage.")] public ScrollBars ScrollBars { get => _scrollBars; @@ -73,6 +76,12 @@ namespace FlaxEngine.GUI //VScrollBar.X += VScrollBar.Width; VScrollBar.ValueChanged += () => SetViewOffset(Orientation.Vertical, VScrollBar.Value); } + if (VScrollBar != null) + { + VScrollBar.TrackColor = _scrollbarTrackColor; + VScrollBar.ThumbColor = _scrollbarThumbColor; + VScrollBar.ThumbSelectedColor = _scrollbarThumbSelectedColor; + } } else if (VScrollBar != null) { @@ -94,6 +103,12 @@ namespace FlaxEngine.GUI //HScrollBar.Offsets += new Margin(0, 0, HScrollBar.Height * 0.5f, 0); HScrollBar.ValueChanged += () => SetViewOffset(Orientation.Horizontal, HScrollBar.Value); } + if (HScrollBar != null) + { + HScrollBar.TrackColor = _scrollbarTrackColor; + HScrollBar.ThumbColor = _scrollbarThumbColor; + HScrollBar.ThumbSelectedColor = _scrollbarThumbSelectedColor; + } } else if (HScrollBar != null) { @@ -108,7 +123,7 @@ namespace FlaxEngine.GUI /// /// Gets or sets the size of the scroll bars. /// - [EditorOrder(5), Tooltip("Scroll bars size.")] + [EditorDisplay("Scrollbar Style"), EditorOrder(5), Tooltip("Scroll bars size.")] public float ScrollBarsSize { get => _scrollBarsSize; @@ -124,7 +139,7 @@ namespace FlaxEngine.GUI /// /// Gets or sets a value indicating whether always show scrollbars. Otherwise show them only if scrolling is available. /// - [EditorOrder(10), Tooltip("Whether always show scrollbars. Otherwise show them only if scrolling is available.")] + [EditorDisplay("Scrollbar Style"), EditorOrder(10), Tooltip("Whether always show scrollbars. Otherwise show them only if scrolling is available.")] public bool AlwaysShowScrollbars { get => _alwaysShowScrollbars; @@ -157,7 +172,7 @@ namespace FlaxEngine.GUI /// /// Gets or sets the scroll margin applies to the child controls area. Can be used to expand the scroll area bounds by adding a margin. /// - [EditorOrder(20), Tooltip("Scroll margin applies to the child controls area. Can be used to expand the scroll area bounds by adding a margin.")] + [EditorDisplay("Scrollbar Style"), EditorOrder(20), Tooltip("Scroll margin applies to the child controls area. Can be used to expand the scroll area bounds by adding a margin.")] public Margin ScrollMargin { get => _scrollMargin; @@ -171,6 +186,57 @@ namespace FlaxEngine.GUI } } + /// + /// The color of the scroll bar track. + /// + [EditorDisplay("Scrollbar Style"), EditorOrder(30), ExpandGroups] + public Color ScrollbarTrackColor + { + get => _scrollbarTrackColor; + set + { + _scrollbarTrackColor = value; + if (VScrollBar != null) + VScrollBar.TrackColor = _scrollbarTrackColor; + if (HScrollBar != null) + HScrollBar.TrackColor = _scrollbarTrackColor; + } + } + + /// + /// The color of the scroll bar thumb. + /// + [EditorDisplay("Scrollbar Style"), EditorOrder(31)] + public Color ScrollbarThumbColor + { + get => _scrollbarThumbColor; + set + { + _scrollbarThumbColor = value; + if (VScrollBar != null) + VScrollBar.ThumbColor = _scrollbarThumbColor; + if (HScrollBar != null) + HScrollBar.ThumbColor = _scrollbarThumbColor; + } + } + + /// + /// The color of the scroll bar thumb when selected. + /// + [EditorDisplay("Scrollbar Style"), EditorOrder(32)] + public Color ScrollbarThumbSelectedColor + { + get => _scrollbarThumbSelectedColor; + set + { + _scrollbarThumbSelectedColor = value; + if (VScrollBar != null) + VScrollBar.ThumbSelectedColor = _scrollbarThumbSelectedColor; + if (HScrollBar != null) + HScrollBar.ThumbSelectedColor = _scrollbarThumbSelectedColor; + } + } + /// /// Initializes a new instance of the class. /// @@ -187,6 +253,10 @@ namespace FlaxEngine.GUI public Panel(ScrollBars scrollBars, bool autoFocus = false) { AutoFocus = autoFocus; + var style = Style.Current; + _scrollbarTrackColor = style.BackgroundHighlighted; + _scrollbarThumbColor = style.BackgroundNormal; + _scrollbarThumbSelectedColor = style.BackgroundSelected; ScrollBars = scrollBars; } From 533902d185384c539035589ec17bdd16e65c01e1 Mon Sep 17 00:00:00 2001 From: Chandler Cox Date: Fri, 10 May 2024 15:04:27 -0500 Subject: [PATCH 4/4] Change panel scroll bar style editor order. --- Source/Engine/UI/GUI/Panels/Panel.cs | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/Source/Engine/UI/GUI/Panels/Panel.cs b/Source/Engine/UI/GUI/Panels/Panel.cs index 8ae178c0f..6549f94da 100644 --- a/Source/Engine/UI/GUI/Panels/Panel.cs +++ b/Source/Engine/UI/GUI/Panels/Panel.cs @@ -52,7 +52,7 @@ namespace FlaxEngine.GUI /// /// Gets or sets the scroll bars usage by this panel. /// - [EditorDisplay("Scrollbar Style"), EditorOrder(0), Tooltip("The scroll bars usage.")] + [EditorDisplay("Scrollbar Style"), EditorOrder(1500), Tooltip("The scroll bars usage.")] public ScrollBars ScrollBars { get => _scrollBars; @@ -123,7 +123,7 @@ namespace FlaxEngine.GUI /// /// Gets or sets the size of the scroll bars. /// - [EditorDisplay("Scrollbar Style"), EditorOrder(5), Tooltip("Scroll bars size.")] + [EditorDisplay("Scrollbar Style"), EditorOrder(1501), Tooltip("Scroll bars size.")] public float ScrollBarsSize { get => _scrollBarsSize; @@ -139,7 +139,7 @@ namespace FlaxEngine.GUI /// /// Gets or sets a value indicating whether always show scrollbars. Otherwise show them only if scrolling is available. /// - [EditorDisplay("Scrollbar Style"), EditorOrder(10), Tooltip("Whether always show scrollbars. Otherwise show them only if scrolling is available.")] + [EditorDisplay("Scrollbar Style"), EditorOrder(1502), Tooltip("Whether always show scrollbars. Otherwise show them only if scrolling is available.")] public bool AlwaysShowScrollbars { get => _alwaysShowScrollbars; @@ -172,7 +172,7 @@ namespace FlaxEngine.GUI /// /// Gets or sets the scroll margin applies to the child controls area. Can be used to expand the scroll area bounds by adding a margin. /// - [EditorDisplay("Scrollbar Style"), EditorOrder(20), Tooltip("Scroll margin applies to the child controls area. Can be used to expand the scroll area bounds by adding a margin.")] + [EditorDisplay("Scrollbar Style"), EditorOrder(1503), Tooltip("Scroll margin applies to the child controls area. Can be used to expand the scroll area bounds by adding a margin.")] public Margin ScrollMargin { get => _scrollMargin; @@ -189,7 +189,7 @@ namespace FlaxEngine.GUI /// /// The color of the scroll bar track. /// - [EditorDisplay("Scrollbar Style"), EditorOrder(30), ExpandGroups] + [EditorDisplay("Scrollbar Style"), EditorOrder(1600), ExpandGroups] public Color ScrollbarTrackColor { get => _scrollbarTrackColor; @@ -206,7 +206,7 @@ namespace FlaxEngine.GUI /// /// The color of the scroll bar thumb. /// - [EditorDisplay("Scrollbar Style"), EditorOrder(31)] + [EditorDisplay("Scrollbar Style"), EditorOrder(1601)] public Color ScrollbarThumbColor { get => _scrollbarThumbColor; @@ -223,7 +223,7 @@ namespace FlaxEngine.GUI /// /// The color of the scroll bar thumb when selected. /// - [EditorDisplay("Scrollbar Style"), EditorOrder(32)] + [EditorDisplay("Scrollbar Style"), EditorOrder(1602)] public Color ScrollbarThumbSelectedColor { get => _scrollbarThumbSelectedColor;