bedrock-samples/resource_pack/ui/csb_sections/content_section.json

{
  "namespace": "csb_content",

  "csb_content_section@csb.section_base": {
    "controls": [
      {
        "content_section_vertical_padding_1@csb.vertical_padding_4px": {}
      },
      {
        "popular_packs_label_panel": {
          "type": "panel",
          "size": [ "100%", "100%c" ],
          "controls": [
            {
              "label_with_gradient@csb.gradient_content_panel": {
                "size": [ "100%", 15 ],
                "$gradient_content": "csb_content.popular_packs_label"
              }
            },
            {
              "tts_border@csb.tts_activate_sibling": {
                "size": [ "100%sm", "100%sm + 2px" ],
                "offset": [ 0, -2 ]
              }
            }
          ]
        }
      },
      {
        "content_section_vertical_padding_2@csb.vertical_padding_4px": {}
      },
      {
        "content_pack_types@csb_content.content_pack_types_section": {}
      },
      {
        "content_packs_included@csb_content.content_packs_included_section": {}
      },
      {
        "content_section_vertical_padding_3@csb.vertical_padding_4px": {}
      },
      {
        "content_description@csb_content.content_description": {}
      },
      {
        "section_divider@csb.full_width_section_divider": {}
      }
    ]
  },

  "content_pack_types_section": {
    "type": "stack_panel",
    "size": [ "100%", "100%c" ],
    "controls": [
      {
        "pack_types@csb_content.pack_types": {}
      },
      {
        "padding@common.empty_panel": {
          "size": [ "100%", 4 ]
        }
      }
    ]
  },

  "content_packs_included_section": {
    "type": "stack_panel",
    "size": [ "100%", "100%c" ],
    "controls": [
      {
        "popular_packs@csb_content.popular_packs": {}
      },
      {
        "section_divider@csb.full_width_section_divider": {}
      }
    ]
  },

  "content_text_section": {
    "type": "stack_panel",
    "size": [ "100%", "100%c" ],
    "controls": [
      {
        "content_description@csb_content.content_description": {}
      },
      {
        "padding@common.empty_panel": {
          "size": [ "100%", 4 ]
        }
      }
    ]
  },

  "pack_types": {
    "type": "stack_panel",
    "orientation": "vertical",
    "size": [ "100%", "100%c" ],
    "controls": [
      {
        "padding_01": {
          "type": "panel",
          "size": [ "100%", 4 ]
        }
      },
      {
        "pack_types_1@csb_content.pack_types_1": {}
      },
      {
        "padding_02": {
          "type": "panel",
          "size": [ "100%", 4 ]
        }
      },
      {
        "pack_types_2@csb_content.pack_types_2": {}
      },
      {
        "padding_03": {
          "type": "panel",
          "size": [ "100%", 4 ]
        }
      }
    ]
  },

  "pack_types_1": {
    "type": "stack_panel",
    "orientation": "horizontal",
    "size": [ "100%", "100%cm" ],
    "$icon_color": "$body_text_color",
    "controls": [
      {
        "worlds@csb_content.pack_type_description": {
          "$pack_type_texture": "common_store.world_small_icon",
          "$pack_type_description_text": "store.csb.contentPacks.worldDescription"
        }
      },
      {
        "padding_01": {
          "type": "panel",
          "size": [ 2, "100%sm" ]
        }
      },
      {
        "textures@csb_content.pack_type_description": {
          "$pack_type_texture": "common_store.resource_pack_small_icon",
          "$pack_type_description_text": "store.csb.contentPacks.textureDescription"
        }
      },
      {
        "padding_02": {
          "type": "panel",
          "size": [ 2, "100%sm" ]
        }
      },
      {
        "persona@csb_content.pack_type_description": {
          "$pack_type_texture": "common_store.persona_small_icon",
          "$pack_type_description_text": "store.csb.contentPacks.personaDescription"
        }
      }
    ]
  },

  "pack_types_2": {
    "type": "stack_panel",
    "orientation": "horizontal",
    "size": [ "100%", "100%cm" ],
    "$icon_color": "$body_text_color",
    "controls": [
      {
        "padding_1@common.empty_panel": {
          "size": [ "17%", "100%sm" ]
        }
      },
      {
        "skins@csb_content.pack_type_description": {
          "$pack_type_texture": "common_store.skinpack_small_icon",
          "$pack_type_description_text": "store.csb.contentPacks.skinDescription"
        }
      },
      {
        "padding_2@common.empty_panel": {
          "size": [ 4, "100%sm" ]
        }
      },
      {
        "mashups@csb_content.pack_type_description": {
          "$pack_type_texture": "common_store.mashup_small_icon",
          "$pack_type_description_text": "store.csb.contentPacks.mashupDescription"
        }
      },
      {
        "padding_3@common.empty_panel": {
          "size": [ "17%", "100%sm" ]
        }
      }
    ]
  },

  "pack_type_description": {
    "type": "stack_panel",
    "orientation": "horizontal",
    "size": [ "33% - 2px", "100%cm" ],
    "controls": [
      {
        "image_nesting_panel": {
          "type": "panel",
          "size": [ "100%c", "100%sm" ],
          "min_size": [ "100%c", "100%c" ],
          "controls": [
            {
              "texture@$pack_type_texture": {
                "size": [ 8, 8 ],
                "anchor_from": "left_middle",
                "anchor_to": "left_middle",
                "layer": 1
              }
            }
          ]
        }
      },
      {
        "padding_0@common.empty_panel": {
          "size": [ 4, "100%sm" ]
        }
      },
      {
        "description_nesting_panel": {
          "type": "panel",
          "size": [ "fill", "100%cm - 2px" ],
          "min_size": [ "fill", 14 ],
          "controls": [
            {
              "description_label": {
                "type": "label",
                "size": [ "100%", "default" ],
                "color": "$body_text_color",
                "text": "$pack_type_description_text",
                "font_scale_factor": 0.75,
                "font_type": "smooth",
                "layer": 2
              }
            },
            {
              "tts_border@csb.tts_activate_sibling": {
                "size": [ "100%sm + 2px", "100%sm + 2px" ],
                "offset": [ -1, -2 ]
              }
            }
          ]
        }
      },
      {
        "padding_1@common.empty_panel": {
          "size": [ 4, "100%sm" ]
        }
      }
    ]
  },

  "popular_packs": {
    "type": "stack_panel",
    "orientation": "vertical",
    "size": [ "100%", "100%c" ],
    "controls": [
      {
        "padding_0@common.empty_panel": {
          "size": [ "100%", 2 ]
        }
      },
      {
        "pack_grid@csb_content.packs_collection": {}
      },
      {
        "view_all_packs_panel": {
          "type": "stack_panel",
          "orientation": "vertical",
          "size": [ "100%", "100%c" ],
          "controls": [
            {
              "view_all_packs_button@common_buttons.light_content_button": {
                "$pressed_button_name": "button.view_all_packs",
                "$button_content": "csb_buy.button_text",
                "$button_text": "store.csb.content.viewAllPacks",
                "$button_text_size": [ "default", "default" ],
                "$button_text_max_size": [ "100% - 10px", 18 ],
                "size": [ "100%", 20 ]
              }
            },
            {
              "padding": {
                "type": "panel",
                "size": [ "100%", 4 ]
              }
            },
            {
              "view_character_creator_items@common_buttons.light_content_button": {
                "$pressed_button_name": "button.view_character_creator_items",
                "$button_content": "csb_buy.button_text",
                "$button_text": "store.csb.content.viewCharacterCreatorItems",
                "$button_text_size": [ "default", "default" ],
                "$button_text_max_size": [ "100% - 10px", 18 ],
                "size": [ "100%", 20 ],
                "visible": "$view_character_creator_items_visible"
              }
            }
          ]
        }
      },
      {
        "padding_1@common.empty_panel": {
          "size": [ "100%", 2 ]
        }
      }
    ]
  },

  "popular_packs_label": {
    "type": "label",
    "size": [ "100% - 4%", "default" ],
    "text": "store.csb.content.popularPacks",
    "color": "$light_button_default_text_color"
  },

  "packs_collection": {
    "type": "stack_panel",
    "size": [ "100%", "100%c" ],
    "controls": [
      {
        "row_1": {
          "type": "stack_panel",
          "orientation": "horizontal",
          "size": [ "100%", "100%cm" ],
          "collection_name": "popular_packs_collection",
          "controls": [
            {
              "pack_image_grid_item_0@csb_content.pack_image_grid_item": {
                "collection_index": 0
              }
            },
            {
              "padding": {
                "type": "panel",
                "size": [ 4, "100%c" ]
              }
            },
            {
              "pack_image_grid_item_1@csb_content.pack_image_grid_item": {
                "collection_index": 1
              }
            }
          ]
        }
      },
      {
        "padding_1": {
          "type": "panel",
          "size": [ "100%", 4 ]
        }
      },
      {
        "row_2": {
          "type": "stack_panel",
          "orientation": "horizontal",
          "size": [ "100%", "100%cm" ],
          "collection_name": "popular_packs_collection",
          "controls": [
            {
              "pack_image_grid_item_0@csb_content.pack_image_grid_item": {
                "collection_index": 2
              }
            },
            {
              "padding": {
                "type": "panel",
                "size": [ 4, "100%c" ]
              }
            },
            {
              "pack_image_grid_item_1@csb_content.pack_image_grid_item": {
                "collection_index": 3
              }
            }
          ]
        }
      },
      {
        "padding_2": {
          "type": "panel",
          "size": [ "100%", 4 ]
        }
      }
    ]
  },

  "pack_image_grid_item": {
    "type": "panel",
    "size": [ "50% - 2px", "56.25%x + 1.125px" ],
    "controls": [
      {
        "bg@common_store.banner_fill": {
          "size": [ "100%", "100%" ],
          "layer": 1,
          "controls": [
            {
              "featured_key_art": {
                "type": "image",
                "layer": 4,
                "size": [ "100% - 2px", "100% - 2px" ],
                "bilinear": true,
                "bindings": [
                  {
                    "binding_type": "collection",
                    "binding_collection_name": "popular_packs_collection",
                    "binding_name": "#key_art_texture_file_system",
                    "binding_name_override": "#texture_file_system"
                  },
                  {
                    "binding_type": "collection",
                    "binding_collection_name": "popular_packs_collection",
                    "binding_name": "#key_art_texture_path",
                    "binding_name_override": "#texture"
                  }
                ],
                "controls": [
                  {
                    "chevron@csb_content.csb_content_chevron": {
                      "anchor_from": "bottom_left",
                      "anchor_to": "bottom_left",
                      "offset": [ 0, 0.5 ]
                    }
                  }
                ]
              }
            },
            {
              "progress_loading@common_store.progress_loading": {
                "size": [ "100%", "100%" ],
                "$source_control_name": "featured_key_art",
                "$source_property_name": "(#texture = '')",
                "anchor_from": "top_middle",
                "anchor_to": "top_middle",
                "$hide_failure_text": true
              }
            }
          ]
        }
      },
      {
        "offer_button@common.button": {
          "size": [ "100%", "100%" ],
          "layer": 7,
          "default_control": "",
          "$pressed_button_name": "button.select_offer",
          "tts_control_header": "#title_label",
          "bindings": [
            {
              "binding_type": "collection_details",
              "binding_collection_name": "popular_packs_collection"
            },
            {
              "binding_type": "collection",
              "binding_collection_name": "popular_packs_collection",
              "binding_name": "#right_most_grid_item_focus_override_right",
              "binding_name_override": "#focus_change_right",
              "binding_condition": "visible"
            },
            {
              "binding_type": "collection",
              "binding_collection_name": "popular_packs_collection",
              "binding_name": "#title_label"
            }
          ],
          "controls": [
            {
              "default@common.square_image_border_white": {
                "color": [ 0, 0, 0 ]
              }
            },
            {
              "hover@common.square_image_border_white": {}
            },
            {
              "pressed@common.square_image_border_white": {}
            }
          ]
        }
      }
    ]
  },

  "csb_content_chevron": {
    "size": [ 25, 19 ],
    "type": "image",
    "texture": "textures/ui/csbChevronArrowLarge",
    "layer": 1
  },

  "content_description": {
    "type": "panel",
    "size": [ "100%", "100%cm - 2px" ],
    "controls": [
      {
        "content_description_label": {
          "type": "label",
          "size": [ "100% - 1px", "default" ],
          "offset": [ 1, 0 ],
          "text": "#content_section_text",
          "color": "$body_text_color",
          "font_type": "smooth",
          "bindings": [
            {
              "binding_name": "#content_section_text",
              "binding_type": "collection",
              "binding_collection_name": "content_sections"
            }
          ]
        }
      },
      {
        "tts_border@csb.tts_activate_sibling": {
          "size": [ "100%sm", "100%sm + 2px" ],
          "offset": [ 0, -2 ]
        }
      }
    ]
  }

}