selenite/components/ToggleButton.slint

import { Palette } from "Palette.slint";
import { VText } from "Text.slint";

export component ToggleButton inherits Rectangle {

	in property text <=> text-component.text;
	in property text-color <=> text-component.color;
	in property text-alignment <=> text-component.horizontal-alignment;
	in property<bool> active: false;
	callback clicked;


	background: root.active ? Palette.control-background
		: ta.has-hover ? Palette.control-background.transparentize(0.5)
		: Colors.transparent;
	border-radius: 4px;

	ta := TouchArea {
		mouse-cursor: pointer;
		clicked => {
			root.clicked();
		}
	}

	HorizontalLayout {
		alignment: space-between;
		VerticalLayout {
			padding: 8px;
			padding-top: 4px;
			padding-bottom: 4px;
			text-component := VText {
				horizontal-alignment: center;
			}
		}
		@children
	}
}