m3uplayer/FlickableViews.qml

import QtQuick 1.0

SongItem {
    id: mainRect

    width: mainWindow.qmlWidth
    height: mainWindow.qmlHeight

    /* I'm not sure if this FocusScope below is helping. I wanted to make it so
       either the Combobox or the FlickableView had focus, and
       when the comboBox loses focus, flickableView returns focus to the
       thing that had it before.
    */
    FocusScope {
        id: mainScope
        width:  parent.width; height: parent.height
        focus: true


/*        FocusScope {
            id: menuScope
            width:  parent.width; height: parent.height */
           // Drop-down combobobox-style menu
            Rectangle {
                color: "transparent"
                id: comboBox
                objectName: "comboBox"
                width: parent.width;
                height: toolBar.height + dropDown.height

                // Toolbar:
                SongItem {
                    id: toolBar
                    x:2; y:2; width: parent.width - 4;
                    radius: 5
                    border.color:  "grey"

                    // Drop-down menu button:
                    height: 42
                    Row {
                        spacing: 30
                        Image {
                            id: menuButton
                            source: "qrc:/icons/bottom.png"
                            height: 40
                            width: 40
                        }
                        StyledText {
                            font.pointSize: 12
                            id: topText
                            text: mainWindow.m3uTitle

                        }
                    }
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            comboBox.state = comboBox.state == '' ? "Menu" : '';
                        }
                    }
                }

                // Other buttons
                Row {
                    spacing: 15
                    height: toolBar.height
                    anchors.right:  parent.right
                        Image {
                            id: toggleQueueButton
                            height:  40
                            width: 40
                            source: "qrc:/icons/playlist.png"
                            MouseArea {
                                anchors.fill: parent
                                onClicked: mainWindow.toggleQueue();
                            }
                        }
                        Image {
                            id: shuffleButton
                            height: 40
                            width: 40
                            source: "qrc:/icons/shuffle.png"
                            visible: false
                            MouseArea {
                                anchors.fill:  parent
                                onClicked: playListModel.shuffle();
                            }
                        }

                        Image {
                            id: sortButton
                            y: 1
                            height: 40
                            width: 40
                            source: "qrc:/icons/sort.png"
                            visible: false
                            MouseArea {
                                anchors.fill:  parent
                                onClicked: mainWindow.on_actionSort_Playlist_triggered();
                            }
                        }

                        Image {
                            y: 1
                            id: reloadButton
                            height: 40
                            width: 40
                            source: "qrc:/icons/reload.png"
                            MouseArea {
                                anchors.fill:  parent
                                onClicked: mainWindow.on_reloadButton_clicked();
                            }
                        }
                        Image {
                            y: 1
                            id: addFeedButton
                            height: 40
                            width: 40
                            source: "qrc:/icons/rss.png"
                            MouseArea {
                                anchors.fill:  parent
                                onClicked: mainWindow.on_actionAddFeed_triggered();
                            }
                        }

                }
                // The actual drop-down menu contents:
                MainMenu {
                    id: dropDown
                    y: 5
                    anchors.top: toolBar.bottom
                    z: 1
                    width: parent.width

                }

                // states for showing and hiding the main menu.
                states:  [
                    State {
                        name:  ''
                        PropertyChanges { target: dropDown; height: 0}
                        PropertyChanges { target: menuButton; source: "qrc:/icons/bottom.png" }
                        PropertyChanges { target: dropDown; focus: false}
//                        PropertyChanges { target: mainScope; focus: true }
                        PropertyChanges { target: flickableView; focus: true }
                    },

                    State {

                        name: 'Menu'
//                        when: !mainScope.activeFocus
                        PropertyChanges { target: dropDown; height: 150 }
                        PropertyChanges { target: dropDown; focus: true; }

                        PropertyChanges { target: menuButton; source: "qrc:/icons/top.png" }
                        // PropertyChanges { target: mainMenu; focus: true}
                    }
                ]

                transitions: [
                    Transition {
                        NumberAnimation {
                            target: dropDown;
                            property: "height";
                            duration: 600
                            easing.type: Easing.OutQuint
                        }
                    }
                ]
            }
//        }
        // 3 ListViews in a Flickable area
        Flickable {
            id: flickableView
            objectName : "flickableView";
            anchors.top: comboBox.bottom;
            width: parent.width;
            contentWidth: parent.width * 3;
            anchors.bottom:  parent.bottom;
            interactive: true
            maximumFlickVelocity: 300


            function snapToGrid(r) {
                flickableView.state = ''
//                console.log("snaptogrid r: " + r);
                if (r < 0.18) {
                    if (playListModel.rowCount() == 0) {
                        if (!mainWindow.isQueueEmpty) {
                            mainWindow.toggleQueue();
                        }
                        else flickableView.state = 'Parentlist';
                    }
                    else {
                        flickableView.state = 'Playlist';
                    }
                }
                else if (r > 0.5) {
                    if (itemsListModel.rowCount() == 0) {
                        flickableView.state = 'Parentlist';
                    }
                    else {
                        flickableView.state = 'Episodes';
                    }
                }
                else {flickableView.state = 'Parentlist'; }
//                console.log ("    state: " + flickableView.state);
            }


            onMovementEnded: {
                snapToGrid(visibleArea.xPosition);
            }

            Row {
                height: mainRect.height - comboBox.height
/*                FocusScope {
                    id: viewScope
                    width: parent.width;
                    height: parent.height;
                    focus: true */

                    PlayListView {
                        id: qmlListView
                        width: mainRect.width
                    }
                    ParentListView {
                        id: parentList
                        width: mainRect.width
                    }
                    SubscriptionView {
                        id: subscriptionView
                        width: mainRect.width
                    }
//                }
            }

            state: 'Parentlist'
            states: [
                State {
                    name: 'Playlist'
                    PropertyChanges { target: flickableView; contentX: qmlListView.x }
                    PropertyChanges { target: qmlListView; focus: true }
                    PropertyChanges { target: reloadButton; visible: true }
                    PropertyChanges { target: shuffleButton; visible: true }
                    PropertyChanges { target: toggleQueueButton; visible: mainWindow.isQueueEmpty || mainWindow.isPlayListEmpty ? false : true }
                    PropertyChanges { target: sortButton; visible: true }
                    PropertyChanges { target: addFeedButton; visible: false}
                },
                State {
                    name: 'Parentlist'
                    PropertyChanges { target: toggleQueueButton; visible: false }
                    PropertyChanges { target: flickableView; contentX: parentList.x }
                    PropertyChanges { target: parentList; focus: true }
                    PropertyChanges { target: reloadButton;
                        visible: mainWindow.showOption == "Subscriptions" ? true:false }
                    PropertyChanges { target: addFeedButton;
                        visible: mainWindow.showOption == "Subscriptions" ? true:false }

                    PropertyChanges { target: sortButton; visible: false}
                },
                State {
                    name: 'Episodes'
                    PropertyChanges { target: toggleQueueButton; visible: false }
                    PropertyChanges { target: flickableView; contentX: subscriptionView.x }
                    PropertyChanges { target: subscriptionView; focus: true }
                    PropertyChanges { target: reloadButton; visible: true }
                    PropertyChanges { target: sortButton; visible: false }
                }
            ]
            transitions: [
                Transition {
                    NumberAnimation {
                        target: flickableView;
                        property: "contentX";
                        duration: 400
                        easing.type: Easing.OutQuint
                    }
                }
            ]

        }

    }
}