fix: added fit-content for width and height.

fixed button and label centering for tkinter widgets
This commit is contained in:
paul
2024-09-25 23:29:50 +05:30
parent 2c093c2d2d
commit 37e7bea0fa
7 changed files with 119 additions and 40 deletions

View File

@@ -132,7 +132,7 @@ class TkinterBase extends Widget {
* loads the data
* @param {object} data
*/
load = (data) => {
load(data, callback=null){
if (Object.keys(data).length === 0) return // no data to load
@@ -188,7 +188,13 @@ class TkinterBase extends Widget {
nestedObject[lastKey].value = value
})
this.updateState({ attrs: newAttrs })
if (newAttrs?.styling?.backgroundColor){
// TODO: find a better way to apply innerStyles
this.setWidgetInnerStyle("backgroundColor", newAttrs.styling.backgroundColor.value)
}
this.updateState({ attrs: newAttrs }, callback)
})

View File

@@ -69,7 +69,7 @@ class Button extends TkinterBase{
return (
<div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md
tw-border tw-border-solid tw-border-gray-400 tw-overflow-hidden">
<div className="tw-p-2 tw-w-full tw-h-full tw-content-start " style={this.state.widgetInnerStyling}>
<div className="tw-p-2 tw-w-full tw-flex tw-place-content-center tw-place-items-center tw-h-full tw-text-center" style={this.state.widgetInnerStyling}>
{/* {this.props.children} */}
<div className="tw-text-sm" style={{color: this.getAttrValue("styling.foregroundColor")}}>
{this.getAttrValue("buttonLabel")}

View File

@@ -10,7 +10,7 @@ class Frame extends TkinterBase{
super(props)
this.droppableTags = {
exclude: ["image", "video", "media"]
exclude: ["image", "video", "media", "toplevel"]
}
this.state = {

View File

@@ -47,7 +47,7 @@ class Label extends TkinterBase{
componentDidMount(){
super.componentDidMount()
this.setAttrValue("styling.backgroundColor", "#fff")
this.setAttrValue("styling.backgroundColor", "#fff0")
this.setWidgetInnerStyle("backgroundColor", "#fff0")
}
@@ -68,7 +68,7 @@ class Label extends TkinterBase{
renderContent(){
return (
<div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden">
<div className="tw-p-2 tw-w-full tw-h-full tw-content-start " style={this.state.widgetInnerStyling}>
<div className="tw-p-2 tw-w-full tw-h-full tw-flex tw-place-content-center tw-place-items-center " style={this.state.widgetInnerStyling}>
{/* {this.props.children} */}
<div className="tw-text-sm" style={{color: this.getAttrValue("styling.foregroundColor")}}>
{this.getAttrValue("labelWidget")}