feat: add placeholder top bar for the chat column

This commit is contained in:
Jonathan Rainville 2020-05-26 11:55:32 -04:00 committed by Iuri Matias
parent 66fc2b96d0
commit f11e17a792
1 changed files with 93 additions and 0 deletions

View File

@ -16,6 +16,99 @@ ColumnLayout {
anchors.top: parent.top
anchors.topMargin: 0
RowLayout {
id: chatTopBar
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
Layout.fillWidth: true
Rectangle {
property string channelNameStr: "#Channel Name"
id: chatTopBarContent
color: "white"
height: 56
Layout.fillWidth: true
border.color: Theme.grey
border.width: 1
// TODO this should be the Identicon if it's a private chat
Rectangle {
id: channelIcon
width: 36
height: 36
anchors.left: parent.left
anchors.leftMargin: Theme.padding
anchors.top: parent.top
anchors.topMargin: Theme.smallPadding
// TODO change this to be dynamic
color: "#FA6565"
radius: 50
Text {
id: channelIconText
color: "white"
opacity: 0.7
text: chatTopBarContent.channelNameStr.substring(1, 2)
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
font.weight: Font.Bold
font.pixelSize: 18
}
}
TextEdit {
id: channelName
width: 80
height: 20
text: chatTopBarContent.channelNameStr
anchors.left: channelIcon.right
anchors.leftMargin: Theme.smallPadding
anchors.top: parent.top
anchors.topMargin: Theme.smallPadding
font.weight: Font.Medium
font.pixelSize: 15
selectByMouse: true
readOnly: true
}
Text {
id: channelIdentifier
color: Theme.darkGrey
// TODO change this in case of private message
text: "Public chat"
font.pixelSize: 12
anchors.left: channelIcon.right
anchors.leftMargin: Theme.smallPadding
anchors.top: channelName.bottom
anchors.topMargin: 0
}
Text {
id: moreActionsBtn
text: "..."
font.letterSpacing: 0.5
font.bold: true
lineHeight: 1.4
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 20
font.pixelSize: 25
MouseArea {
id: mouseArea
// The negative margins are for the mouse area to be a bit more wide around the button and have more space for the click
anchors.topMargin: -10
anchors.bottomMargin: -10
anchors.rightMargin: -15
anchors.leftMargin: -15
anchors.fill: parent
onClicked: console.log("Options click. Will do something later...")
cursorShape: Qt.PointingHandCursor
}
}
}
}
RowLayout {
id: chatContainer
Layout.fillWidth: true