From 5d72cf5a3fcd739426c9b6ccfa5afcdd93afb4d4 Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Thu, 28 Mar 2019 20:15:13 +0100 Subject: [PATCH] LibGUI: Improve GFrame's look for Container shapes. This is now starting to look like a proper container. Very nice :^) --- LibGUI/GFrame.cpp | 34 +++++++++++++++++++++++++++++----- LibGUI/GItemView.cpp | 2 +- LibGUI/GProgressBar.cpp | 22 ++++++++++++---------- LibGUI/GProgressBar.h | 4 ++-- LibGUI/GTableView.cpp | 2 +- LibGUI/GTextEditor.cpp | 2 +- Userland/guitest2.cpp | 4 ++++ 7 files changed, 50 insertions(+), 20 deletions(-) diff --git a/LibGUI/GFrame.cpp b/LibGUI/GFrame.cpp index bc18c44295..528666012c 100644 --- a/LibGUI/GFrame.cpp +++ b/LibGUI/GFrame.cpp @@ -21,7 +21,7 @@ void GFrame::paint_event(GPaintEvent& event) Color top_left_color; Color bottom_right_color; - Color dark_shade = m_shape == Shape::Container ? Color::from_rgb(0x404040) : Color::from_rgb(0x808080); + Color dark_shade = Color::from_rgb(0x808080); Color light_shade = Color::from_rgb(0xffffff); if (m_shadow == Shadow::Raised) { @@ -35,8 +35,32 @@ void GFrame::paint_event(GPaintEvent& event) bottom_right_color = dark_shade; } - painter.draw_line(rect().top_left(), rect().top_right(), top_left_color); - painter.draw_line(rect().bottom_left(), rect().bottom_right(), bottom_right_color); - painter.draw_line(rect().top_left().translated(0, 1), rect().bottom_left().translated(0, -1), top_left_color); - painter.draw_line(rect().top_right(), rect().bottom_right().translated(0, -1), bottom_right_color); + if (m_thickness >= 1) { + painter.draw_line(rect().top_left(), rect().top_right(), top_left_color); + painter.draw_line(rect().bottom_left(), rect().bottom_right(), bottom_right_color); + painter.draw_line(rect().top_left().translated(0, 1), rect().bottom_left().translated(0, -1), top_left_color); + painter.draw_line(rect().top_right(), rect().bottom_right().translated(0, -1), bottom_right_color); + } + + if (m_shape == Shape::Container && m_thickness >= 2) { + Color top_left_color; + Color bottom_right_color; + Color dark_shade = Color::from_rgb(0x404040); + Color light_shade = Color::from_rgb(0xc0c0c0); + if (m_shadow == Shadow::Raised) { + top_left_color = light_shade; + bottom_right_color = dark_shade; + } else if (m_shadow == Shadow::Sunken) { + top_left_color = dark_shade; + bottom_right_color = light_shade; + } else if (m_shadow == Shadow::Plain) { + top_left_color = dark_shade; + bottom_right_color = dark_shade; + } + Rect inner_container_frame_rect = rect().shrunken(2, 2); + painter.draw_line(inner_container_frame_rect.top_left(), inner_container_frame_rect.top_right(), top_left_color); + painter.draw_line(inner_container_frame_rect.bottom_left(), inner_container_frame_rect.bottom_right(), bottom_right_color); + painter.draw_line(inner_container_frame_rect.top_left().translated(0, 1), inner_container_frame_rect.bottom_left().translated(0, -1), top_left_color); + painter.draw_line(inner_container_frame_rect.top_right(), inner_container_frame_rect.bottom_right().translated(0, -1), bottom_right_color); + } } diff --git a/LibGUI/GItemView.cpp b/LibGUI/GItemView.cpp index 92d71b79a2..7fe71337d7 100644 --- a/LibGUI/GItemView.cpp +++ b/LibGUI/GItemView.cpp @@ -9,7 +9,7 @@ GItemView::GItemView(GWidget* parent) { set_frame_shape(GFrame::Shape::Container); set_frame_shadow(GFrame::Shadow::Sunken); - set_frame_thickness(1); + set_frame_thickness(2); horizontal_scrollbar().set_visible(false); } diff --git a/LibGUI/GProgressBar.cpp b/LibGUI/GProgressBar.cpp index e03d40168f..4e193e398e 100644 --- a/LibGUI/GProgressBar.cpp +++ b/LibGUI/GProgressBar.cpp @@ -3,8 +3,11 @@ #include GProgressBar::GProgressBar(GWidget* parent) - : GWidget(parent) + : GFrame(parent) { + set_frame_shape(GFrame::Shape::Container); + set_frame_shadow(GFrame::Shadow::Sunken); + set_frame_thickness(2); } GProgressBar::~GProgressBar() @@ -32,14 +35,18 @@ void GProgressBar::set_range(int min, int max) void GProgressBar::paint_event(GPaintEvent& event) { + GFrame::paint_event(event); + GPainter painter(*this); + auto rect = frame_inner_rect(); + painter.set_clip_rect(rect); painter.set_clip_rect(event.rect()); // First we fill the entire widget with the gradient. This incurs a bit of // overdraw but ensures a consistent look throughout the progression. Color start_color(110, 34, 9); Color end_color(244, 202, 158); - painter.fill_rect_with_gradient(rect(), start_color, end_color); + painter.fill_rect_with_gradient(rect, start_color, end_color); float range_size = m_max - m_min; float progress = (m_value - m_min) / range_size; @@ -55,19 +62,14 @@ void GProgressBar::paint_event(GPaintEvent& event) auto progress_text = builder.to_string(); - painter.draw_text(rect().translated(1, 1), progress_text, TextAlignment::Center, Color::Black); - painter.draw_text(rect(), progress_text, TextAlignment::Center, Color::White); + painter.draw_text(rect.translated(1, 1), progress_text, TextAlignment::Center, Color::Black); + painter.draw_text(rect, progress_text, TextAlignment::Center, Color::White); // Then we carve out a hole in the remaining part of the widget. // We draw the text a third time, clipped and inverse, for sharp contrast. - painter.save(); float progress_width = progress * width(); Rect hole_rect { (int)progress_width, 0, (int)(width() - progress_width), height() }; painter.set_clip_rect(hole_rect); painter.fill_rect(hole_rect, Color::White); - painter.draw_text(rect().translated(0, 0), progress_text, TextAlignment::Center, Color::Black); - painter.restore(); - - // Finally, draw a frame around the widget. - painter.draw_rect(rect(), Color::Black); + painter.draw_text(rect.translated(0, 0), progress_text, TextAlignment::Center, Color::Black); } diff --git a/LibGUI/GProgressBar.h b/LibGUI/GProgressBar.h index 4e34f29c4e..82e0d07d31 100644 --- a/LibGUI/GProgressBar.h +++ b/LibGUI/GProgressBar.h @@ -1,8 +1,8 @@ #pragma once -#include +#include -class GProgressBar : public GWidget { +class GProgressBar : public GFrame { public: explicit GProgressBar(GWidget* parent); virtual ~GProgressBar() override; diff --git a/LibGUI/GTableView.cpp b/LibGUI/GTableView.cpp index 2f3c6e6ea8..0e2f66be59 100644 --- a/LibGUI/GTableView.cpp +++ b/LibGUI/GTableView.cpp @@ -9,7 +9,7 @@ GTableView::GTableView(GWidget* parent) { set_frame_shape(GFrame::Shape::Container); set_frame_shadow(GFrame::Shadow::Sunken); - set_frame_thickness(1); + set_frame_thickness(2); } GTableView::~GTableView() diff --git a/LibGUI/GTextEditor.cpp b/LibGUI/GTextEditor.cpp index 9fae1dbca9..7ae3783001 100644 --- a/LibGUI/GTextEditor.cpp +++ b/LibGUI/GTextEditor.cpp @@ -15,7 +15,7 @@ GTextEditor::GTextEditor(Type type, GWidget* parent) { set_frame_shape(GFrame::Shape::Container); set_frame_shadow(GFrame::Shadow::Sunken); - set_frame_thickness(1); + set_frame_thickness(2); set_scrollbars_enabled(is_multi_line()); m_ruler_visible = is_multi_line(); set_font(GFontDatabase::the().get_by_name("Csilla Thin")); diff --git a/Userland/guitest2.cpp b/Userland/guitest2.cpp index ad8429e592..cb133b4a76 100644 --- a/Userland/guitest2.cpp +++ b/Userland/guitest2.cpp @@ -172,9 +172,11 @@ static GWindow* make_frames_window() auto add_label = [widget] (const String& text, GFrame::Shape shape, GFrame::Shadow shadow) { auto* label = new GLabel(text, widget); label->set_size_policy(SizePolicy::Fill, SizePolicy::Fill); + label->set_frame_thickness(1); label->set_frame_shape(shape); label->set_frame_shadow(shadow); if (shape == GFrame::Shape::Container) { + label->set_frame_thickness(2); label->set_fill_with_background_color(true); label->set_background_color(Color::White); } @@ -182,8 +184,10 @@ static GWindow* make_frames_window() add_label("Panel + Raised", GFrame::Shape::Panel, GFrame::Shadow::Raised); add_label("Panel + Sunken", GFrame::Shape::Panel, GFrame::Shadow::Sunken); + add_label("Panel + Plain", GFrame::Shape::Panel, GFrame::Shadow::Plain); add_label("Container + Raised", GFrame::Shape::Container, GFrame::Shadow::Raised); add_label("Container + Sunken", GFrame::Shape::Container, GFrame::Shadow::Sunken); + add_label("Container + Plain", GFrame::Shape::Container, GFrame::Shadow::Plain); return window; }