add network panel

[*] DapMainApplicationWindow.qml; qml.src
[+] DapNetworkName.qml; DapNetworkPanelButton.qml; DapNetworkPopup.qml;
DapNetworksListView.qml; DapNetworksPanel.qml; networks_next_icon.png;
networks_next_icon_hover.png; networks_previous_icon.png;
networks_previous_icon_hover.png.

CellFrameDashboardGUI/qml.qrc

@@ -173,5 +173,14 @@
         <file>screen/desktop/Certificates/CertificatesLogic.qml</file>
         <file>screen/desktop/Certificates/parts/TitleTextView.qml</file>
         <file>screen/desktop/Certificates/parts/Utils.qml</file>
+        <file>screen/desktop/NetworksPanel/DapNetworksPanel.qml</file>
+        <file>resources/icons/networks_next_icon.png</file>
+        <file>resources/icons/networks_next_icon_hover.png</file>
+        <file>resources/icons/networks_previous_icon.png</file>
+        <file>resources/icons/networks_previous_icon_hover.png</file>
+        <file>screen/desktop/NetworksPanel/DapNetworkPanelButton.qml</file>
+        <file>screen/desktop/NetworksPanel/DapNetworksListView.qml</file>
+        <file>screen/desktop/NetworksPanel/DapNetworkPopup.qml</file>
+        <file>screen/desktop/NetworksPanel/DapNetworkName.qml</file>
     </qresource>
 </RCC>

CellFrameDashboardGUI/screen/DapMainApplicationWindow.qml

 import QtQuick 2.4
 import "qrc:/resources/QML"
 import "qrc:/screen/desktop/Certificates"
-
+import "qrc:/screen/desktop/NetworksPanel"
 
 
 
@@ -51,7 +51,13 @@ Item {
         {
             id: rowMainWindow
 
-            anchors.fill: parent
+            anchors {
+                left: parent.left;
+                top: parent.top;
+                right: parent.right;
+                bottom: networksPanel.top
+                bottomMargin: 4 * pt
+            }
 
             // Virtual logo column frame and menu bar
             Column
@@ -126,6 +132,13 @@ Item {
             }
         }
 
+        DapNetworksPanel
+        {
+            id: networksPanel
+            y: parent.height - height
+            width: parent.width
+        }
+
 
 
     property var dapWallets: []

CellFrameDashboardGUI/screen/desktop/NetworksPanel/DapNetworkName.qml

+import QtQuick 2.9
+
+Item {
+    id: control
+
+    property string name
+    property string state
+    property color textColor
+
+    Row {
+        id: row1
+
+        x: Math.floor((parent.width - width) / 2)
+        y: Math.floor((parent.height - height) / 2)
+        spacing: 8 * pt
+        leftPadding: spacing
+        rightPadding: spacing
+
+        Text {
+            id: textName
+
+            width: Math.min(implicitWidth, control.width - indicator.width - row1.spacing - row1.rightPadding - row1.leftPadding)
+            height: Math.min(implicitHeight, control.height)
+
+            font: quicksandFonts.medium12
+            elide: Text.ElideRight
+            color: control.textColor
+            text: control.name
+        }
+
+        Rectangle {
+            id: indicator
+
+            y: Math.floor((parent.height - height) / 2)
+            width: Math.floor(textName.height * 0.5)
+            height: width
+            radius: width * 0.5
+
+            color: {
+                switch (control.state) {
+                case "Online":
+                    return "#9DD51F";
+                case "Offline":
+                    return "#FFC527";
+                    //TODO: добавить состояния из DapNetwork::stateToString
+                default:
+                    if (control.state.length > 0)
+                        console.warn("Unknown network state: " + control.state);
+                    return "#000000";
+                }
+            }
+        }
+    }
+
+}

CellFrameDashboardGUI/screen/desktop/NetworksPanel/DapNetworkPanelButton.qml

+import QtQuick 2.9
+
+Item {
+    id: control
+
+    property string normalIcon
+    property string hoverIcon
+
+    signal clicked
+
+    implicitWidth: 40 * pt
+    implicitHeight: 40 * pt
+
+    Image {
+        anchors.fill: parent
+        source: mouseArea.containsMouse ? control.hoverIcon : control.normalIcon
+    }
+
+    MouseArea {
+        id: mouseArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+
+        onClicked: control.clicked()
+    }
+}

CellFrameDashboardGUI/screen/desktop/NetworksPanel/DapNetworkPopup.qml

+import QtQuick 2.9
+import QtQuick.Controls 2.9
+import QtQuick.Layouts 1.9
+import QtGraphicalEffects 1.9
+
+Popup {
+    id: control
+
+    property QtObject networkDelegateItem
+
+    property point networkDelegateItemCoords: networkDelegateItem ? parent.mapFromItem(networkDelegateItem.parent, networkDelegateItem.x, networkDelegateItem.y) : Qt.point(0, 0)
+    property int networkDelegateItemWidth: networkDelegateItem ? networkDelegateItem.width : 0
+    property int networkDelegateItemHeight: networkDelegateItem ? networkDelegateItem.height : 0
+
+    property string name: networkDelegateItem ? networkDelegateItem.name : ""
+    property string state: networkDelegateItem ? networkDelegateItem.state : ""
+    property string targetState: networkDelegateItem ? networkDelegateItem.targetState : ""
+    property int activeLinksCount: networkDelegateItem ? networkDelegateItem.activeLinksCount : 0
+    property int linksCount: networkDelegateItem ? networkDelegateItem.linksCount : 0
+    property string nodeAddress: networkDelegateItem ? networkDelegateItem.nodeAddress : ""
+
+    x: networkDelegateItemCoords.x
+    y: networkDelegateItemCoords.y + networkDelegateItemHeight - height
+    width: networkDelegateItemWidth
+    height: contentHeight
+
+    parent: Overlay.overlay
+    margins: 0
+    padding: 0
+
+    enter: Transition {
+        NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 100 }
+    }
+
+    exit: Transition {
+        NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; duration: 100 }
+    }
+
+    contentItem: Item {
+        id: contentItem
+
+        implicitWidth: columnItem.width
+        implicitHeight: columnItem.height
+
+        MouseArea {
+            id: contentItemMouseArea
+
+            width: parent.width
+            height: parent.height
+            hoverEnabled: true
+        }
+
+        Column {
+            id: columnItem
+
+            topPadding: 20 * pt
+            spacing: Math.floor(control.networkDelegateItemHeight / 2)
+
+            ColumnLayout {
+                width: contentItem.width
+
+                RowLayout {
+                    Text {
+                        font: quicksandFonts.medium12
+                        color: "#070023"
+                        text: qsTr("State: ")
+                    }
+                    Text {
+                        font: quicksandFonts.medium12
+                        color: "#070023"
+                        elide: Text.ElideRight
+                        text: control.state
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: Math.ceil(implicitWidth)
+                    }
+
+                    Layout.alignment: Qt.AlignHCenter
+                }
+
+                RowLayout {
+                    Text {
+                        font: quicksandFonts.medium12
+                        color: "#070023"
+                        text: qsTr("Target state: ")
+                    }
+                    Text {
+                        font: quicksandFonts.medium12
+                        color: "#070023"
+                        elide: Text.ElideRight
+                        text: control.targetState
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: Math.ceil(implicitWidth)
+                    }
+
+                    Layout.alignment: Qt.AlignHCenter
+                }
+
+                RowLayout {
+                    Text {
+                        font: quicksandFonts.medium12
+                        color: "#070023"
+                        text: qsTr("Active links: ")
+                    }
+                    Text {
+                        font: quicksandFonts.medium12
+                        color: "#070023"
+                        elide: Text.ElideRight
+                        text: control.activeLinksCount + qsTr(" from ") + control.linksCount
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: Math.ceil(implicitWidth)
+                    }
+
+                    Layout.alignment: Qt.AlignHCenter
+                }
+
+                RowLayout {
+                    Text {
+                        id: textAddress
+                        font: quicksandFonts.medium12
+                        color: "#070023"
+                        text: qsTr("Address: ")
+                    }
+                    Text {
+                        font: quicksandFonts.medium12
+                        color: "#070023"
+                        elide: Text.ElideRight
+                        text: control.nodeAddress
+                        Layout.fillWidth: true
+                        Layout.maximumWidth: Math.ceil(implicitWidth)
+                    }
+                    Image {
+                        source: btnCopyAddressMouseArea.containsMouse ? "qrc:/resources/icons/ic_copy_hover.png" : "qrc:/resources/icons/ic_copy.png"
+
+                        Layout.maximumWidth: Math.floor(textAddress.height * 1.1)
+                        Layout.maximumHeight: Layout.maximumWidth
+
+                        MouseArea {
+                            id: btnCopyAddressMouseArea
+
+                            anchors.fill: parent
+                            hoverEnabled: true
+
+                            onClicked: {
+                                // TODO: copy control.nodeAddress to clipboard
+                                console.log("Clicked copy nodeAddres. nodeAddres: " + control.nodeAddress);
+                            }
+                        }
+                    }
+
+                    Layout.alignment: Qt.AlignHCenter
+                }
+            }
+
+            DapNetworkName {
+                id: networkName
+
+                y: parent.height - height
+                width: control.networkDelegateItemWidth
+                height: control.networkDelegateItemHeight
+                textColor: "#070023"
+                name: control.name
+                state: control.state
+            }
+        }
+    }
+
+    background: Item {
+        Rectangle {
+            id: r1
+            width: parent.width
+            height: parent.height
+            visible: true
+            color: "#FFFFFF"
+        }
+
+        DropShadow {
+            anchors.fill: r1
+            opacity: control.opacity === 1.0 ? 1.0 : control.opacity / 4
+            source: r1
+            radius: 5
+            samples: 11
+            color: "#80000000"
+        }
+    }
+
+    Timer {
+        running: !contentItemMouseArea.containsMouse && !btnCopyAddressMouseArea.containsMouse && control.visible
+        interval: 100
+        repeat: false
+        onTriggered: control.close()
+    }
+}

CellFrameDashboardGUI/screen/desktop/NetworksPanel/DapNetworksListView.qml

+import QtQuick 2.9
+
+ListView {
+    id: control
+
+    property bool hasLeft: d.leftIndex - 1 >= 0
+    property bool hasRight: d.leftIndex + d.visibleItems < control.count
+
+    function scrollToLeft()
+    {
+        if (hasLeft) {
+            d.positionViewAtIndexAnimation(d.leftIndex - 1, ListView.Beginning);
+            d.leftIndex--;
+        }
+    }
+
+    function scrollToRight()
+    {
+        if (hasRight) {
+            d.positionViewAtIndexAnimation(d.leftIndex + d.visibleItems, ListView.End);
+            d.leftIndex++;
+        }
+    }
+
+    orientation: Qt.Horizontal
+    clip: true
+    interactive: false
+
+    // TODO код только для теста, удалить потом
+    model: ListModel { }
+    Component.onCompleted: {
+        for (var i = 0; i < 5; ++i) {
+            model.append({
+                             name: "Network #" + i,
+                             state: i % 2 === 0 ? "Online" : "Offline",
+                             targetState: "targetState",
+                             activeLinksCount: i,
+                             linksCount: i * 2,
+                             nodeAddress: "nodeAddress_" + (i + 1)
+                         });
+        }
+    }
+
+    delegate: Rectangle {
+        id: delegateItem
+
+        // properties duplicated for DapNetworkPopup
+        property string name: model.name
+        property string state: model.state
+        property string targetState: model.targetState
+        property int activeLinksCount: model.activeLinksCount
+        property int linksCount: model.linksCount
+        property string nodeAddress: model.nodeAddress
+
+        width: d.delegateWidth
+        height: control.height
+        color: "#070023"
+
+        DapNetworkName {
+            width: parent.width
+            height: parent.height
+            textColor: "#FFFFFF"
+            name: delegateItem.name
+            state: delegateItem.state
+        }
+
+        MouseArea {
+            id: delegateMouseArea
+
+            width: parent.width
+            height: parent.height
+            hoverEnabled: true
+
+            onEntered: {
+                if (index >= d.leftIndex && index < d.leftIndex + d.visibleItems) {
+                    networkPopup.networkDelegateItem = delegateItem;
+                    networkPopup.open();
+                }
+            }
+        }
+    }
+
+    DapNetworkPopup {
+        id: networkPopup
+    }
+
+    Item {
+        id: d
+
+        property int delegateWidth: {
+            var w = Math.max(control.width / control.count, 295 * pt);
+            var visibleItems = Math.max(Math.floor(control.width / w), 1);
+            d.visibleItems = visibleItems;
+            return Math.floor((control.width - w * visibleItems) / visibleItems + w);
+        }
+
+        property int visibleItems: 0
+        property int leftIndex: 0
+
+        function positionViewAtIndexAnimation(index, mode)
+        {
+            scrollAnimation.running = false;
+            var pos = control.contentX;
+            control.positionViewAtIndex(index, mode);
+            var dest = control.contentX;
+
+            scrollAnimation.from = pos;
+            scrollAnimation.to = dest;
+            scrollAnimation.running = true;
+        }
+
+        onDelegateWidthChanged: {
+            if (d.leftIndex > control.count - d.visibleItems)
+                d.leftIndex = control.count - d.visibleItems;
+            if (d.leftIndex < 0)
+                d.leftIndex = 0;
+            if (d.leftIndex < control.count)
+                control.positionViewAtIndex(d.leftIndex, ListView.Beginning);
+        }
+    }
+
+    NumberAnimation {
+        id: scrollAnimation
+        target: control
+        property: "contentX"
+        duration: 100
+    }
+}

CellFrameDashboardGUI/screen/desktop/NetworksPanel/DapNetworksPanel.qml

+import QtQuick 2.9
+
+Rectangle {
+    id: control
+
+    implicitHeight: Math.max(btnPrevious.implicitHeight, networksListView.implicitHeight, btnNext.implicitHeight)
+    implicitWidth: btnPrevious.implicitWidth + btnNext.implicitWidth + 180 * pt
+
+    color: "#070023"
+
+    DapNetworkPanelButton {
+        id: btnPrevious
+
+        visible: networksListView.hasLeft
+        height: parent.height
+        normalIcon: "qrc:/resources/icons/networks_previous_icon.png"
+        hoverIcon: "qrc:/resources/icons/networks_previous_icon_hover.png"
+        onClicked: networksListView.scrollToLeft()
+    }
+
+    DapNetworksListView {
+        id: networksListView
+
+        anchors.left: btnPrevious.right
+        anchors.right: btnNext.left
+        height: parent.height
+    }
+
+    DapNetworkPanelButton {
+        id: btnNext
+
+        visible: networksListView.hasRight
+        anchors.right: parent.right
+        height: parent.height
+        normalIcon: "qrc:/resources/icons/networks_next_icon.png"
+        hoverIcon: "qrc:/resources/icons/networks_next_icon_hover.png"
+        onClicked: networksListView.scrollToRight()
+    }
+}