2019-07-18 11:15:00 +03:00
|
|
|
#include <LibDraw/Painter.h>
|
|
|
|
#include <LibDraw/StylePainter.h>
|
2019-02-10 09:11:01 +03:00
|
|
|
|
2019-05-05 15:39:37 +03:00
|
|
|
void StylePainter::paint_tab_button(Painter& painter, const Rect& rect, bool active, bool hovered, bool enabled)
|
|
|
|
{
|
2019-12-23 22:24:26 +03:00
|
|
|
Color base_color = SystemColor::Window;
|
|
|
|
Color highlight_color2 = SystemColor::ThreedHighlight;
|
|
|
|
Color shadow_color1 = SystemColor::ThreedShadow1;
|
|
|
|
Color shadow_color2 = SystemColor::ThreedShadow2;
|
2019-05-05 15:39:37 +03:00
|
|
|
|
2019-05-07 15:01:20 +03:00
|
|
|
if (hovered && enabled && !active)
|
2019-07-27 12:15:20 +03:00
|
|
|
base_color = StylePainter::hover_highlight_color();
|
2019-05-05 15:39:37 +03:00
|
|
|
|
|
|
|
PainterStateSaver saver(painter);
|
|
|
|
painter.translate(rect.location());
|
|
|
|
|
|
|
|
// Base
|
2019-05-05 16:03:34 +03:00
|
|
|
painter.fill_rect({ 1, 1, rect.width() - 2, rect.height() - 1 }, base_color);
|
2019-05-05 15:39:37 +03:00
|
|
|
|
|
|
|
// Top line
|
|
|
|
painter.draw_line({ 2, 0 }, { rect.width() - 3, 0 }, highlight_color2);
|
|
|
|
|
|
|
|
// Left side
|
|
|
|
painter.draw_line({ 0, 2 }, { 0, rect.height() - 1 }, highlight_color2);
|
|
|
|
painter.set_pixel({ 1, 1 }, highlight_color2);
|
|
|
|
|
|
|
|
// Right side
|
2019-06-07 12:46:55 +03:00
|
|
|
painter.draw_line({
|
|
|
|
rect.width() - 1,
|
|
|
|
2,
|
|
|
|
},
|
|
|
|
{ rect.width() - 1, rect.height() - 1 }, shadow_color2);
|
|
|
|
painter.draw_line({
|
|
|
|
rect.width() - 2,
|
|
|
|
2,
|
|
|
|
},
|
|
|
|
{ rect.width() - 2, rect.height() - 1 }, shadow_color1);
|
|
|
|
painter.set_pixel({
|
|
|
|
rect.width() - 2,
|
|
|
|
1,
|
|
|
|
},
|
|
|
|
shadow_color2);
|
2019-05-05 15:39:37 +03:00
|
|
|
}
|
|
|
|
|
2019-05-02 14:57:35 +03:00
|
|
|
static void paint_button_new(Painter& painter, const Rect& rect, bool pressed, bool checked, bool hovered, bool enabled)
|
2019-03-27 22:48:23 +03:00
|
|
|
{
|
2019-12-23 22:24:26 +03:00
|
|
|
Color button_color = SystemColor::Window;
|
|
|
|
Color highlight_color2 = SystemColor::ThreedHighlight;
|
|
|
|
Color shadow_color1 = SystemColor::ThreedShadow1;
|
|
|
|
Color shadow_color2 = SystemColor::ThreedShadow2;
|
2019-03-27 22:48:23 +03:00
|
|
|
|
2019-05-02 14:57:35 +03:00
|
|
|
if (checked && enabled) {
|
2019-04-06 05:08:09 +03:00
|
|
|
if (hovered)
|
2019-12-23 22:24:26 +03:00
|
|
|
button_color = SystemColor::HoverHighlight;
|
2019-04-06 05:08:09 +03:00
|
|
|
else
|
2019-12-23 22:24:26 +03:00
|
|
|
button_color = SystemColor::Window;
|
2019-05-02 14:57:35 +03:00
|
|
|
} else if (hovered && enabled)
|
2019-07-27 12:15:20 +03:00
|
|
|
button_color = StylePainter::hover_highlight_color();
|
2019-04-04 14:18:27 +03:00
|
|
|
|
2019-03-27 22:48:23 +03:00
|
|
|
PainterStateSaver saver(painter);
|
|
|
|
painter.translate(rect.location());
|
|
|
|
|
2019-04-04 14:18:27 +03:00
|
|
|
if (pressed || checked) {
|
2019-03-27 22:48:23 +03:00
|
|
|
// Base
|
|
|
|
painter.fill_rect({ 1, 1, rect.width() - 2, rect.height() - 2 }, button_color);
|
|
|
|
|
2019-06-07 12:46:55 +03:00
|
|
|
painter.draw_rect({ {}, rect.size() }, shadow_color2);
|
2019-03-27 22:48:23 +03:00
|
|
|
|
|
|
|
// Sunken shadow
|
|
|
|
painter.draw_line({ 1, 1 }, { rect.width() - 2, 1 }, shadow_color1);
|
2019-06-07 12:46:55 +03:00
|
|
|
painter.draw_line({ 1, 2 }, { 1, rect.height() - 2 }, shadow_color1);
|
2019-03-27 22:48:23 +03:00
|
|
|
} else {
|
|
|
|
// Base
|
2019-03-29 04:57:33 +03:00
|
|
|
painter.fill_rect({ 1, 1, rect.width() - 3, rect.height() - 3 }, button_color);
|
2019-03-27 22:48:23 +03:00
|
|
|
|
|
|
|
// Outer highlight
|
|
|
|
painter.draw_line({ 0, 0 }, { rect.width() - 2, 0 }, highlight_color2);
|
|
|
|
painter.draw_line({ 0, 1 }, { 0, rect.height() - 2 }, highlight_color2);
|
|
|
|
|
|
|
|
// 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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-04-12 03:51:59 +03:00
|
|
|
void StylePainter::paint_button(Painter& painter, const Rect& rect, ButtonStyle button_style, bool pressed, bool hovered, bool checked, bool enabled)
|
2019-02-10 09:11:01 +03:00
|
|
|
{
|
2019-03-28 19:32:38 +03:00
|
|
|
if (button_style == ButtonStyle::Normal)
|
2019-05-02 14:57:35 +03:00
|
|
|
return paint_button_new(painter, rect, pressed, checked, hovered, enabled);
|
2019-03-27 22:48:23 +03:00
|
|
|
|
2019-12-23 22:24:26 +03:00
|
|
|
Color button_color = SystemColor::Window;
|
2019-02-10 09:11:01 +03:00
|
|
|
Color highlight_color = Color::White;
|
|
|
|
Color shadow_color = Color(96, 96, 96);
|
2019-02-20 11:22:38 +03:00
|
|
|
|
2019-04-12 03:51:59 +03:00
|
|
|
if (button_style == ButtonStyle::CoolBar && !enabled)
|
|
|
|
return;
|
|
|
|
|
2019-03-09 18:56:26 +03:00
|
|
|
PainterStateSaver saver(painter);
|
2019-02-10 09:11:01 +03:00
|
|
|
painter.translate(rect.location());
|
|
|
|
|
2019-04-26 22:09:56 +03:00
|
|
|
if (pressed || checked) {
|
2019-02-10 09:11:01 +03:00
|
|
|
// Base
|
|
|
|
painter.fill_rect({ 1, 1, rect.width() - 2, rect.height() - 2 }, button_color);
|
|
|
|
|
|
|
|
// Sunken shadow
|
|
|
|
painter.draw_line({ 1, 1 }, { rect.width() - 2, 1 }, shadow_color);
|
2019-06-07 12:46:55 +03:00
|
|
|
painter.draw_line({ 1, 2 }, { 1, rect.height() - 2 }, shadow_color);
|
2019-02-20 11:22:38 +03:00
|
|
|
|
|
|
|
// 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);
|
2019-05-25 04:29:37 +03:00
|
|
|
} else if (button_style == ButtonStyle::CoolBar && hovered) {
|
2019-02-10 09:11:01 +03:00
|
|
|
// Base
|
2019-03-09 23:51:36 +03:00
|
|
|
painter.fill_rect({ 1, 1, rect.width() - 2, rect.height() - 2 }, button_color);
|
2019-02-10 09:11:01 +03:00
|
|
|
|
|
|
|
// White highlight
|
|
|
|
painter.draw_line({ 1, 1 }, { rect.width() - 2, 1 }, highlight_color);
|
2019-02-17 14:08:28 +03:00
|
|
|
painter.draw_line({ 1, 2 }, { 1, rect.height() - 2 }, highlight_color);
|
2019-02-10 09:11:01 +03:00
|
|
|
|
|
|
|
// Gray shadow
|
2019-02-17 14:08:28 +03:00
|
|
|
painter.draw_line({ rect.width() - 2, 1 }, { rect.width() - 2, rect.height() - 3 }, shadow_color);
|
2019-02-10 09:11:01 +03:00
|
|
|
painter.draw_line({ 1, rect.height() - 2 }, { rect.width() - 2, rect.height() - 2 }, shadow_color);
|
|
|
|
}
|
|
|
|
}
|
2019-03-04 12:47:54 +03:00
|
|
|
|
2019-05-05 21:53:04 +03:00
|
|
|
void StylePainter::paint_surface(Painter& painter, const Rect& rect, bool paint_vertical_lines, bool paint_top_line)
|
2019-03-04 12:47:54 +03:00
|
|
|
{
|
2019-12-23 22:24:26 +03:00
|
|
|
painter.fill_rect({ rect.x(), rect.y() + 1, rect.width(), rect.height() - 2 }, SystemColor::Window);
|
|
|
|
painter.draw_line(rect.top_left(), rect.top_right(), paint_top_line ? SystemColor::ThreedHighlight : SystemColor::Window);
|
|
|
|
painter.draw_line(rect.bottom_left(), rect.bottom_right(), SystemColor::ThreedShadow1);
|
2019-03-29 04:20:22 +03:00
|
|
|
if (paint_vertical_lines) {
|
2019-12-23 22:24:26 +03:00
|
|
|
painter.draw_line(rect.top_left().translated(0, 1), rect.bottom_left().translated(0, -1), SystemColor::ThreedHighlight);
|
|
|
|
painter.draw_line(rect.top_right(), rect.bottom_right().translated(0, -1), SystemColor::ThreedShadow1);
|
2019-03-29 04:20:22 +03:00
|
|
|
}
|
2019-03-04 12:47:54 +03:00
|
|
|
}
|
2019-04-10 04:43:46 +03:00
|
|
|
|
|
|
|
void StylePainter::paint_frame(Painter& painter, const Rect& rect, FrameShape shape, FrameShadow shadow, int thickness, bool skip_vertical_lines)
|
|
|
|
{
|
|
|
|
Color top_left_color;
|
|
|
|
Color bottom_right_color;
|
2019-12-23 22:24:26 +03:00
|
|
|
Color dark_shade = SystemColor::ThreedShadow1;
|
|
|
|
Color light_shade = SystemColor::ThreedHighlight;
|
2019-04-10 04:43:46 +03:00
|
|
|
|
2019-05-05 21:53:04 +03:00
|
|
|
if (shape == FrameShape::Container && thickness >= 2) {
|
|
|
|
if (shadow == FrameShadow::Raised) {
|
2019-12-23 22:24:26 +03:00
|
|
|
dark_shade = SystemColor::ThreedShadow2;
|
2019-05-05 21:53:04 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-04-10 04:43:46 +03:00
|
|
|
if (shadow == FrameShadow::Raised) {
|
|
|
|
top_left_color = light_shade;
|
|
|
|
bottom_right_color = dark_shade;
|
|
|
|
} else if (shadow == FrameShadow::Sunken) {
|
|
|
|
top_left_color = dark_shade;
|
|
|
|
bottom_right_color = light_shade;
|
|
|
|
} else if (shadow == FrameShadow::Plain) {
|
|
|
|
top_left_color = dark_shade;
|
|
|
|
bottom_right_color = dark_shade;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (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);
|
|
|
|
|
|
|
|
if (shape != FrameShape::Panel || !skip_vertical_lines) {
|
|
|
|
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 (shape == FrameShape::Container && thickness >= 2) {
|
|
|
|
Color top_left_color;
|
|
|
|
Color bottom_right_color;
|
2019-12-23 22:24:26 +03:00
|
|
|
Color dark_shade = SystemColor::ThreedShadow2;
|
|
|
|
Color light_shade = SystemColor::Window;
|
2019-04-10 04:43:46 +03:00
|
|
|
if (shadow == FrameShadow::Raised) {
|
2019-12-23 22:24:26 +03:00
|
|
|
dark_shade = SystemColor::ThreedShadow1;
|
2019-04-10 04:43:46 +03:00
|
|
|
top_left_color = light_shade;
|
|
|
|
bottom_right_color = dark_shade;
|
|
|
|
} else if (shadow == FrameShadow::Sunken) {
|
|
|
|
top_left_color = dark_shade;
|
|
|
|
bottom_right_color = light_shade;
|
|
|
|
} else if (shadow == FrameShadow::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);
|
|
|
|
}
|
2019-04-11 15:27:31 +03:00
|
|
|
|
|
|
|
if (shape == FrameShape::Box && thickness >= 2) {
|
|
|
|
swap(top_left_color, bottom_right_color);
|
|
|
|
Rect inner_rect = rect.shrunken(2, 2);
|
|
|
|
painter.draw_line(inner_rect.top_left(), inner_rect.top_right(), top_left_color);
|
|
|
|
painter.draw_line(inner_rect.bottom_left(), inner_rect.bottom_right(), bottom_right_color);
|
|
|
|
painter.draw_line(inner_rect.top_left().translated(0, 1), inner_rect.bottom_left().translated(0, -1), top_left_color);
|
|
|
|
painter.draw_line(inner_rect.top_right(), inner_rect.bottom_right().translated(0, -1), bottom_right_color);
|
|
|
|
}
|
2019-04-10 04:43:46 +03:00
|
|
|
}
|
2019-04-16 18:02:26 +03:00
|
|
|
|
2019-05-11 02:31:10 +03:00
|
|
|
void StylePainter::paint_window_frame(Painter& painter, const Rect& rect)
|
2019-04-16 18:02:26 +03:00
|
|
|
{
|
2019-12-23 22:24:26 +03:00
|
|
|
Color base_color = SystemColor::Window;
|
|
|
|
Color dark_shade = SystemColor::ThreedShadow2;
|
|
|
|
Color mid_shade = SystemColor::ThreedShadow1;
|
|
|
|
Color light_shade = SystemColor::ThreedHighlight;
|
2019-04-16 18:02:26 +03:00
|
|
|
|
|
|
|
painter.draw_line(rect.top_left(), rect.top_right(), base_color);
|
|
|
|
painter.draw_line(rect.top_left().translated(0, 1), rect.bottom_left(), base_color);
|
|
|
|
painter.draw_line(rect.top_left().translated(1, 1), rect.top_right().translated(-1, 1), light_shade);
|
|
|
|
painter.draw_line(rect.top_left().translated(1, 1), rect.bottom_left().translated(1, -1), light_shade);
|
2019-05-11 02:31:10 +03:00
|
|
|
painter.draw_line(rect.top_left().translated(2, 2), rect.top_right().translated(-2, 2), base_color);
|
|
|
|
painter.draw_line(rect.top_left().translated(2, 2), rect.bottom_left().translated(2, -2), base_color);
|
|
|
|
|
2019-04-16 18:02:26 +03:00
|
|
|
painter.draw_line(rect.top_right(), rect.bottom_right(), dark_shade);
|
|
|
|
painter.draw_line(rect.top_right().translated(-1, 1), rect.bottom_right().translated(-1, -1), mid_shade);
|
2019-05-11 02:31:10 +03:00
|
|
|
painter.draw_line(rect.top_right().translated(-2, 2), rect.bottom_right().translated(-2, -2), base_color);
|
|
|
|
painter.draw_line(rect.bottom_left(), rect.bottom_right(), dark_shade);
|
2019-04-16 18:02:26 +03:00
|
|
|
painter.draw_line(rect.bottom_left().translated(1, -1), rect.bottom_right().translated(-1, -1), mid_shade);
|
2019-05-11 02:31:10 +03:00
|
|
|
painter.draw_line(rect.bottom_left().translated(2, -2), rect.bottom_right().translated(-2, -2), base_color);
|
2019-04-16 18:02:26 +03:00
|
|
|
}
|
2019-08-14 21:31:46 +03:00
|
|
|
|
|
|
|
void StylePainter::paint_progress_bar(Painter& painter, const Rect& rect, int min, int max, int value, const StringView& text)
|
|
|
|
{
|
|
|
|
// 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);
|
|
|
|
|
|
|
|
if (!text.is_null()) {
|
|
|
|
painter.draw_text(rect.translated(1, 1), text, TextAlignment::Center, Color::Black);
|
|
|
|
painter.draw_text(rect, text, TextAlignment::Center, Color::White);
|
|
|
|
}
|
|
|
|
|
|
|
|
float range_size = max - min;
|
|
|
|
float progress = (value - min) / range_size;
|
|
|
|
|
|
|
|
// 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.
|
|
|
|
float progress_width = progress * rect.width();
|
|
|
|
Rect hole_rect { (int)progress_width, 0, (int)(rect.width() - progress_width), rect.height() };
|
|
|
|
hole_rect.move_by(rect.location());
|
|
|
|
PainterStateSaver saver(painter);
|
|
|
|
painter.fill_rect(hole_rect, Color::White);
|
|
|
|
|
|
|
|
painter.add_clip_rect(hole_rect);
|
|
|
|
if (!text.is_null())
|
|
|
|
painter.draw_text(rect.translated(0, 0), text, TextAlignment::Center, Color::Black);
|
|
|
|
}
|