ClassicStylePainter.cpp 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408
  1. /*
  2. * Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
  3. * Copyright (c) 2020, Sarah Taube <metalflakecobaltpaint@gmail.com>
  4. *
  5. * SPDX-License-Identifier: BSD-2-Clause
  6. */
  7. #include <AK/StringView.h>
  8. #include <LibGfx/Bitmap.h>
  9. #include <LibGfx/CharacterBitmap.h>
  10. #include <LibGfx/ClassicStylePainter.h>
  11. #include <LibGfx/Painter.h>
  12. #include <LibGfx/Palette.h>
  13. namespace Gfx {
  14. void ClassicStylePainter::paint_tab_button(Painter& painter, const IntRect& rect, const Palette& palette, bool active, bool hovered, bool enabled, bool top, bool in_active_window)
  15. {
  16. Color base_color = palette.button();
  17. Color highlight_color2 = palette.threed_highlight();
  18. Color shadow_color1 = palette.threed_shadow1();
  19. Color shadow_color2 = palette.threed_shadow2();
  20. if (hovered && enabled && !active)
  21. base_color = palette.hover_highlight();
  22. PainterStateSaver saver(painter);
  23. painter.translate(rect.location());
  24. if (top) {
  25. // Base
  26. painter.fill_rect({ 1, 1, rect.width() - 2, rect.height() - 1 }, base_color);
  27. // Top line
  28. if (active) {
  29. auto accent = palette.accent();
  30. if (!in_active_window)
  31. accent = accent.to_grayscale();
  32. painter.draw_line({ 3, 0 }, { rect.width() - 3, 0 }, accent.darkened());
  33. Gfx::IntRect accent_rect { 1, 1, rect.width() - 2, 2 };
  34. painter.fill_rect_with_gradient(accent_rect, accent, accent.lightened(1.5f));
  35. painter.set_pixel({ 2, 0 }, highlight_color2);
  36. } else {
  37. painter.draw_line({ 2, 0 }, { rect.width() - 3, 0 }, highlight_color2);
  38. }
  39. // Left side
  40. painter.draw_line({ 0, 2 }, { 0, rect.height() - 1 }, highlight_color2);
  41. painter.set_pixel({ 1, 1 }, highlight_color2);
  42. // Right side
  43. IntPoint top_right_outer { rect.width() - 1, 2 };
  44. IntPoint bottom_right_outer { rect.width() - 1, rect.height() - 1 };
  45. painter.draw_line(top_right_outer, bottom_right_outer, shadow_color2);
  46. IntPoint top_right_inner { rect.width() - 2, 2 };
  47. IntPoint bottom_right_inner { rect.width() - 2, rect.height() - 1 };
  48. painter.draw_line(top_right_inner, bottom_right_inner, shadow_color1);
  49. painter.set_pixel(rect.width() - 2, 1, shadow_color2);
  50. } else {
  51. // Base
  52. painter.fill_rect({ 0, 0, rect.width() - 1, rect.height() }, base_color);
  53. // Bottom line
  54. if (active) {
  55. auto accent = palette.accent();
  56. if (!in_active_window)
  57. accent = accent.to_grayscale();
  58. Gfx::IntRect accent_rect { 1, rect.height() - 3, rect.width() - 2, 2 };
  59. painter.fill_rect_with_gradient(accent_rect, accent, accent.lightened(1.5f));
  60. painter.draw_line({ 2, rect.height() - 1 }, { rect.width() - 3, rect.height() - 1 }, accent.darkened());
  61. } else {
  62. painter.draw_line({ 2, rect.height() - 1 }, { rect.width() - 3, rect.height() - 1 }, shadow_color2);
  63. }
  64. // Left side
  65. painter.draw_line({ 0, 0 }, { 0, rect.height() - 3 }, highlight_color2);
  66. painter.set_pixel({ 1, rect.height() - 2 }, highlight_color2);
  67. // Right side
  68. IntPoint top_right_outer { rect.width() - 1, 0 };
  69. IntPoint bottom_right_outer { rect.width() - 1, rect.height() - 3 };
  70. painter.draw_line(top_right_outer, bottom_right_outer, shadow_color2);
  71. IntPoint top_right_inner { rect.width() - 2, 0 };
  72. IntPoint bottom_right_inner { rect.width() - 2, rect.height() - 3 };
  73. painter.draw_line(top_right_inner, bottom_right_inner, shadow_color1);
  74. painter.set_pixel(rect.width() - 2, rect.height() - 2, shadow_color2);
  75. }
  76. }
  77. static void paint_button_new(Painter& painter, IntRect const& a_rect, Palette const& palette, ButtonStyle style, bool pressed, bool checked, bool hovered, bool enabled, bool focused)
  78. {
  79. Color button_color = palette.button();
  80. Color highlight_color = palette.threed_highlight();
  81. Color shadow_color1 = palette.threed_shadow1();
  82. Color shadow_color2 = palette.threed_shadow2();
  83. if (checked && enabled) {
  84. if (hovered)
  85. button_color = palette.hover_highlight();
  86. else
  87. button_color = palette.button();
  88. } else if (hovered && enabled)
  89. button_color = palette.hover_highlight();
  90. PainterStateSaver saver(painter);
  91. auto rect = a_rect;
  92. if (focused) {
  93. painter.draw_rect(a_rect, palette.threed_shadow2());
  94. rect.shrink(2, 2);
  95. }
  96. painter.translate(rect.location());
  97. if (pressed || checked) {
  98. // Base
  99. Gfx::IntRect base_rect { 1, 1, rect.width() - 2, rect.height() - 2 };
  100. if (checked && !pressed)
  101. painter.fill_rect_with_dither_pattern(base_rect, palette.button().lightened(1.3f), palette.button());
  102. else
  103. painter.fill_rect(base_rect, button_color);
  104. // Top shadow
  105. painter.draw_line({ 0, 0 }, { rect.width() - 2, 0 }, shadow_color2);
  106. painter.draw_line({ 0, 0 }, { 0, rect.height() - 2 }, shadow_color2);
  107. // Sunken shadow
  108. painter.draw_line({ 1, 1 }, { rect.width() - 3, 1 }, shadow_color1);
  109. painter.draw_line({ 1, 2 }, { 1, rect.height() - 3 }, shadow_color1);
  110. // Outer highlight
  111. painter.draw_line({ 0, rect.height() - 1 }, { rect.width() - 1, rect.height() - 1 }, highlight_color);
  112. painter.draw_line({ rect.width() - 1, 0 }, { rect.width() - 1, rect.height() - 2 }, highlight_color);
  113. // Inner highlight
  114. painter.draw_line({ 1, rect.height() - 2 }, { rect.width() - 2, rect.height() - 2 }, palette.button());
  115. painter.draw_line({ rect.width() - 2, 1 }, { rect.width() - 2, rect.height() - 3 }, palette.button());
  116. } else {
  117. // Base
  118. painter.fill_rect({ 0, 0, rect.width(), rect.height() }, button_color);
  119. // Top highlight
  120. if (style == ButtonStyle::Normal) {
  121. painter.draw_line({ 0, 0 }, { rect.width() - 2, 0 }, highlight_color);
  122. painter.draw_line({ 0, 0 }, { 0, rect.height() - 2 }, highlight_color);
  123. } else if (style == ButtonStyle::ThickCap) {
  124. painter.draw_line({ 1, 1 }, { rect.width() - 2, 1 }, highlight_color);
  125. painter.draw_line({ 1, 1 }, { 1, rect.height() - 2 }, highlight_color);
  126. }
  127. // Outer shadow
  128. painter.draw_line({ 0, rect.height() - 1 }, { rect.width() - 1, rect.height() - 1 }, shadow_color2);
  129. painter.draw_line({ rect.width() - 1, 0 }, { rect.width() - 1, rect.height() - 2 }, shadow_color2);
  130. // Inner shadow
  131. painter.draw_line({ 1, rect.height() - 2 }, { rect.width() - 2, rect.height() - 2 }, shadow_color1);
  132. painter.draw_line({ rect.width() - 2, 1 }, { rect.width() - 2, rect.height() - 3 }, shadow_color1);
  133. }
  134. }
  135. void ClassicStylePainter::paint_button(Painter& painter, const IntRect& rect, const Palette& palette, ButtonStyle button_style, bool pressed, bool hovered, bool checked, bool enabled, bool focused)
  136. {
  137. if (button_style == ButtonStyle::Normal || button_style == ButtonStyle::ThickCap)
  138. return paint_button_new(painter, rect, palette, button_style, pressed, checked, hovered, enabled, focused);
  139. if (button_style == ButtonStyle::Coolbar && !enabled)
  140. return;
  141. Color button_color = palette.button();
  142. Color highlight_color = palette.threed_highlight();
  143. Color shadow_color = button_style == ButtonStyle::Coolbar ? palette.threed_shadow1() : palette.threed_shadow2();
  144. PainterStateSaver saver(painter);
  145. painter.translate(rect.location());
  146. if (pressed || checked) {
  147. // Base
  148. IntRect base_rect { 1, 1, rect.width() - 2, rect.height() - 2 };
  149. if (button_style == ButtonStyle::Coolbar) {
  150. if (checked && !pressed) {
  151. painter.fill_rect_with_dither_pattern(base_rect, palette.button().lightened(1.3f), Color());
  152. } else {
  153. painter.fill_rect(base_rect, button_color);
  154. }
  155. }
  156. // Sunken shadow
  157. painter.draw_line({ 1, 1 }, { rect.width() - 2, 1 }, shadow_color);
  158. painter.draw_line({ 1, 2 }, { 1, rect.height() - 2 }, shadow_color);
  159. // Bottom highlight
  160. painter.draw_line({ rect.width() - 2, 1 }, { rect.width() - 2, rect.height() - 3 }, highlight_color);
  161. painter.draw_line({ 1, rect.height() - 2 }, { rect.width() - 2, rect.height() - 2 }, highlight_color);
  162. } else if (hovered) {
  163. if (button_style == ButtonStyle::Coolbar) {
  164. // Base
  165. painter.fill_rect({ 1, 1, rect.width() - 2, rect.height() - 2 }, button_color);
  166. }
  167. // Top highlight
  168. painter.draw_line({ 1, 1 }, { rect.width() - 2, 1 }, highlight_color);
  169. painter.draw_line({ 1, 2 }, { 1, rect.height() - 2 }, highlight_color);
  170. // Bottom shadow
  171. painter.draw_line({ rect.width() - 2, 1 }, { rect.width() - 2, rect.height() - 3 }, shadow_color);
  172. painter.draw_line({ 1, rect.height() - 2 }, { rect.width() - 2, rect.height() - 2 }, shadow_color);
  173. }
  174. }
  175. void ClassicStylePainter::paint_frame(Painter& painter, const IntRect& rect, const Palette& palette, FrameShape shape, FrameShadow shadow, int thickness, bool skip_vertical_lines)
  176. {
  177. Color top_left_color;
  178. Color bottom_right_color;
  179. Color dark_shade = palette.threed_shadow1();
  180. Color light_shade = palette.threed_highlight();
  181. if (shape == FrameShape::Container && thickness >= 2) {
  182. if (shadow == FrameShadow::Raised) {
  183. dark_shade = palette.threed_shadow2();
  184. }
  185. }
  186. if (shadow == FrameShadow::Raised) {
  187. top_left_color = light_shade;
  188. bottom_right_color = dark_shade;
  189. } else if (shadow == FrameShadow::Sunken) {
  190. top_left_color = dark_shade;
  191. bottom_right_color = light_shade;
  192. } else if (shadow == FrameShadow::Plain) {
  193. top_left_color = dark_shade;
  194. bottom_right_color = dark_shade;
  195. }
  196. if (thickness >= 1) {
  197. painter.draw_line(rect.top_left(), rect.top_right(), top_left_color);
  198. painter.draw_line(rect.bottom_left(), rect.bottom_right(), bottom_right_color);
  199. if (shape != FrameShape::Panel || !skip_vertical_lines) {
  200. painter.draw_line(rect.top_left().translated(0, 1), rect.bottom_left().translated(0, -1), top_left_color);
  201. painter.draw_line(rect.top_right(), rect.bottom_right().translated(0, -1), bottom_right_color);
  202. }
  203. }
  204. if (shape == FrameShape::Container && thickness >= 2) {
  205. Color top_left_color;
  206. Color bottom_right_color;
  207. Color dark_shade = palette.threed_shadow2();
  208. Color light_shade = palette.button();
  209. if (shadow == FrameShadow::Raised) {
  210. dark_shade = palette.threed_shadow1();
  211. top_left_color = light_shade;
  212. bottom_right_color = dark_shade;
  213. } else if (shadow == FrameShadow::Sunken) {
  214. top_left_color = dark_shade;
  215. bottom_right_color = light_shade;
  216. } else if (shadow == FrameShadow::Plain) {
  217. top_left_color = dark_shade;
  218. bottom_right_color = dark_shade;
  219. }
  220. IntRect inner_container_frame_rect = rect.shrunken(2, 2);
  221. painter.draw_line(inner_container_frame_rect.top_left(), inner_container_frame_rect.top_right(), top_left_color);
  222. painter.draw_line(inner_container_frame_rect.bottom_left(), inner_container_frame_rect.bottom_right(), bottom_right_color);
  223. painter.draw_line(inner_container_frame_rect.top_left().translated(0, 1), inner_container_frame_rect.bottom_left().translated(0, -1), top_left_color);
  224. painter.draw_line(inner_container_frame_rect.top_right(), inner_container_frame_rect.bottom_right().translated(0, -1), bottom_right_color);
  225. }
  226. if (shape == FrameShape::Box && thickness >= 2) {
  227. swap(top_left_color, bottom_right_color);
  228. IntRect inner_rect = rect.shrunken(2, 2);
  229. painter.draw_line(inner_rect.top_left(), inner_rect.top_right(), top_left_color);
  230. painter.draw_line(inner_rect.bottom_left(), inner_rect.bottom_right(), bottom_right_color);
  231. painter.draw_line(inner_rect.top_left().translated(0, 1), inner_rect.bottom_left().translated(0, -1), top_left_color);
  232. painter.draw_line(inner_rect.top_right(), inner_rect.bottom_right().translated(0, -1), bottom_right_color);
  233. }
  234. }
  235. void ClassicStylePainter::paint_window_frame(Painter& painter, const IntRect& rect, const Palette& palette)
  236. {
  237. Color base_color = palette.button();
  238. Color dark_shade = palette.threed_shadow2();
  239. Color mid_shade = palette.threed_shadow1();
  240. Color light_shade = palette.threed_highlight();
  241. painter.draw_line(rect.top_left(), rect.top_right(), base_color);
  242. painter.draw_line(rect.top_left().translated(0, 1), rect.bottom_left(), base_color);
  243. painter.draw_line(rect.top_left().translated(1, 1), rect.top_right().translated(-1, 1), light_shade);
  244. painter.draw_line(rect.top_left().translated(1, 1), rect.bottom_left().translated(1, -1), light_shade);
  245. painter.draw_line(rect.top_left().translated(2, 2), rect.top_right().translated(-2, 2), base_color);
  246. painter.draw_line(rect.top_left().translated(2, 2), rect.bottom_left().translated(2, -2), base_color);
  247. painter.draw_line(rect.top_left().translated(3, 3), rect.top_right().translated(-3, 3), base_color);
  248. painter.draw_line(rect.top_left().translated(3, 3), rect.bottom_left().translated(3, -3), base_color);
  249. painter.draw_line(rect.top_right(), rect.bottom_right(), dark_shade);
  250. painter.draw_line(rect.top_right().translated(-1, 1), rect.bottom_right().translated(-1, -1), mid_shade);
  251. painter.draw_line(rect.top_right().translated(-2, 2), rect.bottom_right().translated(-2, -2), base_color);
  252. painter.draw_line(rect.top_right().translated(-3, 3), rect.bottom_right().translated(-3, -3), base_color);
  253. painter.draw_line(rect.bottom_left(), rect.bottom_right(), dark_shade);
  254. painter.draw_line(rect.bottom_left().translated(1, -1), rect.bottom_right().translated(-1, -1), mid_shade);
  255. painter.draw_line(rect.bottom_left().translated(2, -2), rect.bottom_right().translated(-2, -2), base_color);
  256. painter.draw_line(rect.bottom_left().translated(3, -3), rect.bottom_right().translated(-3, -3), base_color);
  257. }
  258. void ClassicStylePainter::paint_progressbar(Painter& painter, const IntRect& rect, const Palette& palette, int min, int max, int value, const StringView& text, Orientation orientation)
  259. {
  260. // First we fill the entire widget with the gradient. This incurs a bit of
  261. // overdraw but ensures a consistent look throughout the progression.
  262. Color start_color = palette.active_window_border1();
  263. Color end_color = palette.active_window_border2();
  264. painter.fill_rect_with_gradient(orientation, rect, start_color, end_color);
  265. if (!text.is_null()) {
  266. painter.draw_text(rect.translated(1, 1), text, TextAlignment::Center, palette.base_text());
  267. painter.draw_text(rect, text, TextAlignment::Center, palette.base_text().inverted());
  268. }
  269. float range_size = max - min;
  270. float progress = (value - min) / range_size;
  271. // Then we carve out a hole in the remaining part of the widget.
  272. // We draw the text a third time, clipped and inverse, for sharp contrast.
  273. IntRect hole_rect;
  274. if (orientation == Orientation::Horizontal) {
  275. float progress_width = progress * rect.width();
  276. hole_rect = { (int)progress_width, 0, (int)(rect.width() - progress_width), rect.height() };
  277. } else {
  278. float progress_height = progress * rect.height();
  279. hole_rect = { 0, 0, rect.width(), (int)(rect.height() - progress_height) };
  280. }
  281. hole_rect.translate_by(rect.location());
  282. hole_rect.set_right_without_resize(rect.right());
  283. PainterStateSaver saver(painter);
  284. painter.fill_rect(hole_rect, palette.base());
  285. painter.add_clip_rect(hole_rect);
  286. if (!text.is_null())
  287. painter.draw_text(rect.translated(0, 0), text, TextAlignment::Center, palette.base_text());
  288. }
  289. static RefPtr<Gfx::Bitmap> s_unfilled_circle_bitmap;
  290. static RefPtr<Gfx::Bitmap> s_filled_circle_bitmap;
  291. static RefPtr<Gfx::Bitmap> s_changing_filled_circle_bitmap;
  292. static RefPtr<Gfx::Bitmap> s_changing_unfilled_circle_bitmap;
  293. static const Gfx::Bitmap& circle_bitmap(bool checked, bool changing)
  294. {
  295. if (changing)
  296. return checked ? *s_changing_filled_circle_bitmap : *s_changing_unfilled_circle_bitmap;
  297. return checked ? *s_filled_circle_bitmap : *s_unfilled_circle_bitmap;
  298. }
  299. void ClassicStylePainter::paint_radio_button(Painter& painter, const IntRect& rect, const Palette&, bool is_checked, bool is_being_pressed)
  300. {
  301. if (!s_unfilled_circle_bitmap) {
  302. s_unfilled_circle_bitmap = Bitmap::try_load_from_file("/res/icons/serenity/unfilled-radio-circle.png");
  303. s_filled_circle_bitmap = Bitmap::try_load_from_file("/res/icons/serenity/filled-radio-circle.png");
  304. s_changing_filled_circle_bitmap = Bitmap::try_load_from_file("/res/icons/serenity/changing-filled-radio-circle.png");
  305. s_changing_unfilled_circle_bitmap = Bitmap::try_load_from_file("/res/icons/serenity/changing-unfilled-radio-circle.png");
  306. }
  307. auto& bitmap = circle_bitmap(is_checked, is_being_pressed);
  308. painter.blit(rect.location(), bitmap, bitmap.rect());
  309. }
  310. static const char* s_checked_bitmap_data = {
  311. " "
  312. " # "
  313. " ## "
  314. " ### "
  315. " ## ### "
  316. " ##### "
  317. " ### "
  318. " # "
  319. " "
  320. };
  321. static Gfx::CharacterBitmap* s_checked_bitmap;
  322. static const int s_checked_bitmap_width = 9;
  323. static const int s_checked_bitmap_height = 9;
  324. void ClassicStylePainter::paint_check_box(Painter& painter, const IntRect& rect, const Palette& palette, bool is_enabled, bool is_checked, bool is_being_pressed)
  325. {
  326. painter.fill_rect(rect, is_enabled ? palette.base() : palette.window());
  327. paint_frame(painter, rect, palette, Gfx::FrameShape::Container, Gfx::FrameShadow::Sunken, 2);
  328. if (is_being_pressed) {
  329. // FIXME: This color should not be hard-coded.
  330. painter.draw_rect(rect.shrunken(4, 4), Color::MidGray);
  331. }
  332. if (is_checked) {
  333. if (!s_checked_bitmap)
  334. s_checked_bitmap = &Gfx::CharacterBitmap::create_from_ascii(s_checked_bitmap_data, s_checked_bitmap_width, s_checked_bitmap_height).leak_ref();
  335. painter.draw_bitmap(rect.shrunken(4, 4).location(), *s_checked_bitmap, is_enabled ? palette.base_text() : palette.threed_shadow1());
  336. }
  337. }
  338. void ClassicStylePainter::paint_transparency_grid(Painter& painter, const IntRect& rect, const Palette& palette)
  339. {
  340. painter.fill_rect_with_checkerboard(rect, { 8, 8 }, palette.base().darkened(0.9), palette.base());
  341. }
  342. }