RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 18:57:34 +00:00
Code Issues Activity Actions

LibWeb: Allow <input type="button/submit/reset"> to be styled

Browse source 
Previously we used a native ui button to draw the buttons.
These buttons can however not be styled with css.
To allow these to be styled with css, we create a button with
the UA stylesheet that resembles the system ui button.
This commit is contained in:
Vrins 2022-02-21 02:16:21 +01:00 • committed by Linus Groh
parent c8f6a20c02
commit a8cfb34551
3 changed files with 16 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

9
Userland/Libraries/LibWeb/CSS/Default.css
View file

@ -237,6 +237,15 @@ input[type=submit], input[type=button], input[type=reset], input[type=checkbox],
cursor: unset; cursor: unset;
} }
input[type=submit], input[type=button], input[type=reset] {
padding: 4px 8px;
background-color: -libweb-palette-button;
border: 1px solid -libweb-palette-threed-shadow1;
}
input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover {
background-color: -libweb-palette-hover-highlight;
}
option { option {
display: none; display: none;
} }

12
Userland/Libraries/LibWeb/Layout/ButtonBox.cpp
View file

@ -26,8 +26,8 @@ ButtonBox::~ButtonBox()
void ButtonBox::prepare_for_replaced_layout() void ButtonBox::prepare_for_replaced_layout()
{ {
set_intrinsic_width(font().width(dom_node().value()) + 20); set_intrinsic_width(font().width(dom_node().value()));
set_intrinsic_height(20); set_intrinsic_height(font().glyph_height());
} }
void ButtonBox::paint(PaintContext& context, PaintPhase phase) void ButtonBox::paint(PaintContext& context, PaintPhase phase)
@ -38,16 +38,10 @@ void ButtonBox::paint(PaintContext& context, PaintPhase phase)
LabelableNode::paint(context, phase); LabelableNode::paint(context, phase);
if (phase == PaintPhase::Foreground) { if (phase == PaintPhase::Foreground) {
bool hovered = document().hovered_node() == &dom_node();
if (!hovered)
hovered = Label::is_associated_label_hovered(*this);
Gfx::StylePainter::paint_button(context.painter(), enclosing_int_rect(absolute_rect()), context.palette(), Gfx::ButtonStyle::Normal, m_being_pressed, hovered, dom_node().checked(), dom_node().enabled());
auto text_rect = enclosing_int_rect(absolute_rect()); auto text_rect = enclosing_int_rect(absolute_rect());
if (m_being_pressed) if (m_being_pressed)
text_rect.translate_by(1, 1); text_rect.translate_by(1, 1);
context.painter().draw_text(text_rect, dom_node().value(), font(), Gfx::TextAlignment::Center, context.palette().button_text()); context.painter().draw_text(text_rect, dom_node().value(), font(), Gfx::TextAlignment::Center, computed_values().color());
} }
} }

4
Userland/Libraries/LibWeb/Layout/InlineFormattingContext.cpp
View file

@ -117,6 +117,10 @@ void InlineFormattingContext::dimension_box_on_line(Box const& box, LayoutMode l
box_state.margin_right = computed_values.margin().right.resolved(box, width_of_containing_block).to_px(box); box_state.margin_right = computed_values.margin().right.resolved(box, width_of_containing_block).to_px(box);
box_state.border_right = computed_values.border_right().width; box_state.border_right = computed_values.border_right().width;
box_state.padding_right = computed_values.padding().right.resolved(box, width_of_containing_block).to_px(box); box_state.padding_right = computed_values.padding().right.resolved(box, width_of_containing_block).to_px(box);
box_state.padding_top = computed_values.padding().top.resolved(box, width_of_containing_block).to_px(box);
box_state.padding_bottom = computed_values.padding().bottom.resolved(box, width_of_containing_block).to_px(box);
box_state.margin_top = computed_values.margin().top.resolved(box, width_of_containing_block).to_px(box);
box_state.margin_bottom = computed_values.margin().bottom.resolved(box, width_of_containing_block).to_px(box);
if (is<ReplacedBox>(box)) { if (is<ReplacedBox>(box)) {
auto& replaced = verify_cast<ReplacedBox>(box); auto& replaced = verify_cast<ReplacedBox>(box);