Merge remote-tracking branch 'origin/features-4566'

CellFrameDashboardGUI/DapApplication.cpp

@@ -2,6 +2,7 @@
 #include <QQmlContext>
 #include <DapLogMessage.h>
 #include <QIcon>
+#include <QClipboard>
 
 DapApplication::DapApplication(int &argc, char **argv)
     :QApplication(argc, argv)
@@ -40,6 +41,11 @@ QQmlApplicationEngine *DapApplication::qmlEngine()
     return &m_engine;
 }
 
+void DapApplication::setClipboardText(const QString &text)
+{
+    clipboard()->setText(text);
+}
+
 void DapApplication::registerQmlTypes()
 {
     //register only enums
@@ -68,8 +74,9 @@ void DapApplication::registerQmlTypes()
 
 void DapApplication::setContextProperties()
 {
+    m_engine.rootContext()->setContextProperty("app", this);
     m_engine.rootContext()->setContextProperty("dapServiceController", &DapServiceController::getInstance());
     m_engine.rootContext()->setContextProperty("pt", 1);
 
-    m_engine.rootContext()->setContextProperty("networksModel", QVariant::fromValue(this->networks()->model()));
+    m_engine.rootContext()->setContextProperty("networks", this->networks());
 }

CellFrameDashboardGUI/DapApplication.h

@@ -8,12 +8,16 @@
 
 class DapApplication : public QApplication
 {
+    Q_OBJECT
+
 public:
     DapApplication(int &argc, char **argv);
 
     DapNetworksList *networks();
     QQmlApplicationEngine *qmlEngine();
 
+    Q_INVOKABLE void setClipboardText(const QString &text);
+
 private:
     void setContextProperties();
     void registerQmlTypes();

CellFrameDashboardGUI/qml.qrc

@@ -173,5 +173,19 @@
         <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>screen/desktop/NetworksPanel/DapNetworkPanelButton.qml</file>
+        <file>screen/desktop/NetworksPanel/DapNetworksList.qml</file>
+        <file>screen/desktop/NetworksPanel/DapNetworkPopup.qml</file>
+        <file>screen/desktop/NetworksPanel/DapNetworkName.qml</file>
+        <file>screen/desktop/NetworksPanel/DapNetworkPopupButton.qml</file>
+        <file>resources/icons/ic_copy.svg</file>
+        <file>resources/icons/ic_copy_hover.svg</file>
+        <file>resources/icons/icon_on_off_net.svg</file>
+        <file>resources/icons/icon_on_off_net_hover.svg</file>
+        <file>resources/icons/Icon_sync_net.svg</file>
+        <file>resources/icons/Icon_sync_net_hover.svg</file>
+        <file>resources/icons/next-page.svg</file>
+        <file>resources/icons/next-page_hover.svg</file>
     </qresource>
 </RCC>

CellFrameDashboardGUI/resources/icons/Icon_sync_net.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><rect width="24" height="24" fill="none"/><g transform="translate(2.428 -2.7)"><path d="M3.475,13.654l-.885-2.92a.491.491,0,0,1,.339-.61h0a.5.5,0,0,1,.619.334l.516,1.7a6.115,6.115,0,0,1,11.205.436.5.5,0,0,1-.457.668.512.512,0,0,1-.472-.32,5.126,5.126,0,0,0-9.465-.218l1.887-.567a.5.5,0,0,1,.619.334h0a.491.491,0,0,1-.339.61l-2.963.872A.5.5,0,0,1,3.475,13.654Z" transform="translate(0 0)" fill="#453f5a"/><path d="M22.858,58.42l-.516-1.7a6.132,6.132,0,0,1-11.22-.45.5.5,0,0,1,.457-.668.512.512,0,0,1,.472.32,5.126,5.126,0,0,0,9.465.218l-1.887.567a.5.5,0,0,1-.619-.334.491.491,0,0,1,.339-.61l2.963-.872a.5.5,0,0,1,.619.334l.885,2.92a.491.491,0,0,1-.339.61h0A.5.5,0,0,1,22.858,58.42Z" transform="translate(-7.264 -39.464)" fill="#453f5a"/></g></svg>
\ No newline at end of file

CellFrameDashboardGUI/resources/icons/Icon_sync_net_hover.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><rect width="24" height="24" fill="none"/><g transform="translate(2.428 -2.7)"><path d="M3.475,13.654l-.885-2.92a.491.491,0,0,1,.339-.61h0a.5.5,0,0,1,.619.334l.516,1.7a6.115,6.115,0,0,1,11.205.436.5.5,0,0,1-.457.668.512.512,0,0,1-.472-.32,5.126,5.126,0,0,0-9.465-.218l1.887-.567a.5.5,0,0,1,.619.334h0a.491.491,0,0,1-.339.61l-2.963.872A.5.5,0,0,1,3.475,13.654Z" transform="translate(0 0)" fill="#fff"/><path d="M22.858,58.42l-.516-1.7a6.132,6.132,0,0,1-11.22-.45.5.5,0,0,1,.457-.668.512.512,0,0,1,.472.32,5.126,5.126,0,0,0,9.465.218l-1.887.567a.5.5,0,0,1-.619-.334.491.491,0,0,1,.339-.61l2.963-.872a.5.5,0,0,1,.619.334l.885,2.92a.491.491,0,0,1-.339.61h0A.5.5,0,0,1,22.858,58.42Z" transform="translate(-7.264 -39.464)" fill="#fff"/></g></svg>
\ No newline at end of file

CellFrameDashboardGUI/resources/icons/ic_copy.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect width="16" height="16" fill="none"/><g transform="translate(-3 -956.362)"><path d="M9.722,958.362a.268.268,0,0,0-.243.268v1.606H6.243A.268.268,0,0,0,6,960.5v9.367a.268.268,0,0,0,.268.268h7.493a.268.268,0,0,0,.268-.268v-2.409h2.409a.268.268,0,0,0,.268-.268V958.63a.268.268,0,0,0-.268-.268H9.722Zm.293.535H16.17v8.028H14.029V960.5a.268.268,0,0,0-.268-.268H10.014Zm-3.479,1.873h6.958V969.6H6.535Z" transform="translate(0 0)" fill="#757184"/></g></svg>
\ No newline at end of file

CellFrameDashboardGUI/resources/icons/ic_copy_hover.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect width="16" height="16" fill="none"/><g transform="translate(-3 -956.362)"><path d="M9.722,958.362a.268.268,0,0,0-.243.268v1.606H6.243A.268.268,0,0,0,6,960.5v9.367a.268.268,0,0,0,.268.268h7.493a.268.268,0,0,0,.268-.268v-2.409h2.409a.268.268,0,0,0,.268-.268V958.63a.268.268,0,0,0-.268-.268H9.722Zm.293.535H16.17v8.028H14.029V960.5a.268.268,0,0,0-.268-.268H10.014Zm-3.479,1.873h6.958V969.6H6.535Z" transform="translate(0 0)" fill="#d51f5d"/></g></svg>
\ No newline at end of file

CellFrameDashboardGUI/resources/icons/icon_on_off_net.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g transform="translate(6 5)"><g transform="translate(-6 -5)" fill="rgba(255,255,255,0)" stroke="rgba(0,0,0,0)" stroke-width="1"></g><g transform="translate(0.796 2)"><path d="M13.665,12.913a.54.54,0,1,0-.65.862,4.827,4.827,0,1,1-5.8-.009.54.54,0,1,0-.65-.862,5.914,5.914,0,1,0,9.463,4.732,5.867,5.867,0,0,0-2.365-4.723Z" transform="translate(-5 -12.549)" fill="#453f5a"/><path d="M44.9,8.965a.54.54,0,0,0,.54-.54V4.1a.54.54,0,1,0-1.08,0V8.425A.54.54,0,0,0,44.9,8.965Z" transform="translate(-39.734 -4.564)" fill="#453f5a"/></g></g></svg>

CellFrameDashboardGUI/resources/icons/icon_on_off_net_hover.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g transform="translate(6 5)"><g transform="translate(-6 -5)" fill="rgba(255,255,255,0)" stroke="rgba(0,0,0,0)" stroke-width="1"></g><g transform="translate(0.796 2)"><path d="M13.665,12.913a.54.54,0,1,0-.65.862,4.827,4.827,0,1,1-5.8-.009.54.54,0,1,0-.65-.862,5.914,5.914,0,1,0,9.463,4.732,5.867,5.867,0,0,0-2.365-4.723Z" transform="translate(-5 -12.549)" fill="#fff"/><path d="M44.9,8.965a.54.54,0,0,0,.54-.54V4.1a.54.54,0,1,0-1.08,0V8.425A.54.54,0,0,0,44.9,8.965Z" transform="translate(-39.734 -4.564)" fill="#fff"/></g></g></svg>

CellFrameDashboardGUI/resources/icons/next-page.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><rect width="40" height="40" fill="none"/><path d="M9.04-5.9v.5L2.112-1.648l-.528-.9L7.248-5.632,1.536-8.544l.592-.9Zm9.6,0v.5l-6.928,3.76-.528-.9,5.664-3.088L11.136-8.544l.592-.9Z" transform="translate(9.464 25.44)" fill="#fff"/></svg>
\ No newline at end of file

CellFrameDashboardGUI/resources/icons/next-page_hover.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><rect width="40" height="40" fill="none"/><path d="M9.04-5.9v.5L2.112-1.648l-.528-.9L7.248-5.632,1.536-8.544l.592-.9Zm9.6,0v.5l-6.928,3.76-.528-.9,5.664-3.088L11.136-8.544l.592-.9Z" transform="translate(9.464 25.44)" fill="#d51f5d"/></svg>
\ No newline at end of file

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,18 @@ Item {
             }
         }
 
+        DapNetworksPanel
+        {
+            id: networksPanel
+            y: parent.height - height
+            width: parent.width
+        }
+
+        DapNetworkPopup
+        {
+            id: networkPanelPopup
+        }
+
 
 
     property var dapWallets: []

CellFrameDashboardGUI/screen/desktop/NetworksPanel/DapNetworkName.qml

+import QtQuick 2.7
+
+Item {
+    id: control
+
+    property string name
+    property string networkState
+    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.networkState) {
+                case "NET_STATE_ONLINE":
+                    return "#9DD51F";
+                case "NET_STATE_OFFLINE":
+                    return "#FFC527";
+                default:
+                    if (control.state.length > 0)
+                        console.warn("Unknown network state: " + control.networkState);
+                    return "#000000";
+                }
+            }
+        }
+    }
+
+}

CellFrameDashboardGUI/screen/desktop/NetworksPanel/DapNetworkPanelButton.qml

+import QtQuick 2.7
+
+Item {
+    id: control
+
+    property string normalIcon
+    property string hoverIcon
+    property alias mirror: img.mirror
+
+    signal clicked
+
+    implicitWidth: 40 * pt
+    implicitHeight: 40 * pt
+
+    Image {
+        id: img
+
+        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.7
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.3
+import QtGraphicalEffects 1.0
+
+Popup {
+    id: control
+
+    property point networkDelegateItemCoords
+    property int networkDelegateItemWidth
+    property int networkDelegateItemHeight
+
+    property string name
+    property string networkState
+    property string networkTargetState
+    property int activeLinksCount
+    property int linksCount
+    property string nodeAddress
+
+    function show(networkDelegateItem)
+    {
+        networkDelegateItemCoords = Qt.binding(function() { return parent.mapFromItem(networkDelegateItem.parent, networkDelegateItem.x, networkDelegateItem.y) });
+        networkDelegateItemWidth = Qt.binding(function() { return networkDelegateItem.width });
+        networkDelegateItemHeight = Qt.binding(function() { return networkDelegateItem.height });
+
+        name = Qt.binding(function() { return networkDelegateItem.name });
+        networkState = Qt.binding(function() { return networkDelegateItem.networkState });
+        networkTargetState = Qt.binding(function() { return networkDelegateItem.networkTargetState });
+        activeLinksCount = Qt.binding(function() { return networkDelegateItem.activeLinksCount });
+        linksCount = Qt.binding(function() { return networkDelegateItem.linksCount });
+        nodeAddress = Qt.binding(function() { return networkDelegateItem.nodeAddress });
+
+        open();
+    }
+
+    function release()
+    {
+        networkDelegateItemCoords = Qt.point(0, 0);
+        networkDelegateItemWidth = 0;
+        networkDelegateItemHeight = 0;
+
+        name = "";
+        networkState = "";
+        networkTargetState = "";
+        activeLinksCount = 0;
+        linksCount = 0;
+        nodeAddress = 0;
+    }
+
+    x: networkDelegateItemCoords.x
+    y: networkDelegateItemCoords.y + networkDelegateItemHeight - height
+    width: networkDelegateItemWidth
+    height: contentHeight
+
+    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
+
+        function networkStateToString(networkState)
+        {
+            switch (networkState) {
+            case "NET_STATE_ONLINE":
+                return qsTr("ONLINE");
+            case "NET_STATE_OFFLINE":
+                return qsTr("OFFLINE");
+            default:
+                if (state.length > 0)
+                    console.warn("Unknown network state: " + networkState);
+                return "";
+            }
+        }
+
+        implicitWidth: columnItem.width
+        implicitHeight: columnItem.height
+
+        Column {
+            id: columnItem
+
+            spacing: Math.floor(control.networkDelegateItemHeight / 2)
+
+            Row {
+                DapNetworkPopupButton {
+                    width: contentItem.width / 2
+                    height: 24 * pt
+                    text: qsTr("Sync network")
+                    iconNormal: "qrc:/resources/icons/Icon_sync_net.svg"
+                    iconHover: "qrc:/resources/icons/Icon_sync_net_hover.svg"
+
+                    onClicked: console.log("SYNC NETWORK CLICKED", control.name)
+                }
+                DapNetworkPopupButton {
+                    width: contentItem.width / 2
+                    height: 24 * pt
+                    text: control.networkState == "NET_STATE_ONLINE" ? qsTr("Off network") : qsTr("On network")
+                    iconNormal: "qrc:/resources/icons/icon_on_off_net.svg"
+                    iconHover: "qrc:/resources/icons/icon_on_off_net_hover.svg"
+
+                    onClicked: {
+                        if (control.networkState == "NET_STATE_ONLINE") {
+                            dapServiceController.changeNetworkStateToOffline(control.name);
+                        } else if (control.networkState == "NET_STATE_OFFLINE") {
+                            dapServiceController.changeNetworkStateToOnline(control.name);
+                        } else {
+                            console.warn("Unknown network state: " + control.networkState);
+                        }
+                    }
+                }
+            }
+
+            ColumnLayout {
+                width: contentItem.width
+
+                RowLayout {
+                    Text {
+                        font: quicksandFonts.medium12
+                        color: "#070023"
+                        text: qsTr("State: ")
+                    }
+                    Text {
+                        font: quicksandFonts.regular12
+                        color: "#070023"
+                        elide: Text.ElideRight
+                        text: contentItem.networkStateToString(control.networkState)
+                        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.regular12
+                        color: "#070023"
+                        elide: Text.ElideRight
+                        text: contentItem.networkStateToString(control.networkTargetState)
+                        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.regular12
+                        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.regular12
+                        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.svg" : "qrc:/resources/icons/ic_copy.svg"
+
+                        Layout.maximumWidth: Math.floor(textAddress.height * 1.1)
+                        Layout.maximumHeight: Layout.maximumWidth
+
+                        MouseArea {
+                            id: btnCopyAddressMouseArea
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            onClicked: app.setClipboardText(control.nodeAddress)
+                        }
+                    }
+
+                    Layout.alignment: Qt.AlignHCenter
+                }
+            }
+
+            DapNetworkName {
+                id: networkName
+
+                y: parent.height - height
+                width: control.networkDelegateItemWidth
+                height: control.networkDelegateItemHeight
+                textColor: "#070023"
+                name: control.name
+                networkState: control.networkState
+            }
+        }
+    }
+
+    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 / 5
+            source: r1
+            radius: 5
+            samples: 11
+            color: "#80000000"
+        }
+    }
+
+    onClosed: release()
+}

CellFrameDashboardGUI/screen/desktop/NetworksPanel/DapNetworkPopupButton.qml

+import QtQuick 2.7
+
+Rectangle {
+    id: control
+
+    property alias text: _text.text
+    property string iconNormal
+    property string iconHover
+
+    property bool highlight: mouseArea.containsMouse
+    property int spacing: 6 * pt
+
+    signal clicked
+
+    color: highlight ? "#D51F5D" : "#FFFFFF"
+
+    Image {
+        id: icon
+        anchors.verticalCenter: control.verticalCenter
+        anchors.right: _text.left
+        anchors.rightMargin: control.spacing
+        width: 24 * pt
+        height: 24 * pt
+        source: control.highlight ? control.iconHover : control.iconNormal
+    }
+
+    Text {
+        id: _text
+
+        anchors.verticalCenter: control.verticalCenter
+        x: Math.floor(icon.width + control.spacing + (control.width - (width + icon.width + control.spacing)) * 0.5)
+        width: Math.min(implicitWidth, control.width - icon.width - control.spacing)
+        font: quicksandFonts.medium12
+        color: control.highlight ? "#FFFFFF" :  "#453F5A"
+        elide: Text.ElideRight
+    }
+
+    MouseArea {
+        id: mouseArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+
+        onClicked: control.clicked()
+    }
+}

CellFrameDashboardGUI/screen/desktop/NetworksPanel/DapNetworksList.qml

+import QtQml 2.2
+import QtQuick 2.7
+
+Item {
+    id: control
+
+    property bool hasLeft: listView.leftIndex - 1 >= 0
+    property bool hasRight: listView.leftIndex + listView.visibleItems < listView.count
+
+    function scrollToLeft()
+    {
+        if (hasLeft) {
+            listView.positionViewAtIndexAnimation(listView.leftIndex - 1, ListView.Beginning);
+            listView.leftIndex--;
+        }
+    }
+
+    function scrollToRight()
+    {
+        if (hasRight) {
+            listView.positionViewAtIndexAnimation(listView.leftIndex + listView.visibleItems, ListView.End);
+            listView.leftIndex++;
+        }
+    }
+
+    ListView {
+        id: listView
+
+        property int visibleItems: 0
+        property int delegateWidth: Math.floor(control.width / 4)
+        property int leftIndex: 0
+
+        function positionViewAtIndexAnimation(index, mode)
+        {
+            scrollAnimation.running = false;
+            var pos = listView.contentX;
+            listView.positionViewAtIndex(index, mode);
+            var dest = listView.contentX;
+
+            scrollAnimation.from = pos;
+            scrollAnimation.to = dest;
+            scrollAnimation.running = true;
+        }
+
+        function setNetworks(networks)
+        {
+            model = networks;
+
+            // for set position of elements if there are less than 4
+            // [*][*][*][*] if 4+
+            // [ ][*][*][*] if 3
+            // [ ][*][*][ ] 2
+            // [ ][ ][ ][*] 1
+            var visibleItems = networks.length;
+            if (visibleItems >= 4) {
+                visibleItems = 4;
+                listView.width = Qt.binding(function() { return control.width });
+            } else if (visibleItems === 1 || visibleItems === 3) {
+                listView.width = Qt.binding(function() { return control.width - listView.delegateWidth * (4 - visibleItems) });
+            } else if (visibleItems === 2) {
+                listView.width = Qt.binding(function() { return control.width - listView.delegateWidth });
+            }
+            listView.visibleItems = visibleItems;
+
+            listView.leftIndex = 0;
+        }
+
+        anchors.right: parent.right
+        height: parent.height
+        orientation: Qt.Horizontal
+        clip: true
+        interactive: false
+
+        delegate: Rectangle {
+            id: delegateItem
+
+            // properties duplicated for DapNetworkPopup
+            property string name: modelData.name
+            property string networkState: modelData.state
+            property string networkTargetState: modelData.targetState
+            property int activeLinksCount: modelData.activeLinksCount
+            property int linksCount: modelData.linksCount
+            property string nodeAddress: modelData.nodeAddress
+
+            width: listView.delegateWidth
+            height: listView.height
+            color: "#070023"
+
+            DapNetworkName {
+                width: parent.width
+                height: parent.height
+                textColor: "#FFFFFF"
+                name: delegateItem.name
+                networkState: delegateItem.networkState
+            }
+
+            MouseArea {
+                id: delegateMouseArea
+
+                width: parent.width
+                height: parent.height
+
+                onClicked: {
+                    if (index >= listView.leftIndex && index < listView.leftIndex + listView.visibleItems) {
+                        networkPanelPopup.show(delegateItem);
+                    }
+                }
+            }
+        }
+
+        onDelegateWidthChanged: {
+            if (listView.leftIndex >= 0 && listView.leftIndex < listView.count) {
+                listView.positionViewAtIndex(listView.leftIndex, ListView.Beginning);
+            }
+        }
+
+        NumberAnimation {
+            id: scrollAnimation
+            target: listView
+            property: "contentX"
+            duration: 100
+        }
+    }
+
+    Connections {
+        target: networks
+        onListCompositionChanged: listView.setNetworks(networks.model())
+    }
+}

CellFrameDashboardGUI/screen/desktop/NetworksPanel/DapNetworksPanel.qml

+import QtQuick 2.7
+
+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
+        mirror: true
+        normalIcon: "qrc:/resources/icons/next-page.svg"
+        hoverIcon: "qrc:/resources/icons/next-page_hover.svg"
+        onClicked: networksListView.scrollToLeft()
+    }
+
+    DapNetworksList {
+        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/next-page.svg"
+        hoverIcon: "qrc:/resources/icons/next-page_hover.svg"
+        onClicked: networksListView.scrollToRight()
+    }
+}

CellFrameDashboardService/CellFrameDashboardService.pro

@@ -42,6 +42,8 @@ else {
 # deprecated API in order to know how to port your code away from it.
 DEFINES += QT_DEPRECATED_WARNINGS
 
+DEFINES += DAP_VERSION=\\\"$$VERSION\\\"
+
 # You can also make your code fail to compile if you use deprecated APIs.
 # In order to do so, uncomment the following line.
 # You can also select to disable deprecated APIs only up to a certain version of Qt.