[*] changed design of mainwindow

CellFrameDashboardGUI/DapUiQmlScreenMainWindow.qml

@@ -4,98 +4,75 @@ import QtQuick.Controls 1.4
 DapUiQmlScreenMainWindowForm {
     id: dapQmlScreenMainWindow
 
-    Component{
+    Component {
         id: componentItemMainMenuTab
-            Column {
-            id: columnTab
-            height: 148
-            Rectangle {
-                id: componentItem
-                property bool isPushed: listViewTabs.currentIndex === index
 
-                width: listViewTabs.width
-                height: 150
-                color: "transparent"
-                Rectangle
-                {
-                    id: spacerItem1
-                    height: 25
-                    anchors.top: parent.top
-                }
-                Image
-                {
-                    id: imageItem
-                    anchors.top: spacerItem1.bottom
-                    source: model.source
-                    height: 60
-                    width: 60
-                    anchors.horizontalCenter: parent.horizontalCenter
-                }
-                Rectangle
-                {
-                    id: spacerItem2
-                    anchors.top: imageItem.bottom
-                    height: 16
-                }
-                Text
-                {
-                    id: textItemMenu
-                    anchors.top: spacerItem2.bottom
-                    text: qsTr(name)
-                    color: "#505559"
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    font.family: "Roboto"
-                    font.weight: componentItem.isPushed ? Font.Normal : Font.Light
-                    font.pointSize: 16
-                }
-                Rectangle
-                {
-                    id: spacerItem3
-                    anchors.top: textItemMenu.bottom
-                    height: 30
-                }
-                MouseArea {
-                    anchors.fill: parent
-                    hoverEnabled: true
-                    onEntered:
-                    {
-                        textItemMenu.font.weight = Font.Normal
-                        if(!componentItem.isPushed) componentItem.color ="#B0B0B5"
-                    }
-                    onExited:
+        Rectangle {
+            id: componentItem
+            property bool isPushed: listViewTabs.currentIndex === index
+            width: 180 * pt
+            height: 60 * pt
+            color: "transparent"
+
+            Image
+            {
+                id: imageItem
+                anchors.left: parent.left
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.leftMargin: 24 * pt
+                source: model.normal
+                height: 18 * pt
+                width: 18 * pt
+            }
+
+            Text {
+                id: textItemMenu
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: imageItem.right
+                anchors.leftMargin: 18 * pt
+                text: name
+                font.family: fontRobotoLight.name
+                font.pixelSize: 16 * pt
+                color: "#FFFFFF"
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                hoverEnabled: true
+
+                onEntered: {
+                    if(!componentItem.isPushed)
                     {
-                        textItemMenu.font.weight = Font.Light
-                        if(!componentItem.isPushed) componentItem.color = "transparent"
+                        imageItem.source = model.hover;
+                        textItemMenu.font.family = fontRobotoRegular.name;
                     }
+                }
 
-                    onClicked:
+                onExited: {
+                    if(!componentItem.isPushed)
                     {
-                        listViewTabs.currentIndex = index
-                        stackViewScreenDashboard.setSource(Qt.resolvedUrl(page))
+                        imageItem.source = model.normal
+                        textItemMenu.font.family = fontRobotoLight.name;
                     }
                 }
 
-                onIsPushedChanged: {
-                    componentItem.color = (isPushed ? "#D0D3D6" : "transparent");
+                onClicked: {
+                    listViewTabs.currentIndex = index;
+                    stackViewScreenDashboard.setSource(Qt.resolvedUrl(page));
+
                 }
             }
-            Rectangle
-            {
-                id: borderItem
-                height: 1
-                color: "#B5B5B5"
-                width: parent.width
+
+            onIsPushedChanged: {
+                componentItem.color = (isPushed ? "#D51F5D" : "transparent");
+                imageItem.source = model.hover;
+                textItemMenu.font.family = (isPushed ? fontRobotoRegular.name : fontRobotoLight.name);
             }
         }
     }
 }
 
 
-
-
-
-
-
 /*##^## Designer {
     D{i:0;autoSize:true;height:480;width:640}
 }

CellFrameDashboardGUI/DapUiQmlScreenMainWindowForm.ui.qml

@@ -9,91 +9,98 @@ Page {
     id: dapUiQmlScreenMainWindow
     title: qsTr("General")
 
+    /// ----------- Load fonts -----------
+    /// using example: font.family: fontRobotoLight.name
+    readonly property FontLoader fontRobotoLight: FontLoader { source: "qrc:/Resources/Fonts/roboto_light.ttf" }
+    readonly property FontLoader fontRobotoRegular: FontLoader { source: "qrc:/Resources/Fonts/roboto_regular.ttf" }
+    /// -----------
+
     property alias listViewTabs: listViewTabs
     property alias stackViewScreenDashboard: stackViewScreenDashboard
 
 
     Rectangle
     {
-        id: rectangleTabsBorder
+        id: rectangleStatusBar
+        anchors.left: parent.left
         anchors.top: parent.top
+        anchors.right: parent.right
+        color: "#070023"
+        height: 60 * pt
+    }
+
+    Rectangle
+    {
+        id: rectangleTabsBorder
+        anchors.top: rectangleStatusBar.bottom
         anchors.bottom: parent.bottom
         anchors.left: parent.left
-        color: "#B5B5B5"
-        width: 150
-        Rectangle {
-            id: rectangleTabs
+        color: "#070023"
+        width: 160 * pt
+
+        ListView {
+            id: listViewTabs
             anchors.fill: parent
-            anchors.leftMargin: 1
-            anchors.rightMargin: 1
-
-            color: "#E1E4E6"
-            ListView {
-                id: listViewTabs
-                anchors.fill: parent
-                model: listModelTabs
-                spacing: 3
-
-                ListModel {
-                    id: listModelTabs
-
-                    ListElement {
-                        name:  qsTr("Dashboard")
-                        page: "DapUiQmlScreenDialog.qml"
-                        source: "qrc:/Resources/Icons/defaul_icon.png"
-                    }
-                    ListElement {
-                        name:  qsTr("Exchange")
-                        page: "DapUiQmlScreenExchangeForm.ui.qml"
-                        source: "qrc:/Resources/Icons/defaul_icon.png"
-                    }
-                    ListElement {
-                        name:  qsTr("Settings")
-                        page: "DapQmlScreenAbout.qml"
-                        source: "qrc:/Resources/Icons/defaul_icon.png"
-                    }
-                    ListElement {
-                        name:  qsTr("Logs")
-                        page: "DapUiQmlWidgetChainNodeLogs.qml"
-                        source: "qrc:/Resources/Icons/defaul_icon.png"
-                    }
-                    ListElement {
-                        name:  qsTr("History")
-                        page: "DapUiQmlScreenHistory.qml"
-                        source: "qrc:/Resources/Icons/defaul_icon.png"
-                    }
-                    ListElement {
-                        name:  qsTr("Console")
-                        page: "DapUiQmlScreenConsoleForm.ui.qml"
-                        source: "qrc:/Resources/Icons/defaul_icon.png"
-                    }
-                    ListElement {
-                        name:  qsTr("About")
-                        page: "DapQmlScreenAbout.qml"
-                        source: "qrc:/Resources/Icons/defaul_icon.png"
-                    }
+            model: listModelTabs
+            spacing: 3
+
+            ListModel {
+                id: listModelTabs
+
+                ListElement {
+                    name:  qsTr("Dashboard")
+                    page: "DapUiQmlScreenDialog.qml"
+                    normal: "qrc:/Resources/Icons/icon_dashboard.png"
+                    hover: "qrc:/Resources/Icons/icon_dashboard_hover.png"
+                }
+
+                ListElement {
+                    name:  qsTr("Exchange")
+                    page: "DapUiQmlScreenExchangeForm.ui.qml"
+                    normal: "qrc:/Resources/Icons/icon_exchange.png"
+                    hover: "qrc:/Resources/Icons/icon_exchange_hover.png"
+                }
+
+                ListElement {
+                    name:  qsTr("History")
+                    page: "DapUiQmlScreenHistory.qml"
+                    normal: "qrc:/Resources/Icons/icon_history.png"
+                    hover: "qrc:/Resources/Icons/icon_history_hover.png"
                 }
-                delegate: componentItemMainMenuTab
 
+                ListElement {
+                    name:  qsTr("Console")
+                    page: "DapUiQmlScreenConsoleForm.ui.qml"
+                    normal: "qrc:/Resources/Icons/icon_console.png"
+                    hover: "qrc:/Resources/Icons/icon_console_hover.png"
+                }
+
+                ListElement {
+                    name:  qsTr("Logs")
+                    page: "DapUiQmlWidgetChainNodeLogs.qml"
+                    normal: "qrc:/Resources/Icons/icon_logs.png"
+                    hover: "qrc:/Resources/Icons/icon_logs_hover.png"
+                }
+
+                ListElement {
+                    name:  qsTr("Settings")
+                    page: "DapQmlScreenAbout.qml"
+                    normal: "qrc:/Resources/Icons/defaul_icon.png"
+                    hover: "qrc:/Resources/Icons/defaul_icon.png"
+                }
+
+                /// TODO: It wasn't in the task. I will not delete it, maybe later
+                /// we will need it
+//                    ListElement {
+//                        name:  qsTr("About")
+//                        page: "DapQmlScreenAbout.qml"
+//                        source: "qrc:/Resources/Icons/defaul_icon.png"
+//                    }
             }
-            focus: true
-        }
-    }
+            delegate: componentItemMainMenuTab
 
-    Rectangle
-    {
-        id: rectangleStatusBar
-        anchors.left: rectangleTabsBorder.right
-        anchors.top: parent.top
-        anchors.right: parent.right
-        color: "#B5B5B5"
-        height: 60
-        Rectangle
-        {
-            anchors.fill: parent
-            anchors.bottomMargin: 1
-            color: "#F2F2F4"
         }
+        focus: true
     }
 
     Rectangle {
@@ -114,8 +121,6 @@ Page {
 }
 
 
-
-
 /*##^## Designer {
     D{i:0;autoSize:true;height:480;width:640}
 }

CellFrameDashboardGUI/main.qml

@@ -11,7 +11,7 @@ ApplicationWindow {
     id: window
     visible: true
     width: 1280
-    height: 1024
+    height: 800
 
     onClosing: {
         console.log("Close")

CellFrameDashboardGUI/qml.qrc

@@ -61,5 +61,15 @@
         <file>DapUiQmlWidgetConsoleLastActionsDelegateForm.qml</file>
         <file>DapUiQmlWidgetConsole.qml</file>
         <file>DapUiQmlWidgetConsoleForm.ui.qml</file>
+        <file>Resources/Icons/icon_console.png</file>
+        <file>Resources/Icons/icon_console_hover.png</file>
+        <file>Resources/Icons/icon_dashboard.png</file>
+        <file>Resources/Icons/icon_dashboard_hover.png</file>
+        <file>Resources/Icons/icon_exchange.png</file>
+        <file>Resources/Icons/icon_exchange_hover.png</file>
+        <file>Resources/Icons/icon_history.png</file>
+        <file>Resources/Icons/icon_history_hover.png</file>
+        <file>Resources/Icons/icon_logs.png</file>
+        <file>Resources/Icons/icon_logs_hover.png</file>
     </qresource>
 </RCC>