Right now when creating buttons or similar frequently used objects in the config, one has to write the entire following code with lots of redundancies (multiple fullSize classes, multiple dataKeys and corresponding keys in the template, etc.):
// Layout
{
"type": "container",
"name": "button",
"dataKey": "button",
"borderRadius": "24pt",
"classes": [
"fullSize"
],
"children": [
{
"type": "color",
"dataKey": "buttonBg",
"classes": [
"fullSize"
]
},
{
"type": "text",
"dataKey": "buttonText",
"scaleType": "alignCenter",
"classes": [
"textS",
"fullSize"
]
}
]
}
// Template
{
"button": {
"actions": []
},
"buttonBg": {
"value": "#FF4040"
},
"buttonText": {
"value": "myButtonText"
}
}
By introducing a backgroundColor field for the text layer (similar to the CSS background property for texts), this could be simplified to the following, eliminating the need for the extra color and outer container layer:
// Layout
{
"type": "text",
"name": "button",
"dataKey": "button",
"scaleType": "alignCenter",
"borderRadius": "24pt",
"classes": [
"textS",
"fullSize"
]
}
// Template
{
"button": {
"actions": [],
"value": "myButtonText",
"backgroundColor": "#FF4040"
}
}
Other considerations: gradient as background color.
