language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-08-04 10:50:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

material: improve groupbox visual (#2749)

Browse source
This commit is contained in:
Florian Blasius 2023-05-17 15:19:08 +00:00 • committed by GitHub
parent 757a744123
commit abe558313d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 18 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

2
internal/compiler/widgets/material-base/md.slint
View file

@ -57,7 +57,7 @@ export global md {
out property<Sys> sys: {
color: {
background: !root.dark-color-scheme ? #FFFBFE : #1C1B1F,
background: !root.dark-color-scheme ? #f8f3f9 : #2a282d,
surface: !root.dark-color-scheme ? #FFFBFE : #1C1B1F,
surface-variant: !root.dark-color-scheme ? #E7E0EC.darker(0.2) : #49454F,
on-surface: !root.dark-color-scheme ? #1C1B1F : #E6E1E5,

2
internal/compiler/widgets/material-base/std-widgets-impl.slint
View file

@ -10,7 +10,7 @@ import { md } from "md.slint";
export { Button, CheckBox, ScrollView }
export global StyleMetrics {
out property<length> layout-spacing: 8px;
out property<length> layout-spacing: 16px;
out property<length> layout-padding: 8px;
out property<length> text-cursor-width: 2px;

47
internal/compiler/widgets/material-base/widget-groupbox.slint
View file

@ -9,44 +9,29 @@ export component GroupBox {
in property<bool> enabled: true;
VerticalLayout {
padding-top: label-container.height + 16px;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 16px;
Rectangle {
vertical-stretch: 1;
GridLayout {
@children
}
}
}
container := Rectangle {
border-radius: 4px;
border-width: 1px;
border-color: md.sys.color.outline;
y: label-container.y + label-container.height / 2;
width: 100%;
height: parent.height - label-container.height / 2;
}
label-container := Rectangle {
y:0;
x: 8px;
width: label.width + 8px;
height: label.height + 8px;
background: md.sys.color.background;
spacing: 4px;
label := Text {
x: 4px;
y: 4px;
color: md.sys.color.on-surface;
// FIXME after Roboto font can be loaded
//font-family: md.sys.typescale.body-small.font;
font-size: md.sys.typescale.body-small.size;
font-size: md.sys.typescale.body-large.size;
font-weight: md.sys.typescale.body-small.weight;
overflow: elide;
horizontal-alignment: center;
}
container := Rectangle {
border-radius: 16px;
border-width: 1px;
border-color: md.sys.color.outline;
vertical-stretch: 1;
background: md.sys.color.surface;
GridLayout {
padding: 16px;
@children
}
}
}