Clean up the legal consent checkbox layout
A bare CheckBox's word-wrap left-aligns every wrapped line flush with the checkbox glyph, so "Privacy Policy." on its own line read as unindented and sloppy next to an otherwise fully themed form. Split the toggle from its label (a separate Label wraps within its own column instead, so wrapped lines stay aligned under the first line) and wrapped the row in a bordered card matching the app's field styling. Clicking the label also toggles the checkbox now, for a bigger hit target. Verified with an actual rendered screenshot: wrapped text now indents consistently, and both checked/unchecked states are legible.
This commit is contained in:
@@ -344,10 +344,36 @@ func _build_steam_view() -> VBoxContainer:
|
||||
|
||||
|
||||
func _add_legal_consent(parent: VBoxContainer) -> CheckBox:
|
||||
# A bare CheckBox's own word-wrap left-aligns every wrapped line flush
|
||||
# with the checkbox glyph, so a second line reads as un-indented and
|
||||
# sloppy. Split the toggle from its label into a row instead - the
|
||||
# label's own wrapping then stays confined to its column, and the whole
|
||||
# thing sits in a card so it doesn't look like a stray unstyled control
|
||||
# next to the app's otherwise fully themed form fields.
|
||||
var card := PanelContainer.new()
|
||||
card.set_meta("legal_consent_card", true)
|
||||
parent.add_child(card)
|
||||
var margin := MarginContainer.new()
|
||||
margin.add_theme_constant_override("margin_left", 16)
|
||||
margin.add_theme_constant_override("margin_right", 16)
|
||||
margin.add_theme_constant_override("margin_top", 12)
|
||||
margin.add_theme_constant_override("margin_bottom", 12)
|
||||
card.add_child(margin)
|
||||
var row := HBoxContainer.new()
|
||||
row.add_theme_constant_override("separation", 12)
|
||||
margin.add_child(row)
|
||||
var check := CheckBox.new()
|
||||
check.text = "I agree to the Terms of Service and acknowledge the Privacy Policy."
|
||||
check.autowrap_mode = TextServer.AUTOWRAP_WORD_SMART
|
||||
parent.add_child(check)
|
||||
row.add_child(check)
|
||||
var label := Label.new()
|
||||
label.text = "I agree to the Terms of Service and acknowledge the Privacy Policy."
|
||||
label.autowrap_mode = TextServer.AUTOWRAP_WORD_SMART
|
||||
label.size_flags_horizontal = Control.SIZE_EXPAND_FILL
|
||||
label.mouse_filter = Control.MOUSE_FILTER_STOP
|
||||
label.gui_input.connect(func(event: InputEvent):
|
||||
if event is InputEventMouseButton and event.pressed and event.button_index == MOUSE_BUTTON_LEFT:
|
||||
check.button_pressed = not check.button_pressed
|
||||
)
|
||||
row.add_child(label)
|
||||
return check
|
||||
|
||||
|
||||
@@ -555,6 +581,9 @@ func _apply_theme() -> void:
|
||||
label.add_theme_color_override("font_color", Brand.text_color(dark))
|
||||
for input in fields:
|
||||
_style_auth_field(input, dark)
|
||||
for node in find_children("*", "PanelContainer", true, false):
|
||||
if node.has_meta("legal_consent_card"):
|
||||
(node as PanelContainer).add_theme_stylebox_override("panel", _legal_consent_box(dark))
|
||||
for button in find_children("*", "Button", true, false):
|
||||
var typed := button as Button
|
||||
typed.add_theme_font_override("font", Brand.font)
|
||||
@@ -584,6 +613,15 @@ func _apply_theme() -> void:
|
||||
brand_tagline.add_theme_color_override("default_color", Brand.muted_color(dark))
|
||||
|
||||
|
||||
func _legal_consent_box(dark: bool) -> StyleBoxFlat:
|
||||
var box := StyleBoxFlat.new()
|
||||
box.bg_color = Color("0d172a") if dark else Brand.LIGHT_SURFACE
|
||||
box.border_color = Color("33415d") if dark else Brand.LIGHT_BORDER
|
||||
box.set_border_width_all(1)
|
||||
box.set_corner_radius_all(10)
|
||||
return box
|
||||
|
||||
|
||||
func _style_auth_field(input: LineEdit, dark: bool) -> void:
|
||||
input.add_theme_color_override("font_color", Brand.text_color(dark))
|
||||
input.add_theme_color_override("font_uneditable_color", Brand.text_color(dark))
|
||||
|
||||
Reference in New Issue
Block a user