Commit dc38da1d authored by Ronan Abhamon's avatar Ronan Abhamon

feat(Contact): use style file

parent 24ee1aa9
......@@ -36,6 +36,7 @@ lupdate_only{
ui/modules/Linphone/Popup/*.qml \
ui/modules/Linphone/Select/*.qml \
ui/modules/Linphone/Styles/*.qml \
ui/modules/Linphone/Styles/Contact/*.qml \
ui/modules/Linphone/Styles/Form/*.qml \
ui/modules/Linphone/View/*.qml \
ui/views/*.qml \
......
......@@ -60,6 +60,9 @@
<file>ui/modules/Linphone/SearchBox.qml</file>
<file>ui/modules/Linphone/Select/SelectContact.qml</file>
<file>ui/modules/Linphone/Styles/CollapseStyle.qml</file>
<file>ui/modules/Linphone/Styles/Contact/AvatarStyle.qml</file>
<file>ui/modules/Linphone/Styles/Contact/ContactDescriptionStyle.qml</file>
<file>ui/modules/Linphone/Styles/Contact/ContactStyle.qml</file>
<file>ui/modules/Linphone/Styles/DialogStyle.qml</file>
<file>ui/modules/Linphone/Styles/ForceScrollBarStyle.qml</file>
<file>ui/modules/Linphone/Styles/Form/AbstractTextButtonStyle.qml</file>
......
......@@ -26,7 +26,7 @@ Item {
anchors.centerIn: parent
background: CollapseStyle.background
icon: CollapseStyle.icon
icon: 'collapse'
iconSize: CollapseStyle.iconSize
onClicked: collapse()
......
import QtQuick 2.7
import QtGraphicalEffects 1.0
import Linphone 1.0
import Linphone.Styles 1.0
// ===================================================================
Item {
property alias image: imageToFilter.source
property string presence
property string username
property alias image: imageToFilter.source
property string presence
property string username
function _computeInitials () {
var spaceIndex = username.indexOf(' ')
var firstLetter = username.charAt(0)
// Image mask. (Circle)
Rectangle {
anchors.fill: parent
color: '#8F8F8F'
id: mask
radius: 50
if (spaceIndex === -1) {
return firstLetter
}
// Initials.
Text {
anchors.centerIn: parent
color: '#FFFFFF'
text: {
var spaceIndex = username.indexOf(' ')
var firstLetter = username.charAt(0)
return firstLetter + username.charAt(spaceIndex + 1)
}
if (spaceIndex === -1) {
return firstLetter
}
// Image mask. (Circle)
Rectangle {
id: mask
return firstLetter + username.charAt(spaceIndex + 1)
}
}
anchors.fill: parent
color: AvatarStyle.mask.color
radius: AvatarStyle.mask.radius
}
Image {
anchors.fill: parent
id: imageToFilter
fillMode: Image.PreserveAspectFit
// Initials.
Text {
anchors.centerIn: parent
color: AvatarStyle.initials.color
font.pointSize: AvatarStyle.initials.fontSize
text: _computeInitials()
}
// Image must be invisible.
// The only visible image is the OpacityMask!
visible: false
}
Image {
anchors.fill: parent
id: imageToFilter
fillMode: Image.PreserveAspectFit
// Avatar.
OpacityMask {
anchors.fill: imageToFilter
maskSource: mask
source: imageToFilter
}
// Image must be invisible.
// The only visible image is the OpacityMask!
visible: false
}
// Presence.
Image {
anchors.bottom: parent.bottom
anchors.right: parent.right
fillMode: Image.PreserveAspectFit
height: parent.height / 3
id: presenceImage
source: presence
? 'qrc:/imgs/led_' + presence + '.svg'
: ''
width: parent.width / 3
}
// Avatar.
OpacityMask {
anchors.fill: imageToFilter
maskSource: mask
source: imageToFilter
}
// Presence.
Icon {
anchors.bottom: parent.bottom
anchors.right: parent.right
height: parent.height / 3
icon: presence
? 'led_' + presence
: ''
width: parent.width / 3
}
}
......@@ -2,42 +2,44 @@ import QtQuick 2.7
import QtQuick.Layouts 1.3
import Linphone 1.0
import Linphone.Styles 1.0
// ===================================================================
Item {
property alias actions: actionBar.data
property alias image: avatar.image
property alias presence: avatar.presence
property alias sipAddress: contactDescription.sipAddress
property string username
id: contact
height: 50
RowLayout {
anchors.fill: parent
anchors.leftMargin: 14
anchors.rightMargin: 14
spacing: 14
Avatar {
Layout.preferredHeight: 32
Layout.preferredWidth: 32
id: avatar
username: contact.username
}
ContactDescription {
Layout.fillHeight: true
Layout.fillWidth: true
id: contactDescription
username: contact.username
}
ActionBar {
Layout.preferredHeight: 32
id: actionBar
}
property alias actions: actionBar.data
property alias image: avatar.image
property alias presence: avatar.presence
property alias sipAddress: description.sipAddress
property alias username: avatar.username
height: ContactStyle.height
RowLayout {
anchors.fill: parent
anchors.leftMargin: ContactStyle.leftMargin
anchors.rightMargin: ContactStyle.rightMargin
spacing: ContactStyle.spacing
Avatar {
id: avatar
Layout.preferredHeight: ContactStyle.contentHeight
Layout.preferredWidth: ContactStyle.contentHeight
}
ContactDescription {
id: description
Layout.fillHeight: true
Layout.fillWidth: true
username: avatar.username
}
ActionBar {
id: actionBar
Layout.preferredHeight: ContactStyle.contentHeight
}
}
}
import QtQuick 2.7
import Linphone.Styles 1.0
// ===================================================================
Column {
property alias sipAddress: sipAddress.text
property alias username: username.text
property alias sipAddress: sipAddress.text
property alias username: username.text
// Username.
Text {
id: username
clip: true
color: ContactDescriptionStyle.username.color
font.bold: true
font.pointSize: ContactDescriptionStyle.username.fontSize
height: parent.height / 2
verticalAlignment: Text.AlignBottom
width: parent.width
}
// Username.
Text {
clip: true
color: '#5A585B'
font.pointSize: 11
font.bold: true
height: parent.height / 2
id: username
verticalAlignment: Text.AlignBottom
width: parent.width
}
// Sip address.
Text {
id: sipAddress
// Sip address.
Text {
clip: true
color: '#5A585B'
height: parent.height / 2
id: sipAddress
verticalAlignment: Text.AlignTop
width: parent.width
}
clip: true
color: ContactDescriptionStyle.sipAddress.color
font.pointSize: ContactDescriptionStyle.sipAddress.fontSize
height: parent.height / 2
verticalAlignment: Text.AlignTop
width: parent.width
}
}
......@@ -42,7 +42,7 @@ RowLayout {
ActionButton {
Layout.preferredHeight: ListFormStyle.titleArea.iconSize
Layout.preferredWidth: ListFormStyle.titleArea.iconSize
icon: ListFormStyle.titleArea.icon
icon: 'add_field'
onClicked: _addValue('')
}
......
......@@ -64,7 +64,7 @@ ColumnLayout {
Layout.preferredHeight: MenuStyle.entry.selectionIconSize
Layout.preferredWidth: MenuStyle.entry.selectionIconSize
icon: _selectedEntry === index
? MenuStyle.entry.selectionIcon
? 'right_arrow'
: ''
}
}
......
......@@ -5,8 +5,6 @@ QtObject {
property int animationDuration: 200
property int iconSize: 32
property string icon: 'collapse'
property Rectangle background: Rectangle {
// Do not use Constants.colors.
// Collapse uses an icon without background color.
......
......@@ -32,8 +32,6 @@ QtObject {
property int spacing: 10
property int iconSize: 16
property string icon: 'add_field'
property QtObject text: QtObject {
property color color: '#000000'
......
......@@ -13,8 +13,6 @@ QtObject {
property int selectionIconSize: 12
property int spacing: 18
property string selectionIcon: 'right_arrow'
property QtObject color: QtObject {
property color normal: Colors.g
property color hovered: Colors.h
......
......@@ -13,8 +13,6 @@ QtObject {
property int leftMargin: 18
property int spacing: 16
property int topMargin: 10
property string icon: 'history'
}
property QtObject separator: QtObject {
......
......@@ -11,6 +11,10 @@ singleton PopupStyle 1.0 PopupStyle.qml
singleton SearchBoxStyle 1.0 SearchBoxStyle.qml
singleton TimelineStyle 1.0 TimelineStyle.qml
singleton AvatarStyle 1.0 Contact/AvatarStyle.qml
singleton ContactDescriptionStyle 1.0 Contact/ContactDescriptionStyle.qml
singleton ContactStyle 1.0 Contact/ContactStyle.qml
singleton AbstractTextButtonStyle 1.0 Form/AbstractTextButtonStyle.qml
singleton ActionBarStyle 1.0 Form/ActionBarStyle.qml
singleton CheckBoxTextStyle 1.0 Form/CheckBoxTextStyle.qml
......
......@@ -16,7 +16,7 @@ ColumnLayout {
spacing: TimelineStyle.legend.spacing
Icon {
icon: TimelineStyle.legend.icon
icon: 'history'
iconSize: TimelineStyle.legend.iconSize
}
......
......@@ -87,90 +87,7 @@ ApplicationWindow {
content.enabled = false
}
model: ListModel {
id: model
ListElement {
$presence: 'connected'
$sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'connected'
$sipAddress: 'toto.lala.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'disconnected'
$sipAddress: 'machin.truc.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'absent'
$sipAddress: 'hey.listen.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'do_not_disturb'
$sipAddress: 'valentin.cognito.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'do_not_disturb'
$sipAddress: 'charles.henri.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'disconnected'
$sipAddress: 'yesyes.nono.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'connected'
$sipAddress: 'nsa.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'connected'
$sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'connected'
$sipAddress: 'toto.lala.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'disconnected'
$sipAddress: 'machin.truc.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'absent'
$sipAddress: 'hey.listen.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'do_not_disturb'
$sipAddress: 'valentin.cognito.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'do_not_disturb'
$sipAddress: 'charles.henri.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'disconnected'
$sipAddress: 'yesyes.nono.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'connected'
$sipAddress: 'nsa.sip.linphone.org'
$username: 'Toto'
}
}
model: model1
delegate: Contact {
presence: $presence
......@@ -317,4 +234,89 @@ ApplicationWindow {
}
}
}
ListModel {
id: model1
ListElement {
$presence: 'connected'
$sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'connected'
$sipAddress: 'toto.lala.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'disconnected'
$sipAddress: 'machin.truc.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'absent'
$sipAddress: 'hey.listen.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'do_not_disturb'
$sipAddress: 'valentin.cognito.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'do_not_disturb'
$sipAddress: 'charles.henri.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'disconnected'
$sipAddress: 'yesyes.nono.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'connected'
$sipAddress: 'nsa.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'connected'
$sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'connected'
$sipAddress: 'toto.lala.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'disconnected'
$sipAddress: 'machin.truc.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'absent'
$sipAddress: 'hey.listen.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'do_not_disturb'
$sipAddress: 'valentin.cognito.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'do_not_disturb'
$sipAddress: 'charles.henri.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'disconnected'
$sipAddress: 'yesyes.nono.sip.linphone.org'
$username: 'Toto'
}
ListElement {
$presence: 'connected'
$sipAddress: 'nsa.sip.linphone.org'
$username: 'Toto'
}
}
}
......@@ -15,92 +15,65 @@ DialogPlus {
onClicked: exit(0)
}
Item {
anchors.fill: parent
// TODO: Compute list max.
ScrollableListView {
id: accounts
// TODO: Compute list max.
ScrollableListView {
id: accounts
anchors.fill: parent
model: model1 // TMP
anchors.fill: parent
delegate: Item {
function isDefaultAccount () {
return accounts.currentIndex === index
}
// TODO: Remove, use C++ model instead.
model: model1
height: 34
width: parent.width
delegate: Item {
function isDefaultAccount () {
return accounts.currentIndex === index
}
Rectangle {
anchors.fill: parent
color: isDefaultAccount() ? '#EAEAEA' : 'transparent'
height: 34
width: parent.width
Rectangle {
RowLayout {
anchors.fill: parent
color: isDefaultAccount() ? '#EAEAEA' : 'transparent'
id: accountLine
RowLayout {
anchors.fill: parent
spacing: 15
anchors.leftMargin: 15
anchors.rightMargin: 15
// Default account.
Item {
Layout.fillHeight: parent.height
Layout.preferredWidth: 20
Image {
anchors.fill: parent
fillMode: Image.PreserveAspectFit
source: isDefaultAccount() ? 'qrc:/imgs/valid.svg' : ''
}
}
// Sip account.
Item {
Layout.fillHeight: parent.height
Layout.fillWidth: true
Text {
anchors.fill: parent
clip: true
color: '#59575A'
text: sipAddress;
verticalAlignment: Text.AlignVCenter
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: accounts.currentIndex = index
}
}
}
// Presence.
Item {
Layout.fillHeight: parent.height
Layout.preferredWidth: 20
anchors.leftMargin: 15
anchors.rightMargin: 15
spacing: 15
// Is default account?
Icon {
Layout.preferredHeight: 20
Layout.preferredWidth: 20
icon: isDefaultAccount() ? 'valid' : ''
}
Image {
anchors.fill: parent
fillMode: Image.PreserveAspectFit
source: 'qrc:/imgs/led_' + presence + '.svg'
}
// Sip account.
Text {
Layout.fillWidth: true
clip: true
color: '#59575A'
text: $sipAddress
verticalAlignment: Text.AlignVCenter
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: accounts.currentIndex = index
}
}
// Update presence.
Item {
Layout.fillHeight: parent.height
Layout.preferredWidth: 160
// Presence.
Icon {
Layout.preferredHeight: 20
Layout.preferredWidth: 20
icon: 'led_' + $presence
}
TransparentComboBox {
anchors.fill: parent
model: model2
textRole: 'key'
}
}
// Update presence.
TransparentComboBox {
Layout.preferredWidth: 160
model: model2 // TMP.
textRole: 'key'
}
}
}
......@@ -115,36 +88,36 @@ DialogPlus {
id: model1
ListElement {
presence: 'connected'
sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org'
$presence: 'connected'
$sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org'
}
ListElement {
presence: 'connected'
sipAddress: 'toto.lala.sip.linphone.org'
$presence: 'connected'
$sipAddress: 'toto.lala.sip.linphone.org'
}
ListElement {
presence: 'disconnected'
sipAddress: 'machin.truc.sip.linphone.org'
$presence: 'disconnected'
$sipAddress: 'machin.truc.sip.linphone.org'
}
ListElement {
presence: 'absent'
sipAddress: 'hey.listen.sip.linphone.org'
$presence: 'absent'
$sipAddress: 'hey.listen.sip.linphone.org'
}
ListElement {
presence: 'do_not_disturb'
sipAddress: 'valentin.cognito.sip.linphone.org'
$presence: 'do_not_disturb'
$sipAddress: 'valentin.cognito.sip.linphone.org'
}
ListElement {
presence: 'do_not_disturb'
sipAddress: 'charles.henri.sip.linphone.org'
$presence: 'do_not_disturb'
$sipAddress: 'charles.henri.sip.linphone.org'
}
ListElement {
presence: 'disconnected'
sipAddress: 'yesyes.nono.sip.linphone.org'
$presence: 'disconnected'
$sipAddress: 'yesyes.nono.sip.linphone.org'
}
ListElement {
presence: 'connected'
sipAddress: 'nsa.sip.linphone.org'
$presence: 'connected'
$sipAddress: 'nsa.sip.linphone.org'
}
}
......
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