RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-10-31 14:12:44 +00:00
Code Issues Activity Actions

LibGUI: Support different button styles.

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

16
LibGUI/GStyle.cpp
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());