fix centering - add mx, my, m (auto)
This commit is contained in:
@@ -12,13 +12,15 @@ func _resort() -> void:
|
|||||||
if has_meta("should_fill_horizontal"):
|
if has_meta("should_fill_horizontal"):
|
||||||
size_flags_horizontal = Control.SIZE_FILL
|
size_flags_horizontal = Control.SIZE_FILL
|
||||||
else:
|
else:
|
||||||
size_flags_horizontal = Control.SIZE_SHRINK_CENTER
|
if not has_meta("size_flags_set_by_style_manager"):
|
||||||
|
size_flags_horizontal = Control.SIZE_SHRINK_CENTER
|
||||||
|
|
||||||
# Check if we should fill vertically (for h-full)
|
# Check if we should fill vertically (for h-full)
|
||||||
if has_meta("should_fill_vertical"):
|
if has_meta("should_fill_vertical"):
|
||||||
size_flags_vertical = Control.SIZE_FILL
|
size_flags_vertical = Control.SIZE_FILL
|
||||||
else:
|
else:
|
||||||
size_flags_vertical = Control.SIZE_SHRINK_CENTER
|
if not has_meta("size_flags_set_by_style_manager"):
|
||||||
|
size_flags_vertical = Control.SIZE_SHRINK_CENTER
|
||||||
|
|
||||||
if debug_draw:
|
if debug_draw:
|
||||||
_draw_rects.clear()
|
_draw_rects.clear()
|
||||||
|
|||||||
@@ -496,6 +496,18 @@ static func parse_utility_class_internal(rule: CSSRule, utility_name: String) ->
|
|||||||
rule.properties["border-radius"] = str(int(val)) + "px"
|
rule.properties["border-radius"] = str(int(val)) + "px"
|
||||||
return
|
return
|
||||||
|
|
||||||
|
# Handle margin auto classes for centering
|
||||||
|
if utility_name == "mx-auto":
|
||||||
|
rule.properties["mx-auto"] = true
|
||||||
|
return
|
||||||
|
if utility_name == "my-auto":
|
||||||
|
rule.properties["my-auto"] = true
|
||||||
|
return
|
||||||
|
if utility_name == "m-auto":
|
||||||
|
rule.properties["mx-auto"] = true
|
||||||
|
rule.properties["my-auto"] = true
|
||||||
|
return
|
||||||
|
|
||||||
# Handle more utility classes as needed
|
# Handle more utility classes as needed
|
||||||
# Add more cases here for other utilities
|
# Add more cases here for other utilities
|
||||||
|
|
||||||
|
|||||||
@@ -24,7 +24,7 @@ pre { text-xl font-mono }
|
|||||||
button { bg-[#1b1b1b] rounded-md text-white hover:bg-[#2a2a2a] active:bg-[#101010] }
|
button { bg-[#1b1b1b] rounded-md text-white hover:bg-[#2a2a2a] active:bg-[#101010] }
|
||||||
"""
|
"""
|
||||||
|
|
||||||
var HTML_CONTENT2 = """<head>
|
var HTML_CONTENT = """<head>
|
||||||
<title>My Custom Dashboard</title>
|
<title>My Custom Dashboard</title>
|
||||||
<icon src="https://cdn-icons-png.flaticon.com/512/1828/1828774.png">
|
<icon src="https://cdn-icons-png.flaticon.com/512/1828/1828774.png">
|
||||||
<meta name="theme-color" content="#1a202c">
|
<meta name="theme-color" content="#1a202c">
|
||||||
@@ -41,9 +41,8 @@ var HTML_CONTENT2 = """<head>
|
|||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body style="bg-[#0f172a] p-8 text-white">
|
<body style="bg-[#0f172a] p-8 text-white font-roboto">
|
||||||
|
<h1 style="text-center mb-4">📊 My Dashboard</h1>
|
||||||
<h1 style="text-center mb-4 font-roboto">📊 My Dashboard</h1>
|
|
||||||
|
|
||||||
<!-- Top Summary Cards -->
|
<!-- Top Summary Cards -->
|
||||||
<div style="flex flex-row gap-4 justify-center flex-wrap">
|
<div style="flex flex-row gap-4 justify-center flex-wrap">
|
||||||
@@ -100,7 +99,7 @@ var HTML_CONTENT2 = """<head>
|
|||||||
|
|
||||||
</body>
|
</body>
|
||||||
""".to_utf8_buffer()
|
""".to_utf8_buffer()
|
||||||
var HTML_CONTENT = """<head>
|
var HTML_CONTENT2 = """<head>
|
||||||
<title>My cool web</title>
|
<title>My cool web</title>
|
||||||
<icon src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/768px-Google_%22G%22_logo.svg.png\">
|
<icon src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/768px-Google_%22G%22_logo.svg.png\">
|
||||||
|
|
||||||
@@ -204,7 +203,7 @@ So
|
|||||||
|
|
||||||
<h2>File Upload</h2>
|
<h2>File Upload</h2>
|
||||||
<input type=\"file\" accept=\".txt,.pdf,image/*\" />
|
<input type=\"file\" accept=\".txt,.pdf,image/*\" />
|
||||||
|
</form>
|
||||||
<separator direction=\"horizontal\" />
|
<separator direction=\"horizontal\" />
|
||||||
# Ordered list
|
# Ordered list
|
||||||
<ol>
|
<ol>
|
||||||
|
|||||||
@@ -45,8 +45,16 @@ static func apply_element_styles(node: Control, element: HTMLParser.HTMLElement,
|
|||||||
if node is FlexContainer:
|
if node is FlexContainer:
|
||||||
if width != null and typeof(width) != TYPE_STRING:
|
if width != null and typeof(width) != TYPE_STRING:
|
||||||
node.custom_minimum_size.x = width
|
node.custom_minimum_size.x = width
|
||||||
|
var should_center_h = styles.has("mx-auto") or styles.has("justify-self-center") or (styles.has("text-align") and styles["text-align"] == "center")
|
||||||
|
|
||||||
|
node.size_flags_horizontal = Control.SIZE_SHRINK_CENTER if should_center_h else Control.SIZE_SHRINK_BEGIN
|
||||||
|
node.set_meta("size_flags_set_by_style_manager", true)
|
||||||
if height != null and typeof(height) != TYPE_STRING:
|
if height != null and typeof(height) != TYPE_STRING:
|
||||||
node.custom_minimum_size.y = height
|
node.custom_minimum_size.y = height
|
||||||
|
var should_center_v = styles.has("my-auto") or styles.has("align-self-center")
|
||||||
|
node.size_flags_vertical = Control.SIZE_SHRINK_CENTER if should_center_v else Control.SIZE_SHRINK_BEGIN
|
||||||
|
if not node.has_meta("size_flags_set_by_style_manager"):
|
||||||
|
node.set_meta("size_flags_set_by_style_manager", true)
|
||||||
elif node is VBoxContainer or node is HBoxContainer or node is Container:
|
elif node is VBoxContainer or node is HBoxContainer or node is Container:
|
||||||
# Hcontainer nodes (like ul, ol)
|
# Hcontainer nodes (like ul, ol)
|
||||||
SizingUtils.apply_container_dimension_sizing(node, width, height)
|
SizingUtils.apply_container_dimension_sizing(node, width, height)
|
||||||
|
|||||||
@@ -27,6 +27,7 @@ static func init_patterns():
|
|||||||
"^(p|px|py|pt|pr|pb|pl)-", # padding
|
"^(p|px|py|pt|pr|pb|pl)-", # padding
|
||||||
"^rounded", # border radius
|
"^rounded", # border radius
|
||||||
"^basis-", # flex basis
|
"^basis-", # flex basis
|
||||||
|
"^(mx|my|m)-auto$", # margin auto for centering
|
||||||
"^(hover|active):", # pseudo classes
|
"^(hover|active):", # pseudo classes
|
||||||
]
|
]
|
||||||
for pattern in utility_patterns:
|
for pattern in utility_patterns:
|
||||||
|
|||||||
Reference in New Issue
Block a user