LeonMMcoset/leonwww
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cursor, z-index, opacity, "disabled" button support

Browse Source
This commit is contained in:
Face
2025-08-02 14:12:58 +03:00
parent abe03d0f46
commit 8fbabdd01a
4 changed files with 147 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
Scripts/B9/CSSParser.gd
View File

@@ -785,6 +785,31 @@ static func parse_utility_class_internal(rule: CSSRule, utility_name: String) ->
apply_border.call("", "", color) apply_border.call("", "", color)
return return
# Handle cursor classes like cursor-pointer, cursor-default, cursor-text, etc.
if utility_name.begins_with("cursor-"):
var cursor_type = utility_name.substr(7) # after 'cursor-'
rule.properties["cursor"] = cursor_type
return
# Handle z-index classes like z-10, z-50, z-[999]
if utility_name.begins_with("z-"):
var val = utility_name.substr(2)
if val.begins_with("[") and val.ends_with("]"):
val = val.substr(1, val.length() - 2)
rule.properties["z-index"] = val.to_int()
return
# Handle opacity classes like opacity-50, opacity-75, opacity-[0.5]
if utility_name.begins_with("opacity-"):
var val = utility_name.substr(8) # after 'opacity-'
if val.begins_with("[") and val.ends_with("]"):
val = val.substr(1, val.length() - 2)
rule.properties["opacity"] = val.to_float()
elif val.is_valid_int():
# Convert percentage (0-100) to decimal (0.0-1.0)
rule.properties["opacity"] = val.to_int() / 100.0
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

55
Scripts/Constants.gd
View File

@@ -22,6 +22,7 @@ a { text-[#1a0dab] }
pre { text-xl font-mono } 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] }
button[disabled] { bg-[#666666] text-[#999999] cursor-not-allowed }
""" """
var HTML_CONTENT2 = """<head> var HTML_CONTENT2 = """<head>
@@ -99,7 +100,7 @@ var HTML_CONTENT2 = """<head>
</body> </body>
""".to_utf8_buffer() """.to_utf8_buffer()
var HTML_CONTENT4 = """<head> var HTML_CONTENT = """<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\">
@@ -151,11 +152,59 @@ font, and it preserves
both spaces and both spaces and
line breaks line breaks
</pre> </pre>
<p style="text-center w-32 h-32"> <p style="text-center w-32 h-32">
So So
</p> </p>
<div>
<button style="rounded-lg px-4 py-2 cursor-pointer">Create Report</button>
<button style="rounded-lg px-4 py-2 bg-[#3b82f6] hover:bg-[#2563eb] active:bg-[#1e40af] cursor-pointer">Invite User</button>
<button style="rounded-lg px-4 py-2 bg-[#facc15] text-[#000] hover:bg-[#eab308] active:bg-[#ca8a04] cursor-pointer">Upgrade Plan</button>
</div>
<button disabled="true">Disabled Button</button>
<button>Normal Button</button>
<separator direction="horizontal" />
<!-- Test CSS Properties -->
<h2 style="text-center mt-6">🧪 CSS Properties Test</h2>
<div style="flex flex-col gap-2 justify-center items-center mt-2">
<div style="bg-[#ef4444] text-white p-4 rounded-lg opacity-75 z-10 cursor-pointer">
<p>Opacity 75% with cursor pointer and z-index 10 - Text should show pointer cursor, not I-beam</p>
</div>
<div style="bg-[#10b981] text-white p-4 rounded-lg opacity-50 z-20 cursor-text">
<p>Opacity 50% with cursor text and z-index 20 - Text should show I-beam cursor</p>
</div>
<div style="bg-[#8b5cf6] text-white p-4 rounded-lg opacity-[0.25] z-[999] cursor-default">
<p>Custom opacity 0.25 with cursor default and z-index 999 - Text should show arrow cursor</p>
</div>
<div style="bg-[#f59e0b] text-white p-2 rounded cursor-move">
<p>Cursor move - Text should show move cursor</p>
</div>
<div style="bg-[#06b6d4] text-white p-2 rounded cursor-crosshair">
<p>Cursor crosshair - Text should show crosshair cursor</p>
</div>
<div style="bg-[#84cc16] text-white p-2 rounded cursor-help">
<p>Cursor help - Text should show help cursor</p>
</div>
<div style="bg-[#ec4899] text-white p-2 rounded cursor-not-allowed">
<p>Cursor not-allowed - Text should show forbidden cursor</p>
</div>
</div>
<separator direction="horizontal" />
<!-- Test cursor inheritance -->
<h2 style="text-center mt-6">🖱️ Cursor Inheritance Test</h2>
<div style="cursor-pointer bg-[#1e293b] p-4 rounded-lg">
<p>This paragraph is inside a div with cursor-pointer.</p>
<p>Both paragraphs should show pointer cursor instead of default I-beam.</p>
<div style="bg-[#334155] p-2 rounded mt-2">
<p>This nested paragraph should also inherit the pointer cursor.</p>
</div>
</div>
<!-- Border examples --> <!-- Border examples -->
<div style="border p-2 mb-2">border</div> <div style="border p-2 mb-2">border</div>
<div style="border-2 p-2 mb-2">border-2</div> <div style="border-2 p-2 mb-2">border-2</div>
@@ -342,7 +391,7 @@ line breaks
</div> </div>
</body>""".to_utf8_buffer() </body>""".to_utf8_buffer()
var HTML_CONTENT = """<head> var HTML_CONTENT_S = """<head>
<title>CSS Selector Tests</title> <title>CSS Selector Tests</title>
<style> <style>
/* Descendant selectors */ /* Descendant selectors */

60
Scripts/StyleManager.gd
View File

@@ -87,6 +87,31 @@ static func apply_element_styles(node: Control, element: HTMLParser.HTMLElement,
if label and label != node: if label and label != node:
label.anchors_preset = Control.PRESET_FULL_RECT label.anchors_preset = Control.PRESET_FULL_RECT
# Apply z-index
if styles.has("z-index"):
node.z_index = styles["z-index"]
# Apply opacity
if styles.has("opacity"):
node.modulate.a = styles["opacity"]
# Apply cursor
if styles.has("cursor"):
var cursor_shape = get_cursor_shape_from_type(styles["cursor"])
node.mouse_default_cursor_shape = cursor_shape
# Handle cursor inheritance for text elements (RichTextLabel)
# If current element has no cursor, traverse up parent chain to find one
if not styles.has("cursor") and label:
var current_parent = element.parent
while current_parent:
var parent_styles = parser.get_element_styles_with_inheritance(current_parent, "", [])
if parent_styles.has("cursor"):
var parent_cursor_shape = get_cursor_shape_from_type(parent_styles["cursor"])
label.mouse_default_cursor_shape = parent_cursor_shape
break # Found a cursor, stop traversing
current_parent = current_parent.parent
# Apply background color, border radius, borders # Apply background color, border radius, borders
var needs_styling = styles.has("background-color") or styles.has("border-radius") or styles.has("border-width") or styles.has("border-top-width") or styles.has("border-right-width") or styles.has("border-bottom-width") or styles.has("border-left-width") or styles.has("border-color") var needs_styling = styles.has("background-color") or styles.has("border-radius") or styles.has("border-width") or styles.has("border-top-width") or styles.has("border-right-width") or styles.has("border-bottom-width") or styles.has("border-left-width") or styles.has("border-color")
@@ -299,6 +324,41 @@ static func apply_font_to_button(button: Button, styles: Dictionary) -> void:
if font_resource: if font_resource:
button.add_theme_font_override("font", font_resource) button.add_theme_font_override("font", font_resource)
static func get_cursor_shape_from_type(cursor_type: String) -> Control.CursorShape:
match cursor_type:
"pointer", "hand":
return Control.CURSOR_POINTING_HAND
"text":
return Control.CURSOR_IBEAM
"crosshair":
return Control.CURSOR_CROSS
"move":
return Control.CURSOR_MOVE
"not-allowed", "forbidden":
return Control.CURSOR_FORBIDDEN
"wait":
return Control.CURSOR_WAIT
"help":
return Control.CURSOR_HELP
"grab":
return Control.CURSOR_DRAG
"grabbing":
return Control.CURSOR_CAN_DROP
"e-resize", "ew-resize":
return Control.CURSOR_HSIZE
"n-resize", "ns-resize":
return Control.CURSOR_VSIZE
"ne-resize":
return Control.CURSOR_BDIAGSIZE
"nw-resize":
return Control.CURSOR_FDIAGSIZE
"se-resize":
return Control.CURSOR_FDIAGSIZE
"sw-resize":
return Control.CURSOR_BDIAGSIZE
"default", "auto", _:
return Control.CURSOR_ARROW
static func apply_input_border_styles(input_node: Control, styles: Dictionary) -> void: static func apply_input_border_styles(input_node: Control, styles: Dictionary) -> void:
if not BackgroundUtils.needs_background_wrapper(styles): if not BackgroundUtils.needs_background_wrapper(styles):
return return

10
Scripts/Tags/button.gd
View File

@@ -8,6 +8,8 @@ func init(element: HTMLParser.HTMLElement, parser: HTMLParser = null) -> void:
current_element = element current_element = element
current_parser = parser current_parser = parser
var button_node: Button = $ButtonNode var button_node: Button = $ButtonNode
if element.has_attribute("disabled"):
button_node.disabled = true
var button_text = element.text_content.strip_edges() var button_text = element.text_content.strip_edges()
if button_text.length() == 0: if button_text.length() == 0:
@@ -44,6 +46,11 @@ func apply_button_styles(element: HTMLParser.HTMLElement, parser: HTMLParser, na
var active_styles = parser.get_element_styles_with_inheritance(element, "active", []) var active_styles = parser.get_element_styles_with_inheritance(element, "active", [])
var button_node = $ButtonNode var button_node = $ButtonNode
if styles.has("cursor"):
var cursor_shape = StyleManager.get_cursor_shape_from_type(styles["cursor"])
mouse_default_cursor_shape = cursor_shape
button_node.mouse_default_cursor_shape = cursor_shape
# Apply text color with state-dependent colors # Apply text color with state-dependent colors
apply_button_text_color(button_node, styles, hover_styles, active_styles) apply_button_text_color(button_node, styles, hover_styles, active_styles)
@@ -115,6 +122,9 @@ func apply_button_text_color(button: Button, normal_styles: Dictionary, hover_st
button.add_theme_color_override("font_hover_color", hover_color) button.add_theme_color_override("font_hover_color", hover_color)
button.add_theme_color_override("font_pressed_color", active_color) button.add_theme_color_override("font_pressed_color", active_color)
button.add_theme_color_override("font_focus_color", normal_color) button.add_theme_color_override("font_focus_color", normal_color)
if button.disabled:
button.add_theme_color_override("font_disabled_color", normal_color)
func apply_button_color_with_states(button: Button, normal_color: Color, hover_color: Color, active_color: Color) -> void: func apply_button_color_with_states(button: Button, normal_color: Color, hover_color: Color, active_color: Color) -> void:
var style_normal = StyleBoxFlat.new() var style_normal = StyleBoxFlat.new()