LibWeb: Re-implement checkbox painting using the UA stylesheet

The checkbox provided by ClassicStylePainter is not scaling-aware and
generally unflexible, instead use the UA default stylesheet with a
handful of properties, the same way we already style buttons and text
inputs.

Thanks to Xexxa for the nice checkmark image!

Co-Authored-By: Xexxa <93391300+Xexxa@users.noreply.github.com>
This commit is contained in:
Linus Groh 2023-02-11 21:45:53 +00:00
parent a8bf2f8e4c
commit 2ad9c1fd6c
Notes: sideshowbarker 2024-07-17 06:09:44 +09:00
3 changed files with 19 additions and 15 deletions

View file

@ -64,6 +64,25 @@ button:hover, input[type=submit]:hover, input[type=button]:hover, input[type=res
background-color: -libweb-palette-hover-highlight;
}
input[type=checkbox] {
display: inline-block;
width: 12px;
height: 12px;
margin: 2px;
border: 1px solid -libweb-palette-threed-shadow1;
}
input[type=checkbox]:checked {
/*
This roughly resembles ClassicStylePainter's paint_check_box() while uncoupling the styling from LibGfx, similar to
<button> above. This is a simple checkmark that still looks ok at 2x scale.
Eventually we should respect the `accent-color` property here, which may require going back to an implementation via
CheckBoxPaintable::paint().
*/
image-rendering: pixelated;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAEhJREFUKFNjYBgs4D/MIYxEuAiuGKiWkZAGFMUgw5mQbECWBAljKAYJwmxAl0Tnw81FdhK6DcgGYtWA0xlw1TgY2GzCoZQWwgCU1woFwvnCFQAAAABJRU5ErkJggg==);
}
option {
display: none;
}

View file

@ -5,7 +5,6 @@
*/
#include <LibGUI/Event.h>
#include <LibGfx/StylePainter.h>
#include <LibWeb/HTML/BrowsingContext.h>
#include <LibWeb/HTML/HTMLImageElement.h>
#include <LibWeb/Layout/CheckBox.h>
@ -34,16 +33,4 @@ Layout::CheckBox& CheckBoxPaintable::layout_box()
return static_cast<Layout::CheckBox&>(layout_node());
}
void CheckBoxPaintable::paint(PaintContext& context, PaintPhase phase) const
{
if (!is_visible())
return;
PaintableBox::paint(context, phase);
auto const& checkbox = static_cast<HTML::HTMLInputElement const&>(layout_box().dom_node());
if (phase == PaintPhase::Foreground)
Gfx::StylePainter::paint_check_box(context.painter(), context.enclosing_device_rect(absolute_rect()).to_type<int>(), context.palette(), layout_box().dom_node().enabled(), checkbox.checked(), being_pressed());
}
}

View file

@ -17,8 +17,6 @@ class CheckBoxPaintable final : public LabelablePaintable {
public:
static JS::NonnullGCPtr<CheckBoxPaintable> create(Layout::CheckBox const&);
virtual void paint(PaintContext&, PaintPhase) const override;
Layout::CheckBox const& layout_box() const;
Layout::CheckBox& layout_box();