slint/demos/energy-monitor/ui/mid_main.slint

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

import { Header, HeaderAdapter } from "blocks/blocks.slint";
import { Images } from "images.slint";
import { Theme } from "theme.slint";
import { Menu, PageScrollView, PageContainer } from "widgets/widgets.slint";
import { MenuPage } from "pages/pages.slint";
import { Balance, Overview, Usage, UsageAdapter, Weather, About } from "pages/pages.slint";

export component MidMain {
    Rectangle {
        background: Theme.palette.background-gradient;

        VerticalLayout {
            padding-bottom: 50px;

            Header {}

            i-page-scroll-view := PageScrollView {
                vertical-stretch: 1;
                page-count: 5;

                PageContainer {
                    clicked => { i-page-scroll-view.toggle-selection(self.index, self.x); }

                    index: 0;
                    selected <=> i-page-scroll-view.selection;
                    selected-width: i-page-scroll-view.selected-width;
                    selected-height: i-page-scroll-view.selected-height;
                    selected-h-offset: i-page-scroll-view.selected-h-offset;

                    Overview {}
                }

                PageContainer {
                    clicked => { i-page-scroll-view.toggle-selection(self.index, self.x); }

                    index: 1;
                    selected <=> i-page-scroll-view.selection;
                    selected-width: i-page-scroll-view.selected-width;
                    selected-height: i-page-scroll-view.selected-height;
                    selected-h-offset: i-page-scroll-view.selected-h-offset;

                    Usage {}
                }

                PageContainer {
                    clicked => { i-page-scroll-view.toggle-selection(self.index, self.x); }

                    index: 2;
                    selected <=> i-page-scroll-view.selection;
                    selected-width: i-page-scroll-view.selected-width;
                    selected-height: i-page-scroll-view.selected-height;
                    selected-h-offset: i-page-scroll-view.selected-h-offset;

                    Balance {}
                }

                PageContainer {
                    clicked => { i-page-scroll-view.toggle-selection(self.index, self.x); }

                    index: 3;
                    selected <=> i-page-scroll-view.selection;
                    selected-width: i-page-scroll-view.selected-width;
                    selected-height: i-page-scroll-view.selected-height;
                    selected-h-offset: i-page-scroll-view.selected-h-offset;

                    Weather {}
                }

                PageContainer {
                    clicked => { i-page-scroll-view.toggle-selection(self.index, self.x); }

                    index: 4;
                    selected <=> i-page-scroll-view.selection;
                    selected-width: i-page-scroll-view.selected-width;
                    selected-height: i-page-scroll-view.selected-height;
                    selected-h-offset: i-page-scroll-view.selected-h-offset;

                    About {}
                }
            }
        }

        i-menu := Menu {
            stays-open: true;
            preferred-width: 100%;
            preferred-height: 100%;
            start-y: 35px;
            end-y: 75px;
            menu-width: root.width / 3;
            menu-height: root.height - 75px;

            opened => {
                i-menu-page.current-index = 0;
            }

            i-menu-page := MenuPage {
                close => {
                    i-menu.hide();
                }

                preferred-width: 100%;
                preferred-height: 100%;
            }
        }
    }
}