Native.qml

import QtQuick
import QtQuick.Window
import QtQuick.Layouts
import QtQuick.Controls          // <- stock Qt Quick Controls, styled by D707
import "qrc:/primitives"

// Nothing in this file is a custom type. Every control below is the stock
// QtQuick.Controls one, wearing the D707 style — same API, same keyboard
// handling, same accessibility. Swap the style name and it reverts to Basic.
Window {
    id: win
    width:  Math.min(1180, Screen.desktopAvailableWidth  - 80)
    height: Math.min(880,  Screen.desktopAvailableHeight - 80)
    minimumWidth: 680
    minimumHeight: 520
    color: "#181818"
    title: qsTr("D707 — stock Qt Quick Controls")

    Style { id: sty }
    property color face: "#56BDB4"

    Rectangle { anchors.fill: parent; color: win.face }

    ScrollView {
        anchors.fill: parent
        anchors.margins: 24
        contentWidth: availableWidth
        clip: true

        ColumnLayout {
            width: parent.width
            spacing: 22

            ColumnLayout {
                spacing: 4
                Label {
                    text: "STOCK CONTROLS"
                    font.pixelSize: 30
                    font.weight: Font.Black
                    font.letterSpacing: 5.4
                }
                Label {
                    text: "QtQuick.Controls types · D707 style · no custom components"
                    font.pixelSize: 14
                    font.letterSpacing: 2
                    color: sty.amber
                }
            }

            GroupBox {
                Layout.fillWidth: true
                title: "BUTTONS"
                RowLayout {
                    anchors.fill: parent
                    spacing: 12
                    Button { text: "DEFAULT" }
                    Button { text: "PRIMARY"; accent: sty.blue }
                    Button { text: "DANGER";  accent: sty.red }
                    Button { text: "CHECKED"; checkable: true; checked: true }
                    Button { text: "OFF"; enabled: false }
                    RoundButton { text: "+" }
                    Item { Layout.fillWidth: true }
                }
            }

            GroupBox {
                Layout.fillWidth: true
                title: "SELECTION"
                RowLayout {
                    anchors.fill: parent
                    spacing: 30
                    ColumnLayout {
                        spacing: 8
                        CheckBox { text: "Normalise"; checked: true }
                        CheckBox { text: "Dither" }
                        CheckBox { text: "Tri-state"; tristate: true; checkState: Qt.PartiallyChecked }
                    }
                    ColumnLayout {
                        spacing: 8
                        RadioButton { text: "44.1 kHz"; checked: true }
                        RadioButton { text: "48 kHz" }
                        RadioButton { text: "96 kHz" }
                    }
                    ColumnLayout {
                        spacing: 12
                        Switch { text: "Engine"; checked: true }
                        Switch { text: "Monitor" }
                    }
                    Item { Layout.fillWidth: true }
                }
            }

            GroupBox {
                Layout.fillWidth: true
                title: "CONTINUOUS"
                ColumnLayout {
                    anchors.fill: parent
                    spacing: 18

                    RowLayout {
                        Layout.fillWidth: true
                        spacing: 20
                        Slider { Layout.fillWidth: true; value: 0.6 }
                        Label { text: "stepSize 0.1"; font.pixelSize: 13; color: Qt.rgba(1,1,1,0.7) }
                        Slider { Layout.preferredWidth: 200; value: 0.4; stepSize: 0.1; snapMode: Slider.SnapAlways }
                    }
                    RangeSlider {
                        Layout.fillWidth: true
                        first.value: 0.2
                        second.value: 0.7
                    }
                    RowLayout {
                        spacing: 26
                        Dial { implicitWidth: 95; implicitHeight: 95; value: 0.3 }
                        Dial { implicitWidth: 76; implicitHeight: 76; value: 0.65; stepSize: 0.05 }
                        Dial { implicitWidth: 60; implicitHeight: 60; value: 0.9 }
                        ColumnLayout {
                            Layout.fillWidth: true
                            spacing: 12
                            ProgressBar { Layout.fillWidth: true; value: 0.55 }
                            ProgressBar { Layout.fillWidth: true; indeterminate: true }
                        }
                        BusyIndicator { running: true }
                    }
                }
            }

            GroupBox {
                Layout.fillWidth: true
                title: "INPUTS"
                GridLayout {
                    anchors.fill: parent
                    columns: win.width > 900 ? 3 : 1
                    columnSpacing: 16
                    rowSpacing: 14

                    TextField { Layout.fillWidth: true; placeholderText: "Session name" }
                    TextField { Layout.fillWidth: true; placeholderText: "Passphrase"; echoMode: TextInput.Password }
                    SpinBox   { Layout.fillWidth: true; from: -60; to: 12; value: -6; editable: true }
                    ComboBox  { Layout.fillWidth: true; model: ["Main out A", "Main out B", "Headphones"] }
                    ComboBox  { Layout.fillWidth: true; editable: true; model: ["44100", "48000", "96000"] }
                    TextArea  { Layout.fillWidth: true; Layout.columnSpan: 1; placeholderText: "Notes…" }
                }
            }

            GroupBox {
                Layout.fillWidth: true
                title: "NAVIGATION & OVERLAYS"
                ColumnLayout {
                    anchors.fill: parent
                    spacing: 16

                    TabBar {
                        id: tabs
                        Layout.fillWidth: true
                        TabButton { text: "OVERVIEW" }
                        TabButton { text: "DETAIL" }
                        TabButton { text: "LOG" }
                    }

                    ToolBar {
                        Layout.fillWidth: true
                        RowLayout {
                            anchors.fill: parent
                            spacing: 6
                            ToolButton { text: "Play" }
                            ToolButton { text: "Pause" }
                            ToolButton { text: "Stop" }
                            ToolSeparator {}
                            ToolButton { text: "Record"; accent: sty.red }
                            Item { Layout.fillWidth: true }
                        }
                    }

                    RowLayout {
                        spacing: 12
                        Button {
                            id: menuBtn
                            text: "MENU"
                            onClicked: fileMenu.popup(menuBtn, 0, menuBtn.height + 6)
                        }
                        Button {
                            text: "DIALOG"
                            accent: sty.blue
                            onClicked: confirm.open()
                        }
                        Button {
                            id: tipBtn
                            text: "TOOLTIP"
                            ToolTip.visible: hovered
                            ToolTip.delay: 350
                            ToolTip.text: "Stock ToolTip, D707 style"
                        }
                        Item { Layout.fillWidth: true }
                    }

                    Frame {
                        Layout.fillWidth: true
                        Layout.preferredHeight: 200
                        ListView {
                            anchors.fill: parent
                            clip: true
                            spacing: 4
                            model: ["Turntable", "Tape deck A", "Tape deck B", "Tuner", "Aux in", "Digital"]
                            delegate: ItemDelegate {
                                width: ListView.view.width
                                text: modelData
                                highlighted: ListView.isCurrentItem
                                onClicked: ListView.view.currentIndex = index
                            }
                            ScrollBar.vertical: ScrollBar {}
                        }
                    }
                }
            }

            GroupBox {
                Layout.fillWidth: true
                title: "MENU BAR"
                MenuBar {
                    anchors.fill: parent
                    Menu {
                        title: "FILE"
                        MenuItem { text: "Load preset\u2026" }
                        MenuItem { text: "Save preset" }
                        MenuSeparator {}
                        MenuItem { text: "Close" }
                    }
                    Menu {
                        title: "CHANNEL"
                        MenuItem { text: "Mute"; checkable: true }
                        MenuItem { text: "Solo"; checkable: true }
                    }
                    Menu {
                        title: "HELP"
                        MenuItem { text: "About" }
                    }
                }
            }

            GroupBox {
                Layout.fillWidth: true
                title: "HOLD TO CONFIRM"
                RowLayout {
                    anchors.fill: parent
                    spacing: 16
                    DelayButton { text: "ERASE"; delay: 1400 }
                    DelayButton { text: "COMMIT"; delay: 900; accent: sty.green }
                    Item { Layout.fillWidth: true }
                    Button { text: "DRAWER"; onClicked: sideDrawer.open() }
                }
            }

            GroupBox {
                Layout.fillWidth: true
                title: "PAGED VIEWS"
                ColumnLayout {
                    anchors.fill: parent
                    spacing: 14

                    SwipeView {
                        id: pages
                        Layout.fillWidth: true
                        Layout.preferredHeight: 130
                        clip: true

                        Page {
                            Label { anchors.centerIn: parent; text: "SOURCE STAGE"; font.letterSpacing: 4 }
                        }
                        Page {
                            Label { anchors.centerIn: parent; text: "TONE STACK"; font.letterSpacing: 4 }
                        }
                        Page {
                            Label { anchors.centerIn: parent; text: "OUTPUT"; font.letterSpacing: 4 }
                        }
                    }

                    PageIndicator {
                        Layout.alignment: Qt.AlignHCenter
                        count: pages.count
                        currentIndex: pages.currentIndex
                    }
                }
            }

            GroupBox {
                Layout.fillWidth: true
                title: "SPLIT VIEW"
                SplitView {
                    anchors.fill: parent
                    orientation: Qt.Horizontal

                    Pane {
                        SplitView.preferredWidth: 220
                        SplitView.minimumWidth: 120
                        Label { anchors.centerIn: parent; text: "LEFT"; font.letterSpacing: 4 }
                    }
                    Pane {
                        SplitView.fillWidth: true
                        Label { anchors.centerIn: parent; text: "DRAG THE HANDLE"; font.letterSpacing: 3 }
                    }
                }
            }

            GroupBox {
                Layout.fillWidth: true
                title: "TUMBLER"
                RowLayout {
                    anchors.fill: parent
                    spacing: 18
                    Tumbler { model: 12; visibleItemCount: 5 }
                    Tumbler { model: 60; visibleItemCount: 5 }
                    Tumbler { model: ["44.1", "48.0", "88.2", "96.0", "192.0"]; visibleItemCount: 5 }
                    Item { Layout.fillWidth: true }
                }
            }

            GroupBox {
                Layout.fillWidth: true
                title: "ROWS THAT CARRY A CONTROL"
                ColumnLayout {
                    anchors.fill: parent
                    spacing: 6

                    RadioDelegate { Layout.fillWidth: true; text: "Phono input";  checked: true }
                    RadioDelegate { Layout.fillWidth: true; text: "Line input" }
                    SwitchDelegate { Layout.fillWidth: true; text: "Subsonic filter"; checked: true }
                    SwitchDelegate { Layout.fillWidth: true; text: "Loudness contour" }

                    Frame {
                        Layout.fillWidth: true
                        Layout.preferredHeight: 160
                        ListView {
                            anchors.fill: parent
                            clip: true
                            model: ["Take 01", "Take 02", "Take 03", "Take 04"]
                            delegate: SwipeDelegate {
                                width: ListView.view.width
                                text: modelData
                                swipe.right: Label {
                                    anchors.right: parent.right
                                    anchors.verticalCenter: parent.verticalCenter
                                    anchors.rightMargin: 18
                                    text: "DELETE"
                                    color: sty.red
                                    font.letterSpacing: 3
                                }
                            }
                            ScrollIndicator.vertical: ScrollIndicator {}
                        }
                    }
                }
            }

            Item { Layout.fillWidth: true; implicitHeight: 8 }
        }
    }

    Drawer {
        id: sideDrawer
        width: Math.min(320, win.width * 0.7)
        height: win.height
        edge: Qt.LeftEdge

        ColumnLayout {
            anchors.fill: parent
            spacing: 8
            Label { text: "ROUTING"; font.letterSpacing: 4; font.weight: Font.Bold }
            ItemDelegate { Layout.fillWidth: true; text: "Main out A" }
            ItemDelegate { Layout.fillWidth: true; text: "Main out B" }
            ItemDelegate { Layout.fillWidth: true; text: "Monitor" }
            Item { Layout.fillHeight: true }
            Button { Layout.fillWidth: true; text: "CLOSE"; onClicked: sideDrawer.close() }
        }
    }

    Menu {
        id: fileMenu
        MenuItem { text: "Load preset…" }
        MenuItem { text: "Save preset" }
        MenuSeparator {}
        MenuItem { text: "Loop"; checkable: true; checked: true }
        MenuItem { text: "Reset all" }
    }

    Dialog {
        id: confirm
        anchors.centerIn: parent
        width: 440
        modal: true
        title: "RESET CHANNEL"
        standardButtons: Dialog.Ok | Dialog.Cancel
        Label {
            width: parent.width
            wrapMode: Text.WordWrap
            text: "This clears the tone stack, level and routing for the selected channel. It cannot be undone."
        }
    }
}