chore: fix anchor warning in ContactColumn and cleanup

This commit is contained in:
Jonathan Rainville 2020-05-27 12:24:24 -04:00 committed by Iuri Matias
parent 084c96afff
commit 5b14982393
1 changed files with 391 additions and 379 deletions

View File

@ -7,429 +7,441 @@ import QtGraphicalEffects 1.12
import "../../../imports" import "../../../imports"
import "./components" import "./components"
Item { Column {
property alias chatGroupsListViewCount: chatGroupsListView.count property alias chatGroupsListViewCount: chatGroupsListView.count
property alias searchStr: searchText.text property alias searchStr: searchText.text
id: contactsColumn id: contactsColumn
width: 300 width: 300
height: parent.height // height: parent.height
Layout.minimumWidth: 200 Layout.minimumWidth: 200
ColumnLayout { Item {
anchors.fill: parent Layout.preferredHeight: 100
Layout.fillHeight: false
Layout.fillWidth: true
Item { Text {
Layout.preferredHeight: 100 id: title
Layout.fillHeight: false x: 772
Layout.fillWidth: true text: qsTr("Chat")
anchors.top: parent.top
anchors.topMargin: 17
font.bold: true
anchors.horizontalCenter: parent.horizontalCenter
font.pixelSize: 17
}
Text { Rectangle {
id: element id: searchBox
x: 772 height: 36
text: qsTr("Chat") color: Theme.grey
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 17 anchors.topMargin: 59
font.bold: true radius: 8
anchors.horizontalCenter: parent.horizontalCenter anchors.right: parent.right
font.pixelSize: 17 anchors.rightMargin: 65
} anchors.left: parent.left
anchors.leftMargin: 16
Rectangle { TextField {
id: searchBox id: searchText
height: 36 placeholderText: qsTr("Search or join channel")
color: Theme.grey
anchors.top: parent.top
anchors.topMargin: 59
radius: 8
anchors.right: parent.right
anchors.rightMargin: 65
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 16 anchors.leftMargin: 32
anchors.verticalCenter: parent.verticalCenter
TextField { font.pixelSize: 12
id: searchText background: Rectangle {
placeholderText: qsTr("Search or join channel") color: "#00000000"
anchors.left: parent.left
anchors.leftMargin: 32
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 12
background: Rectangle {
color: "#00000000"
}
}
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 { Image {
id: addChat id: image4
width: 36 anchors.left: parent.left
height: 36 anchors.leftMargin: 10
color: Theme.blue anchors.verticalCenter: parent.verticalCenter
radius: 50 fillMode: Image.PreserveAspectFit
anchors.right: parent.right source: "../../img/search.svg"
anchors.rightMargin: 16 }
anchors.top: parent.top
anchors.topMargin: 59
Text { MouseArea {
id: addChatLbl id: mouseArea
color: "#ffffff" anchors.fill: parent
text: qsTr("+") onClicked: {
anchors.verticalCenterOffset: -1 searchText.forceActiveFocus(Qt.MouseFocusReason)
anchors.horizontalCenterOffset: 1
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
lineHeight: 1
fontSizeMode: Text.FixedSize
font.bold: true
font.pixelSize: 28
state: "default"
rotation: 0
states: [
State {
name: "default"
PropertyChanges { target: addChatLbl; rotation: 0 }
},
State {
name: "rotated"
PropertyChanges { target: addChatLbl; rotation: 45 }
}
]
transitions: [
Transition {
from: "default"
to: "rotated"
RotationAnimation {
duration: 150;
direction: RotationAnimation.Clockwise
easing.type: Easing.InCubic
}
},
Transition {
from: "rotated"
to: "default"
RotationAnimation {
duration: 150;
direction: RotationAnimation.Counterclockwise
easing.type: Easing.OutCubic
}
}
]
}
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
addChatLbl.state = "rotated"
let x = addChatLbl.x + addChatLbl.width / 2 - newChatMenu.width / 2
newChatMenu.popup(x, addChatLbl.height + 10)
}
QQC2.Menu {
id: newChatMenu
QQC2.Action {
text: qsTr("Start new chat")
icon.source: "../../img/new_chat.svg"
onTriggered: {
console.log("TODO: Start new chat")
}
}
QQC2.Action {
text: qsTr("Start group chat")
icon.source: "../../img/group_chat.svg"
onTriggered: {
console.log("TODO: Start group chat")
}
}
QQC2.Action {
text: qsTr("Join public chat")
icon.source: "../../img/public_chat.svg"
onTriggered: {
chatGroupsListView.currentIndex = chatsModel.joinChat(searchText.text);
searchText.text = "";
}
}
onAboutToHide: {
addChatLbl.state = "default"
}
topPadding: 16
bottomPadding: 16
delegate: QQC2.MenuItem {
id: addChatMenuItem
implicitWidth: 200
implicitHeight: 40
font.pixelSize: 15
icon.color: addChatMenuItem.highlighted ? "white" : Theme.blue
background: Rectangle {
implicitWidth: 220
implicitHeight: 40
color: addChatMenuItem.highlighted ? Theme.blue : "transparent"
}
}
background: Rectangle {
id: bgAddItemMenu
implicitWidth: 220
implicitHeight: 172
color: "transparent"
Rectangle {
id: bgAddItemMenuArrow
color: Theme.white2
height: 14
width: 14
rotation: 135
x: bgAddItemMenu.width / 2 - width / 2
layer.enabled: true
layer.effect: DropShadow{
width: bgAddItemMenuArrow.width
height: bgAddItemMenuArrow.height
x: bgAddItemMenuArrow.x
y: bgAddItemMenuArrow.y + 10
visible: bgAddItemMenuArrow.visible
source: bgAddItemMenuArrow
horizontalOffset: 0
verticalOffset: 5
radius: 10
samples: 15
color: "#22000000"
}
}
Rectangle {
id: bgAddItemMenu2
y: 7
implicitWidth: 220
implicitHeight: 152
color: Theme.white2
radius: 16
layer.enabled: true
layer.effect: DropShadow{
width: bgAddItemMenu2.width
height: bgAddItemMenu2.height
x: bgAddItemMenu2.x
y: bgAddItemMenu2.y + 10
visible: bgAddItemMenu2.visible
source: bgAddItemMenu2
horizontalOffset: 0
verticalOffset: 7
radius: 10
samples: 15
color: "#22000000"
}
}
}
}
} }
} }
} }
StackLayout { Rectangle {
Layout.fillHeight: true id: addChat
Layout.fillWidth: true width: 36
height: 36
color: Theme.blue
radius: 50
anchors.right: parent.right
anchors.rightMargin: 16
anchors.top: parent.top
anchors.topMargin: 59
currentIndex: chatGroupsListView.count > 0 ? 1 : 0 Text {
Item { id: addChatLbl
id: element1 color: "#ffffff"
Layout.fillHeight: true text: qsTr("+")
Layout.fillWidth: true anchors.verticalCenterOffset: -1
anchors.horizontalCenterOffset: 1
ColumnLayout { anchors.horizontalCenter: parent.horizontalCenter
anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter
anchors.rightMargin: 20 lineHeight: 1
anchors.left: parent.left fontSizeMode: Text.FixedSize
anchors.leftMargin: 20 font.bold: true
anchors.top: parent.top font.pixelSize: 28
anchors.topMargin: 20 state: "default"
Layout.fillHeight: true rotation: 0
Layout.fillWidth: true states: [
Row { State {
id: description name: "default"
Layout.fillHeight: false PropertyChanges {
Layout.fillWidth: true target: addChatLbl
width: parent.width rotation: 0
}
Text { },
width: parent.width State {
text: qsTr("Follow your interests in one of the many Public Chats.") name: "rotated"
font.pointSize: 15 PropertyChanges {
wrapMode: Text.WordWrap target: addChatLbl
verticalAlignment: Text.AlignTop rotation: 45
horizontalAlignment: Text.AlignHCenter
fontSizeMode: Text.FixedSize
renderType: Text.QtRendering
onLinkActivated: console.log(link)
} }
} }
]
RowLayout { transitions: [
id: row Transition {
Layout.fillHeight: false from: "default"
Layout.fillWidth: true to: "rotated"
anchors.right: parent.right RotationAnimation {
anchors.rightMargin: 0 duration: 150
anchors.left: parent.left direction: RotationAnimation.Clockwise
anchors.leftMargin: 0 easing.type: Easing.InCubic
anchors.top: description.bottom }
anchors.topMargin: 20 },
Transition {
Flow { from: "rotated"
Layout.fillHeight: false to: "default"
Layout.fillWidth: true RotationAnimation {
spacing: 6 duration: 150
direction: RotationAnimation.Counterclockwise
SuggestedChannel { channel: "introductions" } easing.type: Easing.OutCubic
SuggestedChannel { channel: "chitchat" }
SuggestedChannel { channel: "status" }
SuggestedChannel { channel: "crypto" }
SuggestedChannel { channel: "tech" }
SuggestedChannel { channel: "music" }
SuggestedChannel { channel: "movies" }
SuggestedChannel { channel: "test" }
SuggestedChannel { channel: "test2" }
} }
} }
} ]
} }
Item { MouseArea {
Component { anchors.fill: parent
id: chatViewDelegate acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
addChatLbl.state = "rotated"
let x = addChatLbl.x + addChatLbl.width / 2 - newChatMenu.width / 2
newChatMenu.popup(x, addChatLbl.height + 10)
}
Rectangle { QQC2.Menu {
id: wrapper id: newChatMenu
color: ListView.isCurrentItem ? Theme.lightBlue : Theme.transparent QQC2.Action {
anchors.right: parent.right text: qsTr("Start new chat")
anchors.rightMargin: Theme.padding icon.source: "../../img/new_chat.svg"
anchors.top: applicationWindow.top onTriggered: {
anchors.topMargin: 0 console.log("TODO: Start new chat")
anchors.left: parent.left }
anchors.leftMargin: Theme.padding }
radius: 8 QQC2.Action {
// Hide the box if it is filtered out text: qsTr("Start group chat")
property bool isVisible: searchStr == "" || name.includes(searchStr) icon.source: "../../img/group_chat.svg"
visible: isVisible ? true : false onTriggered: {
height: isVisible ? 64 : 0 console.log("TODO: Start group chat")
}
}
QQC2.Action {
text: qsTr("Join public chat")
icon.source: "../../img/public_chat.svg"
onTriggered: {
chatGroupsListView.currentIndex = chatsModel.joinChat(
searchText.text)
searchText.text = ""
}
}
onAboutToHide: {
addChatLbl.state = "default"
}
topPadding: 16
bottomPadding: 16
MouseArea { delegate: QQC2.MenuItem {
cursorShape: Qt.PointingHandCursor; id: addChatMenuItem
anchors.fill: parent implicitWidth: 200
onClicked: { implicitHeight: 40
chatsModel.setActiveChannelByIndex(index) font.pixelSize: 15
chatGroupsListView.currentIndex = index icon.color: addChatMenuItem.highlighted ? "white" : Theme.blue
background: Rectangle {
implicitWidth: 220
implicitHeight: 40
color: addChatMenuItem.highlighted ? Theme.blue : "transparent"
}
}
background: Rectangle {
id: bgAddItemMenu
implicitWidth: 220
implicitHeight: 172
color: "transparent"
Rectangle {
id: bgAddItemMenuArrow
color: Theme.white2
height: 14
width: 14
rotation: 135
x: bgAddItemMenu.width / 2 - width / 2
layer.enabled: true
layer.effect: DropShadow {
width: bgAddItemMenuArrow.width
height: bgAddItemMenuArrow.height
x: bgAddItemMenuArrow.x
y: bgAddItemMenuArrow.y + 10
visible: bgAddItemMenuArrow.visible
source: bgAddItemMenuArrow
horizontalOffset: 0
verticalOffset: 5
radius: 10
samples: 15
color: "#22000000"
} }
} }
Rectangle { Rectangle {
id: contactImage id: bgAddItemMenu2
width: 40 y: 7
color: Theme.darkGrey implicitWidth: 220
anchors.left: parent.left implicitHeight: 152
anchors.leftMargin: Theme.padding color: Theme.white2
anchors.top: parent.top radius: 16
anchors.topMargin: 12 layer.enabled: true
anchors.bottom: parent.bottom layer.effect: DropShadow {
anchors.bottomMargin: 12 width: bgAddItemMenu2.width
radius: 50 height: bgAddItemMenu2.height
} x: bgAddItemMenu2.x
y: bgAddItemMenu2.y + 10
Text { visible: bgAddItemMenu2.visible
id: contactInfo source: bgAddItemMenu2
text: name horizontalOffset: 0
anchors.right: contactTime.left verticalOffset: 7
anchors.rightMargin: Theme.smallPadding radius: 10
elide: Text.ElideRight samples: 15
font.weight: Font.Medium color: "#22000000"
font.pixelSize: 15
anchors.left: contactImage.right
anchors.leftMargin: Theme.padding
anchors.top: parent.top
anchors.topMargin: Theme.smallPadding
color: "black"
}
Text {
id: lastChatMessage
text: lastMessage || qsTr("No messages")
anchors.right: contactNumberChatsCircle.left
anchors.rightMargin: Theme.smallPadding
elide: Text.ElideRight
anchors.bottom: parent.bottom
anchors.bottomMargin: Theme.smallPadding
font.pixelSize: 15
anchors.left: contactImage.right
anchors.leftMargin: Theme.padding
color: Theme.darkGrey
}
Text {
id: contactTime
text: timestamp
anchors.right: parent.right
anchors.rightMargin: Theme.padding
anchors.top: parent.top
anchors.topMargin: Theme.smallPadding
font.pixelSize: 11
color: Theme.darkGrey
}
Rectangle {
id: contactNumberChatsCircle
width: 22
height: 22
radius: 50
anchors.bottom: parent.bottom
anchors.bottomMargin: Theme.smallPadding
anchors.right: parent.right
anchors.rightMargin: Theme.padding
color: Theme.blue
visible: unviewedMessagesCount > 0
Text {
id: contactNumberChats
text: unviewedMessagesCount
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
color: "white"
} }
} }
} }
} }
ListView {
id: chatGroupsListView
anchors.topMargin: 24
anchors.fill: parent
model: chatsModel.chats
delegate: chatViewDelegate
}
} }
} }
} }
} StackLayout {
Layout.fillHeight: true
Layout.fillWidth: true
currentIndex: chatGroupsListView.count > 0 ? 1 : 0
Item {
id: suggestionsContainer
Layout.fillHeight: true
Layout.fillWidth: true
Row {
id: description
anchors.right: parent.right
anchors.rightMargin: 20
anchors.left: parent.left
anchors.leftMargin: 20
Text {
width: parent.width
text: qsTr("Follow your interests in one of the many Public Chats.")
font.pointSize: 15
wrapMode: Text.WordWrap
verticalAlignment: Text.AlignTop
horizontalAlignment: Text.AlignHCenter
fontSizeMode: Text.FixedSize
renderType: Text.QtRendering
onLinkActivated: console.log(link)
}
}
RowLayout {
id: row
anchors.right: parent.right
anchors.rightMargin: 20
anchors.left: parent.left
anchors.leftMargin: 20
anchors.top: description.bottom
anchors.topMargin: 20
Flow {
Layout.fillHeight: false
Layout.fillWidth: true
spacing: 6
SuggestedChannel {
channel: "introductions"
}
SuggestedChannel {
channel: "chitchat"
}
SuggestedChannel {
channel: "status"
}
SuggestedChannel {
channel: "crypto"
}
SuggestedChannel {
channel: "tech"
}
SuggestedChannel {
channel: "music"
}
SuggestedChannel {
channel: "movies"
}
SuggestedChannel {
channel: "test"
}
SuggestedChannel {
channel: "test2"
}
}
}
}
}
Item {
id: chatGroupsContainer
Layout.fillWidth: true
Layout.fillHeight: true
Component {
id: chatViewDelegate
Rectangle {
id: wrapper
color: ListView.isCurrentItem ? Theme.lightBlue : Theme.transparent
anchors.right: parent.right
anchors.rightMargin: Theme.padding
anchors.top: applicationWindow.top
anchors.topMargin: 0
anchors.left: parent.left
anchors.leftMargin: Theme.padding
radius: 8
// Hide the box if it is filtered out
property bool isVisible: searchStr == "" || name.includes(
searchStr)
visible: isVisible ? true : false
height: isVisible ? 64 : 0
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onClicked: {
chatsModel.setActiveChannelByIndex(index)
chatGroupsListView.currentIndex = index
}
}
Rectangle {
id: contactImage
width: 40
color: Theme.darkGrey
anchors.left: parent.left
anchors.leftMargin: Theme.padding
anchors.top: parent.top
anchors.topMargin: 12
anchors.bottom: parent.bottom
anchors.bottomMargin: 12
radius: 50
}
Text {
id: contactInfo
text: name
anchors.right: contactTime.left
anchors.rightMargin: Theme.smallPadding
elide: Text.ElideRight
font.weight: Font.Medium
font.pixelSize: 15
anchors.left: contactImage.right
anchors.leftMargin: Theme.padding
anchors.top: parent.top
anchors.topMargin: Theme.smallPadding
color: "black"
}
Text {
id: lastChatMessage
text: lastMessage || qsTr("No messages")
anchors.right: contactNumberChatsCircle.left
anchors.rightMargin: Theme.smallPadding
elide: Text.ElideRight
anchors.bottom: parent.bottom
anchors.bottomMargin: Theme.smallPadding
font.pixelSize: 15
anchors.left: contactImage.right
anchors.leftMargin: Theme.padding
color: Theme.darkGrey
}
Text {
id: contactTime
text: timestamp
anchors.right: parent.right
anchors.rightMargin: Theme.padding
anchors.top: parent.top
anchors.topMargin: Theme.smallPadding
font.pixelSize: 11
color: Theme.darkGrey
}
Rectangle {
id: contactNumberChatsCircle
width: 22
height: 22
radius: 50
anchors.bottom: parent.bottom
anchors.bottomMargin: Theme.smallPadding
anchors.right: parent.right
anchors.rightMargin: Theme.padding
color: Theme.blue
visible: unviewedMessagesCount > 0
Text {
id: contactNumberChats
text: unviewedMessagesCount
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
color: "white"
}
}
}
}
ListView {
id: chatGroupsListView
anchors.topMargin: 24
anchors.fill: parent
model: chatsModel.chats
delegate: chatViewDelegate
}
}
}
/*##^## /*##^##
Designer { Designer {
D{i:0;height:770;width:300} D{i:0;height:770;width:300;formeditorColor:"#ffffff"}
} }
##^##*/ ##^##*/