RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 00:57:45 +00:00
Code Issues Activity Actions

LibGUI+LibGfx: Highlight currently active tab button with accent color

Browse source 
Use the new "Accent" color role to emphasize the currently active tab
within a GUI::TabWidget. :^)
This commit is contained in:
Andreas Kling 2021-07-28 20:23:31 +02:00
parent 9826d616dd
commit 410b3c85b6
5 changed files with 29 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Userland/Libraries/LibGUI/TabWidget.cpp
View file

@ -204,7 +204,7 @@ void TabWidget::paint_event(PaintEvent& event)
continue; continue;
bool hovered = m_hovered_tab_index.has_value() && i == m_hovered_tab_index.value(); bool hovered = m_hovered_tab_index.has_value() && i == m_hovered_tab_index.value();
auto button_rect = this->button_rect(i); 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); 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); 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; continue;
bool hovered = m_hovered_tab_index.has_value() && i == m_hovered_tab_index.value(); bool hovered = m_hovered_tab_index.has_value() && i == m_hovered_tab_index.value();
auto button_rect = this->button_rect(i); 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); 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); 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)); tab_button_content_rect.set_width(tab_button_content_rect.width() - (m_close_button_enabled ? 16 : 2));

25
Userland/Libraries/LibGfx/ClassicStylePainter.cpp
View file

@ -14,7 +14,7 @@
namespace Gfx { 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 base_color = palette.button();
Color highlight_color2 = palette.threed_highlight(); 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); painter.fill_rect({ 1, 1, rect.width() - 2, rect.height() - 1 }, base_color);
// Top line // 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 // Left side
painter.draw_line({ 0, 2 }, { 0, rect.height() - 1 }, highlight_color2); 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); painter.fill_rect({ 0, 0, rect.width() - 1, rect.height() }, base_color);
// Bottom line // 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 // Left side
painter.draw_line({ 0, 0 }, { 0, rect.height() - 3 }, highlight_color2); painter.draw_line({ 0, 0 }, { 0, rect.height() - 3 }, highlight_color2);

2
Userland/Libraries/LibGfx/ClassicStylePainter.h
View file

@ -16,7 +16,7 @@ namespace Gfx {
class ClassicStylePainter : public BaseStylePainter { class ClassicStylePainter : public BaseStylePainter {
public: 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_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_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_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; void paint_progressbar(Painter&, const IntRect&, const Palette&, int min, int max, int value, const StringView& text, Orientation = Orientation::Horizontal) override;

4
Userland/Libraries/LibGfx/StylePainter.cpp
View file

@ -18,9 +18,9 @@ BaseStylePainter& StylePainter::current()
return style; 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) 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)

4
Userland/Libraries/LibGfx/StylePainter.h
View file

@ -36,7 +36,7 @@ public:
virtual ~BaseStylePainter() { } 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_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_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_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; 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 // 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_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_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_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); static void paint_progressbar(Painter&, const IntRect&, const Palette&, int min, int max, int value, const StringView& text, Orientation = Orientation::Horizontal);