Commit 0b56121f authored by Ronan's avatar Ronan
Browse files

feat(MainWindow/Contacts): use new style

parent e3eb67a9
......@@ -10,6 +10,31 @@ import App.Styles 1.0
// ===================================================================
ColumnLayout {
function _filter (text) {
Utils.assert(
contacts.setFilterFixedString != null,
'`contacts.setFilterFixedString` must be defined.'
)
Utils.assert(
contacts.invalidate != null,
'`contacts.invalidate` must be defined.'
)
contacts.setFilterFixedString(text)
contacts.invalidate()
}
function _removeContact (contact) {
Utils.openConfirmDialog(contact, {
descriptionText: qsTr('removeContactDescription'),
exitHandler: function (status) {
console.log('remove contact', status)
},
title: qsTr('removeContactTitle')
})
}
spacing: 0
// -----------------------------------------------------------------
......@@ -20,24 +45,22 @@ ColumnLayout {
Layout.fillWidth: true
Layout.preferredHeight: ContactsStyle.bar.height
color: ContactsStyle.bar.color
color: ContactsStyle.bar.backgroundColor
RowLayout {
anchors.fill: parent
anchors.leftMargin: ContactsStyle.bar.leftMargin
anchors.rightMargin: ContactsStyle.bar.rightMargin
spacing: 20
anchors {
fill: parent
leftMargin: ContactsStyle.bar.leftMargin
rightMargin: ContactsStyle.bar.rightMargin
}
spacing: ContactsStyle.spacing
TextField {
Layout.fillWidth: true
icon: 'filter'
placeholderText: qsTr('searchContactPlaceholder')
onTextChanged: {
contacts.setFilterFixedString(text)
contacts.invalidate()
}
onTextChanged: _filter(text)
}
ExclusiveButtons {
......@@ -67,115 +90,134 @@ ColumnLayout {
ScrollableListView {
anchors.fill: parent
spacing: ContactsStyle.contacts.spacing
spacing: 0
model: ContactsListModel {
id: contacts
}
delegate: Rectangle {
id: contact
color: '#FFFFFF'
height: 50
delegate: Borders {
borderColor: ContactsStyle.contact.border.color
bottomWidth: ContactsStyle.contact.border.width
height: ContactsStyle.contact.height
width: parent.width
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: contact.state = 'hover'
onExited: contact.state = ''
}
Rectangle {
id: contact
Item {
anchors.verticalCenter: parent.verticalCenter
height: 30
width: parent.width
anchors.fill: parent
color: ContactsStyle.contact.backgroundColor.normal
RowLayout {
anchors.fill: parent
anchors.leftMargin: 15
anchors.rightMargin: 25
spacing: 15
anchors {
fill: parent
leftMargin: ContactsStyle.contact.leftMargin
rightMargin: ContactsStyle.contact.rightMargin
}
spacing: ContactsStyle.contact.spacing
// Avatar.
Avatar {
Layout.fillHeight: parent.height
Layout.preferredWidth: 30
Layout.preferredHeight: ContactsStyle.contact.avatarSize
Layout.preferredWidth: ContactsStyle.contact.avatarSize
image: $contact.avatar
username: $contact.username
}
// Presence.
Item {
Layout.fillHeight: parent.height
Layout.preferredWidth: 20
PresenceLevel {
anchors.fill: parent
level: $contact.presenceLevel
}
}
// Username.
Text {
Layout.fillHeight: parent.height
Layout.fillWidth: true
clip: true
color: '#5A585B'
Layout.preferredWidth: ContactsStyle.contact.username.width
color: ContactsStyle.contact.username.color
elide: Text.ElideRight
font.bold: true
text: $contact.username
verticalAlignment: Text.AlignVCenter
}
// Actions.
Row {
id: actions
// Container.
Item {
Layout.fillWidth: true
Layout.fillHeight: true
spacing: 50
visible: false
ActionBar {
iconSize: parent.height
Item {
id: container1
ActionButton {
icon: 'video_call'
onClicked: CallsWindow.show()
anchors.fill: parent
PresenceLevel {
anchors {
left: parent.left
verticalCenter: parent.verticalCenter
}
height: ContactsStyle.contact.presenceLevelSize
width: ContactsStyle.contact.presenceLevelSize
level: $contact.presenceLevel
}
}
ActionButton {
icon: 'call'
onClicked: CallsWindow.show()
Item {
id: container2
anchors.fill: parent
visible: false
ActionBar {
anchors {
left: parent.left
verticalCenter: parent.verticalCenter
}
iconSize: ContactsStyle.contact.actionButtonsSize
ActionButton {
icon: 'video_call'
onClicked: CallsWindow.show()
}
ActionButton {
icon: 'call'
onClicked: CallsWindow.show()
}
ActionButton {
icon: 'chat'
onClicked: window.setView('Conversation')
}
}
ActionButton {
icon: 'chat'
onClicked: window.setView('Conversation')
anchors {
right: parent.right
verticalCenter: parent.verticalCenter
}
icon: 'delete'
iconSize: ContactsStyle.contact.deleteButtonSize
onClicked: _removeContact($contact)
}
}
ActionButton {
iconSize: parent.height
icon: 'delete'
onClicked: Utils.openConfirmDialog(contact, {
descriptionText: qsTr('removeContactDescription'),
exitHandler: function (status) {
console.log('remove contact', status)
},
title: qsTr('removeContactTitle')
})
}
}
}
}
states: State {
name: 'hover'
PropertyChanges { target: contact; color: '#D1D1D1' }
PropertyChanges { target: actions; visible: true }
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: contact.state = 'hover'
onExited: contact.state = ''
}
// -----------------------------------------------------------
states: State {
name: 'hover'
PropertyChanges {
color: ContactsStyle.contact.backgroundColor.hovered
target: contact
}
PropertyChanges { target: container1; visible: false }
PropertyChanges { target: container2; visible: true }
}
}
}
}
......
......@@ -7,15 +7,38 @@ import Common 1.0
QtObject {
property color backgroundColor: '#FFFFFF'
property int spacing: 20
property QtObject bar: QtObject {
property color color: '#F3F3F3'
property color backgroundColor: '#F3F3F3'
property int height: 60
property int leftMargin: 18
property int rightMargin: 18
}
property QtObject contacts: QtObject {
property int spacing: 1
property QtObject contact: QtObject {
property int actionButtonsSize: 36
property int avatarSize: 30
property int deleteButtonSize: 16
property int height: 50
property int leftMargin: 15
property int presenceLevelSize: 12
property int rightMargin: 25
property int spacing: 15
property QtObject backgroundColor: QtObject {
property color normal: '#FFFFFF'
property color hovered: '#E2E9EF'
}
property QtObject border: QtObject {
property color color: '#E8E8E8'
property int width: 1
}
property QtObject username: QtObject {
property color color: '#4B5964'
property int width: 220
}
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment