first push

components/DashboardTable.qml

@@ -0,0 +1,177 @@
+import QtQuick 2.0
+import "../components"
+
+ListView {
+    id: listView
+    clip: true
+    boundsBehavior: ListView.StopAtBounds
+    
+    property var previousItem
+    delegate: Rectangle {
+        id: delegate
+        height: 90
+        width: listView.width
+        z: 0
+        color: index % 2 ? "#F8F8F8" : "#FFFFFF"
+        function collapseDropdown() { dropdown.expanded = false }
+        
+        Row {
+            id: row1
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: parent.top
+            anchors.topMargin: 14
+            
+            Rectangle {
+                id: dot
+                width: 14
+                height: width
+                radius: width / 2
+                color: out ? "#FF4F41" : "#36B05B"
+            }
+            
+            Item { //separator
+                width: 12
+                height: 14
+            }
+            
+            Text {
+                id: paymentIdText
+                width: text.length ? 122 : 0
+                anchors.verticalCenter: dot.verticalCenter
+                font.family: "Arial"
+                font.bold: true
+                font.pixelSize: 19
+                color: "#444444"
+                elide: Text.ElideRight
+                text: paymentId
+            }
+            
+            Item { //separator
+                width: paymentIdText.width ? 12 : 0
+                height: 14
+            }
+            
+            Text {
+                anchors.verticalCenter: dot.verticalCenter
+                width: parent.width - x - 12
+                elide: Text.ElideRight
+                font.family: "Arial"
+                font.pixelSize: 14
+                color: "#545454"
+                text: address
+            }
+        }
+        
+        Row {
+            anchors.left: parent.left
+            anchors.top: row1.bottom
+            anchors.topMargin: 8
+            spacing: 12
+            
+            Item { //separator
+                width: 14
+                height: 14
+            }
+            
+            Column {
+                anchors.top: parent.top
+                width: 202
+                
+                Text {
+                    anchors.left: parent.left
+                    font.family: "Arial"
+                    font.pixelSize: 12
+                    color: "#545454"
+                    text: qsTr("Date")
+                }
+                
+                Text {
+                    font.family: "Arial"
+                    font.pixelSize: 18
+                    color: "#000000"
+                    text: date
+                }
+            }
+            
+            Column {
+                anchors.top: parent.top
+                width: 148
+                
+                Text {
+                    anchors.left: parent.left
+                    font.family: "Arial"
+                    font.pixelSize: 12
+                    color: "#545454"
+                    text: qsTr("Amount")
+                }
+                
+                Text {
+                    font.family: "Arial"
+                    font.pixelSize: 18
+                    color: "#000000"
+                    text: amount
+                }
+            }
+            
+            Column {
+                anchors.top: parent.top
+                width: 148
+                
+                Text {
+                    anchors.left: parent.left
+                    font.family: "Arial"
+                    font.pixelSize: 12
+                    color: "#545454"
+                    text: qsTr("Balance")
+                }
+                
+                Row {
+                    spacing: 2
+                    Text {
+                        anchors.bottom: parent.bottom
+                        anchors.bottomMargin: 3
+                        font.family: "Arial"
+                        font.pixelSize: 16
+                        color: out ? "#FF4F41" : "#36B05B"
+                        text: out ? "↓" : "↑"
+                    }
+                    
+                    Text {
+                        anchors.bottom: parent.bottom
+                        font.family: "Arial"
+                        font.pixelSize: 18
+                        color: out ? "#FF4F41" : "#36B05B"
+                        text: balance
+                    }
+                }
+            }
+        }
+
+        Rectangle {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            height: 1
+            color: "#DBDBDB"
+        }
+
+        TableDropdown {
+            id: dropdown
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 11
+            anchors.rightMargin: 5
+            onExpandedChanged: {
+                if(listView.previousItem !== undefined && listView.previousItem !== delegate)
+                    listView.previousItem.collapseDropdown()
+                if(expanded) {
+                    listView.previousItem = delegate
+                    listView.currentIndex = index
+                    listView.currentItem.z = 2
+                }
+            }
+            onCollapsed: delegate.z = 0
+        }
+    }
+}

components/Input.qml

@@ -0,0 +1,18 @@
+import QtQuick.Controls 1.2
+import QtQuick.Controls.Styles 1.2
+import QtQuick 2.2
+
+TextField {
+    font.family: "Arial"
+    font.pixelSize: 18
+
+    style: TextFieldStyle {
+        textColor: "#3F3F3F"
+        placeholderTextColor: "#BABABA"
+
+        background: Rectangle {
+            border.width: 0
+            color: "transparent"
+        }
+    }
+}

components/Label.qml

@@ -0,0 +1,28 @@
+import QtQuick 2.0
+
+Item {
+    property alias text: label.text
+    property alias color: label.color
+    property int fontSize: 12
+    width: icon.x + icon.width
+    height: icon.height
+
+    Text {
+        id: label
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 2
+        anchors.left: parent.left
+        font.family: "Arial"
+        font.pixelSize: parent.fontSize
+        color: "#555555"
+    }
+
+    Image {
+        id: icon
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: label.right
+        anchors.leftMargin: 5
+        source: "../images/whatIsIcon.png"
+        visible: appWindow.whatIsEnable
+    }
+}

components/LineEdit.qml

@@ -0,0 +1,28 @@
+import QtQuick 2.0
+
+Item {
+    property alias placeholderText: input.placeholderText
+    property alias text: input.text
+    height: 37
+
+    Rectangle {
+        anchors.fill: parent
+        anchors.bottomMargin: 1
+        color: "#DBDBDB"
+        radius: 4
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        anchors.topMargin: 1
+        color: "#FFFFFF"
+        radius: 4
+    }
+
+    Input {
+        id: input
+        anchors.fill: parent
+        anchors.leftMargin: 11
+        anchors.rightMargin: 11
+    }
+}

components/MenuButton.qml

@@ -0,0 +1,75 @@
+import QtQuick 2.0
+
+Rectangle {
+    id: button
+    property alias text: label.text
+    property bool checked: false
+    property alias dotColor: dot.color
+    property alias symbol: symbolText.text
+    signal clicked()
+
+    height: 64
+    color: checked ? "#FFFFFF" : "#1C1C1C"
+
+    Item {
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        width: 50
+
+        Rectangle {
+            id: dot
+            anchors.centerIn: parent
+            width: 16
+            height: width
+            radius: height / 2
+
+            Rectangle {
+                anchors.centerIn: parent
+                width: 12
+                height: width
+                radius: height / 2
+                color: "#1C1C1C"
+                visible: !button.checked && !buttonArea.containsMouse
+            }
+        }
+
+        Text {
+            id: symbolText
+            anchors.centerIn: parent
+            font.pixelSize: 11
+            font.bold: true
+            color: button.checked || buttonArea.containsMouse ? "#FFFFFF" : dot.color
+            visible: appWindow.ctrlPressed
+        }
+    }
+
+    Image {
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.right
+        anchors.rightMargin: 20
+        source: "../images/menuIndicator.png"
+    }
+
+    Text {
+        id: label
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: 50
+        font.family: "Arial"
+        font.pixelSize: 18
+        color: parent.checked ? "#000000" : "#FFFFFF"
+    }
+
+    MouseArea {
+        id: buttonArea
+        anchors.fill: parent
+        hoverEnabled: true
+        onClicked: {
+            if(parent.checked)
+                return
+            button.clicked()
+            parent.checked = true
+        }
+    }
+}

components/NetworkStatusItem.qml

@@ -0,0 +1,41 @@
+import QtQuick 2.0
+
+Row {
+    id: item
+    property bool connected: false
+
+    Item {
+        id: iconItem
+        anchors.bottom: parent.bottom
+        width: 50
+        height: 50
+
+        Image {
+            anchors.centerIn: parent
+            source: item.connected ? "../images/statusConnected.png" :
+                                     "../images/statusDisconnected.png"
+        }
+    }
+
+    Column {
+        anchors.bottom: parent.bottom
+        height: 53
+        spacing: 3
+
+        Text {
+            anchors.left: parent.left
+            font.family: "Arial"
+            font.pixelSize: 12
+            color: "#545454"
+            text: qsTr("Network status")
+        }
+
+        Text {
+            anchors.left: parent.left
+            font.family: "Arial"
+            font.pixelSize: 18
+            color: item.connected ? "#FF6C3B" : "#AAAAAA"
+            text: item.connected ? qsTr("Connected") : qsTr("Disconnected")
+        }
+    }
+}

components/SearchInput.qml

@@ -0,0 +1,167 @@
+import QtQuick 2.0
+
+Item {
+    id: item
+    signal searchClicked(string text, int option)
+    height: 50
+
+    Rectangle {
+        anchors.fill: parent
+        color: "#DBDBDB"
+        radius: 10
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        anchors.topMargin: 1
+        color: "#FFFFFF"
+        radius: 10
+
+        Item {
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
+            width: 45
+
+            Image {
+                anchors.centerIn: parent
+                source: "../images/magnifier.png"
+            }
+        }
+
+        Input {
+            id: input
+            anchors.left: parent.left
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            anchors.right: dropdown.left
+            anchors.leftMargin: 45
+            verticalAlignment: TextInput.AlignVCenter
+            placeholderText: qsTr("Search by...")
+        }
+
+        Item {
+            id: dropdown
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            anchors.right: button.left
+            width: 154
+
+            Row {
+                anchors.right: parent.right
+                anchors.verticalCenter: parent.verticalCenter
+
+                Text {
+                    id: dropText
+                    width: 114 - 12
+                    anchors.verticalCenter: parent.verticalCenter
+                    font.family: "Arial"
+                    font.pixelSize: 12
+                    color: "#4A4747"
+                    text: "NAME"
+                }
+
+                Image {
+                    anchors.verticalCenter: parent.verticalCenter
+                    source: "../images/hseparator.png"
+                }
+
+                Item {
+                    height: dropdown.height
+                    width: 38
+
+                    Image {
+                        id: dropIndicator
+                        anchors.centerIn: parent
+                        source: "../images/dropIndicator.png"
+                        rotation: droplist.height === 0 ? 0 : 180
+                    }
+                }
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: droplist.height = droplist.height === 0 ? dropcolumn.height : 0
+            }
+        }
+
+        Rectangle {
+            id: droplist
+            property int currentOption: 0
+
+            width: 154
+            height: 0
+            clip: true
+            x: dropdown.x
+            y: dropdown.height
+            color: "#FFFFFF"
+
+            Behavior on height {
+                NumberAnimation { duration: 100; easing.type: Easing.InQuad }
+            }
+
+            ListModel {
+                id: dropdownModel
+                ListElement { name: "NAME" }
+                ListElement { name: "DESCRIPTION" }
+                ListElement { name: "ADDRESS" }
+            }
+
+            Column {
+                id: dropcolumn
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.top: parent.top
+
+                Repeater {
+                    model: dropdownModel
+                    delegate: Rectangle {
+                        property bool isCurrent: name === dropText.text
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        height: 30
+                        color: delegateArea.pressed || isCurrent ? "#4A4646" : "#FFFFFF"
+
+                        Text {
+                            anchors.verticalCenter: parent.verticalCenter
+                            anchors.left: parent.left
+                            anchors.right: parent.right
+                            elide: Text.ElideRight
+                            anchors.leftMargin: 12
+                            anchors.rightMargin: 12
+                            font.family: "Arial"
+                            font.pixelSize: 12
+                            color: delegateArea.pressed || parent.isCurrent ? "#FFFFFF" : "#4A4646"
+                            text: name
+                        }
+
+                        MouseArea {
+                            id: delegateArea
+                            anchors.fill: parent
+                            onClicked: {
+                                droplist.currentOption = index
+                                droplist.height = 0
+                                dropText.text = name
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        StandardButton {
+            id: button
+            anchors.top: parent.top
+            anchors.bottom: parent.bottom
+            anchors.right: parent.right
+            anchors.margins: 6
+            width: 80
+
+            shadowColor: "#8C0B00"
+            pressedColor: "#C60F00"
+            releasedColor: "#FF4F41"
+            text: qsTr("SEARCH")
+            onClicked: item.searchClicked(input.text, droplist.currentOption)
+        }
+    }
+}

components/StandardButton.qml

@@ -0,0 +1,46 @@
+import QtQuick 2.0
+
+Item {
+    height: 37
+    property string shadowColor
+    property string pressedColor
+    property string releasedColor
+    property string textColor: "#FFFFFF"
+    property alias text: label.text
+    signal clicked()
+
+    Rectangle {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: parent.height - 1
+        y: buttonArea.pressed ? 1 : 0
+        radius: 4
+        color: parent.shadowColor
+    }
+
+    Rectangle {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: parent.height - 1
+        y: buttonArea.pressed ? 0 : 1
+        color: buttonArea.pressed ? parent.pressedColor : parent.releasedColor
+        radius: 4
+    }
+
+    Text {
+        id: label
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.right: parent.right
+        horizontalAlignment: Text.AlignHCenter
+        elide: Text.ElideRight
+        font.pixelSize: 12
+        color: parent.textColor
+    }
+
+    MouseArea {
+        id: buttonArea
+        anchors.fill: parent
+        onClicked: parent.clicked()
+    }
+}

components/TableDropdown.qml

@@ -0,0 +1,135 @@
+import QtQuick 2.0
+
+Item {
+    id: dropdown
+    property bool expanded: false
+    signal collapsed()
+    width: 72
+    height: 37
+
+    Item {
+        id: head
+        anchors.fill: parent
+
+        Rectangle {
+            anchors.fill: parent
+            anchors.topMargin: dropdown.expanded ? 0 : 1
+            radius: 3
+            color: dropdown.expanded ? "#888888" : "#DBDBDB"
+        }
+
+        Rectangle {
+            anchors.fill: parent
+            anchors.bottomMargin: dropdown.expanded ? 0 : 1
+            radius: 3
+            color: dropdown.expanded ? "#DBDBDB" : "#F0EEEE"
+        }
+
+        Image {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            anchors.leftMargin: 10
+            source: "../images/tableOptions.png"
+        }
+
+        Rectangle {
+            anchors.centerIn: parent
+            anchors.horizontalCenterOffset: 1
+            height: 23
+            width: 1
+            color: dropdown.expanded ? "#FFFFFF" : "#DBDBDB"
+        }
+
+        Image {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: parent.right
+            anchors.rightMargin: 10
+            source: "../images/dropIndicator.png"
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            onPressed: dropdown.expanded = !dropdown.expanded
+        }
+    }
+
+    Item {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: head.bottom
+        height: dropdown.expanded ? column.height : 0
+        onHeightChanged: if(height === 0) dropdown.collapsed()
+        clip: true
+
+        Behavior on height {
+            NumberAnimation { duration: 100; easing.type: Easing.InQuad }
+        }
+
+        Column {
+            id: column
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: parent.top
+
+            ListModel {
+                id: dataModel
+                ListElement { name: "<b>text 1</b>"; icon: "../images/dropdownOption1.png" }
+                ListElement { name: "<b>longer text 2</b>"; icon: "../images/dropdownSend.png" }
+                ListElement { name: "<b>text3</b><br/><br/>lorem ipsum asdasd asdasd"; icon: "../images/dropdownSearch.png" }
+            }
+
+            Repeater {
+                id: repeater
+                model: dataModel
+
+                delegate: Rectangle {
+                    id: delegate
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    height: 30
+                    color: delegateArea.containsMouse ? "#F0EEEE" : "#DBDBDB"
+                    radius: index === repeater.count - 1 ? 5 : 0
+
+                    Rectangle {
+                        anchors.left: parent.left
+                        anchors.top: parent.top
+                        width: 5
+                        height: 5
+                        color: delegate.color
+                    }
+
+                    Rectangle {
+                        anchors.right: parent.right
+                        anchors.top: parent.top
+                        width: 5
+                        height: 5
+                        color: delegate.color
+                    }
+
+                    Image {
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.left: parent.left
+                        anchors.leftMargin: 10
+                        source: icon
+                    }
+
+                    MouseArea {
+                        id: delegateArea
+                        hoverEnabled: true
+                        anchors.fill: parent
+                        onEntered: {
+                            var pos = rootItem.mapFromItem(delegate, 30, -20)
+                            tipItem.text = name
+                            tipItem.x = pos.x
+                            if(tipItem.height > 30)
+                                pos.y -= tipItem.height - 30
+                            tipItem.y = pos.y
+                            tipItem.visible = true
+                        }
+                        onExited: tipItem.visible = false
+                    }
+                }
+            }
+        }
+    }
+}

components/TableHeader.qml

@@ -0,0 +1,154 @@
+import QtQuick 2.0
+
+Rectangle {
+    id: header
+    signal sortRequest(bool desc, int column)
+    property int activeSortColumn: -1
+
+    height: 31
+    color: "#FFFFFF"
+
+    Rectangle {
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        height: 1
+        color: "#DBDBDB"
+    }
+
+    ListModel {
+        id: columnsModel
+        ListElement { columnName: "Date"; columnWidth: 92 }
+        ListElement { columnName: "Amount"; columnWidth: 158 }
+        ListElement { columnName: "Balance"; columnWidth: 168 }
+    }
+
+    Row {
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        Rectangle {
+            height: 31
+            width: 1
+            color: "#DBDBDB"
+        }
+
+        Repeater {
+            id: columnsRepeater
+            model: columnsModel
+            delegate: Rectangle {
+                id: delegate
+                property bool desc: false
+                height: 31
+                width: columnWidth
+
+                Text {
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.verticalCenterOffset: -2
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.leftMargin: 13
+                    anchors.rightMargin: 13
+                    elide: Text.ElideRight
+                    font.family: "Arial"
+                    font.pixelSize: 14
+                    color: {
+                        if(delegateArea.pressed)
+                            return "#FF4304"
+                        return index === header.activeSortColumn || delegateArea.containsMouse ? "#FF6C3C" : "#4A4949"
+                    }
+                    text: columnName
+                }
+
+                MouseArea {
+                    id: delegateArea
+                    hoverEnabled: true
+                    anchors.fill: parent
+                    onClicked: {
+                        delegate.desc = !delegate.desc
+                        header.activeSortColumn = index
+                        header.sortRequest(delegate.desc, index)
+                    }
+                }
+
+                Row {
+                    anchors.right: parent.right
+                    anchors.top: parent.top
+                    anchors.bottom: parent.bottom
+                    anchors.rightMargin: 9
+
+                    Item {
+                        width: 14
+                        anchors.top: parent.top
+                        anchors.bottom: parent.bottom
+
+                        Image {
+                            anchors.centerIn: parent
+                            anchors.verticalCenterOffset: -2
+                            source: {
+                                if(descArea.pressed)
+                                    return "../images/descSortIndicatorPressed.png"
+                                return index === header.activeSortColumn || descArea.containsMouse ? "../images/descSortIndicatorActived.png" :
+                                                                                                     "../images/descSortIndicator.png"
+                            }
+                        }
+
+                        MouseArea {
+                            id: descArea
+                            hoverEnabled: true
+                            anchors.fill: parent
+                            onClicked: {
+                                delegate.desc = true
+                                header.activeSortColumn = index
+                                header.sortRequest(delegate.desc, index)
+                            }
+                        }
+                    }
+
+                    Item {
+                        width: 14
+                        anchors.top: parent.top
+                        anchors.bottom: parent.bottom
+
+                        Image {
+                            anchors.centerIn: parent
+                            anchors.verticalCenterOffset: -3
+                            source: {
+                                if(ascArea.pressed)
+                                    return "../images/ascSortIndicatorPressed.png"
+                                return index === header.activeSortColumn || ascArea.containsMouse ? "../images/ascSortIndicatorActived.png" :
+                                                                                                    "../images/ascSortIndicator.png"
+                            }
+                        }
+
+                        MouseArea {
+                            id: ascArea
+                            hoverEnabled: true
+                            anchors.fill: parent
+                            onClicked: {
+                                delegate.desc = false
+                                header.activeSortColumn = index
+                                header.sortRequest(delegate.desc, index)
+                            }
+                        }
+                    }
+                }
+
+                Rectangle {
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.bottom: parent.bottom
+                    height: 1
+                    color: index === header.activeSortColumn ? "#FFFFFF" : "#DBDBDB"
+                }
+
+                Rectangle {
+                    anchors.top: parent.top
+                    anchors.bottom: parent.bottom
+                    anchors.right: parent.right
+                    width: 1
+                    color: "#DBDBDB"
+                }
+            }
+        }
+    }
+}

components/TipItem.qml

@@ -0,0 +1,26 @@
+import QtQuick 2.0
+
+Rectangle {
+    property alias text: content.text
+    width: content.width + 12
+    height: content.height + 17
+    color: "#FF6C3C"
+    radius: 3
+
+    Image {
+        anchors.top: parent.bottom
+        anchors.left: parent.left
+        anchors.leftMargin: 8
+        source: "../images/tip.png"
+    }
+
+    Text {
+        id: content
+        anchors.horizontalCenter: parent.horizontalCenter
+        y: 6
+        lineHeight: 0.7
+        font.family: "Arial"
+        font.pixelSize: 12
+        color: "#FFFFFF"
+    }
+}