Merge pull request #11 from status-im/feat/more-stylez

Add "working" search bar plus browser tab btn

img/search.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.92798 11.856C2.65405 11.856 0 9.2019 0 5.92798C0 2.65405 2.65405 0 5.92798 0C9.2019 0 11.856 2.65405 11.856 5.92798C11.856 7.20825 11.45 8.39368 10.76 9.36267L15.7087 14.3114C16.0945 14.6973 16.0945 15.3228 15.7087 15.7086C15.3228 16.0945 14.6973 16.0945 14.3115 15.7086L9.36279 10.76C8.3938 11.4501 7.20825 11.856 5.92798 11.856ZM5.92798 9.87988C8.1106 9.87988 9.88013 8.1106 9.88013 5.92798C9.88013 3.74536 8.1106 1.97595 5.92798 1.97595C3.74536 1.97595 1.97607 3.74536 1.97607 5.92798C1.97607 8.1106 3.74536 9.87988 5.92798 9.87988Z" fill="#939BA1"/>
+</svg>

main.qml

@@ -19,8 +19,10 @@ ApplicationWindow {
 
         TabBar {
             id: tabBar
+            y: 0
             width: 50
             height: width *2 + spacing
+            Layout.preferredHeight: 0
             currentIndex: 0
             topPadding: 57
             rightPadding: 19
@@ -29,16 +31,19 @@ ApplicationWindow {
             Layout.alignment: Qt.AlignLeft | Qt.AlignTop
             Layout.fillHeight: true
             anchors.top: parent.top
-            anchors.topMargin: 5
             spacing: 5
             Layout.fillWidth: true
             Layout.minimumWidth: 80
             Layout.preferredWidth: 80
             Layout.maximumWidth: 80
             Layout.minimumHeight: 0
+            background: Rectangle {
+                color: "#00000000"
+                border.color: "#EEF2F5"
+            }
 
             TabButton {
-                id: firstBtn
+                id: chatBtn
                 x: 0
                 width: 40
                 height: 40
@@ -62,13 +67,13 @@ ApplicationWindow {
             }
 
             TabButton {
-                id: secondBtn
+                id: walletBtn
                 width: 40
                 height: 40
                 text: ""
                 anchors.topMargin: 50
                 anchors.horizontalCenter: parent.horizontalCenter
-                anchors.top: firstBtn.top
+                anchors.top: chatBtn.top
                 background: Rectangle {
                     color: "#ECEFFC"
                     opacity: parent.checked ? 1 : 0
@@ -85,13 +90,13 @@ ApplicationWindow {
             }
 
             TabButton {
-                id: thirdBtn
+                id: browserBtn
                 width: 40
                 height: 40
                 text: ""
                 anchors.topMargin: 50
                 anchors.horizontalCenter: parent.horizontalCenter
-                anchors.top: secondBtn.top
+                anchors.top: walletBtn.top
                 background: Rectangle {
                     color: "#ECEFFC"
                     opacity: parent.checked ? 1 : 0
@@ -103,6 +108,29 @@ ApplicationWindow {
                     anchors.verticalCenter: parent.verticalCenter
                     anchors.horizontalCenter: parent.horizontalCenter
                     fillMode: Image.PreserveAspectFit
+                    source: parent.checked ? "img/compassActive.svg" : "img/compass.svg"
+                }
+            }
+
+            TabButton {
+                id: profileBtn
+                width: 40
+                height: 40
+                text: ""
+                anchors.topMargin: 50
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.top: browserBtn.top
+                background: Rectangle {
+                    color: "#ECEFFC"
+                    opacity: parent.checked ? 1 : 0
+                    radius: 50
+                }
+
+                Image {
+                    id: image3
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    fillMode: Image.PreserveAspectFit
                     source: parent.checked ? "img/profileActive.svg" : "img/profile.svg"
                 }
             }
@@ -127,13 +155,87 @@ ApplicationWindow {
                 //            Layout.preferredHeight: 100
 
                 Item {
+                    id: element1
                     width: 300
                     height: parent.height
                     Layout.minimumWidth: 200
 
-                    Button {
+                    Text {
-                        id: button
+                        id: element
-                        text: qsTr("TEST BUTTON")
+                        x: 772
+                        text: qsTr("Chat")
+                        anchors.top: parent.top
+                        anchors.topMargin: 17
+                        font.bold: true
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        font.pixelSize: 17
+                    }
+
+                    Rectangle {
+                        id: searchBox
+                        height: 36
+                        color: "#EEF2F5"
+                        anchors.top: parent.top
+                        anchors.topMargin: 59
+                        radius: 8
+                        anchors.right: parent.right
+                        anchors.rightMargin: 55
+                        anchors.left: parent.left
+                        anchors.leftMargin: 16
+
+                        TextField {
+                            id: searchText
+                            placeholderText: qsTr("Search")
+                            anchors.left: parent.left
+                            anchors.leftMargin: 32
+                            anchors.verticalCenter: parent.verticalCenter
+                            font.pixelSize: 12
+                            background: {
+                            }
+                        }
+
+                        Image {
+                            id: image4
+                            anchors.left: parent.left
+                            anchors.leftMargin: 10
+                            anchors.verticalCenter: parent.verticalCenter
+                            fillMode: Image.PreserveAspectFit
+                            source: "img/search.svg"
+                        }
+
+                        MouseArea {
+                            id: mouseArea
+                            anchors.fill: parent
+                            onClicked : {
+                                searchText.forceActiveFocus(Qt.MouseFocusReason)
+                            }
+                        }
+                    }
+
+                    Rectangle {
+                        id: addChat
+                        width: 36
+                        height: 36
+                        color: "#4360DF"
+                        radius: 50
+                        anchors.right: parent.right
+                        anchors.rightMargin: 9
+                        anchors.top: parent.top
+                        anchors.topMargin: 59
+
+                        Text {
+                            id: element3
+                            color: "#ffffff"
+                            text: qsTr("+")
+                            anchors.verticalCenterOffset: -1
+                            anchors.horizontalCenterOffset: 1
+                            anchors.horizontalCenter: parent.horizontalCenter
+                            anchors.verticalCenter: parent.verticalCenter
+                            lineHeight: 1
+                            fontSizeMode: Text.FixedSize
+                            font.bold: true
+                            font.pixelSize: 28
+                        }
                     }
                 }
 
@@ -166,6 +268,7 @@ ApplicationWindow {
 
                 }
 
+
             }
 
                 ColumnLayout {
@@ -189,6 +292,6 @@ ApplicationWindow {
 
 /*##^##
 Designer {
-    D{i:0;formeditorZoom:1.5}D{i:8;anchors_height:40;anchors_width:40}
+    D{i:9;anchors_height:40;anchors_width:40}D{i:19;anchors_y:0}D{i:23;anchors_height:100;anchors_width:100}
 }
 ##^##*/