Add basic panel widget
This commit is contained in:
		
							parent
							
								
									dfcf3ebbd3
								
							
						
					
					
						commit
						23daf927cd
					
				| 
						 | 
					@ -1,4 +1,5 @@
 | 
				
			||||||
import { Theme } from "theme.slint";
 | 
					import { Theme } from "theme.slint";
 | 
				
			||||||
 | 
					import { Panel } from "widgets/panel.slint";
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export component ObjectToolPanel inherits Rectangle {
 | 
					export component ObjectToolPanel inherits Rectangle {
 | 
				
			||||||
    width: 280px;
 | 
					    width: 280px;
 | 
				
			||||||
| 
						 | 
					@ -18,54 +19,53 @@ export component ObjectToolPanel inherits Rectangle {
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        Rectangle {
 | 
					        Panel {
 | 
				
			||||||
            border-color: black;
 | 
					            title: @tr("Favourites");
 | 
				
			||||||
            border-width: 1px;
 | 
					 | 
				
			||||||
            border-radius: Theme.radius-md;
 | 
					 | 
				
			||||||
            clip: true;
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
            VerticalLayout {
 | 
					            Panel {
 | 
				
			||||||
                Rectangle {
 | 
					                title: "Group Name";
 | 
				
			||||||
                    height: Theme.size-md;
 | 
					                title-alignment: center;
 | 
				
			||||||
                    border-color: black;
 | 
					                content-padding: 0px;
 | 
				
			||||||
                    border-width: 1px;
 | 
					                content-spacing: 0px;
 | 
				
			||||||
                HorizontalLayout {
 | 
					                HorizontalLayout {
 | 
				
			||||||
 | 
					                    height: Theme.size-md;
 | 
				
			||||||
                    padding-left: Theme.padding-md;
 | 
					                    padding-left: Theme.padding-md;
 | 
				
			||||||
                    padding-right: Theme.padding-md;
 | 
					                    padding-right: Theme.padding-md;
 | 
				
			||||||
                    Text {
 | 
					                    Text {
 | 
				
			||||||
                        font-size: Theme.font-md;
 | 
					                        font-size: Theme.font-md;
 | 
				
			||||||
                            text: @tr("Favourites");
 | 
					                        text: "Object Name";
 | 
				
			||||||
 | 
					                        vertical-alignment: center;
 | 
				
			||||||
 | 
					                    }
 | 
				
			||||||
 | 
					                }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                HorizontalLayout {
 | 
				
			||||||
 | 
					                    height: Theme.size-md;
 | 
				
			||||||
 | 
					                    padding-left: Theme.padding-md;
 | 
				
			||||||
 | 
					                    padding-right: Theme.padding-md;
 | 
				
			||||||
 | 
					                    Text {
 | 
				
			||||||
 | 
					                        font-size: Theme.font-md;
 | 
				
			||||||
 | 
					                        text: "Object Name";
 | 
				
			||||||
 | 
					                        vertical-alignment: center;
 | 
				
			||||||
 | 
					                    }
 | 
				
			||||||
 | 
					                }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                HorizontalLayout {
 | 
				
			||||||
 | 
					                    height: Theme.size-md;
 | 
				
			||||||
 | 
					                    padding-left: Theme.padding-md;
 | 
				
			||||||
 | 
					                    padding-right: Theme.padding-md;
 | 
				
			||||||
 | 
					                    Text {
 | 
				
			||||||
 | 
					                        font-size: Theme.font-md;
 | 
				
			||||||
 | 
					                        text: "Object Name";
 | 
				
			||||||
                        vertical-alignment: center;
 | 
					                        vertical-alignment: center;
 | 
				
			||||||
                    }
 | 
					                    }
 | 
				
			||||||
                }
 | 
					                }
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                VerticalLayout {
 | 
					            Panel {
 | 
				
			||||||
                    padding: Theme.padding-md;
 | 
					                title: "Group Name";
 | 
				
			||||||
                    spacing: Theme.spacing-md;
 | 
					                title-alignment: center;
 | 
				
			||||||
 | 
					                content-padding: 0px;
 | 
				
			||||||
                    Rectangle {
 | 
					                content-spacing: 0px;
 | 
				
			||||||
                        border-color: black;
 | 
					 | 
				
			||||||
                        border-width: 1px;
 | 
					 | 
				
			||||||
                        border-radius: Theme.radius-md;
 | 
					 | 
				
			||||||
                        clip: true;
 | 
					 | 
				
			||||||
                        VerticalLayout {
 | 
					 | 
				
			||||||
                            Rectangle {
 | 
					 | 
				
			||||||
                                height: Theme.size-md;
 | 
					 | 
				
			||||||
                                border-color: black;
 | 
					 | 
				
			||||||
                                border-width: 1px;
 | 
					 | 
				
			||||||
                                HorizontalLayout {
 | 
					 | 
				
			||||||
                                    padding-left: Theme.padding-md;
 | 
					 | 
				
			||||||
                                    padding-right: Theme.padding-md;
 | 
					 | 
				
			||||||
                                    Text {
 | 
					 | 
				
			||||||
                                        font-size: Theme.font-md;
 | 
					 | 
				
			||||||
                                        text: "Group Name";
 | 
					 | 
				
			||||||
                                        vertical-alignment: center;
 | 
					 | 
				
			||||||
                                        horizontal-alignment: center;
 | 
					 | 
				
			||||||
                                    }
 | 
					 | 
				
			||||||
                                }
 | 
					 | 
				
			||||||
                            }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                HorizontalLayout {
 | 
					                HorizontalLayout {
 | 
				
			||||||
                    height: Theme.size-md;
 | 
					                    height: Theme.size-md;
 | 
				
			||||||
                    padding-left: Theme.padding-md;
 | 
					                    padding-left: Theme.padding-md;
 | 
				
			||||||
| 
						 | 
					@ -100,99 +100,9 @@ export component ObjectToolPanel inherits Rectangle {
 | 
				
			||||||
                }
 | 
					                }
 | 
				
			||||||
            }
 | 
					            }
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
                }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                VerticalLayout {
 | 
					 | 
				
			||||||
                    padding: Theme.padding-md;
 | 
					 | 
				
			||||||
                    spacing: Theme.spacing-md;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                    Rectangle {
 | 
					 | 
				
			||||||
                        border-color: black;
 | 
					 | 
				
			||||||
                        border-width: 1px;
 | 
					 | 
				
			||||||
                        border-radius: Theme.radius-md;
 | 
					 | 
				
			||||||
                        clip: true;
 | 
					 | 
				
			||||||
                        VerticalLayout {
 | 
					 | 
				
			||||||
                            Rectangle {
 | 
					 | 
				
			||||||
                                height: Theme.size-md;
 | 
					 | 
				
			||||||
                                border-color: black;
 | 
					 | 
				
			||||||
                                border-width: 1px;
 | 
					 | 
				
			||||||
                                HorizontalLayout {
 | 
					 | 
				
			||||||
                                    padding-left: Theme.padding-md;
 | 
					 | 
				
			||||||
                                    padding-right: Theme.padding-md;
 | 
					 | 
				
			||||||
                                    Text {
 | 
					 | 
				
			||||||
                                        font-size: Theme.font-md;
 | 
					 | 
				
			||||||
                                        text: "Group Name";
 | 
					 | 
				
			||||||
                                        vertical-alignment: center;
 | 
					 | 
				
			||||||
                                        horizontal-alignment: center;
 | 
					 | 
				
			||||||
                                    }
 | 
					 | 
				
			||||||
                                }
 | 
					 | 
				
			||||||
                            }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                            HorizontalLayout {
 | 
					 | 
				
			||||||
                                height: Theme.size-md;
 | 
					 | 
				
			||||||
                                padding-left: Theme.padding-md;
 | 
					 | 
				
			||||||
                                padding-right: Theme.padding-md;
 | 
					 | 
				
			||||||
                                Text {
 | 
					 | 
				
			||||||
                                    font-size: Theme.font-md;
 | 
					 | 
				
			||||||
                                    text: "Object Name";
 | 
					 | 
				
			||||||
                                    vertical-alignment: center;
 | 
					 | 
				
			||||||
                                }
 | 
					 | 
				
			||||||
                            }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                            HorizontalLayout {
 | 
					 | 
				
			||||||
                                height: Theme.size-md;
 | 
					 | 
				
			||||||
                                padding-left: Theme.padding-md;
 | 
					 | 
				
			||||||
                                padding-right: Theme.padding-md;
 | 
					 | 
				
			||||||
                                Text {
 | 
					 | 
				
			||||||
                                    font-size: Theme.font-md;
 | 
					 | 
				
			||||||
                                    text: "Object Name";
 | 
					 | 
				
			||||||
                                    vertical-alignment: center;
 | 
					 | 
				
			||||||
                                }
 | 
					 | 
				
			||||||
                            }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                            HorizontalLayout {
 | 
					 | 
				
			||||||
                                height: Theme.size-md;
 | 
					 | 
				
			||||||
                                padding-left: Theme.padding-md;
 | 
					 | 
				
			||||||
                                padding-right: Theme.padding-md;
 | 
					 | 
				
			||||||
                                Text {
 | 
					 | 
				
			||||||
                                    font-size: Theme.font-md;
 | 
					 | 
				
			||||||
                                    text: "Object Name";
 | 
					 | 
				
			||||||
                                    vertical-alignment: center;
 | 
					 | 
				
			||||||
                                }
 | 
					 | 
				
			||||||
                            }
 | 
					 | 
				
			||||||
                        }
 | 
					 | 
				
			||||||
                    }
 | 
					 | 
				
			||||||
                }
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        Rectangle {
 | 
					 | 
				
			||||||
            border-color: black;
 | 
					 | 
				
			||||||
            border-width: 1px;
 | 
					 | 
				
			||||||
            border-radius: Theme.radius-md;
 | 
					 | 
				
			||||||
            clip: true;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
            VerticalLayout {
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                Rectangle {
 | 
					 | 
				
			||||||
                    height: Theme.size-md;
 | 
					 | 
				
			||||||
                    border-color: black;
 | 
					 | 
				
			||||||
                    border-width: 1px;
 | 
					 | 
				
			||||||
                    HorizontalLayout {
 | 
					 | 
				
			||||||
                        padding-left: Theme.padding-md;
 | 
					 | 
				
			||||||
                        padding-right: Theme.padding-md;
 | 
					 | 
				
			||||||
                        Text {
 | 
					 | 
				
			||||||
                            font-size: Theme.font-md;
 | 
					 | 
				
			||||||
                            text: @tr("Hierarchy");
 | 
					 | 
				
			||||||
                            vertical-alignment: center;
 | 
					 | 
				
			||||||
                        }
 | 
					 | 
				
			||||||
                    }
 | 
					 | 
				
			||||||
                }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                VerticalLayout {
 | 
					 | 
				
			||||||
                    padding: Theme.padding-md;
 | 
					 | 
				
			||||||
                    spacing: Theme.spacing-md;
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        Panel {
 | 
				
			||||||
 | 
					            title: @tr("Hierarchy");
 | 
				
			||||||
            HorizontalLayout {
 | 
					            HorizontalLayout {
 | 
				
			||||||
                spacing: Theme.spacing-md;
 | 
					                spacing: Theme.spacing-md;
 | 
				
			||||||
                height: Theme.size-md;
 | 
					                height: Theme.size-md;
 | 
				
			||||||
| 
						 | 
					@ -248,5 +158,3 @@ export component ObjectToolPanel inherits Rectangle {
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -0,0 +1,37 @@
 | 
				
			||||||
 | 
					import { Theme } from "../theme.slint";
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export component Panel inherits Rectangle {
 | 
				
			||||||
 | 
					    in property <string> title: "Title";
 | 
				
			||||||
 | 
					    in property <TextHorizontalAlignment> title-alignment: left;
 | 
				
			||||||
 | 
					    in property <length> content-padding: Theme.padding-md;
 | 
				
			||||||
 | 
					    in property <length> content-spacing: Theme.spacing-md;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    border-color: black;
 | 
				
			||||||
 | 
					    border-width: 1px;
 | 
				
			||||||
 | 
					    border-radius: Theme.radius-md;
 | 
				
			||||||
 | 
					    clip: true;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    VerticalLayout {
 | 
				
			||||||
 | 
					        Rectangle {
 | 
				
			||||||
 | 
					            height: Theme.size-md;
 | 
				
			||||||
 | 
					            border-color: black;
 | 
				
			||||||
 | 
					            border-width: 1px;
 | 
				
			||||||
 | 
					            HorizontalLayout {
 | 
				
			||||||
 | 
					                padding-left: Theme.padding-md;
 | 
				
			||||||
 | 
					                padding-right: Theme.padding-md;
 | 
				
			||||||
 | 
					                Text {
 | 
				
			||||||
 | 
					                    font-size: Theme.font-md;
 | 
				
			||||||
 | 
					                    text: title;
 | 
				
			||||||
 | 
					                    vertical-alignment: center;
 | 
				
			||||||
 | 
					                    horizontal-alignment: title-alignment;
 | 
				
			||||||
 | 
					                }
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        VerticalLayout {
 | 
				
			||||||
 | 
					            padding: content-padding;
 | 
				
			||||||
 | 
					            spacing: content-spacing;
 | 
				
			||||||
 | 
					            @children
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
		Loading…
	
		Reference in New Issue