ags: better separator properties, add more separators on widgets

This commit is contained in:
retrozinndev
2025-04-27 08:19:26 -03:00
parent 4a2733d884
commit a0cf72ae8a
10 changed files with 100 additions and 91 deletions
+16 -6
View File
@@ -7,40 +7,50 @@ export interface SeparatorProps {
cssColor?: string;
orientation?: Gtk.Orientation;
size?: number;
spacing?: number;
margin?: number;
visible?: boolean | Binding<boolean>;
}
export function Separator(props: SeparatorProps) {
export function Separator(props: SeparatorProps = {
orientation: Gtk.Orientation.HORIZONTAL
}) {
props.alpha = props.alpha ?
(props.alpha > 1 ?
props.alpha / 100
: props.alpha)
: 1;
props.orientation = props.orientation ?? Gtk.Orientation.HORIZONTAL;
return new Widget.Box({
name: "separator",
...(props.orientation === Gtk.Orientation.HORIZONTAL ?
{ vexpand: true } : { hexpand: true }),
className: `separator ${ props.orientation === Gtk.Orientation.VERTICAL ?
"vertical" : "horizontal" }`,
visible: props.visible,
css: `.vertical {
padding: 7px 7px;
padding: ${props.spacing ?? 0}px ${props.margin ?? 7}px;
}
.horizontal {
padding: 4px 4px;
padding: ${props.margin ?? 4}px ${props.spacing ?? 0}px;
}`,
child: new Widget.Box({
className: `${ props.orientation === Gtk.Orientation.VERTICAL ?
"vertical" : "horizontal" } ${ props.class ? props.class : "" }`,
...(props.orientation === Gtk.Orientation.HORIZONTAL ?
{ vexpand: true } : { hexpand: true }),
css: `* {
background: ${ props.cssColor || "lightgray" };
background: ${ props.cssColor ?? "lightgray" };
opacity: ${props.alpha};
}
.horizontal {
min-width: ${ props.size || 1 }px;
min-width: ${ props.size ?? 1 }px;
}
.vertical {
min-height: ${ props.size || 1 }px;
min-height: ${ props.size ?? 1 }px;
}`
} as Widget.BoxProps)
} as Widget.BoxProps);