slint/demos/home-automation/ui/components/mainView/fullScreenView.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT
import { AppState, ComponentData, Orientation } from "../../appState.slint";
import { FullScreenWidgetLoader } from "fullScreenWidgetLoader.slint";
import { FullScreenWidgetLoaderSW } from "fullScreenWidgetLoaderSW.slint";
import { Animation } from "../../common.slint";


export component FullScreenView inherits Rectangle {
    property <ComponentData> landscape-data: { id: "", x: 60, y: 60, width: 1800, height: 900, background: #00bf1d, visible: true };
    property <ComponentData> portrait-data: AppState.graphics-accelerator-available ? { id: "", x: 60, y: 60, width: 900, height: 1800, background: #00bf1d, visible: true } : { id: "", x: 160, y: 560, width: 800, height: 800, background: #00bf1d, visible: true };
    property <ComponentData> full-screen-data: AppState.orientation == Orientation.landscape ? landscape-data : portrait-data;
    property <bool> full-screen: false;
    in property <length> nudge-y: 0px;

    backdrop := Rectangle {
        y: -nudge-y;
        width: 100%;
        height: 100%;
        opacity: 0;
        background: black;
        touchCatcher := TouchArea { }

        states [
            isVisible when AppState.full-screen-index != -1 && full-screen: {
                opacity: 0.7;
                in {
                    animate opacity {
                        duration: Animation.full-screen-duration;
                        easing: ease-in-out-sine;
                    }
                }
                out {
                    animate opacity {
                        duration: Animation.full-screen-duration;
                        easing: ease-in-out-sine;
                    }
                }
            }
        ]
    }

    if AppState.graphics-accelerator-available: FullScreenWidgetLoader {
        in-out property <ComponentData> normal-layout-data;
        data: full-screen ? full-screen-data : normal-layout-data;
        property <string> full-screen-index: AppState.full-screen-index;
        changed full-screen-index => {
            full-screen = false;
            closeTimer.running = true;
        }
        init => {
            self.index = AppState.full-screen-index;
            self.type = AppState.component-details[AppState.full-screen-index].type;
            self.normal-layout-data = AppState.current-layout-data.components[AppState.full-screen-index];
        }
    }

    if !AppState.graphics-accelerator-available: FullScreenWidgetLoaderSW {
        in-out property <ComponentData> normal-layout-data;
        data: full-screen ? full-screen-data : normal-layout-data;
        property <string> full-screen-index: AppState.full-screen-index;
        changed full-screen-index => {
            full-screen = false;
            closeTimer.running = true;
        }
        init => {
            self.index = AppState.full-screen-index;
            self.type = AppState.component-details[AppState.full-screen-index].type;
            self.normal-layout-data = AppState.current-layout-data.components[AppState.full-screen-index];
        }
    }

    closeTimer := Timer {
        running: false;
        interval: Animation.full-screen-duration;
        triggered => {
            AppState.showing-full-screen = false;
            AppState.last-selected-index = -1;
        }
    }

    Timer {
        interval: 1ms;
        triggered => {
            self.running = false;
            full-screen = true;
        }
    }
}