code snippet

gistfile1.txt

ScrollView {

        id: scroller
        anchors.fill: parent
        height: root.height
        GridLayout {
            id: main
            height: scroller.height
            width: scroller.width

            columns: 2

            Component.onCompleted: {
                console.log(flick.contentHeight)
            }

            states: [
                State {
                    when: root.width <= 600
                    PropertyChanges {target: left; Layout.row: 1}
                    PropertyChanges {target: right; Layout.row: 0}
                    PropertyChanges {target: scroller; contentHeight: left.height + flick.contentHeight}
                },
                State {
                    when: root.width > 600
                    PropertyChanges {target: left; Layout.column: 0}
                    PropertyChanges {target: right; Layout.column: 1}
                }
            ]
            ColumnLayout {
                id: left
                Layout.fillHeight: true
                spacing: 20

                Flickable {
                    id: flick
                    interactive: true
                    Layout.fillHeight: true
                    width: 600
                    contentHeight: result.contentHeight + 200
                    clip: true
                    Text {
                        id: wordsCount

                        anchors {
                            top: parent.top
                            left: parent.left
                            leftMargin: 10
                        }

                        text: "Found " + mainModule.resultsModel.totalWordsCount + " words"
                        color: mainModule.resultsModel.totalWordsCount > 0 ? "black" : "transparent"
                        font.pixelSize: 20
                        font.bold: true
                    }
                    ListView {
                        id: result

                        anchors {
                            top: wordsCount.bottom
                            bottom: parent.bottom
                            left: parent.left
                            topMargin: 15
                            leftMargin: 10
                        }

                        width: 600
                        model: delegateModel
                        spacing: 25
                        interactive: false
                    }

                    onContentHeightChanged: console.log(contentHeight)
                }


            }



            DelegateModel {
                id: delegateModel

                model: mainModule.resultsModel

                delegate: ColumnLayout {
                    width: 500

                    spacing: 5
                    Text {
                        text: length + " letters" + " - " + section_count + (section_count == 1 ? " word" : " words")
                        color: "red"
                        font.pixelSize: 30
                    }

                    GridLayout {
                        width: 300
                        columns: 5
                        columnSpacing: 10
                        Repeater {
                            model: words

                            Text {
                                text: words[index]
                                font.pixelSize: 15

                                MouseArea {
                                    anchors.fill: parent
                                    onClicked: showIndices(text)
                                    hoverEnabled: true
                                    onEntered: color = "green"
                                    onExited: color = "black"
                                }
                            }
                        }
                    }
                }
            }

            ColumnLayout {
                id: right
                Layout.alignment: Qt.AlignCenter
                Layout.fillHeight: true

                spacing: 20

                Row {
                    Layout.alignment: Qt.AlignHCenter
                    spacing: 15
                    Button {
                        id: today

                        text: "Today's normal puzzle"
                        onClicked: {
                            mainModule.resultsModel.erasePreviousResults()
                            let puzzles = Script.gPuzzleConfig["puzzles"];
                            mainModule.gridModel.fillGrid(puzzles[Object.keys(puzzles)[1]]["board"])
                        }
                    }

                    Button {
                        id: express

                        text: "Today's express puzzle"
                        onClicked: {
                            mainModule.resultsModel.erasePreviousResults()
                            let puzzles = Script.gPuzzleConfig["puzzles"];
                            mainModule.gridModel.fillGrid(puzzles[Object.keys(puzzles)[0]]["board"])
                        }
                    }
                }

                Text {
                    Layout.alignment: Qt.AlignHCenter
                    text: "Type " + "\"" + mainModule.gridModel.emptyCellChar + "\"" + " for an empty cell."
                    font.pixelSize: 20
                    color: "red"
                }

                Text {

                    Layout.alignment: Qt.AlignHCenter
                    text: "Grid size is " + mainModule.gridModel.rows + " X " + mainModule.gridModel.columns
                    font.pixelSize: 20
                    color: "black"
                }

                Slider {
                    id: slider

                    Layout.alignment: Qt.AlignHCenter
                    from: 3
                    value: mainModule.gridModel.rows
                    to: 10
                    stepSize: 1
                    snapMode: Slider.SnapAlways

                    onMoved: {
                        mainModule.gridModel.resizeGrid(value, value)
                        mainModule.resultsModel.erasePreviousResults()
                    }
                }

                GridView {

                    id: grid
                    width: 500
                    height: 500
                    cellHeight: grid.height / mainModule.gridModel.rows
                    cellWidth: grid.width / mainModule.gridModel.columns

                    interactive: false

                    model: mainModule.gridModel
                    delegate: Rectangle {
                        width: 400 / mainModule.gridModel.rows
                        height: 400 / mainModule.gridModel.columns
                        color: mainModule.gridModel.validIndices[index] ? "grey" : "red"

                        TextField {
                            anchors.centerIn: parent
                            maximumLength: 1
                            color: "black"
                            font.pixelSize: 26
                            text: letter == ' ' ? '' : letter
                            onTextChanged: {
                                mainModule.resultsModel.erasePreviousResults()
                                mainModule.gridModel.updateGrid(text[0], index)
                                if (text.length === 1) {
                                    nextItemInFocusChain().forceActiveFocus()
                                }
                            }
                            background: Rectangle {
                                color: "transparent"
                            }
                        }
                    }
                }

                Row {
                    Layout.alignment: Qt.AlignHCenter
                    spacing: 20
                    Button {

                        id: solve

                        enabled: mainModule.gridModel.isValidInput

                        text: "Solve!"
                        onClicked: mainModule.solve()

                    }

                    Button {
                        id: clear

                        text: "Clear"
                        onClicked: {
                            mainModule.resultsModel.erasePreviousResults()
                            mainModule.gridModel.clearGrid()
                        }
                    }
                }



                Text {

                    Layout.alignment: Qt.AlignHCenter
                    Layout.topMargin: 15
                    text: "Only a-z and " + mainModule.gridModel.emptyCellChar.toString() + " are allowed"
                    font.pixelSize: 20
                    color: !mainModule.gridModel.isValidInput ? "red" : "transparent"
                }


            }
        }
    }