mirror of
https://github.com/RGBCube/serenity
synced 2025-05-31 22:48:11 +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:
parent
dc753b58a5
commit
d353c7c3d6
6 changed files with 24 additions and 13 deletions
|
@ -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();
|
||||
|
|
|
@ -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 };
|
||||
};
|
||||
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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());
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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 });
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue