status-desktop/ui/StatusQ/sandbox/main.qml

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.14
import QtGraphicalEffects 1.13

import Sandbox 0.1

import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Layout 0.1
import StatusQ.Platform 0.1

StatusWindow {
    id: rootWindow
    width: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width
                                                                  :  1224
    height: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.height
                                                                   :840
    visible: true
    title: qsTr("StatusQ Documentation App")

    property ThemePalette lightTheme: StatusLightTheme {}
    property ThemePalette darkTheme: StatusDarkTheme {}

    readonly property real maxFactor: 2.0
    readonly property real minFactor: 0.5

    property real factor: 1.0

    Component.onCompleted: {
        Theme.palette = lightTheme
        apiDocsButton.checked = true

        rootWindow.updatePosition();
    }

    StatusAppLayout {
        id: appLayout
        anchors.fill: parent

        appNavBar: StatusAppNavBar {
            height: rootWindow.height

            navBarChatButton: StatusNavBarTabButton {
                icon.name: "refresh"
                tooltip.text: "Reload App"
                onClicked: app.restartQml()
            }

            navBarTabButtons: [
                StatusNavBarTabButton {
                    id: apiDocsButton
                    icon.name: "edit"
                    tooltip.text: "API Documentation"
                    onClicked: {
                        stackView.clear()
                        stackView.push(libraryDocumentationCmp)
                        checked = !checked
                        demoAppButton.checked = false
                    }
                },
                StatusNavBarTabButton {
                    id: demoAppButton
                    icon.name: "status"
                    tooltip.text: "Demo Application"
                    checked: stackView.currentItem == demoAppCmp
                    onClicked: {
                        stackView.clear()
                        stackView.push(demoAppCmp)
                        checked = !checked
                        apiDocsButton.checked = false
                    }
                }
            ]
        }

        appView: StackView {
            id: stackView
            anchors.fill: parent
            initialItem: libraryDocumentationCmp
        }

        ThemeSwitch {
            anchors.top: parent.top
            anchors.topMargin: 32
            anchors.right: parent.right
            anchors.rightMargin: 32
            onCheckedChanged: {
                if (Theme.palette === rootWindow.lightTheme) {
                    Theme.palette = rootWindow.darkTheme
                } else {
                    Theme.palette = rootWindow.lightTheme
                }
            }
        }
    }

    Component {
        id: libraryDocumentationCmp

        StatusAppTwoPanelLayout {

            leftPanel: Item {
                anchors.fill: parent
                ScrollView {
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
                    contentHeight: navigation.height + 56
                    contentWidth: navigation.width
                    clip: true
                    Column {
                        id: navigation
                        anchors.top: parent.top
                        anchors.topMargin: 48
                        anchors.horizontalCenter: parent.horizontalCenter
                        spacing: 0

                        StatusListSectionHeadline { text: "StatusQ.Core" }
                        StatusNavigationListItem { 
                            title: "Icons" 
                            selected: page.sourceComponent == iconsComponent
                            onClicked: page.sourceComponent = iconsComponent
                        }

                        StatusListSectionHeadline { text: "StatusQ.Layout" }
                        StatusNavigationListItem { 
                            title: "Layouts" 
                            selected: page.sourceComponent == layoutComponent
                            onClicked: page.sourceComponent = layoutComponent
                        }

                        StatusListSectionHeadline { text: "StatusQ.Controls" }
                        StatusNavigationListItem { 
                            title: "Buttons" 
                            selected: page.sourceComponent == buttonsComponent
                            onClicked: page.sourceComponent = buttonsComponent
                        }
                        StatusNavigationListItem { 
                            title: "Controls" 
                            selected: page.sourceComponent == controlsComponent
                            onClicked: page.sourceComponent = controlsComponent
                        }
                        StatusNavigationListItem { 
                            title: "StatusInput" 
                            selected: page.sourceComponent == statusInputPageComponent
                            onClicked: page.sourceComponent = statusInputPageComponent
                        }
                        StatusListSectionHeadline { text: "StatusQ.Components" }
                        StatusNavigationListItem { 
                            title: "List Items"
                            selected: page.sourceComponent == listItemsComponent
                            onClicked: page.sourceComponent = listItemsComponent
                        }
                        StatusNavigationListItem { 
                            title: "StatusChatInfoToolBar"
                            selected: page.sourceComponent == chatInfoToolBarComponent
                            onClicked: page.sourceComponent = chatInfoToolBarComponent
                        }
                        StatusNavigationListItem { 
                            title: "Others"
                            selected: page.sourceComponent == othersComponent
                            onClicked: page.sourceComponent = othersComponent
                        }
                        StatusListSectionHeadline { text: "StatusQ.Popup" }
                        StatusNavigationListItem { 
                            title: "StatusPopupMenu"
                            selected: page.sourceComponent == popupMenuComponent
                            onClicked: page.sourceComponent = popupMenuComponent
                        }

                        StatusNavigationListItem {
                            title: "StatusModal"
                            selected: page.sourceComponent == statusModalComponent
                            onClicked: page.sourceComponent = statusModalComponent
                        }
                    }
                }
            }

            rightPanel: Item {
                id: rightPanel
                anchors.fill: parent
                ScrollView {
                    anchors.fill: parent
                    contentHeight: (pageWrapper.height + pageWrapper.anchors.topMargin) * rootWindow.factor
                    contentWidth: (pageWrapper.width * rootWindow.factor)
                    clip: true

                    Item {
                        id: pageWrapper
                        width: rightPanel.width
                        anchors.top: parent.top
                        anchors.topMargin: 64
                        height: Math.max(rootWindow.height, page.height + 128)
                        scale: rootWindow.factor
                        Loader {
                            id: page
                            active: true
                            anchors.centerIn: parent
                            sourceComponent: iconsComponent
                        }
                    }
                }
            }
        }
    }

    Action {
        shortcut: "CTRL+="
        onTriggered: {
            if (rootWindow.factor < 2.0)
                rootWindow.factor += 0.2
        }
    }

    Action {
        shortcut: "CTRL+-"
        onTriggered: {
            if (rootWindow.factor > 0.5)
                rootWindow.factor -= 0.2
        }
    }

    Action {
        shortcut: "CTRL+0"
        onTriggered: {
            rootWindow.factor = 1.0
        }
    }

    Component {
        id: iconsComponent
        Icons { iconColor: Theme.palette.primaryColor1 }
    }

    Component {
        id: controlsComponent
        Controls {}
    }

    Component {
        id: statusInputPageComponent
        StatusInputPage {}
    }

    Component {
        id: listItemsComponent
        ListItems {}
    }

    Component {
        id: layoutComponent
        Layout {}
    }

    Component {
        id: othersComponent
        Others {}
    }

    Component {
        id: buttonsComponent
        Buttons {}
    }

    Component {
        id: popupMenuComponent
        StatusPopupMenuPage {}
    }

    Component {
        id: chatInfoToolBarComponent
        StatusChatInfoToolBarPage {}
    }

    Component {
        id: statusModalComponent
        Popups {}
    }

    Component {
        id: demoAppCmp

        Rectangle {
            anchors.fill: parent
            color: Theme.palette.baseColor3
            DemoApp {
                id: demoApp
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
            }
            DropShadow {
                anchors.fill: demoApp
                source: demoApp
                horizontalOffset: 0
                verticalOffset: 5
                radius: 20
                samples: 20
                color: "#22000000"
            }
        }
    }

    StatusMacTrafficLights {
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.margins: 13

        onClose: {
            rootWindow.close()
        }

        onMinimised: {
            rootWindow.showMinimized()
        }

        onMaximized: {
            rootWindow.toggleFullScreen()
        }
    }
}