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
GitHub
commit
75a7fa4fcf
|
|
@ -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
123
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 {
|
||||
id: button
|
||||
text: qsTr("TEST BUTTON")
|
||||
Text {
|
||||
id: element
|
||||
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}
|
||||
}
|
||||
##^##*/
|
||||
|
|
|
|||
Loading…
Reference in New Issue