1
0
mirror of https://github.com/Mojang/bedrock-samples.git synced 2024-11-23 12:26:14 +00:00
bedrock-samples/resource_pack/ui/ui_template_buttons.json
Mike Ammerlaan e304be6ab8 v1.20.80.5
2024-04-23 09:20:49 -07:00

2184 lines
74 KiB
JSON

/********************************************************
+* (c) Mojang. All rights reserved *
+* (c) Microsoft. All rights reserved. *
+*********************************************************/
{
"namespace": "common_buttons",
/////////////////////////////////
//
// BUTTON CONTROLS
//
/////////////////////////////////
"button_image": {
"type": "image",
"layer": 1,
"texture": "$new_ui_button_texture",
"$button_alpha|default": "$content_alpha",
"alpha": "$button_alpha",
"$button_image_bindings|default": [],
"bindings": "$button_image_bindings"
},
"background_button_image": {
"type": "image",
"layer": 1,
"texture": "textures/ui/button_borderless_imagelesshoverbg",
"alpha": "$content_alpha"
},
"locked_button_image": {
"type": "image",
"layer": 1,
"texture": "$new_ui_button_texture",
"alpha": "$content_alpha"
},
"light_button_assets@common.button": {
"$default_button_texture|default": "textures/ui/button_borderless_light",
"$default_content_alpha|default": 1,
"$hover_content_alpha|default": 1,
"$hover_button_texture|default": "textures/ui/button_borderless_lighthover",
"$pressed_button_texture|default": "textures/ui/button_borderless_lightpressed",
"$locked_button_texture|default": "textures/ui/disabledButtonNoBorder",
"locked_control": "locked",
"$default_font|default": "default",
"$font_type": "$default_font",
"$locked_alpha": 1
},
"dark_button_assets@common.button": {
"$default_button_texture|default": "textures/ui/button_borderless_dark",
"$hover_button_texture|default": "textures/ui/button_borderless_darkhover",
"$pressed_button_texture|default": "textures/ui/button_borderless_darkpressed",
"$locked_button_texture|default": "textures/ui/disabledButtonNoBorder",
"locked_control": "locked",
"$locked_alpha": 1
},
"focus_border": {
"$focus_border_texture|default": "textures/ui/focus_border_white",
"$focus_border_size|default": [ "100%", "100%" ],
"size": "$focus_border_size",
"type": "image",
"texture": "$focus_border_texture"
},
"new_ui_button_panel": {
"type": "panel",
"$button_alpha|default": 1,
"layer": 1,
"$button_size_override|default": [ "100%", "100%" ],
"size": "$button_size_override",
"$content_alpha|default": 1,
"$button_image|default": "common_buttons.button_image",
"$button_image_visible|default": true,
"$button_image_size|default": [ "100% - 2px", "100% - 2px" ],
"$image_anchor|default": "center",
"$image_offset|default": [ 0, 0 ],
"$border_visible|default": true,
"$border_alpha|default": 1,
"$button_anchor_to|default": "center",
"$button_anchor_from|default": "center",
"anchor_to": "$button_anchor_to",
"anchor_from": "$button_anchor_from",
"$button_image_fill|default": false,
"$button_image_color|default": [ 1.0, 1.0, 1.0 ],
"controls": [
{
"$button_image@$button_image": {
"ignored": "(not $button_image_visible)",
"size": "$button_image_size",
"offset": "$image_offset",
"anchor_from": "$image_anchor",
"anchor_to": "$image_anchor",
"layer": 1,
"fill": "$button_image_fill",
"color": "$button_image_color"
}
},
{
"button_content": {
"type": "panel",
"$button_content_size|default": [ "100% - 6px", "100% - 6px" ],
"size": "$button_content_size",
"controls": [
{
"$button_type_panel@$button_type_panel": {
"layer": 3
}
}
]
}
},
{
"border@common_buttons.focus_border": {
"color": "$border_color",
"layer": "$border_layer",
"alpha": "$border_alpha",
"ignored": "(not $border_visible)"
}
}
]
},
"new_ui_form_fitting_button_panel": {
"type": "panel",
"layer": 1,
"size": "$button_size_override",
"$button_size_override|default": [ "100%c", "100%c" ],
"$focus_border_size_override|default": [ "100%c + 2px", "100%c + 2px" ],
"$button_image_size_override|default": [ "100%c + 2px", "100%c + 2px" ],
"$button_content_size_override|default": [ "100%c + 6px", "100%c + 6px" ],
"$content_alpha|default": 1,
"anchor_from": "$anchor",
"anchor_to": "$anchor",
"controls": [
{
"border@common_buttons.focus_border": {
"color": "$border_color",
"layer": "$border_layer",
"size": "$focus_border_size_override",
"$button_image|default": "common_buttons.button_image",
"controls": [
{
"$button_image@$button_image": {
"size": "$button_image_size_override",
"$form_fitting_min_size|default": [ 0, 0 ],
"min_size": "$form_fitting_min_size",
"layer": 1,
"controls": [
{
"button_content": {
"type": "panel",
"size": "$button_content_size_override",
"controls": [
{
"$button_type_panel@$button_type_panel": {
"layer": 3
}
}
]
}
}
]
}
}
]
}
}
]
},
"new_ui_width_fitting_button_panel": {
"type": "panel",
"layer": 1,
"$button_size_override|default": [ "100%c", "100%" ],
"size": "$button_size_override",
"$content_alpha|default": 1,
"anchor_from": "$anchor",
"anchor_to": "$anchor",
"controls": [
{
"border@common_buttons.focus_border": {
"color": "$border_color",
"layer": "$border_layer",
"size": [ "100%c + 2px", "100%" ],
"$button_image|default": "common_buttons.button_image",
"controls": [
{
"$button_image@$button_image": {
"size": [ "100%c + 2px", "100% - 2px" ],
"layer": 1,
"controls": [
{
"button_content": {
"type": "panel",
"size": [ "100%c + 6px", "100% - 6px" ],
"controls": [
{
"$button_type_panel@$button_type_panel": {
"layer": 3
}
}
]
}
}
]
}
}
]
}
}
]
},
"new_ui_height_fitting_button_panel": {
"type": "panel",
"layer": 1,
"$button_size_override|default": [ "100%", "100%c" ],
"size": "$button_size_override",
"$button_min_size_override|default": [ "100%", "100%c" ],
"min_size": "$button_min_size_override",
"$content_alpha|default": 1,
"$anchor|default": "center",
"anchor_from": "$anchor",
"anchor_to": "$anchor",
"controls": [
{
"border@common_buttons.focus_border": {
"color": "$border_color",
"layer": "$border_layer",
"size": [ "100%", "100%c + 2px" ],
"$button_border_min_size_override|default": [ "100%", "100%c + 2px" ],
"min_size": "$button_border_min_size_override",
"$button_image|default": "common_buttons.button_image",
"controls": [
{
"$button_image@$button_image": {
"size": [ "100% - 2px", "100%c + 2px" ],
"$button_image_min_size_override|default": [ "100% - 2px", "100%c + 2px" ],
"min_size": "$button_image_min_size_override",
"layer": 1,
"$button_image_color|default": [ 1.0, 1.0, 1.0 ],
"color": "$button_image_color",
"controls": [
{
"button_content": {
"type": "panel",
"size": [ "100% - 6px", "100%c + 6px" ],
"controls": [
{
"$button_type_panel@$button_type_panel": {
"layer": 3
}
}
]
}
}
]
}
}
]
}
}
]
},
"borderless_form_fitting_button_panel": {
"type": "panel",
"layer": 1,
"$button_size_override|default": [ "100%c", "100%c" ],
"$button_image|default": "common_buttons.button_image",
"size": "$button_size_override",
"$button_panel_offset|default": [ 0, 0 ],
"offset": "$button_panel_offset",
"$content_alpha|default": 1,
"anchor_from": "$anchor",
"anchor_to": "$anchor",
"controls": [
{
"$button_image@$button_image": {
"size": [ "100%c + 4px", "100%c" ],
"layer": 1,
"controls": [
{
"button_content": {
"type": "panel",
"size": [ "100%c", "100%c" ],
"controls": [
{
"$button_type_panel@$button_type_panel": {
"layer": 3
}
}
]
}
}
]
}
}
]
},
/////////////////////////////////
//
// TEXT BUTTON
//
/////////////////////////////////
// This needs you to define the button mapping and the size of the button
"light_text_button@light_button_assets": {
"$button_offset|default": [ 0, 0 ],
"$button_pressed_offset|default": [ 0, 1 ],
"$button_text|default": "",
"$button_font_size|default": "normal",
"$button_font_scale_factor|default": 1.0,
"$pressed_alpha|default": 1,
"$default_button_alpha|default": 1,
"$default_hover_alpha|default": 1,
"$default_pressed_alpha|default": 1,
"$default_button_pressed_offset|default": [ 0, 1 ],
"$default_text_color|default": "$light_button_default_text_color",
"$hover_text_color|default": "$light_button_hover_text_color",
"$pressed_text_color|default": "$light_button_pressed_text_color",
"$locked_text_color|default": "$light_button_locked_text_color",
// For text bindings
"$button_text_binding_type|default": "none",
"$button_binding_condition|default": "none",
"$button_text_grid_collection_name|default": "",
"$button_type_panel": "common_buttons.new_ui_binding_button_label",
"$button_state_panel|default": "common_buttons.new_ui_button_panel",
// These states are for passing the button state to the button content - do not set these in a parent!
"$default_state|default": false,
"$hover_state|default": false,
"$pressed_state|default": false,
"$locked_state|default": false,
"controls": [
{
"default@$button_state_panel": {
"$new_ui_button_texture": "$default_button_texture",
"$text_color": "$default_text_color",
"$secondary_text_color": "$light_button_secondary_default_text_color",
"$content_alpha": "$default_content_alpha",
"$border_color": "$light_border_default_color",
"$border_layer": 2,
"$default_state": true,
"$button_alpha": "$default_button_alpha",
"layer": 1
}
},
{
"hover@$button_state_panel": {
"$new_ui_button_texture": "$hover_button_texture",
"$text_color": "$hover_text_color",
"$secondary_text_color": "$light_button_secondary_hover_text_color",
"$content_alpha": 1,
"$border_color": "$light_border_hover_color",
"$border_layer": 4,
"$hover_state": true,
"$button_alpha": "$default_hover_alpha",
"layer": 4 // This is several layers higher than default in case two buttons share a border and that shared border needs to turn with with either button hover/press state
}
},
{
"pressed@$button_state_panel": {
"$new_ui_button_texture": "$pressed_button_texture",
"$text_color": "$pressed_text_color",
"$secondary_text_color": "$light_button_secondary_pressed_text_color",
"$button_offset|default": "$button_pressed_offset",
"$content_alpha": "$pressed_alpha",
"$border_color": "$light_border_pressed_color",
"$border_layer": 5,
"$pressed_state": true,
"$button_alpha": "$default_pressed_alpha",
"layer": 5
}
},
{
"locked@$button_state_panel": {
"$new_ui_button_texture": "$locked_button_texture",
"$text_color": "$locked_text_color",
"$secondary_text_color": "$light_button_secondary_locked_text_color",
"$content_alpha": "$locked_alpha",
"$border_color": "$light_border_locked_color",
"$button_image": "common_buttons.locked_button_image",
"$border_layer": 1,
"$locked_state": true,
"layer": 1
}
}
]
},
"dark_text_button@dark_button_assets": {
"$button_offset|default": [ 0, 0 ],
"$button_pressed_offset|default": [ 0, 1 ],
"$button_text|default": "",
"$pressed_alpha|default": 1,
// For text bindings
"$button_text_binding_type|default": "none",
"$button_binding_condition|default": "none",
"$button_text_grid_collection_name|default": "",
"$button_type_panel": "common_buttons.new_ui_binding_button_label",
"$button_state_panel|default": "common_buttons.new_ui_button_panel",
// These states are for passing the button state to the button content - do not set these in a parent!
"$default_state|default": false,
"$hover_state|default": false,
"$pressed_state|default": false,
"$locked_state|default": false,
"controls": [
{
"default@$button_state_panel": {
"$new_ui_button_texture": "$default_button_texture",
"$text_color": "$dark_button_default_text_color",
"$secondary_text_color": "$dark_button_secondary_default_text_color",
"$content_alpha": 1,
"$border_color": "$dark_border_default_color",
"$border_layer": 2,
"$default_state": true,
"layer": 1
}
},
{
"hover@$button_state_panel": {
"$new_ui_button_texture": "$hover_button_texture",
"$text_color": "$dark_button_hover_text_color",
"$secondary_text_color": "$dark_button_secondary_hover_text_color",
"$content_alpha": 1,
"$border_color": "$dark_border_hover_color",
"$border_layer": 4,
"$hover_state": true,
"layer": 4 // This is several layers higher than default in case two buttons share a border and that shared border needs to turn with with either button hover/press state
}
},
{
"pressed@$button_state_panel": {
"$new_ui_button_texture": "$pressed_button_texture",
"$text_color": "$dark_button_pressed_text_color",
"$secondary_text_color": "$dark_button_secondary_pressed_text_color",
"$button_offset|default": "$button_pressed_offset",
"$content_alpha": "$pressed_alpha",
"$border_color": "$dark_border_pressed_color",
"$border_layer": 5,
"$pressed_state": true,
"layer": 5
}
},
{
"locked@$button_state_panel": {
"$new_ui_button_texture": "$locked_button_texture",
"$text_color": "$dark_button_locked_text_color",
"$secondary_text_color": "$dark_button_secondary_locked_text_color",
"$content_alpha": "$locked_alpha",
"$border_color": "$dark_border_locked_color",
"$button_image": "common_buttons.locked_button_image",
"$border_layer": 1,
"$locked_state": true,
"layer": 1
}
}
]
},
"new_ui_binding_button_label": {
"type": "label",
"layer": 2,
"text": "$button_text",
"color": "$text_color",
"$font_type|default": "default",
"font_type": "$font_type",
"font_size": "$button_font_size",
"$button_font_scale_factor|default": 1.0,
"font_scale_factor": "$button_font_scale_factor",
"$button_font_size|default": "normal",
"$new_ui_label_offset|default": "$button_offset",
"offset": "$new_ui_label_offset",
"$anchor|default": "center",
"anchor_from": "$anchor",
"anchor_to": "$anchor",
"shadow": false,
"$button_text_size|default": [ "default", "default" ],
"size": "$button_text_size",
"$button_text_max_size|default": [ "100%", 10 ], // Per design buttons are single line text only
"max_size": "$button_text_max_size",
"$text_alignment|default": "center",
"text_alignment": "$text_alignment",
"$tts_section_header|default": "",
"tts_section_header": "$tts_section_header",
"$button_text_collection_details|default": "none",
"$button_text_collection_prefix|default": "",
"bindings": [
{
"binding_type": "$button_text_collection_details",
"binding_collection_name": "$button_text_grid_collection_name",
"binding_collection_prefix": "$button_text_collection_prefix"
},
{
"binding_type": "$button_text_binding_type",
"binding_condition": "$button_binding_condition",
"binding_collection_name": "$button_text_grid_collection_name",
"binding_name": "$button_text",
"binding_name_override": "$button_text"
}
]
},
"underline_button@common.button": {
"size": [ "100%c", "100%c" ],
"$underline_button_size|default": [ "100%c", "100%c" ],
"$single_label_size": [ "default", 8 ],
"$single_line_font_scale_factor": 0.8,
"$pressed_button_name|default": "",
"$mashup_collection_binding_type|default": "global",
"$mashup_collection_name|default": "",
"controls": [
{
"default": {
"type": "panel",
"size": "$underline_button_size",
"controls": [
{
"label_default@common.single_line_label": {
"$single_line_label_color": "$dark_button_default_text_color",
"$underline_control": [
{
"underline_default@common.underline": {}
}
]
}
}
]
}
},
{
"hover": {
"type": "panel",
"size": "$underline_button_size",
"controls": [
{
"label_hover@common.single_line_label": {
"$single_line_label_color|default": [ 0.215, 0.839, 0.118 ],
"$underline_control": [
{
"underline_hover@common.underline": {
"$texture": "textures/ui/underline_focus"
}
}
]
}
}
]
}
},
{
"pressed": {
"type": "panel",
"size": "$underline_button_size",
"controls": [
{
"label_hover@common.single_line_label": {
"$single_line_label_color|default": [ 0.215, 0.839, 0.118 ],
"$underline_control": [
{
"underline_hover@common.underline": {
"$texture": "textures/ui/underline_focus"
}
}
]
}
}
]
}
}
]
},
"read_button": {
"type": "panel",
"size": [ "100%", "100%c" ],
"$offset|default": [ 0, 0 ],
"controls": [
{
"read_button_inner@common_buttons.underline_button": {
"anchor_from": "bottom_right",
"anchor_to": "bottom_right",
"offset": "$offset",
"$bindings|default": [],
"bindings": "$bindings"
}
}
]
},
/////////////////////////////////
//
// FORM FITTING CONTENT BUTTON
//
/////////////////////////////////
// Max size will be the size specified for the button, otherwise will shrink the width to fit the text, also only single line
// The default height of the button will be 20 texels which is the minimum required for touch target size
"light_content_form_fitting_button@common_buttons.light_content_button": {
"size": [ "100%c", "20px" ],
"$button_state_panel|default": "common_buttons.new_ui_form_fitting_button_panel",
"$anchor": "top_left", // Cannot override this or will cause unsolvable layout!
"$button_offset|default": [ 3, 3 ],
"$button_pressed_offset|default": [ 3, 4 ],
"$button_type_panel": "common_buttons.horizontal_form_fitting"
},
"dark_content_form_fitting_button@common_buttons.dark_content_button": {
"size": [ "100%c", "20px" ],
"$button_state_panel|default": "common_buttons.new_ui_form_fitting_button_panel",
"$anchor": "top_left", // Cannot override this or will cause unsolvable layout!
"$button_offset|default": [ 3, 3 ],
"$button_pressed_offset|default": [ 3, 4 ],
"$button_type_panel": "common_buttons.horizontal_form_fitting"
},
/////////////////////////////////
//
// FORM FITTING TEXT BUTTON
//
/////////////////////////////////
// Max size will be the size specified for the button, otherwise will shrink the width to fit the text, also only single line
// The default height of the button will be 20 texels which is the minimum required for touch target size
"light_text_form_fitting_button@common_buttons.light_text_button": {
"size": [ "100%c", "100%c" ],
"$button_state_panel|default": "common_buttons.new_ui_form_fitting_button_panel",
"$anchor": "top_left", // Cannot override this or will cause unsolvable layout!
"$button_offset|default": [ 3, 3 ],
"$button_pressed_offset|default": [ 3, 4 ],
"$button_text_max_size": [ "100%c", 10 ]
},
"dark_text_form_fitting_button@common_buttons.dark_text_button": {
"size": [ "100%c", "100%c" ],
"$button_state_panel|default": "common_buttons.new_ui_form_fitting_button_panel",
"$anchor": "top_left", // Cannot override this or will cause unsolvable layout!
"$button_offset|default": [ 3, 3 ],
"$button_pressed_offset|default": [ 3, 4 ],
"$button_text_max_size": [ "100%c", 10 ]
},
/////////////////////////////////
//
// GENERIC CONTENT BUTTON
//
/////////////////////////////////
"transparent_content_button@common_buttons.light_content_button": {
"anchor_from": "bottom_right",
"anchor_to": "bottom_right",
"layer": 2,
"$default_button_texture": "textures/ui/imagetaggedcorner",
"$hover_button_texture": "textures/ui/imagetaggedcorner",
"$pressed_button_texture": "textures/ui/imagetaggedcorner",
"$locked_button_texture": "textures/ui/imagetaggedcorner",
"$default_color": "white",
"$default_font": "smooth",
"$button_offset": [ 0, 0 ],
"$border_visible": false,
"$default_state_border_visible": false,
"$hover_state_border_visible": false,
"$pressed_state_border_visible": false,
"$locked_state_border_visible": false
},
"single_image_with_border_button@common_buttons.light_content_button": {
"$button_offset": [ 0, 0 ],
"$button_content|default": "common.empty_panel",
"$button_image_visible": false,
"$button_content_size": [ "100% - 2px", "100% - 2px" ]
},
"light_content_button@light_button_assets": {
"$button_offset|default": [ 0, 0 ],
"$button_pressed_offset|default": [ 0, 1 ],
"$pressed_alpha|default": 1,
"$button_type_panel|default": "common_buttons.button_content_panel",
"$button_content|default": "common.empty_panel",
"$button_state_panel|default": "common_buttons.new_ui_button_panel",
"$default_button_alpha|default": 1,
"$default_hover_alpha|default": 1,
"$default_pressed_alpha|default": 1,
"$border_default_alpha|default": 1,
"$border_default_layer|default": 2,
"$border_hover_layer|default": 3,
"$border_pressed_layer|default": 3,
"$border_locked_layer|default": 1,
// These states are for passing the button state to the button content - do not set these in a parent!
"$default_state|default": false,
"$hover_state|default": false,
"$pressed_state|default": false,
"$locked_state|default": false,
"$default_state_border_visible|default": true,
"$hover_state_border_visible|default": true,
"$pressed_state_border_visible|default": true,
"$locked_state_border_visible|default": true,
"$default_text_color|default": "$light_button_default_text_color",
"controls": [
{
"default@$button_state_panel": {
"$new_ui_button_texture": "$default_button_texture",
"$text_color": "$default_text_color",
"$content_alpha": "$default_content_alpha",
"$secondary_text_color": "$light_button_secondary_default_text_color",
"$glyph_color": "$light_glyph_default_color",
"$border_color": "$light_border_default_color",
"$button_alpha": "$default_button_alpha",
"$border_visible": "$default_state_border_visible",
"$border_layer": "$border_default_layer",
"$default_state": true,
"$border_alpha": "$border_default_alpha",
"layer": 1
}
},
{
"hover@$button_state_panel": {
"$new_ui_button_texture": "$hover_button_texture",
"$text_color": "$light_button_hover_text_color",
"$secondary_text_color": "$light_button_secondary_hover_text_color",
"$glyph_color": "$light_glyph_hover_color",
"$content_alpha": "$hover_content_alpha",
"$border_color": "$light_border_hover_color",
"$border_visible": "$hover_state_border_visible",
"$border_layer": "$border_hover_layer",
"$hover_state": true,
"$button_alpha": "$default_hover_alpha",
"layer": 2
}
},
{
"pressed@$button_state_panel": {
"$new_ui_button_texture": "$pressed_button_texture",
"$text_color": "$light_button_pressed_text_color",
"$secondary_text_color": "$light_button_secondary_pressed_text_color",
"$glyph_color": "$light_glyph_pressed_color",
"$content_alpha": "$pressed_alpha",
"$button_offset": "$button_pressed_offset",
"$border_color": "$light_border_pressed_color",
"$border_visible": "$pressed_state_border_visible",
"$border_layer": "$border_pressed_layer",
"$button_alpha": "$default_pressed_alpha",
"$pressed_state": true,
"layer": 3
}
},
{
"locked@$button_state_panel": {
"$new_ui_button_texture": "$locked_button_texture",
"$text_color": "$light_button_locked_text_color",
"$secondary_text_color": "$light_button_secondary_locked_text_color",
"$glyph_color": "$light_glyph_locked_color",
"$content_alpha": "$locked_alpha",
"$border_color": "$light_border_locked_color",
"$button_image": "common_buttons.locked_button_image",
"$border_visible": "$locked_state_border_visible",
"$border_layer": "$border_locked_layer",
"$locked_state": true,
"layer": 1
}
}
]
},
"light_content_button_control_content@common_buttons.light_content_button": {
"$button_content|default": "common.empty_panel",
"$button_content_hover|default": "common.empty_panel",
"$button_content_pressed|default": "common.empty_panel",
"$button_content_locked|default": "common.empty_panel",
"controls": [
{
"default@$button_state_panel": {
"$button_content": "$button_content",
"$new_ui_button_texture": "$default_button_texture",
"$text_color": "$default_text_color",
"$content_alpha": "$default_content_alpha",
"$secondary_text_color": "$light_button_secondary_default_text_color",
"$glyph_color": "$light_glyph_default_color",
"$border_color": "$light_border_default_color",
"$button_alpha": "$default_button_alpha",
"$border_visible": "$default_state_border_visible",
"$border_layer": 2,
"$default_state": true,
"$border_alpha": "$border_default_alpha",
"layer": 1
}
},
{
"hover@$button_state_panel": {
"$button_content": "$button_content_hover",
"$new_ui_button_texture": "$hover_button_texture",
"$text_color": "$light_button_hover_text_color",
"$secondary_text_color": "$light_button_secondary_hover_text_color",
"$glyph_color": "$light_glyph_hover_color",
"$content_alpha": "$hover_content_alpha",
"$border_color": "$light_border_hover_color",
"$border_visible": "$hover_state_border_visible",
"$border_layer": 3,
"$hover_state": true,
"$button_alpha": "$default_hover_alpha",
"layer": 2
}
},
{
"pressed@$button_state_panel": {
"$button_content": "$button_content_pressed",
"$new_ui_button_texture": "$pressed_button_texture",
"$text_color": "$light_button_pressed_text_color",
"$secondary_text_color": "$light_button_secondary_pressed_text_color",
"$glyph_color": "$light_glyph_pressed_color",
"$content_alpha": "$pressed_alpha",
"$button_offset": "$button_pressed_offset",
"$border_color": "$light_border_pressed_color",
"$border_visible": "$pressed_state_border_visible",
"$border_layer": 3,
"$button_alpha": "$default_pressed_alpha",
"$pressed_state": true,
"layer": 3
}
},
{
"locked@$button_state_panel": {
"$button_content": "$button_content_locked",
"$new_ui_button_texture": "$locked_button_texture",
"$text_color": "$light_button_locked_text_color",
"$secondary_text_color": "$light_button_secondary_locked_text_color",
"$glyph_color": "$light_glyph_locked_color",
"$content_alpha": "$locked_alpha",
"$border_color": "$light_border_locked_color",
"$button_image": "common_buttons.locked_button_image",
"$border_visible": "$locked_state_border_visible",
"$border_layer": 1,
"$locked_state": true,
"layer": 1
}
}
]
},
"deactivated_light_content_button@common_buttons.light_content_button": {
"$default_button_texture": "textures/ui/disabledButtonNoBorder",
"$hover_button_texture": "textures/ui/disabledButtonNoBorder",
"$pressed_button_texture": "textures/ui/disabledButtonNoBorder",
"$locked_button_texture": "textures/ui/disabledButtonNoBorder"
},
"dark_content_button@dark_button_assets": {
"$button_offset|default": [ 0, 0 ],
"$button_pressed_offset|default": [ 0, 1 ],
"$pressed_alpha|default": 1,
"$button_type_panel|default": "common_buttons.button_content_panel",
"$button_content|default": "common.empty_panel",
"$button_state_panel|default": "common_buttons.new_ui_button_panel",
// These states are for passing the button state to the button content - do not set these in a parent!
"$default_state|default": false,
"$hover_state|default": false,
"$pressed_state|default": false,
"$locked_state|default": false,
"$hover_button_image_fill|default": false,
"$hover_content_alpha|default": 1,
"$hover_button_image_color|default": [ 1.0, 1.0, 1.0 ],
"controls": [
{
"default@$button_state_panel": {
"$new_ui_button_texture": "$default_button_texture",
"$text_color": "$dark_button_default_text_color",
"$secondary_text_color": "$dark_button_secondary_default_text_color",
"$glyph_color": "$dark_glyph_default_color",
"$content_alpha": 1,
"$border_color": "$dark_border_default_color",
"$border_layer": 2,
"$default_state": true,
"layer": 1
}
},
{
"hover@$button_state_panel": {
"$new_ui_button_texture": "$hover_button_texture",
"$text_color": "$dark_button_hover_text_color",
"$secondary_text_color": "$dark_button_secondary_hover_text_color",
"$glyph_color": "$dark_glyph_hover_color",
"$content_alpha": "$hover_content_alpha",
"$border_color": "$dark_border_hover_color",
"$border_layer": 3,
"$hover_state": true,
"layer": 2,
"$button_image_fill": "$hover_button_image_fill",
"$button_image_color": "$hover_button_image_color"
}
},
{
"pressed@$button_state_panel": {
"$new_ui_button_texture": "$pressed_button_texture",
"$text_color": "$dark_button_pressed_text_color",
"$secondary_text_color": "$dark_button_secondary_pressed_text_color",
"$glyph_color": "$dark_glyph_pressed_color",
"$content_alpha": "$pressed_alpha",
"$button_offset": "$button_pressed_offset",
"$border_color": "$dark_border_pressed_color",
"$border_layer": 3,
"$pressed_state": true,
"layer": 3
}
},
{
"locked@$button_state_panel": {
"$new_ui_button_texture": "$locked_button_texture",
"$text_color": "$dark_button_locked_text_color",
"$secondary_text_color": "$dark_button_secondary_locked_text_color",
"$glyph_color": "$dark_glyph_locked_color",
"$content_alpha": "$locked_alpha",
"$border_color": "$dark_border_locked_color",
"$button_image": "common_buttons.locked_button_image",
"$border_layer": 1,
"$locked_state": true,
"layer": 1
}
}
]
},
"no_background_content_button@common.button": {
"size": [ "100%c", "100%c" ],
"$button_state_panel": "common_buttons.borderless_form_fitting_button_panel",
"$anchor": "top_left", // Cannot override this or will cause unsolvable layout!
"$button_text_max_size": [ "100%c", 10 ],
"$button_offset|default": [ 0, 3 ],
"$pressed_button_offset|default": [ 0, 4 ],
"$pressed_alpha|default": 1,
"$locked_alpha": 1,
// text color
"$default_text_color|default": "$light_button_default_text_color",
"$hover_text_color|default": "$light_button_hover_text_color",
"$pressed_text_color|default": "$light_button_pressed_text_color",
// For text bindings
"$button_text_binding_type|default": "none",
"$button_binding_condition|default": "none",
"$button_text_grid_collection_name|default": "",
"$button_type_panel": "common_buttons.button_content_panel",
"$border_visible": false,
"$button_image_visible": false,
"$button_content|default": "common.empty_panel",
"$button_image|default": "common.empty_panel",
// These states are for passing the button state to the button content - do not set these in a parent!
"$default_state|default": false,
"$hover_state|default": false,
"$pressed_state|default": false,
"$locked_state|default": false,
"locked_control": "locked",
"$default_button_texture|default": "",
"$locked_button_texture|default": "textures/ui/disabledButtonNoBorder",
"controls": [
{
"default@$button_state_panel": {
"$new_ui_button_texture": "$default_button_texture",
"$text_color": "$default_text_color",
"$secondary_text_color": "$light_button_secondary_default_text_color",
"$glyph_color": "$light_glyph_default_color",
"$button_image_visible": false,
"$content_alpha": 1,
"$border_color": "$light_border_default_color",
"$border_layer": 2,
"$default_state": true,
"layer": 1
}
},
{
"hover@$button_state_panel": {
"$text_color": "$hover_text_color",
"$secondary_text_color": "$light_button_secondary_hover_text_color",
"$glyph_color": "$light_glyph_hover_color",
"$content_alpha": 1,
"$button_image": "common_buttons.background_button_image",
"$border_color": "$light_border_hover_color",
"$border_layer": 3,
"$hover_state": true,
"layer": 2
}
},
{
"pressed@$button_state_panel": {
"$text_color": "$pressed_text_color",
"$secondary_text_color": "$light_button_secondary_pressed_text_color",
"$glyph_color": "$light_glyph_pressed_color",
"$content_alpha": "$pressed_alpha",
"$button_image": "common_buttons.background_button_image",
"$button_offset": "$pressed_button_offset",
"$border_color": "$light_border_pressed_color",
"$border_layer": 3,
"$pressed_state": true,
"layer": 3
}
},
{
"locked@$button_state_panel": {
"$new_ui_button_texture": "$locked_button_texture",
"$text_color": "$light_button_locked_text_color",
"$secondary_text_color": "$light_button_secondary_locked_text_color",
"$glyph_color": "$light_glyph_locked_color",
"$content_alpha": "$locked_alpha",
"$button_image": "common_buttons.locked_button_image",
"$border_color": "$light_border_locked_color",
"$border_layer": 1,
"$locked_state": true,
"layer": 1
}
}
]
},
"button_content_panel": {
"type": "panel",
"offset": "$button_offset",
"controls": [
{
"content@$button_content": {
"layer": 2
}
}
]
},
"form_fitting_button_content_panel": {
"type": "panel",
"size": [ "100%c", "100%c" ],
"offset": "$button_offset",
"controls": [
{
"content@$button_content": {
"layer": 2
}
}
]
},
"horizontal_form_fitting": {
"type": "panel",
"size": [ "100%c", "100%c" ],
"offset": "$button_offset",
"controls": [
{
"content@$button_content": {
"layer": 2
}
}
]
},
"width_fitting_button_content_panel": {
"type": "panel",
"size": [ "100%c", "100%" ],
"offset": "$button_offset",
"controls": [
{
"content@$button_content": {
"layer": 2
}
}
]
},
"height_fitting_button_content_panel": {
"type": "panel",
"size": [ "100%", "100%c" ],
"offset": "$button_offset",
"controls": [
{
"content@$button_content": {
"layer": 2
}
}
]
},
/////////////////////////////////
//
// GLYPH BUTTON
//
/////////////////////////////////
"light_glyph_button@light_button_assets": {
"$button_content|default": "common.empty_panel",
"$button_content_offset|default": [ 0, 0 ],
"$pressed_alpha|default": 1,
"$button_type_panel": "common_buttons.glyph_content_panel",
"$default_button_alpha|default": 1,
"$default_hover_alpha|default": 1,
"$default_pressed_alpha|default": 1,
"$default_glyph_color|default": "$light_glyph_default_color",
// These states are for passing the button state to the button content - do not set these in a parent!
"$default_state|default": false,
"$hover_state|default": false,
"$pressed_state|default": false,
"$locked_state|default": false,
"$button_default_offset|default": [ 0, 0 ],
"$button_hover_offset|default": [ 0, 0 ],
"$button_pressed_offset|default": [ 0, 1 ],
"$button_locked_offset|default": [ 0, 0 ],
"controls": [
{
"default@common_buttons.new_ui_button_panel": {
"layer": 1,
"$new_ui_button_texture": "$default_button_texture",
"$glyph_color": "$default_glyph_color",
"$content_alpha": "$default_content_alpha",
"$border_color": "$light_border_default_color",
"$border_layer": 2,
"$default_state": true,
"$button_alpha": "$default_button_alpha",
"$button_press_offset": "$button_default_offset"
}
},
{
"hover@common_buttons.new_ui_button_panel": {
"layer": 2,
"$new_ui_button_texture": "$hover_button_texture",
"$glyph_color": "$light_glyph_hover_color",
"$content_alpha": "$hover_content_alpha",
"$border_color": "$light_border_hover_color",
"$border_layer": 3,
"$hover_state": true,
"$button_alpha": "$default_hover_alpha",
"$button_press_offset": "$button_hover_offset"
}
},
{
"pressed@common_buttons.new_ui_button_panel": {
"layer": 3,
"$new_ui_button_texture": "$pressed_button_texture",
"$glyph_color": "$light_glyph_pressed_color",
"$content_alpha": "$pressed_alpha",
"$border_color": "$light_border_pressed_color",
"$border_layer": 3,
"$pressed_state": true,
"$button_alpha": "$default_pressed_alpha",
"$button_press_offset": "$button_pressed_offset"
}
},
{
"locked@common_buttons.new_ui_button_panel": {
"$new_ui_button_texture": "$locked_button_texture",
"$glyph_color": "$light_glyph_locked_color",
"$content_alpha": "$locked_alpha",
"$border_color": "$light_border_locked_color",
"$button_image": "common_buttons.locked_button_image",
"$border_layer": 1,
"$button_press_offset": "$button_locked_offset",
"$locked_state": true,
"layer": 1
}
}
]
},
"dark_glyph_button_default@common_buttons.new_ui_button_panel": {
"$new_ui_button_texture": "$default_button_texture",
"$glyph_color": "$dark_glyph_default_color",
"$border_color": "$dark_border_default_color",
"$border_layer": 2,
"$default_state": true,
"$button_press_offset": [ 0, 0 ],
"layer": 1
},
"dark_glyph_button_hover@common_buttons.new_ui_button_panel": {
"$new_ui_button_texture": "$hover_button_texture",
"$glyph_color": "$dark_glyph_hover_color",
"$border_color": "$dark_border_hover_color",
"$border_layer": 3,
"$hover_state": true,
"$button_press_offset": [ 0, 0 ],
"layer": 2
},
"dark_glyph_button_pressed@common_buttons.new_ui_button_panel": {
"$new_ui_button_texture": "$pressed_button_texture",
"$glyph_color": "$dark_glyph_pressed_color",
"$border_color": "$dark_border_pressed_color",
"$border_layer": 3,
"$pressed_state": true,
"$button_press_offset": [ 0, 1 ],
"layer": 3
},
"dark_glyph_button_locked@common_buttons.new_ui_button_panel": {
"$new_ui_button_texture": "$locked_button_texture",
"$glyph_color": "$dark_glyph_locked_color",
"$content_alpha": "$locked_alpha",
"$border_color": "$dark_border_locked_color",
"$button_image": "common_buttons.locked_button_image",
"$border_layer": 1,
"$button_press_offset": [ 0, 0 ],
"$locked_state": true,
"layer": 1
},
"dark_glyph_button@dark_button_assets": {
"$button_content|default": "common.empty_image",
"$button_content_offset|default": [ 0, 0 ],
"$button_type_panel": "common_buttons.glyph_content_panel",
// These states are for passing the button state to the button content - do not set these in a parent!
"$default_state|default": false,
"$hover_state|default": false,
"$pressed_state|default": false,
"$locked_state|default": false,
"controls": [
{
"default@common_buttons.dark_glyph_button_default": {}
},
{
"hover@common_buttons.dark_glyph_button_hover": {}
},
{
"pressed@common_buttons.dark_glyph_button_pressed": {}
},
{
"locked@common_buttons.dark_glyph_button_locked": {}
}
]
},
"dark_glyph_button_with_custom_control@common_buttons.dark_glyph_button": {
"controls": [
{
"custom_control@$custom_control": {}
},
{
"default@common_buttons.dark_glyph_button_default": {}
},
{
"hover@common_buttons.dark_glyph_button_hover": {}
},
{
"pressed@common_buttons.dark_glyph_button_pressed": {}
},
{
"locked@common_buttons.dark_glyph_button_locked": {}
}
]
},
"glyph_content_panel": {
"type": "panel",
"anchor_from": "top_left",
"anchor_to": "top_left",
"offset": "$button_content_offset",
"controls": [
{
"glyph_button_content@$button_content": {
"color": "$glyph_color",
"layer": 3,
"offset": "$button_press_offset",
"alpha": "$content_alpha"
}
}
]
},
"hyperlink_button@common_buttons.light_text_button": {
"$pressed_button_name": "button.menu_open_uri",
"property_bag": {
"#hyperlink": ""
}
},
"hyperlink_content_button@common_buttons.light_content_button": {
"$pressed_button_name": "button.menu_open_uri",
"property_bag": {
"#hyperlink": ""
}
},
/////////////////////////////////
//
// Content button with label and
// nested buttons
//
/////////////////////////////////
// Main control:
// -nestable_button
//
// Helper controls:
// -dark_nestable_button
// -transparent_label_nestable_button
//
// Helper labels:
// -nested_centered_label_control
// -nested_label_with_image_control
// -nested_six_part_label_control
// General Assets //
// Base definition for state driven assets
//
// <state> - expands to default, hover, pressed, and locked
//
// -- Required Variables --
// $nested_asset_<state>_texture - The image for each state
//
// -- Optional Variables --
// $nested_asset_<state>_alpha - The alpha for each state
// $nested_asset_<state>_color - The color tint for each state
//
"nested_button_assets": {
"type": "image",
"texture": "$nested_asset_texture",
"alpha": "$nested_asset_alpha",
"color": "$nested_asset_color",
"$nested_asset_texture|default": "",
"$nested_asset_alpha|default": "$nested_default_alpha",
"$nested_asset_default_alpha|default": "$nested_default_alpha",
"$nested_asset_hover_alpha|default": "$nested_default_alpha",
"$nested_asset_pressed_alpha|default": "$nested_default_alpha",
"$nested_asset_locked_alpha|default": "$nested_default_alpha",
"$nested_asset_color|default": "$nested_default_color",
"$nested_asset_default_color|default": "$nested_default_color",
"$nested_asset_hover_color|default": "$nested_default_color",
"$nested_asset_pressed_color|default": "$nested_default_color",
"$nested_asset_locked_color|default": "$nested_default_color",
"variables": [
{
"requires": "$default_state",
"$nested_asset_texture": "$nested_asset_default_texture",
"$nested_asset_alpha": "$nested_asset_default_alpha",
"$nested_asset_color": "$nested_asset_default_color"
},
{
"requires": "$hover_state",
"$nested_asset_texture": "$nested_asset_hover_texture",
"$nested_asset_alpha": "$nested_asset_hover_alpha",
"$nested_asset_color": "$nested_asset_hover_color"
},
{
"requires": "$pressed_state",
"$nested_asset_texture": "$nested_asset_pressed_texture",
"$nested_asset_alpha": "$nested_asset_pressed_alpha",
"$nested_asset_color": "$nested_asset_pressed_color"
},
{
"requires": "$locked_state",
"$nested_asset_texture": "$nested_asset_locked_texture",
"$nested_asset_alpha": "$nested_asset_locked_alpha",
"$nested_asset_color": "$nested_asset_locked_color"
}
]
},
// Subtle light overlay
"nested_overlay_assets@common_buttons.nested_button_assets": {
"$nested_asset_default_texture": "textures/ui/clickable_overlay",
"$nested_asset_default_alpha": "$nested_overlay_clickable_alpha",
"$nested_asset_hover_texture": "textures/ui/clickable_overlay",
"$nested_asset_hover_alpha": "$nested_overlay_clickable_alpha",
"$nested_asset_pressed_texture": "textures/ui/clickable_overlay_inverse",
"$nested_asset_pressed_alpha": "$nested_overlay_clickable_alpha",
"$nested_asset_locked_texture": "textures/ui/clickable_overlay",
"$nested_asset_locked_alpha": "$nested_overlay_clickable_alpha"
},
// Label Assets //
// Dark label background with green hover
"nested_label_content_background_assets@common_buttons.nested_button_assets": {
"$nested_asset_default_texture": "textures/ui/White",
"$nested_asset_default_color": "$nested_dark_label_default_color",
"$nested_asset_hover_texture": "textures/ui/White",
"$nested_asset_hover_color": "$nested_dark_label_hover_color",
"$nested_asset_pressed_texture": "textures/ui/White",
"$nested_asset_pressed_color": "$nested_dark_label_pressed_color",
"$nested_asset_locked_texture": "textures/ui/White",
"$nested_asset_locked_color": "$nested_dark_label_default_color"
},
// Background for label content control
"nested_label_background_assets@common_buttons.nested_button_assets": {
"$nested_asset_default_texture": "textures/ui/black_border",
"$nested_asset_hover_texture": "textures/ui/slider_border",
"$nested_asset_pressed_texture": "textures/ui/slider_border",
"$nested_asset_locked_texture": "textures/ui/black_border"
},
// Semitransparent background for label content control
//
// -- Optional Variables --
// $transparent_label_color - The color when not pressed
// $transparent_label_pressed_color - The color when pressed
//
"nested_transparent_label_content_background_assets": {
"type": "panel",
"$transparent_label_color|default": "$nested_transparent_label_default_color",
"$transparent_label_hover_color|default": "$transparent_label_color",
"$transparent_label_pressed_color|default": "$nested_transparent_label_default_pressed_color",
"controls": [
{
"assets@common_buttons.nested_button_assets": {
"$nested_asset_default_texture": "textures/ui/White",
"$nested_asset_default_color": "$transparent_label_color",
"$nested_asset_default_alpha": "$nested_transparent_label_alpha",
"$nested_asset_hover_texture": "textures/ui/White",
"$nested_asset_hover_color": "$transparent_label_hover_color",
"$nested_asset_pressed_texture": "textures/ui/White",
"$nested_asset_pressed_color": "$transparent_label_pressed_color",
"$nested_asset_locked_texture": "textures/ui/White",
"$nested_asset_locked_color": "$transparent_label_color"
}
}
]
},
// Basic label bindings and variables
//
// -- Required Variables --
// $nested_label_text - Label text
//
// -- Optional Variables --
// $nested_label_font_type - Label font type (default: mojangles)
// $nested_label_bindings - Label bindings for dynamic text/type
// $nested_label_color - Label color
// $nested_label_locked_color - Label color when locked
//
"nested_base_label": {
"type": "label",
"shadow": true,
"$nested_label_alignment|default": "center",
"text_alignment": "$nested_label_alignment",
"$nested_label_color|default": "$generic_button_text_color",
"color": "$nested_label_color",
"$nested_label_text|default": "",
"text": "$nested_label_text",
"$nested_label_font_type|default": "default",
"font_type": "$nested_label_font_type",
"$nested_label_bindings|default": [],
"bindings": "$nested_label_bindings"
},
// Centered label
//
// -- Required Variables --
// See common_buttons.nested_base_label for more
//
// -- Optional Variables --
// $nested_label_max_size - For clipping label text
//
"nested_centered_label_control": {
"type": "panel",
"controls": [
{
"label@common_buttons.nested_base_label": {
"$nested_label_max_size|default": [ "100% - 2px", "100% - 2px" ],
"max_size": "$nested_label_max_size"
}
}
]
},
// Label left justified with image prefix
//
// -- Required Variables --
// $nested_label_image - Prefix image
// See common_buttons.nested_base_label for more
//
// -- Optional Variables --
// $nested_label_max_size - For clipping label text (should be fine as is)
//
"nested_label_with_image_control": {
"type": "stack_panel",
"orientation": "horizontal",
"size": [ "100% - 6px", "100% - 3px" ],
"offset": [ 0, -0.5 ],
"controls": [
{
"image": {
"type": "image",
"$nested_label_image|default": "",
"texture": "$nested_label_image",
"size": [ "100%y", "100%" ],
"$nested_label_image_bindings|default": [],
"bindings": "$nested_label_image_bindings"
}
},
{
"image_to_label_padding@common.empty_panel": {
"size": [ 4, "100%" ]
}
},
{
"label_panel": {
"type": "panel",
"size": [ "fill", "100%" ],
"controls": [
{
"label@common_buttons.nested_base_label": {
"anchor_from": "left_middle",
"anchor_to": "left_middle",
"$nested_label_max_size|default": [ "100%", "100%" ],
"max_size": "$nested_label_max_size"
}
}
]
}
}
]
},
// Empty definition for a six part label
"nested_six_part_empty_definition": {
"type": "label",
"text": "",
"color": "$generic_button_text_color"
},
// Label in each corner of the label control
//
// -- Optional Variables --
// <side> - Expands to left/right
// <anchor> - Expands to top/middle/bottom
// $<side>_<anchor>_label_definition - Json object that defines all required label variables (needs "type: label" and at least text and color)
//
"nested_six_part_label_control": {
"type": "panel",
"size": [ "100% - 6px", "100% - 2px" ],
"offset": [ 0, -1 ],
"$left_top_label_definition|default": "common_buttons.nested_six_part_empty_definition",
"$left_middle_label_definition|default": "common_buttons.nested_six_part_empty_definition",
"$left_bottom_label_definition|default": "common_buttons.nested_six_part_empty_definition",
"$right_top_label_definition|default": "common_buttons.nested_six_part_empty_definition",
"$right_middle_label_definition|default": "common_buttons.nested_six_part_empty_definition",
"$right_bottom_label_definition|default": "common_buttons.nested_six_part_empty_definition",
"controls": [
{
"left_top_label@$left_top_label_definition": {
"anchor_from": "top_left",
"anchor_to": "top_left"
}
},
{
"left_middle_label@$left_middle_label_definition": {
"anchor_from": "left_middle",
"anchor_to": "left_middle"
}
},
{
"left_bottom_label@$left_bottom_label_definition": {
"anchor_from": "bottom_left",
"anchor_to": "bottom_left"
}
},
{
"right_top_label@$right_top_label_definition": {
"anchor_from": "top_right",
"anchor_to": "top_right"
}
},
{
"right_middle_label@$right_middle_label_definition": {
"anchor_from": "right_middle",
"anchor_to": "right_middle"
}
},
{
"right_bottom_label@$right_bottom_label_definition": {
"anchor_from": "bottom_right",
"anchor_to": "bottom_right"
}
}
]
},
// Content Assets //
// Solid color content assets
"nested_dark_button_assets@common_buttons.nested_button_assets": {
"$nested_asset_default_texture": "textures/ui/White",
"$nested_asset_default_color": "$nested_dark_content_default_color",
"$nested_asset_hover_texture": "textures/ui/White",
"$nested_asset_hover_color": "$nested_dark_content_hover_color",
"$nested_asset_pressed_texture": "textures/ui/White",
"$nested_asset_pressed_color": "$nested_dark_content_pressed_color",
"$nested_asset_locked_texture": "textures/ui/White",
"$nested_asset_locked_color": "$nested_dark_content_default_color"
},
// Background for button content control
"nested_content_background_assets@common_buttons.nested_button_assets": {
"$nested_asset_default_texture": "textures/ui/Black",
"$nested_asset_hover_texture": "textures/ui/White",
"$nested_asset_pressed_texture": "textures/ui/White",
"$nested_asset_locked_texture": "textures/ui/Black"
},
// Darkened overlay for unselected buttons
"nested_content_overlay_assets@common_buttons.nested_button_assets": {
"$nested_asset_default_texture|default": "textures/ui/Black",
"$nested_asset_default_alpha": "$nested_content_unfocused_overlay_alpha",
"$nested_asset_hover_texture": "",
"$nested_asset_pressed_texture": "",
"$nested_asset_locked_texture": ""
},
// Solid color background with image in center
//
// -- Required Variables --
// $nested_control_image - The texture for the center image
//
// -- Optional Variables --
// $nested_control_image_size - The size of the image (default: [ 22, 22 ])
//
"nested_dark_control_with_image": {
"type": "panel",
"controls": [
{ "background@common_buttons.nested_dark_button_assets": {} },
{
"image_panel": {
"type": "panel",
"size": [ 22, 22 ],
"offset": [ 0, 1.5 ],
"layer": 1,
"controls": [
{
"image": {
"type": "image",
"$nested_control_image_size": [ "100%", "100%" ],
"size": "$nested_control_image_size",
"$nested_control_image|default": "",
"texture": "$nested_control_image"
}
}
]
}
}
]
},
// Controls //
// NESTED BUTTON DOCUMENTATION:
//
// -- For Nested Content --
// If using nested content all variables in this section required
// setUpCallbacksForNestedButton(
// $pressed_button_name,
// $nested_content_visibility_binding, - The binding name for nested visibility
// firstControlName - The name of the control that will recieve focus after the base button is pressed
// ignoredButtons - (optional) A vector of button names to ignore (default: { StringHash("button.scrollbar_touch") })
// );
// $nested_content_controls - The nested controls (parent size based on its sibling)
// $has_nested_controls - Set to true to use
//
// -- Advanced Nested Content --
// For factory built nestable buttons
// $has_special_nested_controls - Set to true to use
// $nested_content_controls - The nested controls (parent size based on its sibling)
// $special_nested_content_bindings - Bindings array for the nested controls
// $special_nested_button_bindings - Bindings array for the button
//
//
// -- Required Variables --
// $pressed_button_name, - The button name for the base button
//
// $nested_button_content_size - The size for the upper control
// $nested_content_control - The control for the upper part of the button (can make use of $default_state, $hover_state, $pressed_state, $locked_state)
//
// $nested_button_label_size - The size for the label control (can use "100%sm" for the x to keep consistent with top control)
// $nested_label_control_background: The background behind the label control
// $nested_label_control: The control for the background of the label (can make use of $default_state, $hover_state, $pressed_state, $locked_state)
//
// -- Other Variables --
// any common.button variable
//
// $nested_button_overlay - The overlay for the entire button (default: common_buttons.nested_overlay_assets)
// $nested_content_background_assets - The assets behind the button content control (default: common_buttons.nested_background_assets)
// $nested_content_overlay_assets - The assets to overlay the content (default: common.empty_panel)
// $nested_content_label_padding - If true adds a single texel gap between content and label (default: false)
// $nested_label_background_assets - The assets behind the label control (default: common_buttons.nested_label_background_assets)
// $nested_content_dark_alpha - The black overlay to display when nested content is shown
//
// $use_parent_size - If true will use parent size to size buttons (still needs $nested_button_content_size
// and $nested_button_label_size, will also need to set $nestable_button_size)
// If false uses content size (default: false)
// $nestable_button_size - The size of the button (default: [ "100%cm", "100%cm" ]
//
"nestable_button": {
"$use_parent_size|default": false,
"$nestable_button_size|default": [ "100%cm", "100%cm" ],
"size": "$nestable_button_size",
"type": "panel",
"$has_nested_controls|default": false,
"$has_special_nested_controls|default": false,
"$has_special_button_bindings|default": false,
"$has_padding_for_content_and_label|default": false,
"$nested_content_visibility_binding|default": "",
"controls": [
{
"nested_controls_panel": {
"ignored": "(not $has_nested_controls and not $has_special_nested_controls)",
"$nested_content_dark_alpha|default": 0.8,
"type": "input_panel",
"size": [ "100%sm", "100%sm" ],
"layer": 10,
"button_mappings": [
{
"from_button_id": "button.menu_select",
"to_button_id": "button.nested_background",
"mapping_type": "pressed"
},
{
"from_button_id": "button.menu_ok",
"to_button_id": "button.nested_background",
"mapping_type": "focused"
}
],
"$_nested_content_visibility_binding|default": [
{
"binding_name": "$nested_content_visibility_binding",
"binding_name_override": "#visible"
}
],
"variables": [
{
"requires": "$has_special_nested_controls",
"$_nested_content_visibility_binding": "$special_nested_content_bindings"
}
],
"bindings": "$_nested_content_visibility_binding",
"controls": [
{
"locked_overlay": {
"type": "image",
"texture": "textures/ui/Black",
"alpha": "$nested_content_dark_alpha"
}
},
{ "nested_controls@$nested_content_controls": {} }
]
}
},
{
"base_button@common.button": {
"locked_control": "locked",
"layer": 1,
"$default_state|default": false,
"$hover_state|default": false,
"$pressed_state|default": false,
"$locked_state|default": false,
"variables": [
{
"requires": "$has_nested_controls",
"$button_bindings": [
{
"binding_name": "(not $nested_content_visibility_binding)",
"binding_name_override": "#enabled"
}
]
},
{
"requires": "($has_special_nested_controls or $has_special_button_bindings)",
"$button_bindings": "$special_nested_button_bindings"
},
{
"requires": "$use_parent_size",
"$_nested_button_size": [ "100%", "100%" ]
}
],
"$_nested_button_size|default": [ "100%c", "100%c" ],
"size": "$_nested_button_size",
"controls": [
{
"default@common_buttons.nested_button_base": {
"$default_state": true
}
},
{
"hover@common_buttons.nested_button_base": {
"$hover_state": true
}
},
{
"pressed@common_buttons.nested_button_base": {
"$pressed_state": true
}
},
{
"locked@common_buttons.nested_button_base": {
"$locked_state": true
}
}
]
}
}
]
},
// The base button control for the nested button
//
// Variables documented in parent control
//
"nested_button_base": {
"type": "panel",
"$nested_button_overlay|default": "common_buttons.nested_overlay_assets",
"controls": [
{
"button_overlay@$nested_button_overlay": {
"size": [ "100%sm", "100%sm" ],
"layer": 3
}
},
{
"button_control": {
"type": "stack_panel",
"orientation": "vertical",
"layer": 1,
"controls": [
{
"control_area": {
"type": "panel",
"size": "$nested_button_content_size",
"$nested_content_background_assets|default": "common_buttons.nested_content_background_assets",
"$nested_content_overlay_assets|default": "common.empty_panel",
"controls": [
{
"background@$nested_content_background_assets": {
"layer": -1,
"size": [ "100%sm + 2px", "100%sm + 1px" ],
"offset": [ 0, -0.5 ]
}
},
{ "control@$nested_content_control": {} },
{ "overlay@$nested_content_overlay_assets": { "layer": 1 } }
]
}
},
{
"button_stack_padding@common.empty_panel": {
"$nested_content_label_padding|default": false,
"$_content_to_label_padding_size|default": "$nested_no_padding",
"size": "$_content_to_label_padding_size",
"variables": [
{
"requires": "$nested_content_label_padding",
"$_content_to_label_padding_size": "$nested_one_pixel_padding"
}
]
}
},
{
"label_area": {
"type": "panel",
"size": "$nested_button_label_size",
"$nested_label_background_assets|default": "common_buttons.nested_label_background_assets",
"controls": [
{
"background@$nested_label_background_assets": {
"layer": -1,
"size": [ "100%sm + 2px", "100%sm + 2px" ]
}
},
{ "control_background@$nested_label_control_background": {} },
{ "control@$nested_label_control": { "layer": 1 } }
]
}
}
],
"$_nested_button_control_size|default": [ "100%cm", "100%c" ],
"size": "$_nested_button_control_size",
"variables": [
{
"requires": "$use_parent_size",
"$_nested_button_control_size": [ "100%", "100%" ]
}
]
}
}
],
"$_nested_button_base_size|default": [ "100%cm + 2px", "100%cm + 2px" ],
"size": "$_nested_button_base_size",
"variables": [
{
"requires": "$use_parent_size",
"$_nested_button_base_size": [ "100% - 2px", "100% - 2px" ]
}
]
},
// Helpers //
// Solid button with image and centered label
//
// -- Required Variables --
// $pressed_button_name - The button name for the base button
//
// $nested_button_content_size - Content control size
// $nested_control_image - Content image
//
// $nested_button_label_size - Label control size
// $nested_label_text - Label text
//
"dark_nestable_button@common_buttons.nestable_button": {
"$nested_content_control": "common_buttons.nested_dark_control_with_image",
"$nested_label_control_background": "common_buttons.nested_label_content_background_assets",
"$nested_label_control": "common_buttons.nested_centered_label_control"
},
// Content control is user defined
// Label has a semi transparent background with a image prefix before the label
//
// -- Required Variables --
// $pressed_button_name - The button name for the base button
//
// $nested_button_content_size - Content control size
// $nested_content_control - The upper content control
//
// $nested_button_label_size - Label control size
// $nested_label_control - The label content control
//
// -- Optional Variables --
// $nested_content_overlay_assets - The assets to overlay the content (default: common.nested_content_overlay_assets)
//
// $nested_label_control_background - The background behind the label control (default: common_buttons.nested_transparent_label_content_background_assets)
// $transparent_label_color - The color of the label when not pressed (can use if default $nested_label_control_background)
// $transparent_label_pressed_color - The color of the label when pressed (can use if default $nested_label_control_background)
// $nested_transparent_label_alpha - The alpha of the label background (default: 0.8, can use if default $nested_label_control_background)
//
"transparent_label_nestable_button@common_buttons.nestable_button": {
"$nested_content_overlay_assets": "common_buttons.nested_content_overlay_assets",
"$nested_content_label_padding": true,
"$nested_label_control_background": "common_buttons.nested_transparent_label_content_background_assets"
},
////////// Tool Tip Types //////////
"static_tooltip_notification_panel@common.button": {
"size": [ "100%", "100%" ],
"sound_volume": 0.0,
"layer": 1,
// background textures
"$tooltip_button_default_texture|default": "textures/ui/tooltip_notification_default_background",
"$tooltip_button_pressed_texture|default": "textures/ui/tooltip_notification_default_background",
"$tooltip_button_hover_texture|default": "textures/ui/tooltip_notification_default_background",
"$tooltip_button_locked_texture|default": "textures/ui/tooltip_notification_default_background",
"$tooltip_button_content_size|default": [ "100%", "100%" ],
// binding vars (should be same for all children)
"$tooltip_button_binding_type|default": "global",
"$tooltip_button_collection_name|default": "",
"locked_control": "locked",
"$tooltip_hovered_to_button_id|default": "button.is_hovered",
"button_mappings": [
{
"from_button_id": "button.menu_select",
"to_button_id": "$pressed_button_name",
"mapping_type": "pressed"
},
{
"from_button_id": "button.menu_ok",
"to_button_id": "$pressed_button_name",
"mapping_type": "focused"
},
{
"to_button_id": "$tooltip_hovered_to_button_id",
"mapping_type": "pressed"
}
],
"controls": [
{
"default@common.tooltip_button_content": {
"$tooltip_background_texture": "$tooltip_button_default_texture"
}
},
{
"pressed@common.tooltip_button_content": {
"$tooltip_background_texture": "$tooltip_button_pressed_texture"
}
},
{
"hover@common.tooltip_button_content": {
"$tooltip_background_texture": "$tooltip_button_hover_texture"
}
},
{
"locked@common.tooltip_button_content": {
"$tooltip_background_texture": "$tooltip_button_locked_texture"
}
},
{ "static_tooltip_popup_panel@common.static_tooltip_popup_with_image_and_text": {} }
],
"bindings": [
{
"binding_name": "$static_tooltip_button_visibility_binding_name",
"binding_name_override": "#visible",
"binding_collection_name": "$tooltip_button_collection_name",
"binding_type": "$tooltip_button_binding_type"
}
]
},
"dynamic_tooltip_notification_panel@common.button": {
"size": [ "100%", "100%" ],
"sound_volume": 0.0,
"layer": 1,
// background textures
"$tooltip_button_default_texture|default": "textures/ui/tooltip_notification_default_background",
"$tooltip_button_pressed_texture|default": "textures/ui/tooltip_notification_default_background",
"$tooltip_button_hover_texture|default": "textures/ui/tooltip_notification_default_background",
"$tooltip_button_locked_texture|default": "textures/ui/tooltip_notification_default_background",
"$tooltip_button_content_size|default": [ "100%", "100%" ],
// binding vars (should be same for all children)
"$tooltip_button_binding_type|default": "global",
"$tooltip_button_collection_name|default": "",
"$tooltip_button_visibility_binding_name|default": "#dynamic_tooltip_notification_visibility_binding_name",
"locked_control": "locked",
"$tooltip_hovered_to_button_id|default": "button.is_hovered",
"button_mappings": [
{
"from_button_id": "button.menu_select",
"to_button_id": "$pressed_button_name",
"mapping_type": "pressed"
},
{
"from_button_id": "button.menu_ok",
"to_button_id": "$pressed_button_name",
"mapping_type": "focused"
},
{
"to_button_id": "$tooltip_hovered_to_button_id",
"mapping_type": "pressed"
}
],
"controls": [
{
"default@common.tooltip_button_content": {
"$tooltip_background_texture": "$tooltip_button_default_texture"
}
},
{
"pressed@common.tooltip_button_content": {
"$tooltip_background_texture": "$tooltip_button_pressed_texture"
}
},
{
"hover@common.tooltip_button_content": {
"$tooltip_background_texture": "$tooltip_button_hover_texture"
}
},
{
"locked@common.tooltip_button_content": {
"$tooltip_background_texture": "$tooltip_button_locked_texture"
}
},
{ "dyanmic_tooltip_popup_panel@common.dynamic_tooltip_popup_with_image_and_text": {} }
],
"bindings": [
{
"binding_name": "$tooltip_button_visibility_binding_name",
"binding_name_override": "#visible",
"binding_collection_name": "$tooltip_button_collection_name",
"binding_type": "$tooltip_button_binding_type"
}
]
},
///////////////////////////////////////////////////////////////////////////
"text_body_focus_border_for_controller_button@common.button": {
"$pressed_button_name": "button.no_interaction",
"sound_volume": 0.0,
"size": [ "100%", "100%cm" ],
"default_control": "default",
"pressed_control": "hover",
"hover_control": "hover",
"$text_control|default": "common.empty_panel",
"$text_control_size|default": [ "100%", "100%c" ],
"controls": [
{
"default@common.empty_panel": {
"size": [ "100%", 0 ]
}
},
{
"hover@common.empty_panel": {
"size": [ "100%", "100%sm" ],
"controls": [
{
"focus_border@common_buttons.focus_border": {
"size": [ "100%", "100% + 4px" ]
}
}
]
}
},
{
"text_control@$text_control": {
"size": "$text_control_size"
}
}
]
}
}