mirror of
				https://github.com/slint-ui/slint.git
				synced 2025-11-03 21:24:17 +00:00 
			
		
		
		
	menu: finished cupertino style
This commit is contained in:
		
							parent
							
								
									09db98f9ca
								
							
						
					
					
						commit
						f6cec29fed
					
				
					 2 changed files with 30 additions and 25 deletions
				
			
		| 
						 | 
					@ -55,6 +55,10 @@ export component MenuBarBase inherits Rectangle {
 | 
				
			||||||
    layout := HorizontalLayout {
 | 
					    layout := HorizontalLayout {
 | 
				
			||||||
        alignment: start;
 | 
					        alignment: start;
 | 
				
			||||||
        padding: root.padding;
 | 
					        padding: root.padding;
 | 
				
			||||||
 | 
					        padding-left: root.padding-left;
 | 
				
			||||||
 | 
					        padding-right: root.padding-right;
 | 
				
			||||||
 | 
					        padding-top: root.padding-top;
 | 
				
			||||||
 | 
					        padding-bottom: root.padding-bottom;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        @children
 | 
					        @children
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -13,34 +13,37 @@ export component MenuBarItem {
 | 
				
			||||||
    min-height: base.min-height;
 | 
					    min-height: base.min-height;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    base := MenuBarItemBase {
 | 
					    base := MenuBarItemBase {
 | 
				
			||||||
        padding-left: 11px;
 | 
					        padding-left: 8px;
 | 
				
			||||||
        padding-right: 11px;
 | 
					        padding-right: 8px;
 | 
				
			||||||
        padding-top: 4px;
 | 
					 | 
				
			||||||
        padding-bottom: 6px;
 | 
					 | 
				
			||||||
        default-foreground: CupertinoPalette.foreground;
 | 
					        default-foreground: CupertinoPalette.foreground;
 | 
				
			||||||
        hover-foreground: CupertinoPalette.accent-foreground;
 | 
					        hover-foreground: CupertinoPalette.foreground;
 | 
				
			||||||
        pressed-foreground: CupertinoPalette.accent-foreground;
 | 
					        pressed-foreground: CupertinoPalette.foreground;
 | 
				
			||||||
        hover-background: CupertinoPalette.accent-background;
 | 
					        hover-background: CupertinoPalette.secondary-control-background;
 | 
				
			||||||
        pressed-background: CupertinoPalette.accent-background;
 | 
					        pressed-background: CupertinoPalette.secondary-control-background;
 | 
				
			||||||
        font-size: 14px;
 | 
					        font-size: 13px;
 | 
				
			||||||
        font-weight: 300;
 | 
					        font-weight: 300;
 | 
				
			||||||
        border-radius: 3px;
 | 
					        border-radius: 2px;
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export component MenuBar inherits MenuBarBase {
 | 
					export component MenuBar inherits MenuBarBase {
 | 
				
			||||||
    padding: 9px;
 | 
					    padding-top: 0;
 | 
				
			||||||
    spacing: 10px;
 | 
					    padding-bottom: 0;
 | 
				
			||||||
    min-layout-height: 40px;
 | 
					    padding-left: 8px;
 | 
				
			||||||
 | 
					    padding-right: 8px;
 | 
				
			||||||
 | 
					    min-layout-height: 24px;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export component MenuFrame inherits MenuFrameBase {
 | 
					export component MenuFrame inherits MenuFrameBase {
 | 
				
			||||||
    background: CupertinoPalette.background;
 | 
					 | 
				
			||||||
    border-radius: 7px;
 | 
					 | 
				
			||||||
    border-width: 1px;
 | 
					    border-width: 1px;
 | 
				
			||||||
    border-color: CupertinoPalette.border;
 | 
					    border-color: CupertinoPalette.border;
 | 
				
			||||||
    padding: 1px;
 | 
					 | 
				
			||||||
    layout-min-width: 280px;
 | 
					    layout-min-width: 280px;
 | 
				
			||||||
 | 
					    drop-shadow-blur: 22px;
 | 
				
			||||||
 | 
					    drop-shadow-color: #00000066;
 | 
				
			||||||
 | 
					    drop-shadow-offset-y: 0.5px;
 | 
				
			||||||
 | 
					    background: CupertinoPalette.background;
 | 
				
			||||||
 | 
					    border-radius: 6px;
 | 
				
			||||||
 | 
					    padding: 4px;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export component MenuItem {
 | 
					export component MenuItem {
 | 
				
			||||||
| 
						 | 
					@ -51,23 +54,21 @@ export component MenuItem {
 | 
				
			||||||
    callback clear-current <=> base.clear-current;
 | 
					    callback clear-current <=> base.clear-current;
 | 
				
			||||||
    callback activate <=> base.activate;
 | 
					    callback activate <=> base.activate;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    min-height: max(40px, base.min-height);
 | 
					    min-height: max(22px, base.min-height);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    HorizontalLayout {        
 | 
					    HorizontalLayout {        
 | 
				
			||||||
        padding: 5px;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        base := MenuItemBase {
 | 
					        base := MenuItemBase {
 | 
				
			||||||
            default-foreground: CupertinoPalette.foreground;
 | 
					            default-foreground: CupertinoPalette.foreground;
 | 
				
			||||||
            current-foreground: CupertinoPalette.accent-foreground;
 | 
					            current-foreground: CupertinoPalette.accent-foreground;
 | 
				
			||||||
            current-background: CupertinoPalette.accent-background;
 | 
					            current-background: CupertinoPalette.accent-background;
 | 
				
			||||||
            font-size: CupertinoFontSettings.body.font-size;
 | 
					            font-size: CupertinoFontSettings.body.font-size;
 | 
				
			||||||
            font-weight: CupertinoFontSettings.body.font-weight;
 | 
					            font-weight: CupertinoFontSettings.body.font-weight;
 | 
				
			||||||
            border-radius: 4px;
 | 
					            border-radius: 5px;
 | 
				
			||||||
            padding-left: 11px;
 | 
					            padding-left: 8px;
 | 
				
			||||||
            padding-right: 11px;
 | 
					            padding-right: 8px;
 | 
				
			||||||
            spacing: 8px;
 | 
					            spacing: 4px;
 | 
				
			||||||
            sub-menu-icon: @image-url("_arrow_forward.svg");
 | 
					            sub-menu-icon: @image-url("_arrow_forward.svg");
 | 
				
			||||||
            icon-size: 12px;
 | 
					            icon-size: 13px;
 | 
				
			||||||
        }
 | 
					        }
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue