mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-07-30 20:59:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Harmonize look of range input element

Browse source 
Previously the entire slider track was colored.
Now only the lower part of the slider track (left side of the thumb) is
colored.
Chrome and Firefox do the same.
This commit is contained in:
simonkrauter 2024-07-08 17:19:45 -03:00 • committed by Andrew Kaster
commit 7766909415
Notes: sideshowbarker 2024-07-17 06:29:49 +09:00
3 changed files with 25 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -78,10 +78,11 @@ input[type=range]::-webkit-slider-runnable-track, input[type=range]::-webkit-sli
display: block;
}
input[type=range]::-webkit-slider-runnable-track {
position: relative;
height: 4px;
width: 100%;
margin-top: 6px;
background-color: AccentColor;
background-color: Background;
border: 1px solid rgba(0, 0, 0, 0.5);
}
input[type=range]::-webkit-slider-thumb {
@ -90,8 +91,9 @@ input[type=range]::-webkit-slider-thumb {
height: 16px;
transform: translateX(-50%);
border-radius: 50%;
background-color: Background;
background-color: AccentColor;
outline: 1px solid rgba(0, 0, 0, 0.5);
z-index: 1;
}
/* Custom <meter> styles */

21
Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp
View file

@ -80,6 +80,7 @@ void HTMLInputElement::visit_edges(Cell::Visitor& visitor)
visitor.visit(m_selected_files);
visitor.visit(m_slider_thumb);
visitor.visit(m_image_request);
visitor.visit(m_range_progress_element);
}
// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-cva-validity
@ -990,6 +991,15 @@ void HTMLInputElement::create_range_input_shadow_tree()
slider_runnable_track->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::SliderRunnableTrack);
MUST(shadow_root->append_child(slider_runnable_track));
m_range_progress_element = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML));
MUST(m_range_progress_element->set_attribute(HTML::AttributeNames::style, R"~~~(
display: block;
position: absolute;
height: 100%;
background-color: AccentColor;
)~~~"_string));
MUST(slider_runnable_track->append_child(*m_range_progress_element));
m_slider_thumb = MUST(DOM::create_element(document(), HTML::TagNames::div, Namespace::HTML));
m_slider_thumb->set_use_pseudo_element(CSS::Selector::PseudoElement::Type::SliderThumb);
MUST(slider_runnable_track->append_child(*m_slider_thumb));
@ -1094,14 +1104,19 @@ void HTMLInputElement::user_interaction_did_change_input_value()
void HTMLInputElement::update_slider_thumb_element()
{
if (!m_slider_thumb)
return;
double value = value_as_number();
if (isnan(value))
value = 0;
double minimum = *min();
double maximum = *max();
double position = (value - minimum) / (maximum - minimum) * 100;
if (m_slider_thumb)
MUST(m_slider_thumb->style_for_bindings()->set_property(CSS::PropertyID::MarginLeft, MUST(String::formatted("{}%", position))));
if (m_range_progress_element)
MUST(m_range_progress_element->style_for_bindings()->set_property(CSS::PropertyID::Width, MUST(String::formatted("{}%", position))));
}
void HTMLInputElement::did_receive_focus()

2
Userland/Libraries/LibWeb/HTML/HTMLInputElement.h
View file

@ -321,6 +321,8 @@ private:
String m_last_src_value;
bool m_has_uncommitted_changes { false };
JS::GCPtr<DOM::Element> m_range_progress_element;
};
}