slint/examples/energy-monitor/ui/desktop_window.slint

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

import { Theme, ScreenSize } from "theme.slint";
import { SmallMain } from "small_main.slint";
import { BigMain } from "big_main.slint";
import { MidMain } from "mid_main.slint";
import { MidMain } from "mid_main.slint";
import { MobileMain } from "mobile_main.slint";
import { BarTileModel } from "widgets/widgets.slint";
import { Images } from "images.slint";
import { Theme } from "theme.slint";
import { HeaderAdapter } from "blocks/blocks.slint";
import { Navigation, MenuButton, Menu, Value } from "widgets/widgets.slint";
import { BalanceAdapter, OverviewAdapter, UsageAdapter, WeatherAdapter, MenuPageAdapter, MenuOverviewAdapter, SettingsAdapter } from "pages/pages.slint";
import { KioskOverlay } from "blocks/kiosk_overlay.slint";

export { OverviewAdapter, UsageAdapter, Value, WeatherAdapter, MenuPageAdapter, MenuOverviewAdapter, SettingsAdapter,
    BarTileModel, Images, HeaderAdapter }

export component MainWindow inherits Window {
    private property <length> big-break-point: 1366px;
    private property <length> mid-break-point: 799px;
    private property <length> mobile-break-point: 444px;
    private property <ScreenSize> screen-size: root.get-screen-size();

    title: "EnergyMNG Demo";
    min-width: 320px;
    min-height: 240px;
    background: Theme.palette.pure-black;
    preferred-width: 800px;
    preferred-height: 480px;

    /* The design is not finished yet
    if root.screen-size == ScreenSize.Desktop : BigMain {
        preferred-width: 100%;
        preferred-height: 100%;
    }
    */

    if root.screen-size == ScreenSize.Mobile : MobileMain {
        preferred-width: 100%;
        preferred-height: 100%;
    }

    if root.screen-size == ScreenSize.EmbeddedMedium : MidMain {
        preferred-width: 100%;
        preferred-height: 100%;
    }

    if root.screen-size == ScreenSize.EmbeddedSmall : SmallMain {
        preferred-width: 100%;
        preferred-height: 100%;
    }

    if SettingsAdapter.kiosk-mode-checked : KioskOverlay {}

    pure function get-screen-size() -> ScreenSize {
        if (root.width <= root.mobile-break-point && root.width < root.height) {
            return ScreenSize.Mobile;
        }

        if (root.width < root.mid-break-point) {
            return ScreenSize.EmbeddedSmall;
        }

        return ScreenSize.EmbeddedMedium;
    }
}