From 410b3c85b688c9d981f7501d502c238b1806ce93 Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Wed, 28 Jul 2021 20:23:31 +0200 Subject: [PATCH] LibGUI+LibGfx: Highlight currently active tab button with accent color Use the new "Accent" color role to emphasize the currently active tab within a GUI::TabWidget. :^) --- Userland/Libraries/LibGUI/TabWidget.cpp | 4 +-- .../Libraries/LibGfx/ClassicStylePainter.cpp | 25 ++++++++++++++++--- .../Libraries/LibGfx/ClassicStylePainter.h | 2 +- Userland/Libraries/LibGfx/StylePainter.cpp | 4 +-- Userland/Libraries/LibGfx/StylePainter.h | 4 +-- 5 files changed, 29 insertions(+), 10 deletions(-) diff --git a/Userland/Libraries/LibGUI/TabWidget.cpp b/Userland/Libraries/LibGUI/TabWidget.cpp index 4239bdfe15..efd72c67f3 100644 --- a/Userland/Libraries/LibGUI/TabWidget.cpp +++ b/Userland/Libraries/LibGUI/TabWidget.cpp @@ -204,7 +204,7 @@ void TabWidget::paint_event(PaintEvent& event) continue; bool hovered = m_hovered_tab_index.has_value() && i == m_hovered_tab_index.value(); auto button_rect = this->button_rect(i); - Gfx::StylePainter::paint_tab_button(painter, button_rect, palette(), false, hovered, m_tabs[i].widget->is_enabled(), m_tab_position == TabPosition::Top); + Gfx::StylePainter::paint_tab_button(painter, button_rect, palette(), false, hovered, m_tabs[i].widget->is_enabled(), m_tab_position == TabPosition::Top, window()->is_active()); auto tab_button_content_rect = button_rect.translated(4, m_tab_position == TabPosition::Top ? 1 : 0); paint_tab_icon_if_needed(m_tabs[i].icon, button_rect, tab_button_content_rect); @@ -223,7 +223,7 @@ void TabWidget::paint_event(PaintEvent& event) continue; bool hovered = m_hovered_tab_index.has_value() && i == m_hovered_tab_index.value(); auto button_rect = this->button_rect(i); - Gfx::StylePainter::paint_tab_button(painter, button_rect, palette(), true, hovered, m_tabs[i].widget->is_enabled(), m_tab_position == TabPosition::Top); + Gfx::StylePainter::paint_tab_button(painter, button_rect, palette(), true, hovered, m_tabs[i].widget->is_enabled(), m_tab_position == TabPosition::Top, window()->is_active()); auto tab_button_content_rect = button_rect.translated(4, m_tab_position == TabPosition::Top ? 1 : 0); paint_tab_icon_if_needed(m_tabs[i].icon, button_rect, tab_button_content_rect); tab_button_content_rect.set_width(tab_button_content_rect.width() - (m_close_button_enabled ? 16 : 2)); diff --git a/Userland/Libraries/LibGfx/ClassicStylePainter.cpp b/Userland/Libraries/LibGfx/ClassicStylePainter.cpp index ad7dc156f7..b1a8f06a5d 100644 --- a/Userland/Libraries/LibGfx/ClassicStylePainter.cpp +++ b/Userland/Libraries/LibGfx/ClassicStylePainter.cpp @@ -14,7 +14,7 @@ namespace Gfx { -void ClassicStylePainter::paint_tab_button(Painter& painter, const IntRect& rect, const Palette& palette, bool active, bool hovered, bool enabled, bool top) +void ClassicStylePainter::paint_tab_button(Painter& painter, const IntRect& rect, const Palette& palette, bool active, bool hovered, bool enabled, bool top, bool in_active_window) { Color base_color = palette.button(); Color highlight_color2 = palette.threed_highlight(); @@ -32,7 +32,17 @@ void ClassicStylePainter::paint_tab_button(Painter& painter, const IntRect& rect painter.fill_rect({ 1, 1, rect.width() - 2, rect.height() - 1 }, base_color); // Top line - painter.draw_line({ 2, 0 }, { rect.width() - 3, 0 }, highlight_color2); + if (active) { + auto accent = palette.accent(); + if (!in_active_window) + accent = accent.to_grayscale(); + painter.draw_line({ 3, 0 }, { rect.width() - 3, 0 }, accent.darkened()); + Gfx::IntRect accent_rect { 1, 1, rect.width() - 2, 2 }; + painter.fill_rect_with_gradient(accent_rect, accent, accent.lightened(1.5f)); + painter.set_pixel({ 2, 0 }, highlight_color2); + } else { + painter.draw_line({ 2, 0 }, { rect.width() - 3, 0 }, highlight_color2); + } // Left side painter.draw_line({ 0, 2 }, { 0, rect.height() - 1 }, highlight_color2); @@ -54,7 +64,16 @@ void ClassicStylePainter::paint_tab_button(Painter& painter, const IntRect& rect painter.fill_rect({ 0, 0, rect.width() - 1, rect.height() }, base_color); // Bottom line - painter.draw_line({ 2, rect.height() - 1 }, { rect.width() - 3, rect.height() - 1 }, shadow_color2); + if (active) { + auto accent = palette.accent(); + if (!in_active_window) + accent = accent.to_grayscale(); + Gfx::IntRect accent_rect { 1, rect.height() - 3, rect.width() - 2, 2 }; + painter.fill_rect_with_gradient(accent_rect, accent, accent.lightened(1.5f)); + painter.draw_line({ 2, rect.height() - 1 }, { rect.width() - 3, rect.height() - 1 }, accent.darkened()); + } else { + painter.draw_line({ 2, rect.height() - 1 }, { rect.width() - 3, rect.height() - 1 }, shadow_color2); + } // Left side painter.draw_line({ 0, 0 }, { 0, rect.height() - 3 }, highlight_color2); diff --git a/Userland/Libraries/LibGfx/ClassicStylePainter.h b/Userland/Libraries/LibGfx/ClassicStylePainter.h index bebd86f0c0..4043c8c965 100644 --- a/Userland/Libraries/LibGfx/ClassicStylePainter.h +++ b/Userland/Libraries/LibGfx/ClassicStylePainter.h @@ -16,7 +16,7 @@ namespace Gfx { class ClassicStylePainter : public BaseStylePainter { public: void paint_button(Painter&, const IntRect&, const Palette&, ButtonStyle, bool pressed, bool hovered = false, bool checked = false, bool enabled = true, bool focused = false) override; - void paint_tab_button(Painter&, const IntRect&, const Palette&, bool active, bool hovered, bool enabled, bool top) override; + void paint_tab_button(Painter&, const IntRect&, const Palette&, bool active, bool hovered, bool enabled, bool top, bool in_active_window) override; void paint_frame(Painter&, const IntRect&, const Palette&, FrameShape, FrameShadow, int thickness, bool skip_vertical_lines = false) override; void paint_window_frame(Painter&, const IntRect&, const Palette&) override; void paint_progressbar(Painter&, const IntRect&, const Palette&, int min, int max, int value, const StringView& text, Orientation = Orientation::Horizontal) override; diff --git a/Userland/Libraries/LibGfx/StylePainter.cpp b/Userland/Libraries/LibGfx/StylePainter.cpp index a2deba2a80..883d7c8eb5 100644 --- a/Userland/Libraries/LibGfx/StylePainter.cpp +++ b/Userland/Libraries/LibGfx/StylePainter.cpp @@ -18,9 +18,9 @@ BaseStylePainter& StylePainter::current() return style; } -void StylePainter::paint_tab_button(Painter& painter, const IntRect& rect, const Palette& palette, bool active, bool hovered, bool enabled, bool top) +void StylePainter::paint_tab_button(Painter& painter, const IntRect& rect, const Palette& palette, bool active, bool hovered, bool enabled, bool top, bool in_active_window) { - current().paint_tab_button(painter, rect, palette, active, hovered, enabled, top); + current().paint_tab_button(painter, rect, palette, active, hovered, enabled, top, in_active_window); } void StylePainter::paint_button(Painter& painter, const IntRect& rect, const Palette& palette, ButtonStyle button_style, bool pressed, bool hovered, bool checked, bool enabled, bool focused) diff --git a/Userland/Libraries/LibGfx/StylePainter.h b/Userland/Libraries/LibGfx/StylePainter.h index 7a4ae45176..068aec8e88 100644 --- a/Userland/Libraries/LibGfx/StylePainter.h +++ b/Userland/Libraries/LibGfx/StylePainter.h @@ -36,7 +36,7 @@ public: virtual ~BaseStylePainter() { } virtual void paint_button(Painter&, const IntRect&, const Palette&, ButtonStyle, bool pressed, bool hovered = false, bool checked = false, bool enabled = true, bool focused = false) = 0; - virtual void paint_tab_button(Painter&, const IntRect&, const Palette&, bool active, bool hovered, bool enabled, bool top) = 0; + virtual void paint_tab_button(Painter&, const IntRect&, const Palette&, bool active, bool hovered, bool enabled, bool top, bool in_active_window) = 0; virtual void paint_frame(Painter&, const IntRect&, const Palette&, FrameShape, FrameShadow, int thickness, bool skip_vertical_lines = false) = 0; virtual void paint_window_frame(Painter&, const IntRect&, const Palette&) = 0; virtual void paint_progressbar(Painter&, const IntRect&, const Palette&, int min, int max, int value, const StringView& text, Orientation = Orientation::Horizontal) = 0; @@ -54,7 +54,7 @@ public: // FIXME: These are here for API compatibility, we should probably remove them and move BaseStylePainter into here static void paint_button(Painter&, const IntRect&, const Palette&, ButtonStyle, bool pressed, bool hovered = false, bool checked = false, bool enabled = true, bool focused = false); - static void paint_tab_button(Painter&, const IntRect&, const Palette&, bool active, bool hovered, bool enabled, bool top); + static void paint_tab_button(Painter&, const IntRect&, const Palette&, bool active, bool hovered, bool enabled, bool top, bool in_active_window); static void paint_frame(Painter&, const IntRect&, const Palette&, FrameShape, FrameShadow, int thickness, bool skip_vertical_lines = false); static void paint_window_frame(Painter&, const IntRect&, const Palette&); static void paint_progressbar(Painter&, const IntRect&, const Palette&, int min, int max, int value, const StringView& text, Orientation = Orientation::Horizontal);