sloposk/qml/Main.qml

import QtQuick
import Sloposk

Window {
    id: root

    required property LayoutModel layoutModel
    required property KeyboardController controller
    required property Settings settings
    required property Diagnostics diagnostics
    property var placement: null // FloatingWindow, set from C++
    property var collapse: null // CollapseController, set from C++
    readonly property bool collapsed: collapse?.collapsed ?? false
    property bool settingsOpen: false
    // Height of the key area, for C++ keeping key sizes when rows change.
    readonly property real keysHeight: keyboard.height

    // Transparent room above the keyboard for long-press popups on the top row.
    readonly property real popupMargin: 90
    // Outside this, input passes through to whatever is below the window.
    readonly property rect inputRegion: collapsed
        ? Qt.rect(floatingButton.x, floatingButton.y, floatingButton.width, floatingButton.height)
        : keyboard.alternates.open
        ? Qt.rect(0, 0, width, height)
        : Qt.rect(panel.x, panel.y, panel.width, panel.height)
    // Empty when nothing shows through, so the compositor skips the blur.
    readonly property rect blurRegion: !collapsed && settings.blurBackground && settings.backgroundOpacity < 1
        ? Qt.rect(panel.x, panel.y, panel.width, panel.height)
        : Qt.rect(0, 0, 0, 0)

    width: 1000
    height: 340 + popupMargin
    // None while shrunk to the floating button.
    minimumWidth: collapsed ? 0 : 480
    minimumHeight: collapsed ? 0 : 180 + popupMargin
    visible: false
    color: "transparent"

    onInputRegionChanged: placement?.setInputRegion(inputRegion)
    onBlurRegionChanged: placement?.setBlurRegion(blurRegion, Theme.windowRadius)
    // For CollapseController.
    function dismissKeyRect() {
        return keyboard.keyRect("dismiss");
    }

    onPlacementChanged: {
        placement?.setInputRegion(inputRegion);
        placement?.setBlurRegion(blurRegion, Theme.windowRadius);
    }

    Rectangle {
        id: panel
        anchors { fill: parent; topMargin: root.popupMargin }
        visible: !root.collapsed
        radius: Theme.windowRadius
        color: Qt.rgba(Theme.background.r, Theme.background.g, Theme.background.b, root.settings.backgroundOpacity)

        Keyboard {
            id: keyboard
            anchors { left: parent.left; right: parent.right; top: parent.top; bottom: handle.top }
            anchors.margins: 2
            visible: !root.settingsOpen
            model: root.layoutModel
            controller: root.controller
            popupHeadroom: root.popupMargin + anchors.margins
        }

        SettingsPanel {
            anchors.fill: keyboard
            visible: root.settingsOpen
            settings: root.settings
            layoutModel: root.layoutModel
            diagnostics: root.diagnostics
        }

        DragHandle {
            id: handle
            anchors { left: parent.left; right: parent.right; bottom: parent.bottom }
            pillWidth: Math.min(120, width - 2 * (quickToggles.x + quickToggles.width + 12))
            onDragStarted: root.placement.startMove()
        }

        SettingsButton {
            id: settingsButton
            anchors { left: parent.left; leftMargin: 8; bottom: parent.bottom }
            checked: root.settingsOpen
            alert: root.diagnostics.problems.length > 0
            onClicked: root.settingsOpen = !root.settingsOpen
        }

        QuickToggles {
            id: quickToggles
            anchors { left: settingsButton.right; bottom: parent.bottom }
            settings: root.settings
            layoutModel: root.layoutModel
        }

        ResizeHandle {
            anchors { right: parent.right; bottom: parent.bottom }
            onDragStarted: root.placement.startResize(Qt.RightEdge | Qt.BottomEdge)
        }
    }

    FloatingButton {
        id: floatingButton
        readonly property rect keyRect: root.collapse?.keyRect ?? Qt.rect(0, 0, 0, 0)
        // Over the key while the window is full size, then in the shrunk window.
        x: Math.max(0, Math.min(keyRect.x, root.width - width))
        y: Math.max(0, Math.min(keyRect.y, root.height - height))
        width: keyRect.width
        height: keyRect.height
        visible: root.collapsed
        onTapped: root.collapse.expand()
        onDragStarted: root.placement.startMove()
    }
}