language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-07-07 13:15:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Menu: avoid using padding properties (#8847)

Browse source 
Padding properties exists as reserved properties but don't have effect.
But the menu code was using them to store values.

This is now a warning because people got confused by setting padding and
wondering why it has not effect.
This also had some bug in the code were properties were padding was set
on a layout, as well as all the padding-* properties, so the padding was
not taking in account
This commit is contained in:
Olivier Goffart 2025-07-04 16:42:59 +02:00 • committed by GitHub
parent 30a39f3c2b
commit d49fe14e4a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 43 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

33
internal/compiler/widgets/common/menu-base.slint
View file

@ -12,6 +12,9 @@ export component MenuBarItemBase {
in property <length> font-size <=> label.font-size;
in property <int> font-weight <=> label.font-weight;
in property <length> border-radius <=> background-layer.border-radius;
in property <length> horizontal-padding;
in property <length> top-padding;
in property <length> bottom-padding;
callback clicked;
callback hovered;
@ -21,10 +24,10 @@ export component MenuBarItemBase {
touch-area := TouchArea {
layout := HorizontalLayout {
padding-top: root.padding-top;
padding-bottom: root.padding-bottom;
padding-left: root.padding-left;
padding-right: root.padding-right;
padding-top: root.top-padding;
padding-bottom: root.bottom-padding;
padding-left: root.horizontal-padding;
padding-right: root.horizontal-padding;
label := Text {
text: entry.title;
@ -62,16 +65,14 @@ export component MenuBarBase inherits Rectangle {
in property <length> spacing <=> layout.spacing;
in property <LayoutAlignment> alignment <=> layout.alignment;
in property <length> min-layout-height;
in property <length> horizontal-padding;
min-height: max(root.min-layout-height, layout.min-height);
layout := HorizontalLayout {
alignment: start;
padding: root.padding;
padding-left: root.padding-left;
padding-right: root.padding-right;
padding-top: root.padding-top;
padding-bottom: root.padding-bottom;
padding-left: root.horizontal-padding;
padding-right: root.horizontal-padding;
@children
}
@ -80,13 +81,13 @@ export component MenuBarBase inherits Rectangle {
export component MenuFrameBase inherits Rectangle {
in property <length> spacing <=> layout.spacing;
in property <length> layout-min-width;
in property <length> margin;
clip: true;
min-width: max(root.layout-min-width, layout.min-width);
layout := VerticalLayout {
padding: root.padding;
padding: root.margin;
@children
}
}
@ -105,6 +106,8 @@ export component MenuItemBase {
in property <image> sub-menu-icon;
in property <length> spacing <=> layout.spacing;
in property <length> icon-size;
in property <length> horizontal-padding;
in property <length> vertical-padding;
callback set-current();
callback clear-current();
@ -118,10 +121,10 @@ export component MenuItemBase {
enabled: entry.enabled;
layout := HorizontalLayout {
padding-top: root.padding-top;
padding-bottom: root.padding-bottom;
padding-left: root.padding-left;
padding-right: root.padding-right;
padding-top: root.vertical-padding;
padding-bottom: root.vertical-padding;
padding-left: root.horizontal-padding;
padding-right: root.horizontal-padding;
spacing: 10px;

11
internal/compiler/widgets/cosmic/menu.slint
View file

@ -14,10 +14,9 @@ export component MenuBarItem {
min-height: base.min-height;
base := MenuBarItemBase {
padding-left: 12px;
padding-right: 12px;
padding-top: 4px;
padding-bottom: 4px;
horizontal-padding: 12px;
top-padding: 4px;
bottom-padding: 4px;
default-foreground: CosmicPalette.accent-background;
hover-foreground: CosmicPalette.accent-background;
pressed-foreground: CosmicPalette.accent-background;
@ -30,7 +29,6 @@ export component MenuBarItem {
}
export component MenuBar inherits MenuBarBase {
padding: 8px;
spacing: 4px;
min-layout-height: 48px;
}
@ -64,8 +62,7 @@ export component MenuItem {
separator-color: CosmicPalette.border;
font-size: CosmicFontSettings.body.font-size;
font-weight: CosmicFontSettings.body.font-weight;
padding-left: 16px;
padding-right: 16px;
horizontal-padding: 16px;
spacing: 8px;
sub-menu-icon: @image-url("_arrow_forward.svg");
icon-size: 16px;

13
internal/compiler/widgets/cupertino/menu.slint
View file

@ -14,8 +14,7 @@ export component MenuBarItem {
min-height: base.min-height;
base := MenuBarItemBase {
padding-left: 8px;
padding-right: 8px;
horizontal-padding: 8px;
default-foreground: CupertinoPalette.foreground;
hover-foreground: CupertinoPalette.foreground;
pressed-foreground: CupertinoPalette.foreground;
@ -28,10 +27,7 @@ export component MenuBarItem {
}
export component MenuBar inherits MenuBarBase {
padding-top: 0;
padding-bottom: 0;
padding-left: 8px;
padding-right: 8px;
horizontal-padding: 8px;
min-layout-height: 24px;
}
@ -44,7 +40,7 @@ export component MenuFrame inherits MenuFrameBase {
drop-shadow-offset-y: 0.5px;
background: CupertinoPalette.background;
border-radius: 6px;
padding: 4px;
margin: 4px;
}
export component MenuItem {
@ -66,8 +62,7 @@ export component MenuItem {
font-size: CupertinoFontSettings.body.font-size;
font-weight: CupertinoFontSettings.body.font-weight;
border-radius: 5px;
padding-left: 8px;
padding-right: 8px;
horizontal-padding: 8px;
spacing: 4px;
sub-menu-icon: @image-url("_arrow_forward.svg");
icon-size: 13px;

13
internal/compiler/widgets/fluent/menu.slint
View file

@ -14,10 +14,9 @@ export component MenuBarItem {
min-height: base.min-height;
base := MenuBarItemBase {
padding-left: 11px;
padding-right: 11px;
padding-top: 4px;
padding-bottom: 6px;
horizontal-padding: 11px;
top-padding: 4px;
bottom-padding: 6px;
default-foreground: FluentPalette.foreground;
hover-foreground: FluentPalette.foreground;
pressed-foreground: FluentPalette.text-secondary;
@ -30,7 +29,6 @@ export component MenuBarItem {
}
export component MenuBar inherits MenuBarBase {
padding: 9px;
spacing: 10px;
min-layout-height: 40px;
}
@ -43,7 +41,7 @@ export component MenuFrame inherits MenuFrameBase {
drop-shadow-color: FluentPalette.shadow;
drop-shadow-offset-y: 8px;
drop-shadow-blur: 16px;
padding: 1px;
margin: 1px;
layout-min-width: 280px;
}
@ -68,8 +66,7 @@ export component MenuItem {
font-size: FluentFontSettings.body.font-size;
font-weight: FluentFontSettings.body.font-weight;
border-radius: 4px;
padding-left: 11px;
padding-right: 11px;
horizontal-padding: 11px;
spacing: 8px;
sub-menu-icon: @image-url("_arrow_forward.svg");
icon-size: 12px;

18
internal/compiler/widgets/material/menu.slint
View file

@ -14,10 +14,9 @@ export component MenuBarItem {
min-height: base.min-height;
base := MenuBarItemBase {
padding-left: 12px;
padding-right: 12px;
padding-top: 8px;
padding-bottom: 8px;
horizontal-padding: 12px;
top-padding: 8px;
bottom-padding: 8px;
default-foreground: MaterialPalette.foreground;
hover-foreground: MaterialPalette.foreground;
pressed-foreground: MaterialPalette.foreground;
@ -29,8 +28,7 @@ export component MenuBarItem {
}
export component MenuBar inherits MenuBarBase {
padding-left: 4px;
padding-right: 4px;
horizontal-padding: 4px;
spacing: 8px;
min-layout-height: 40px;
}
@ -43,8 +41,6 @@ export component MenuFrame inherits MenuFrameBase {
drop-shadow-color: MaterialPalette.shadow;
drop-shadow-offset-y: 2px;
drop-shadow-blur: 6px;
padding-top: 8px;
padding-bottom: 8px;
layout-min-width: 200px;
}
@ -66,10 +62,8 @@ export component MenuItem {
separator-color: MaterialPalette.border;
font-size: MaterialFontSettings.body-large.font-size;
font-weight: MaterialFontSettings.body-large.font-weight;
padding-left: 12px;
padding-right: 12px;
padding-top: 8px;
padding-bottom: 8px;
horizontal-padding: 12px;
vertical-padding: 8px;
spacing: 8px;
sub-menu-icon: @image-url("_arrow_forward.svg");
icon-size: MaterialFontSettings.body-large.font-size;

13
internal/compiler/widgets/qt/menu.slint
View file

@ -13,10 +13,9 @@ export component MenuBarItem {
min-height: base.min-height;
base := MenuBarItemBase {
padding-left: 11px;
padding-right: 11px;
padding-top: 4px;
padding-bottom: 6px;
horizontal-padding: 11px;
top-padding: 4px;
bottom-padding: 6px;
default-foreground: NativePalette.foreground;
hover-foreground: NativePalette.accent-foreground;
pressed-foreground: NativePalette.accent-foreground;
@ -29,7 +28,6 @@ export component MenuBarItem {
}
export component MenuBar inherits MenuBarBase {
padding: 9px;
spacing: 10px;
min-layout-height: 40px;
}
@ -40,7 +38,7 @@ export component MenuFrame inherits MenuFrameBase {
border-width: 1px;
border-color: NativePalette.border;
drop-shadow-color: transparent;
padding: 1px;
margin: 1px;
layout-min-width: 280px;
}
@ -65,8 +63,7 @@ export component MenuItem {
font-size: NativeStyleMetrics.default-font-size;
font-weight: 300;
border-radius: 4px;
padding-left: 11px;
padding-right: 11px;
horizontal-padding: 11px;
spacing: 8px;
sub-menu-icon: @image-url("_arrow_forward.svg");
icon-size: 12px;

2
tests/cases/widgets/menubar.slint
View file

@ -3,7 +3,7 @@
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
import { AboutSlint, Button } from "std-widgets.slint";
import { MenuBorder } from "../../../internal/compiler/widgets/fluent/components.slint";
export component TestCase inherits Window {
width: 300px;
height: 300px;