slint/demos/home-automation/ui/components/general/toggle.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT

import { Palette } from "../../common.slint";
import { InnerShadowRectangle } from "innerShadowRectangle.slint";

export component DropShadowToggle inherits Rectangle {
    in-out property <string> labelOff:"";
    in-out property <string> labelOn: "ON";
    in property <percent> scale: 100%;
    in property <float> toggleOpacity: 1.0;
    in-out property <bool> active:true;
    in property <color> inner-color-active:Palette.accent-background;
    in property <color> inner-color-inactive: Palette.foreground.transparentize(0.85);
    in property <color> inner-shadow-color: Palette.shadow-color;
    in property <color> control-color: Palette.alternate-background;
    in property <bool> touchEnabled:true;
    property <duration> animation-duration: 100ms;
    callback toggle();
    width: self.preferred-width;
    height: 45px * root.scale;
    toggle => {
        active = !active;
    }

    HorizontalLayout {
        alignment: LayoutAlignment.stretch;
        spacing: 20px;

        // LEFT LABEL
        Text {
            visible: labelOff != "";
            vertical-alignment: center;
            horizontal-alignment: right;
            text: labelOff;
            font-size: root.height / 2;
            font-weight: 700;
        }

        toggleBox := Rectangle {

            width: root.height * 1.7;

            InnerShadowRectangle {
                clip: true;
                opacity: toggleOpacity;
                border-radius: self.height / 2;
                nine-slice: false;
                states [
                    active when root.active: {
                        inner-color: inner-color-active;
                        in {
                            animate inner-color {
                                duration: animation-duration;
                                easing: ease-out;
                            }
                        }
                    }
                    inactive when !root.active: {
                        inner-color: inner-color-inactive;
                        in {
                            animate inner-color {
                                duration: animation-duration;
                                easing: ease-out;
                            }
                        }
                    }
                ]
                background: inner-shadow-color;

                // CONTROL BUTTON
                TouchArea {
                    enabled: touchEnabled;
                    clicked => {
                        root.active = !root.active;
                    }
                }

                animate drop-shadow-color {
                    duration: animation-duration;
                    easing: ease-in;
                    delay: 0;
                }
                // CONTROL
                Rectangle {
                    property <length> thumb-margin: 5.5px * root.scale;
                    border-radius: self.height / 2;
                    height: parent.height * 0.78;
                    width: parent.height * 0.78;
                    background: control-color;
                    states [
                        active when root.active: {
                            x: parent.width - self.width - thumb-margin;
                            in {
                                animate x {
                                    duration: animation-duration;
                                    easing: ease-out;
                                }
                            }
                        }
                        inactive when !root.active: {
                            x: thumb-margin;
                            in {
                                animate x {
                                    duration: animation-duration;
                                    easing: ease-out;
                                }
                            }
                        }
                    ]
                }

                border-color: Palette.foreground;
            }
        }
        // RIGHT LABEL
        Text {
            visible: labelOn != "";
            text: labelOn;
            horizontal-alignment: left;
            vertical-alignment: center;
            font-size: root.height / 2;
            font-weight: 700;
        }
    }
}