LibGUI: Improve GFrame's look for Container shapes.

This is now starting to look like a proper container. Very nice :^)
This commit is contained in:
Andreas Kling 2019-03-28 20:15:13 +01:00
parent f939fb7eb7
commit 5d72cf5a3f
7 changed files with 50 additions and 20 deletions

View file

@ -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);
}
}

View file

@ -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);
}

View file

@ -3,8 +3,11 @@
#include <AK/StringBuilder.h>
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);
}

View file

@ -1,8 +1,8 @@
#pragma once
#include <LibGUI/GWidget.h>
#include <LibGUI/GFrame.h>
class GProgressBar : public GWidget {
class GProgressBar : public GFrame {
public:
explicit GProgressBar(GWidget* parent);
virtual ~GProgressBar() override;

View file

@ -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()

View file

@ -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"));

View file

@ -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;
}