FirstPage.qml

import QtQuick 2.0
import QtQuick.Controls 2.5

Item {
    Rectangle{
        width: 500
        height: 380

        Rectangle{
            width: 330
            height: 40

            Image {
                source: "qrc:/../../Desktop/header1.png"
                y: 10
                x: 10
                z: 2
            }

            Rectangle{
                color: "#e9e9e8"
                width: 230
                height: 37
                x: 50
                y: 12
                z: 1
                radius: 15

                Button {
                    x: 22

                    background: Rectangle {
                                color: "transparent"
                            }
                    contentItem: Text {
                        text: qsTr("My Lists")
                        font.pointSize: 15
                    }
                }

                Button{
                    id: buttonCreate
                    x: 110
                    y:  5

                    background: Rectangle {
                                id: rectangle1
                                color: "transparent"
                            }
                    contentItem: Text {
                        id: textContent
                        text: qsTr("Create a new List")
                        font.pointSize: 10
                        color: "red"
                        font.underline: true
                    }

                    states:[
                        State {
                            name: "Hovering"
                            PropertyChanges {
                                target: textContent
                                color: "white"
                                font.underline: false
                            }
                            PropertyChanges {
                                target: rectangle1
                                color: "red"
                            }
                        }]

                    MouseArea{
                        hoverEnabled: true
                        anchors.fill: buttonCreate
                        onEntered: { buttonCreate.state='Hovering'}
                        onExited: { buttonCreate.state=''}
                        onClicked:{
                            myStackView.push(createNewListPage)
                        }
                    }

                }
            }

        }



        ListView{
            id: lists
            width: 150
            height: childrenRect.height
            x: 15
            y: 70

            model: controller.lists

            delegate: Row{
                width: 150
                height: 25
                spacing: 5

                Rectangle{
                    width: {
                        if(uncompleted < 3){return 3;}
                        else if(uncompleted < 6){return 6;}
                        else {return 10;}
                    }
                    height: {
                        if(uncompleted < 3){return 3;}
                        else if(uncompleted < 6){return 6;}
                        else {return 10;}
                    }
                    radius: 10
                    color: "#494949"
                    anchors.verticalCenter: parent.verticalCenter
                }
                Button {
                    id:button1
                    height: 23

                    contentItem: Text {
                        id: textTask
                        text: name
                        font.underline: true
                        color: "blue"
                        font.bold: true
                        font.pointSize: 10
                        height: 20
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.left: parent.left
                    }

                    background: Rectangle {
                        id: rectangle
                        color: "transparent"
                    }
                    states:[
                        State {
                            name: "Hovering"
                            PropertyChanges {
                                target: textTask
                                color: "white"
                                font.bold: true
                                font.underline: false
                            }
                            PropertyChanges {
                                target: rectangle
                                color: "blue"
                            }
                        }]

                    MouseArea{
                        hoverEnabled: true
                        anchors.fill: button1
                        onEntered: { button1.state='Hovering'}
                        onExited: { button1.state=''}
                    }
                }
                Text{
                    font.pointSize: 8
                    text: {
                        if(uncompleted == 0)return "";
                        return "- " + uncompleted + " left";
                    }
                    color: "#494949"
                    anchors.verticalCenter: parent.verticalCenter
                }
            }
        }

        Row {
            anchors.top: lists.bottom
            x: 15
            spacing: 5
            anchors.topMargin: 8

            Text{
                text: {
                    text: qsTr("Completed lists: ")
                }
            }

            Text {
                text: qsTr("")
            }
        }



    }
}