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

Add "working" search bar plus browser tab btn
This commit is contained in:
Iuri Matias 2020-05-08 18:45:44 -04:00 committed by GitHub
commit 75a7fa4fcf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 116 additions and 10 deletions

3
img/search.svg Normal file
View File

@ -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>

After

Width:  |  Height:  |  Size: 709 B

123
main.qml
View File

@ -19,8 +19,10 @@ ApplicationWindow {
TabBar { TabBar {
id: tabBar id: tabBar
y: 0
width: 50 width: 50
height: width *2 + spacing height: width *2 + spacing
Layout.preferredHeight: 0
currentIndex: 0 currentIndex: 0
topPadding: 57 topPadding: 57
rightPadding: 19 rightPadding: 19
@ -29,16 +31,19 @@ ApplicationWindow {
Layout.alignment: Qt.AlignLeft | Qt.AlignTop Layout.alignment: Qt.AlignLeft | Qt.AlignTop
Layout.fillHeight: true Layout.fillHeight: true
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 5
spacing: 5 spacing: 5
Layout.fillWidth: true Layout.fillWidth: true
Layout.minimumWidth: 80 Layout.minimumWidth: 80
Layout.preferredWidth: 80 Layout.preferredWidth: 80
Layout.maximumWidth: 80 Layout.maximumWidth: 80
Layout.minimumHeight: 0 Layout.minimumHeight: 0
background: Rectangle {
color: "#00000000"
border.color: "#EEF2F5"
}
TabButton { TabButton {
id: firstBtn id: chatBtn
x: 0 x: 0
width: 40 width: 40
height: 40 height: 40
@ -62,13 +67,13 @@ ApplicationWindow {
} }
TabButton { TabButton {
id: secondBtn id: walletBtn
width: 40 width: 40
height: 40 height: 40
text: "" text: ""
anchors.topMargin: 50 anchors.topMargin: 50
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.top: firstBtn.top anchors.top: chatBtn.top
background: Rectangle { background: Rectangle {
color: "#ECEFFC" color: "#ECEFFC"
opacity: parent.checked ? 1 : 0 opacity: parent.checked ? 1 : 0
@ -85,13 +90,13 @@ ApplicationWindow {
} }
TabButton { TabButton {
id: thirdBtn id: browserBtn
width: 40 width: 40
height: 40 height: 40
text: "" text: ""
anchors.topMargin: 50 anchors.topMargin: 50
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.top: secondBtn.top anchors.top: walletBtn.top
background: Rectangle { background: Rectangle {
color: "#ECEFFC" color: "#ECEFFC"
opacity: parent.checked ? 1 : 0 opacity: parent.checked ? 1 : 0
@ -103,6 +108,29 @@ ApplicationWindow {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
fillMode: Image.PreserveAspectFit 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" source: parent.checked ? "img/profileActive.svg" : "img/profile.svg"
} }
} }
@ -127,13 +155,87 @@ ApplicationWindow {
// Layout.preferredHeight: 100 // Layout.preferredHeight: 100
Item { Item {
id: element1
width: 300 width: 300
height: parent.height height: parent.height
Layout.minimumWidth: 200 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 { ColumnLayout {
@ -189,6 +292,6 @@ ApplicationWindow {
/*##^## /*##^##
Designer { 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}
} }
##^##*/ ##^##*/