Skip to content

L
linphone-desktop
Commit 0b56121f authored by Ronan Abhamon's avatar Ronan Abhamon
Browse files
Options

feat(MainWindow/Contacts): use new style

parent e3eb67a9
Show whitespace changes
Inline Side-by-side
Showing with 151 additions and 86 deletions
tests/ui/views/App/MainWindow/Contacts.qml
View file @ 0b56121f
...@@ -10,6 +10,31 @@ import App.Styles 1.0 ...@@ -10,6 +10,31 @@ import App.Styles 1.0
// =================================================================== // ===================================================================
ColumnLayout { 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 spacing: 0
// ----------------------------------------------------------------- // -----------------------------------------------------------------
...@@ -20,24 +45,22 @@ ColumnLayout { ...@@ -20,24 +45,22 @@ ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: ContactsStyle.bar.height Layout.preferredHeight: ContactsStyle.bar.height
color: ContactsStyle.bar.color color: ContactsStyle.bar.backgroundColor
RowLayout { RowLayout {
anchors.fill: parent anchors {
anchors.leftMargin: ContactsStyle.bar.leftMargin fill: parent
anchors.rightMargin: ContactsStyle.bar.rightMargin leftMargin: ContactsStyle.bar.leftMargin
rightMargin: ContactsStyle.bar.rightMargin
spacing: 20 }
spacing: ContactsStyle.spacing
TextField { TextField {
Layout.fillWidth: true Layout.fillWidth: true
icon: 'filter' icon: 'filter'
placeholderText: qsTr('searchContactPlaceholder') placeholderText: qsTr('searchContactPlaceholder')
onTextChanged: { onTextChanged: _filter(text)
contacts.setFilterFixedString(text)
contacts.invalidate()
}
} }
ExclusiveButtons { ExclusiveButtons {
...@@ -67,78 +90,83 @@ ColumnLayout { ...@@ -67,78 +90,83 @@ ColumnLayout {
ScrollableListView { ScrollableListView {
anchors.fill: parent anchors.fill: parent
spacing: ContactsStyle.contacts.spacing spacing: 0
model: ContactsListModel { model: ContactsListModel {
id: contacts id: contacts
} }
delegate: Rectangle { delegate: Borders {
id: contact borderColor: ContactsStyle.contact.border.color
bottomWidth: ContactsStyle.contact.border.width
color: '#FFFFFF' height: ContactsStyle.contact.height
height: 50
width: parent.width width: parent.width
MouseArea { Rectangle {
anchors.fill: parent id: contact
hoverEnabled: true
onEntered: contact.state = 'hover'
onExited: contact.state = ''
}
Item { anchors.fill: parent
anchors.verticalCenter: parent.verticalCenter color: ContactsStyle.contact.backgroundColor.normal
height: 30
width: parent.width
RowLayout { RowLayout {
anchors.fill: parent anchors {
anchors.leftMargin: 15 fill: parent
anchors.rightMargin: 25 leftMargin: ContactsStyle.contact.leftMargin
spacing: 15 rightMargin: ContactsStyle.contact.rightMargin
}
spacing: ContactsStyle.contact.spacing
// Avatar. // Avatar.
Avatar { Avatar {
Layout.fillHeight: parent.height Layout.preferredHeight: ContactsStyle.contact.avatarSize
Layout.preferredWidth: 30 Layout.preferredWidth: ContactsStyle.contact.avatarSize
image: $contact.avatar image: $contact.avatar
username: $contact.username username: $contact.username
} }
// Presence. // Username.
Text {
Layout.preferredWidth: ContactsStyle.contact.username.width
color: ContactsStyle.contact.username.color
elide: Text.ElideRight
font.bold: true
text: $contact.username
}
// Container.
Item { Item {
Layout.fillHeight: parent.height Layout.fillWidth: true
Layout.preferredWidth: 20 Layout.fillHeight: true
Item {
id: container1
PresenceLevel {
anchors.fill: parent anchors.fill: parent
level: $contact.presenceLevel
} PresenceLevel {
anchors {
left: parent.left
verticalCenter: parent.verticalCenter
} }
height: ContactsStyle.contact.presenceLevelSize
width: ContactsStyle.contact.presenceLevelSize
// Username. level: $contact.presenceLevel
Text { }
Layout.fillHeight: parent.height
Layout.fillWidth: true
clip: true
color: '#5A585B'
font.bold: true
text: $contact.username
verticalAlignment: Text.AlignVCenter
} }
// Actions. Item {
Row { id: container2
id: actions
Layout.fillHeight: true anchors.fill: parent
spacing: 50
visible: false visible: false
ActionBar { ActionBar {
iconSize: parent.height anchors {
left: parent.left
verticalCenter: parent.verticalCenter
}
iconSize: ContactsStyle.contact.actionButtonsSize
ActionButton { ActionButton {
icon: 'video_call' icon: 'video_call'
...@@ -157,25 +185,39 @@ ColumnLayout { ...@@ -157,25 +185,39 @@ ColumnLayout {
} }
ActionButton { ActionButton {
iconSize: parent.height anchors {
right: parent.right
verticalCenter: parent.verticalCenter
}
icon: 'delete' icon: 'delete'
iconSize: ContactsStyle.contact.deleteButtonSize
onClicked: Utils.openConfirmDialog(contact, { onClicked: _removeContact($contact)
descriptionText: qsTr('removeContactDescription'),
exitHandler: function (status) {
console.log('remove contact', status)
},
title: qsTr('removeContactTitle')
})
} }
} }
} }
} }
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: contact.state = 'hover'
onExited: contact.state = ''
}
// -----------------------------------------------------------
states: State { states: State {
name: 'hover' name: 'hover'
PropertyChanges { target: contact; color: '#D1D1D1' }
PropertyChanges { target: actions; visible: true } PropertyChanges {
color: ContactsStyle.contact.backgroundColor.hovered
target: contact
}
PropertyChanges { target: container1; visible: false }
PropertyChanges { target: container2; visible: true }
}
} }
} }
} }
......
tests/ui/views/App/Styles/MainWindow/ContactsStyle.qml
View file @ 0b56121f
...@@ -7,15 +7,38 @@ import Common 1.0 ...@@ -7,15 +7,38 @@ import Common 1.0
QtObject { QtObject {
property color backgroundColor: '#FFFFFF' property color backgroundColor: '#FFFFFF'
property int spacing: 20
property QtObject bar: QtObject { property QtObject bar: QtObject {
property color color: '#F3F3F3' property color backgroundColor: '#F3F3F3'
property int height: 60 property int height: 60
property int leftMargin: 18 property int leftMargin: 18
property int rightMargin: 18 property int rightMargin: 18
} }
property QtObject contacts: QtObject { property QtObject contact: QtObject {
property int spacing: 1 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

Technounit-GROUP 2023