language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-09-30 22:01:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Support button with only icon (#3024)

Browse source
This commit is contained in:
Guiguiprim 2023-07-03 12:17:46 +02:00 • committed by GitHub
parent 0c71a94867
commit 6db1c44d2a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

6
examples/gallery/ui/pages/controls_page.slint
View file

@ -30,6 +30,12 @@ export component ControlsPage inherits Page {
primary: true;
}
Button {
icon: @image-url("../../thumbsup.png");
enabled: GallerySettings.widgets-enabled;
primary: true;
}
Button {
checkable: true;
text: self.checked ? @tr("ON") : @tr("OFF");

17
internal/compiler/widgets/fluent-base/button.slint
View file

@ -5,9 +5,11 @@ import { Typography, Palette } from "styling.slint";
import { FocusBorder } from "components.slint";
export component Button {
private property <brush> text-color: primary || checked ? Palette.text-on-accent-primary : Palette.text-primary;
callback clicked;
in property <string> text <=> i-text.text;
in property <string> text;
in property <image> icon;
in property <bool> primary;
in property <bool> enabled <=> i-touch-area.enabled;
@ -21,7 +23,7 @@ export component Button {
horizontal-stretch: 0;
vertical-stretch: 0;
accessible-label <=> i-text.text;
accessible-label: text;
accessible-role: button;
i-background := Rectangle {
@ -48,12 +50,13 @@ export component Button {
width: 20px;
}
i-text := Text {
color: root.primary || root.checked ? Palette.text-on-accent-primary : Palette.text-primary;
if (root.text != ""): Text {
font-size: Typography.body.font-size;
font-weight: Typography.body.font-weight;
horizontal-alignment: center;
vertical-alignment: center;
text: root.text;
color: root.text-color;
animate color { duration: 150ms; }
}
@ -95,12 +98,12 @@ export component Button {
disabled when !root.enabled : {
i-background.background: root.primary || root.checked ? Palette.accent-disabled : Palette.control-disabled;
i-border.border-color: root.primary || root.checked ? transparent : Palette.control-stroke;
i-text.color: root.primary || root.checked ? Palette.text-on-accent-disabled : Palette.text-disabled;
root.text-color: root.primary || root.checked ? Palette.text-on-accent-disabled : Palette.text-disabled;
}
pressed when root.pressed : {
i-background.background: root.primary || root.checked ? Palette.accent-tertiary : Palette.control-tertiary;
i-border.border-color: Palette.control-stroke;
i-text.color: root.primary || root.checked ? Palette.text-on-accent-secondary : Palette.text-secondary;
root.text-color: root.primary || root.checked ? Palette.text-on-accent-secondary : Palette.text-secondary;
}
hover when i-touch-area.has-hover : {
i-background.background: root.primary || root.checked ? Palette.accent-secondary : Palette.control-secondary;
@ -108,7 +111,7 @@ export component Button {
checked when root.checked : {
i-background.background: Palette.accent-default;
i-border.border-color: Palette.accent-control-border;
i-text.color: Palette.text-on-accent-primary;
root.text-color: Palette.text-on-accent-primary;
}
]
}

22
internal/compiler/widgets/material-base/button.slint
View file

@ -6,9 +6,12 @@ import { Typography, Palette, Elevation } from "styling.slint";
// Default button widget with Material Design Filled Button look and feel.
export component Button {
private property <brush> text-color: root.primary ? Palette.on-primary : Palette.on-secondary-container;
private property <float> text-opacity: 1.0;
callback clicked;
in property<string> text <=> i-text.text;
in property<string> text;
in property<bool> enabled <=> i-state-layer.enabled;
in property<bool> checkable;
in property<image> icon;
@ -18,7 +21,8 @@ export component Button {
in-out property<bool> checked;
min-height: max(40px, i-layout.min-height);
accessible-label <=> i-text.text;
min-width: max(40px, i-layout.min-width);
accessible-label: text;
accessible-role: button;
forward-focus: i-state-layer;
@ -56,11 +60,13 @@ export component Button {
if (root.icon.width > 0 && root.icon.height > 0): Image {
source <=> root.icon;
width: 24px;
opacity: i-text.opacity;
opacity: root.text-opacity;
}
i-text := Text {
color: root.primary ? Palette.on-primary : Palette.on-secondary-container;
if (root.text != "") : Text {
text: root.text;
color: root.text-color;
opacity: root.text-opacity;
vertical-alignment: center;
horizontal-alignment: center;
font-weight: Typography.label-large.font-weight;
@ -73,11 +79,11 @@ export component Button {
disabled when !root.enabled : {
i-background.background: Palette.on-surface;
i-background.opacity: 0.12;
i-text.opacity: 0.38;
i-text.color: Palette.on-surface;
root.text-opacity: 0.38;
root.text-color: Palette.on-surface;
}
checked when root.checked: {
i-text.color: Palette.on-primary;
root.text-color: Palette.on-primary;
}
]
}