1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-31 12:28:12 +00:00

LibGUI: Support different button styles.

I want to try an MS Office 97 "CoolBar" inspired look for my toolbars.
This is only the painting support, we still need hover events to implement
the actual effect.
This commit is contained in:
Andreas Kling 2019-02-20 09:22:38 +01:00
parent dc753b58a5
commit d353c7c3d6
6 changed files with 24 additions and 13 deletions

View file

@ -26,7 +26,7 @@ void GButton::paint_event(GPaintEvent&)
{
Painter painter(*this);
GStyle::the().paint_button(painter, rect(), m_being_pressed);
GStyle::the().paint_button(painter, rect(), m_button_style, m_being_pressed, m_hovered);
if (!caption().is_empty() || m_icon) {
auto content_rect = rect();

View file

@ -1,6 +1,7 @@
#pragma once
#include "GWidget.h"
#include <LibGUI/GWidget.h>
#include <LibGUI/GStyle.h>
#include <AK/AKString.h>
#include <AK/Function.h>
#include <SharedGraphics/GraphicsBitmap.h>
@ -19,6 +20,9 @@ public:
Function<void(GButton&)> on_click;
void set_button_style(GButtonStyle style) { m_button_style = style; }
GButtonStyle button_style() const { return m_button_style; }
private:
virtual void paint_event(GPaintEvent&) override;
virtual void mousedown_event(GMouseEvent&) override;
@ -29,7 +33,9 @@ private:
String m_caption;
RetainPtr<GraphicsBitmap> m_icon;
GButtonStyle m_button_style { GButtonStyle::Normal };
bool m_being_pressed { false };
bool m_tracking_cursor { false };
bool m_hovered { false };
};

View file

@ -187,14 +187,14 @@ void GScrollBar::paint_event(GPaintEvent&)
painter.fill_rect(rect(), Color(164, 164, 164));
GStyle::the().paint_button(painter, up_button_rect(), false);
GStyle::the().paint_button(painter, up_button_rect(), GButtonStyle::Normal, false);
painter.draw_bitmap(up_button_rect().location().translated(3, 3), orientation() == Orientation::Vertical ? *s_up_arrow_bitmap : *s_left_arrow_bitmap, has_scrubber() ? Color::Black : Color::MidGray);
GStyle::the().paint_button(painter, down_button_rect(), false);
GStyle::the().paint_button(painter, down_button_rect(), GButtonStyle::Normal, false);
painter.draw_bitmap(down_button_rect().location().translated(3, 3), orientation() == Orientation::Vertical ? *s_down_arrow_bitmap : *s_right_arrow_bitmap, has_scrubber() ? Color::Black : Color::MidGray);
if (has_scrubber())
GStyle::the().paint_button(painter, scrubber_rect(), false);
GStyle::the().paint_button(painter, scrubber_rect(), GButtonStyle::Normal, false);
}
void GScrollBar::mousedown_event(GMouseEvent& event)

View file

@ -14,12 +14,14 @@ GStyle::GStyle()
{
}
void GStyle::paint_button(Painter& painter, const Rect& rect, bool pressed)
void GStyle::paint_button(Painter& painter, const Rect& rect, GButtonStyle button_style, bool pressed, bool hovered)
{
Color button_color = Color::LightGray;
Color highlight_color = Color::White;
Color shadow_color = Color(96, 96, 96);
painter.draw_rect(rect, Color::Black, true);
if (button_style == GButtonStyle::Normal)
painter.draw_rect(rect, Color::Black, true);
painter.translate(rect.location());
@ -30,22 +32,22 @@ void GStyle::paint_button(Painter& painter, const Rect& rect, bool pressed)
// Sunken shadow
painter.draw_line({ 1, 1 }, { rect.width() - 2, 1 }, shadow_color);
painter.draw_line({ 1, 2 }, {1, rect.height() - 2 }, shadow_color);
} else {
// Bottom highlight
painter.draw_line({ rect.width() - 2, 1 }, { rect.width() - 2, rect.height() - 3 }, highlight_color);
painter.draw_line({ 1, rect.height() - 2 }, { rect.width() - 2, rect.height() - 2 }, highlight_color);
} else if (button_style == GButtonStyle::Normal || (button_style == GButtonStyle::CoolBar && hovered)) {
// Base
painter.fill_rect({ 3, 3, rect.width() - 5, rect.height() - 5 }, button_color);
painter.fill_rect_with_gradient({ 2, 2, rect.width() - 3, rect.height() - 3 }, button_color, Color::White);
// White highlight
painter.draw_line({ 1, 1 }, { rect.width() - 2, 1 }, highlight_color);
//painter.draw_line({ 1, 2 }, { rect.width() - 3, 2 }, highlight_color);
painter.draw_line({ 1, 2 }, { 1, rect.height() - 2 }, highlight_color);
//painter.draw_line({ 2, 3 }, { 2, rect.height() - 3 }, highlight_color);
// Gray shadow
painter.draw_line({ rect.width() - 2, 1 }, { rect.width() - 2, rect.height() - 3 }, shadow_color);
//painter.draw_line({ rect.width() - 3, 2 }, { rect.width() - 3, rect.height() - 4 }, shadow_color);
painter.draw_line({ 1, rect.height() - 2 }, { rect.width() - 2, rect.height() - 2 }, shadow_color);
//painter.draw_line({ 2, rect.height() - 3 }, { rect.width() - 2, rect.height() - 3 }, shadow_color);
}
painter.translate(-rect.location().x(), -rect.location().y());

View file

@ -3,11 +3,13 @@
class Painter;
class Rect;
enum class GButtonStyle { Normal, CoolBar };
class GStyle {
public:
static GStyle& the();
void paint_button(Painter& painter, const Rect& rect, bool pressed);
void paint_button(Painter& painter, const Rect& rect, GButtonStyle, bool pressed, bool hovered = false);
private:
GStyle();

View file

@ -35,6 +35,7 @@ void GToolBar::add_action(RetainPtr<GAction>&& action)
raw_action_ptr->activate();
};
button->set_button_style(GButtonStyle::CoolBar);
button->set_size_policy(SizePolicy::Fixed, SizePolicy::Fixed);
button->set_preferred_size({ 22, 22 });