1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 16:57:35 +00:00

Tweak the look of various UI surfaces and buttons.

This commit is contained in:
Andreas Kling 2019-03-27 20:48:23 +01:00
parent d71820a382
commit 670e376e27
10 changed files with 65 additions and 20 deletions

View file

@ -167,7 +167,7 @@ Rect GScrollBar::scrubber_rect() const
return { };
float x_or_y;
if (m_value == m_min)
x_or_y = button_size() - 1;
x_or_y = button_size();
else if (m_value == m_max)
x_or_y = ((orientation() == Orientation::Vertical ? height() : width()) - (button_size() * 2)) + 1;
else {

View file

@ -14,13 +14,58 @@ GStyle::GStyle()
{
}
static void paint_button_new(Painter& painter, const Rect& rect, bool pressed)
{
Color button_color = Color::from_rgb(0xc0c0c0);
Color highlight_color1 = Color::from_rgb(0xffffff);
Color highlight_color2 = Color::from_rgb(0xdfdfdf);
Color shadow_color1 = Color::from_rgb(0x808080);
Color shadow_color2 = Color::from_rgb(0x404040);
PainterStateSaver saver(painter);
painter.translate(rect.location());
if (pressed) {
// Base
painter.fill_rect({ 1, 1, rect.width() - 2, rect.height() - 2 }, button_color);
painter.draw_rect(rect, shadow_color2);
// Sunken shadow
painter.draw_line({ 1, 1 }, { rect.width() - 2, 1 }, shadow_color1);
painter.draw_line({ 1, 2 }, {1, rect.height() - 2 }, shadow_color1);
} else {
// Base
painter.fill_rect({ 2, 2, rect.width() - 4, rect.height() - 4 }, button_color);
// Outer highlight
painter.draw_line({ 0, 0 }, { rect.width() - 2, 0 }, highlight_color2);
painter.draw_line({ 0, 1 }, { 0, rect.height() - 2 }, highlight_color2);
// Inner highlight
painter.draw_line({ 1, 1 }, { rect.width() - 3, 1 }, highlight_color1);
painter.draw_line({ 1, 2 }, { 1, rect.height() - 3 }, highlight_color1);
// Outer shadow
painter.draw_line({ 0, rect.height() - 1 }, { rect.width() - 1, rect.height() - 1 }, shadow_color2);
painter.draw_line({ rect.width() - 1, 0 }, { rect.width() - 1, rect.height() - 2 }, shadow_color2);
// Inner shadow
painter.draw_line({ 1, rect.height() - 2 }, { rect.width() - 2, rect.height() - 2 }, shadow_color1);
painter.draw_line({ rect.width() - 2, 1 }, { rect.width() - 2, rect.height() - 3 }, shadow_color1);
}
}
void GStyle::paint_button(Painter& painter, const Rect& rect, GButtonStyle button_style, bool pressed, bool hovered)
{
if (button_style == GButtonStyle::Normal)
return paint_button_new(painter, rect, pressed);
Color button_color = Color::LightGray;
Color highlight_color = Color::White;
Color shadow_color = Color(96, 96, 96);
if (button_style == GButtonStyle::Normal)
if (button_style == GButtonStyle::OldNormal)
painter.draw_rect(rect, Color::Black);
PainterStateSaver saver(painter);
@ -37,7 +82,7 @@ void GStyle::paint_button(Painter& painter, const Rect& rect, GButtonStyle butto
// 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)) {
} else if (button_style == GButtonStyle::OldNormal || (button_style == GButtonStyle::CoolBar && hovered)) {
// Base
painter.fill_rect({ 1, 1, rect.width() - 2, rect.height() - 2 }, button_color);
@ -55,7 +100,7 @@ void GStyle::paint_surface(Painter& painter, const Rect& rect)
{
painter.fill_rect({ rect.x(), rect.y() + 1, rect.width(), rect.height() - 2 }, Color::LightGray);
painter.draw_line(rect.top_left(), rect.top_right(), Color::White);
painter.draw_line(rect.bottom_left(), rect.bottom_right(), Color::DarkGray);
painter.draw_line(rect.bottom_left(), rect.bottom_right(), Color::MidGray);
painter.draw_line(rect.top_left().translated(0, 1), rect.bottom_left().translated(0, -1), Color::White);
painter.draw_line(rect.top_right(), rect.bottom_right().translated(0, -1), Color::DarkGray);
painter.draw_line(rect.top_right(), rect.bottom_right().translated(0, -1), Color::MidGray);
}

View file

@ -3,7 +3,7 @@
class Painter;
class Rect;
enum class GButtonStyle { Normal, CoolBar };
enum class GButtonStyle { Normal, CoolBar, OldNormal };
class GStyle {
public:

View file

@ -183,7 +183,7 @@ void GTableView::paint_headers(Painter& painter)
int exposed_width = max(content_size().width(), width());
painter.fill_rect({ 0, 0, exposed_width, header_height() }, Color::LightGray);
painter.draw_line({ 0, 0 }, { exposed_width - 1, 0 }, Color::White);
painter.draw_line({ 0, header_height() - 1 }, { exposed_width - 1, header_height() - 1 }, Color::DarkGray);
painter.draw_line({ 0, header_height() - 1 }, { exposed_width - 1, header_height() - 1 }, Color::MidGray);
int x_offset = 0;
for (int column_index = 0; column_index < model()->column_count(); ++column_index) {
if (is_column_hidden(column_index))
@ -199,7 +199,7 @@ void GTableView::paint_headers(Painter& painter)
x_offset += column_width + horizontal_padding() * 2;
// Draw column separator.
painter.draw_line(cell_rect.top_left().translated(0, 1), cell_rect.bottom_left().translated(0, -1), Color::White);
painter.draw_line(cell_rect.top_right(), cell_rect.bottom_right().translated(0, -1), Color::DarkGray);
painter.draw_line(cell_rect.top_right(), cell_rect.bottom_right().translated(0, -1), Color::MidGray);
}
// Draw the "start" of a new column to make the last separator look right.
painter.draw_line({ x_offset, 1 }, { x_offset, header_height() - 2 }, Color::White);

View file

@ -216,7 +216,7 @@ void GTextEditor::paint_event(GPaintEvent& event)
if (is_focused())
painter.draw_rect(item_area_rect, Color::from_rgb(0x84351a));
else if (is_single_line())
painter.draw_rect(item_area_rect, Color::DarkGray);
painter.draw_rect(item_area_rect, Color::MidGray);
}
void GTextEditor::toggle_selection_if_needed_for_event(const GKeyEvent& event)

View file

@ -8,10 +8,10 @@ GToolBar::GToolBar(GWidget* parent)
: GWidget(parent)
{
set_size_policy(SizePolicy::Fill, SizePolicy::Fixed);
set_preferred_size({ 0, 30 });
set_preferred_size({ 0, 28 });
set_layout(make<GBoxLayout>(Orientation::Horizontal));
layout()->set_spacing(0);
layout()->set_margins({ 3, 3, 3, 3 });
layout()->set_margins({ 2, 2, 2, 2 });
}
GToolBar::~GToolBar()
@ -50,7 +50,7 @@ public:
{
set_size_policy(SizePolicy::Fixed, SizePolicy::Fixed);
set_background_color(Color::White);
set_preferred_size({ 8, 20 });
set_preferred_size({ 8, 22 });
}
virtual ~SeparatorWidget() override { }
@ -59,7 +59,7 @@ public:
Painter painter(*this);
painter.set_clip_rect(event.rect());
painter.translate(rect().center().x() - 1, 0);
painter.draw_line({ 0, 0 }, { 0, rect().bottom() }, Color::DarkGray);
painter.draw_line({ 0, 0 }, { 0, rect().bottom() }, Color::MidGray);
painter.draw_line({ 1, 0 }, { 1, rect().bottom() }, Color::White);
}