diff --git a/tests/assets/images/attachment_hovered.svg b/tests/assets/images/attachment_hovered.svg new file mode 100644 index 000000000..71b3a6ef2 --- /dev/null +++ b/tests/assets/images/attachment_hovered.svg @@ -0,0 +1,12 @@ + + + + attachment_over + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/tests/assets/images/attachment_normal.svg b/tests/assets/images/attachment_normal.svg new file mode 100644 index 000000000..9e49396e0 --- /dev/null +++ b/tests/assets/images/attachment_normal.svg @@ -0,0 +1,12 @@ + + + + attachment_default + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/tests/assets/images/attachment_pressed.svg b/tests/assets/images/attachment_pressed.svg new file mode 100644 index 000000000..15e473cc6 --- /dev/null +++ b/tests/assets/images/attachment_pressed.svg @@ -0,0 +1,12 @@ + + + + attachment_clic + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/tests/assets/images/chat_error.svg b/tests/assets/images/chat_error.svg new file mode 100644 index 000000000..1a9838722 --- /dev/null +++ b/tests/assets/images/chat_error.svg @@ -0,0 +1,14 @@ + + + + chat_error + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/tests/assets/images/chat_send.svg b/tests/assets/images/chat_send.svg new file mode 100644 index 000000000..5406993eb --- /dev/null +++ b/tests/assets/images/chat_send.svg @@ -0,0 +1,12 @@ + + + + chat_send + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/tests/assets/images/end_call.svg b/tests/assets/images/end_call.svg new file mode 100644 index 000000000..461013722 --- /dev/null +++ b/tests/assets/images/end_call.svg @@ -0,0 +1,14 @@ + + + + call_end + Created with Sketch. + + + + + + + + + \ No newline at end of file diff --git a/tests/assets/images/incoming_call.svg b/tests/assets/images/incoming_call.svg new file mode 100644 index 000000000..bb1f645a9 --- /dev/null +++ b/tests/assets/images/incoming_call.svg @@ -0,0 +1,12 @@ + + + + call_incoming + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/tests/assets/images/lost_incoming_call.svg b/tests/assets/images/lost_incoming_call.svg new file mode 100644 index 000000000..ee5fd365a --- /dev/null +++ b/tests/assets/images/lost_incoming_call.svg @@ -0,0 +1,13 @@ + + + + call_lost + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/tests/assets/images/lost_outgoing_call.svg b/tests/assets/images/lost_outgoing_call.svg new file mode 100644 index 000000000..ee5fd365a --- /dev/null +++ b/tests/assets/images/lost_outgoing_call.svg @@ -0,0 +1,13 @@ + + + + call_lost + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/tests/assets/images/outgoing_call.svg b/tests/assets/images/outgoing_call.svg new file mode 100644 index 000000000..91cc3a07f --- /dev/null +++ b/tests/assets/images/outgoing_call.svg @@ -0,0 +1,12 @@ + + + + call_outgoing + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/tests/assets/languages/en.ts b/tests/assets/languages/en.ts index a7e7855ea..a750714ff 100644 --- a/tests/assets/languages/en.ts +++ b/tests/assets/languages/en.ts @@ -168,7 +168,7 @@ hangup - End call + End call lostIncomingCall @@ -178,6 +178,10 @@ lostOutgoingCall Lost outgoing call + + endCall + + Home diff --git a/tests/assets/languages/fr.ts b/tests/assets/languages/fr.ts index 935170aa0..4ba2666d1 100644 --- a/tests/assets/languages/fr.ts +++ b/tests/assets/languages/fr.ts @@ -168,7 +168,7 @@ hangup - Fin d'appel + Fin d'appel lostIncomingCall @@ -178,6 +178,10 @@ lostOutgoingCall Appel sortant manqué + + endCall + + Home diff --git a/tests/assets/old_images/add_field.svg b/tests/assets/old_images/add_field.svg deleted file mode 100644 index 1b9cf9ac6..000000000 --- a/tests/assets/old_images/add_field.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - add_field_over copy - Created with Sketch. - - - - - - - - - - - - - - diff --git a/tests/assets/old_images/cat_contact.jpg b/tests/assets/old_images/cat_contact.jpg deleted file mode 100644 index f3bbdfe30..000000000 Binary files a/tests/assets/old_images/cat_contact.jpg and /dev/null differ diff --git a/tests/assets/old_images/chat_attachment.svg b/tests/assets/old_images/chat_attachment.svg deleted file mode 100644 index 41297ea02..000000000 --- a/tests/assets/old_images/chat_attachment.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - chat_attachment - Created with Sketch. - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/tests/assets/old_images/collapse.svg b/tests/assets/old_images/collapse.svg deleted file mode 100644 index 661bb0bf7..000000000 --- a/tests/assets/old_images/collapse.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - \ No newline at end of file diff --git a/tests/assets/old_images/conference.svg b/tests/assets/old_images/conference.svg deleted file mode 100644 index 15423b983..000000000 --- a/tests/assets/old_images/conference.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - options_start_conference + Rectangle 250 Copy 4 - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/tests/assets/old_images/contact.svg b/tests/assets/old_images/contact.svg deleted file mode 100644 index 60ce48c8e..000000000 --- a/tests/assets/old_images/contact.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - avatar - Created with Sketch. - - - - - - - \ No newline at end of file diff --git a/tests/assets/old_images/contacts_list.svg b/tests/assets/old_images/contacts_list.svg deleted file mode 100644 index 529c9cda9..000000000 --- a/tests/assets/old_images/contacts_list.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - footer_contacts - Created with Sketch. - - - - - - - - - - diff --git a/tests/assets/old_images/hangup.svg b/tests/assets/old_images/hangup.svg deleted file mode 100644 index c0b080ec5..000000000 --- a/tests/assets/old_images/hangup.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - call_hangup - Created with Sketch. - - - - - - - - - diff --git a/tests/assets/old_images/home.svg b/tests/assets/old_images/home.svg deleted file mode 100644 index 3907176c7..000000000 --- a/tests/assets/old_images/home.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - menu - Created with Sketch. - - - - - - - - - - - - diff --git a/tests/assets/old_images/incoming_call.svg b/tests/assets/old_images/incoming_call.svg deleted file mode 100644 index dfa63fe4b..000000000 --- a/tests/assets/old_images/incoming_call.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - call_incoming - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/tests/assets/old_images/lost_incoming_call.svg b/tests/assets/old_images/lost_incoming_call.svg deleted file mode 100644 index 8ccea2c2b..000000000 --- a/tests/assets/old_images/lost_incoming_call.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - call_missed - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/tests/assets/old_images/lost_outgoing_call.svg b/tests/assets/old_images/lost_outgoing_call.svg deleted file mode 100644 index 8ccea2c2b..000000000 --- a/tests/assets/old_images/lost_outgoing_call.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - call_missed - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/tests/assets/old_images/micro.svg b/tests/assets/old_images/micro.svg deleted file mode 100644 index e079cd5f4..000000000 --- a/tests/assets/old_images/micro.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - micro_default - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/tests/assets/old_images/right_arrow.svg b/tests/assets/old_images/right_arrow.svg deleted file mode 100644 index 68a9ded59..000000000 --- a/tests/assets/old_images/right_arrow.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - arrow_hangup - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/tests/assets/old_images/speaker.svg b/tests/assets/old_images/speaker.svg deleted file mode 100644 index 4b298fcc9..000000000 --- a/tests/assets/old_images/speaker.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - speaker_default - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/tests/assets/old_images/valid.svg b/tests/assets/old_images/valid.svg deleted file mode 100644 index f06fd960f..000000000 --- a/tests/assets/old_images/valid.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - valid - Created with Sketch. - - - - - - - - - - - - \ No newline at end of file diff --git a/tests/assets/ressources_svg/avatar_L.svg b/tests/assets/ressources_svg/avatar_L.svg deleted file mode 100644 index 2d1335ae5..000000000 --- a/tests/assets/ressources_svg/avatar_L.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - avatar_L - Created with Sketch. - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/tests/assets/ressources_svg/avatar_s.svg b/tests/assets/ressources_svg/avatar_s.svg deleted file mode 100644 index 2105b3aa5..000000000 --- a/tests/assets/ressources_svg/avatar_s.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - avatar_s - Created with Sketch. - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/tests/assets/ressources_svg/avatar_xs.svg b/tests/assets/ressources_svg/avatar_xs.svg deleted file mode 100644 index da2b5a335..000000000 --- a/tests/assets/ressources_svg/avatar_xs.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - avatar_xs - Created with Sketch. - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/tests/resources.qrc b/tests/resources.qrc index c36aa6446..d04fb4e7f 100644 --- a/tests/resources.qrc +++ b/tests/resources.qrc @@ -1,12 +1,17 @@ + assets/images/attachment_hovered.svg + assets/images/attachment_normal.svg + assets/images/attachment_pressed.svg assets/images/auto_answer.svg assets/images/call_hovered.svg assets/images/call_normal.svg assets/images/call_pressed.svg + assets/images/chat_error.svg assets/images/chat_hovered.svg assets/images/chat_normal.svg assets/images/chat_pressed.svg + assets/images/chat_send.svg assets/images/chevron_green.svg assets/images/chevron_orange.svg assets/images/chevron_red.svg @@ -20,38 +25,24 @@ assets/images/delete_hovered.svg assets/images/delete_normal.svg assets/images/delete_pressed.svg + assets/images/end_call.svg assets/images/filter.svg assets/images/history.svg assets/images/home_normal.svg assets/images/home_selected.svg + assets/images/incoming_call.svg assets/images/led_green.svg assets/images/led_orange.svg assets/images/led_red.svg assets/images/led_white.svg assets/images/linphone.png + assets/images/lost_incoming_call.svg + assets/images/lost_outgoing_call.svg + assets/images/outgoing_call.svg assets/images/search.svg assets/images/video_call_hovered.svg assets/images/video_call_normal.svg assets/images/video_call_pressed.svg - assets/old_images/add_field.svg - assets/old_images/cat_contact.jpg - assets/old_images/chat_attachment.svg - assets/old_images/collapse.svg - assets/old_images/conference.svg - assets/old_images/contacts_list.svg - assets/old_images/contact.svg - assets/old_images/hangup.svg - assets/old_images/home.svg - assets/old_images/incoming_call.svg - assets/old_images/lost_incoming_call.svg - assets/old_images/lost_outgoing_call.svg - assets/old_images/micro.svg - assets/old_images/right_arrow.svg - assets/old_images/speaker.svg - assets/old_images/valid.svg - assets/ressources_svg/avatar_L.svg - assets/ressources_svg/avatar_s.svg - assets/ressources_svg/avatar_xs.svg ui/modules/Common/Animations/CaterpillarAnimation.qml ui/modules/Common/Borders.qml ui/modules/Common/Collapse.qml @@ -124,6 +115,7 @@ ui/modules/Linphone/qmldir ui/modules/Linphone/Select/SelectContact.qml ui/modules/Linphone/Styles/Account/AccountStatusStyle.qml + ui/modules/Linphone/Styles/ChatStyle.qml ui/modules/Linphone/Styles/Contact/AvatarStyle.qml ui/modules/Linphone/Styles/Contact/ContactDescriptionStyle.qml ui/modules/Linphone/Styles/Contact/ContactStyle.qml diff --git a/tests/ui/modules/Common/DroppableTextArea.qml b/tests/ui/modules/Common/DroppableTextArea.qml index 0bffb1c11..28b0d9545 100644 --- a/tests/ui/modules/Common/DroppableTextArea.qml +++ b/tests/ui/modules/Common/DroppableTextArea.qml @@ -37,8 +37,7 @@ Item { id: textArea background: Rectangle { - color: '#FFFFFF' - border.color: '#D0D8DE' + color: DroppableTextAreaStyle.backgroundColor } rightPadding: fileChooserButton.width + @@ -53,17 +52,17 @@ Item { } // Handle click to select files. - MouseArea { + ActionButton { id: fileChooserButton anchors { right: parent.right rightMargin: scrollBar.width + DroppableTextAreaStyle.fileChooserButton.margins + verticalCenter: parent.verticalCenter } - - height: parent.height - width: DroppableTextAreaStyle.fileChooserButton.width + icon: 'attachment' + iconSize: DroppableTextAreaStyle.fileChooserButton.size onClicked: fileDialog.open() @@ -75,11 +74,6 @@ Item { onAccepted: _emitFiles(fileDialog.fileUrls) } - - Icon { - anchors.fill: parent - icon: 'chat_attachment' - } } // Hover style. diff --git a/tests/ui/modules/Common/Form/ActionButton.qml b/tests/ui/modules/Common/Form/ActionButton.qml index d72e53ab8..db6d61327 100644 --- a/tests/ui/modules/Common/Form/ActionButton.qml +++ b/tests/ui/modules/Common/Form/ActionButton.qml @@ -11,7 +11,7 @@ Button { id: button property bool useStates: true - property int iconSize + property int iconSize // Optionnal. // If `useStates` = true, the used icons are: // `icon`_pressed, `icon`_hovered and `icon`_normal. @@ -42,7 +42,10 @@ Button { Icon { id: icon - anchors.fill: parent + anchors.centerIn: parent icon: _getIcon() + iconSize: parent.iconSize || ( + parent.width > parent.height ? parent.height : parent.width + ) } } diff --git a/tests/ui/modules/Common/Form/SmallButton.qml b/tests/ui/modules/Common/Form/SmallButton.qml index eb1431168..a1ce638fa 100644 --- a/tests/ui/modules/Common/Form/SmallButton.qml +++ b/tests/ui/modules/Common/Form/SmallButton.qml @@ -28,6 +28,8 @@ Button { horizontalAlignment: Text.AlignHCenter text: button.text verticalAlignment: Text.AlignVCenter + leftPadding: SmallButtonStyle.leftPadding + rightPadding: SmallButtonStyle.rightPadding } hoverEnabled: true } diff --git a/tests/ui/modules/Common/Image/Icon.qml b/tests/ui/modules/Common/Image/Icon.qml index f3eff62f4..30137fe58 100644 --- a/tests/ui/modules/Common/Image/Icon.qml +++ b/tests/ui/modules/Common/Image/Icon.qml @@ -1,23 +1,55 @@ import QtQuick 2.7 import Common 1.0 +import Utils 1.0 // =================================================================== // An icon image properly resized. // =================================================================== -Image { - property int iconSize +Item { + property var iconSize // Required. property string icon - height: iconSize - width: iconSize + Component.onCompleted: { + if (width == null) { + width = iconSize + } - fillMode: Image.PreserveAspectFit - source: icon - ? Constants.imagesPath + icon + Constants.imagesFormat - : '' + if (height == null) { + height = iconSize + } + } - // Warning: Perfomance cost. - mipmap: true + Image { + function _checkIconSize () { + Utils.assert( + iconSize != null && iconSize > 0, + '`iconSize` must be defined and must be positive. (icon=`' + + icon + '`)' + ) + } + + anchors.centerIn: parent + height: { + _checkIconSize() + return iconSize > sourceSize.height + ? sourceSize.height + : iconSize + } + width: { + _checkIconSize() + return iconSize > sourceSize.width + ? sourceSize.width + : iconSize + } + + fillMode: Image.PreserveAspectFit + source: icon + ? Constants.imagesPath + icon + Constants.imagesFormat + : '' + + // Warning: Perfomance cost. + mipmap: true + } } diff --git a/tests/ui/modules/Common/Menu/Menu.qml b/tests/ui/modules/Common/Menu/Menu.qml index c59d74fb3..f9d16c7b5 100644 --- a/tests/ui/modules/Common/Menu/Menu.qml +++ b/tests/ui/modules/Common/Menu/Menu.qml @@ -65,13 +65,13 @@ Rectangle { spacing: MenuStyle.entry.spacing Icon { - Layout.preferredHeight: MenuStyle.entry.iconSize - Layout.preferredWidth: MenuStyle.entry.iconSize icon: modelData.icon + ( _selectedEntry === index ? '_selected' : '_normal' ) + iconSize: MenuStyle.entry.iconSize + Layout.preferredWidth: iconSize } Text { diff --git a/tests/ui/modules/Common/Styles/DroppableTextAreaStyle.qml b/tests/ui/modules/Common/Styles/DroppableTextAreaStyle.qml index 76c9a78d4..efd3d3ae0 100644 --- a/tests/ui/modules/Common/Styles/DroppableTextAreaStyle.qml +++ b/tests/ui/modules/Common/Styles/DroppableTextAreaStyle.qml @@ -6,9 +6,11 @@ import Common 1.0 // =================================================================== QtObject { + property color backgroundColor: Colors.k + property QtObject fileChooserButton: QtObject { property int margins: 6 - property int width: 40 + property int size: 20 } property QtObject hoverContent: QtObject { diff --git a/tests/ui/modules/Common/Styles/Form/SmallButtonStyle.qml b/tests/ui/modules/Common/Styles/Form/SmallButtonStyle.qml index 4bdd77380..e6a5d3803 100644 --- a/tests/ui/modules/Common/Styles/Form/SmallButtonStyle.qml +++ b/tests/ui/modules/Common/Styles/Form/SmallButtonStyle.qml @@ -6,6 +6,9 @@ import Common 1.0 // =================================================================== QtObject { + property int leftPadding: 5 + property int rightPadding: 5 + property QtObject background: QtObject { property int height: 22 property int radius: 10 diff --git a/tests/ui/modules/Linphone/Chat/Chat.qml b/tests/ui/modules/Linphone/Chat/Chat.qml index 4fc23d21a..10e28507c 100644 --- a/tests/ui/modules/Linphone/Chat/Chat.qml +++ b/tests/ui/modules/Linphone/Chat/Chat.qml @@ -4,46 +4,60 @@ import QtQuick.Layouts 1.3 import Common 1.0 import Linphone 1.0 +import Linphone.Styles 1.0 + +// =================================================================== ColumnLayout { + property var contact + spacing: 0 ScrollableListView { - id: chat - Layout.fillHeight: true Layout.fillWidth: true - model: ListModel { - ListElement { $dateSection: 1465389121000; $outgoing: true; $timestamp: 1465389121000; $type: 'message'; $content: 'This is it: fefe efzzzzzzzzzz aaaaaaaaa erfeezffeefzfzefzefzezfefez wfef efef e efeffefe fee efefefeefef fefefefefe eff fefefe fefeffww.linphone.org' } - ListElement { $dateSection: 1465389121000; $timestamp: 1465389133000; $type: 'event'; $content: 'incoming_call' } - ListElement { $dateSection: 1465389121000; $timestamp: 1465389439000; $type: 'message'; $content: 'Perfect! bg g vg gv v g v hgv gv gv jhb jh b jb jh hg vg cfcy f v u uyg f tf tf ft f tf t t fy ft f tu ty f rd rd d d uu gu y gg y f r dr ' } - ListElement { $dateSection: 1465389121000; $timestamp: 1465389500000; $type: 'event'; $content: 'hangup' } - ListElement { $dateSection: 1465994221000; $outgoing: true; $timestamp: 1465924321000; $type: 'message'; $content: 'You\'ve heard the expression, "Just believe it and it will come." Well, technically, that is true, however, \'believing\' is not just thinking that you can have it...' } - ListElement { $dateSection: 1465994221000; $timestamp: 1465924391000; $type: 'event'; $content: 'lost_incoming_call' } + + section { + criteria: ViewSection.FullString + delegate: sectionHeading + property: '$dateSection' } + // --------------------------------------------------------------- + // Heading. + // --------------------------------------------------------------- + Component { id: sectionHeading Item { - implicitHeight: text.height + - container.anchors.topMargin + - container.anchors.bottomMargin + implicitHeight: container.height + ChatStyle.sectionHeading.bottomMargin width: parent.width - Item { - anchors.bottomMargin: 10 - anchors.fill: parent - anchors.leftMargin: 18 - anchors.topMargin: 20 + Borders { id: container + borderColor: ChatStyle.sectionHeading.border.color + bottomWidth: ChatStyle.sectionHeading.border.width + implicitHeight: text.contentHeight + + ChatStyle.sectionHeading.padding * 2 + + ChatStyle.sectionHeading.border.width * 2 + topWidth: ChatStyle.sectionHeading.border.width + width: parent.width + Text { - color: '#434343' - font.bold: true id: text - // Cast section to integer because Qt convert the + anchors.fill: parent + color: ChatStyle.sectionHeading.text.color + font { + bold: true + pointSize: ChatStyle.sectionHeading.text.fontSize + } + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + + // Cast section to integer because Qt converts the // $dateSection in string!!! text: new Date(+section).toLocaleDateString( Qt.locale() @@ -53,105 +67,149 @@ ColumnLayout { } } - section.criteria: ViewSection.FullString - section.delegate: sectionHeading - section.property: '$dateSection' + // --------------------------------------------------------------- + // Message/Event renderer. + // --------------------------------------------------------------- delegate: Rectangle { - anchors.left: parent ? parent.left : undefined - anchors.leftMargin: 18 - anchors.right: parent ? parent.right : undefined - anchors.rightMargin: 18 + id: entry - // Unable to use `height` property. - // The height is given by message height. - implicitHeight: layout.height + 10 - width: parent ? parent.width : 0 + function isHoverEntry () { + return mouseArea.containsMouse + } + + function deleteEntry () { + console.log('delete entry', index) + } + + anchors { + left: parent.left + leftMargin: ChatStyle.entry.leftMargin + right: parent.right + + // Ugly. I admit it, but it exists a problem, without these + // lines the extra content message is truncated. + // I have no other solution at this moment with `anchors` + // properties... The messages use the `implicitWidth/Height` + // and `width/Height` attrs and is not easy to found a fix. + rightMargin: ChatStyle.entry.deleteIconSize + + ChatStyle.entry.message.extraContent.spacing + + ChatStyle.entry.message.extraContent.rightMargin + + ChatStyle.entry.message.extraContent.leftMargin + + ChatStyle.entry.message.outgoing.sendIconSize + } + implicitHeight: layout.height + ChatStyle.entry.bottomMargin + width: parent.width + + // ------------------------------------------------------------- + + // Avoid the use of explicit qrc paths. + Component { + id: event + Event {} + } + + Component { + id: incomingMessage + IncomingMessage {} + } + + Component { + id: outgoingMessage + OutgoingMessage {} + } + + // ------------------------------------------------------------- MouseArea { - anchors.fill: parent + id: mouseArea + hoverEnabled: true - onEntered: parent.state = 'hover' - onExited: parent.state = '' - } + implicitHeight: layout.height + width: parent.width + parent.anchors.rightMargin - RowLayout { - id: layout + RowLayout { + id: layout - spacing: 0 + spacing: 0 + width: entry.width - // The height is computed with the message height. - // Unable to use `height` and `implicitHeight` property. - width: parent.width - - // Display time. - Text { - Layout.alignment: Qt.AlignTop - Layout.preferredHeight: 30 - Layout.preferredWidth: 50 - color: '#898989' - font.bold: $type === 'event' - text: new Date($timestamp).toLocaleString( - Qt.locale(), - 'hh:mm' - ) - verticalAlignment: Text.AlignVCenter - } - - // Icons area. - Row { - Layout.alignment: Qt.AlignTop - Layout.preferredHeight: 30 - Layout.preferredWidth: 54 - spacing: 10 - - Icon { - anchors.verticalCenter: parent.verticalCenter - icon: ($type === 'event' && $content) || '' - iconSize: 16 + // Display time. + Text { + Layout.alignment: Qt.AlignTop + Layout.preferredHeight: ChatStyle.entry.lineHeight + Layout.preferredWidth: ChatStyle.entry.time.width + color: ChatStyle.entry.time.color + font.pointSize: ChatStyle.entry.time.fontSize + text: new Date($timestamp).toLocaleString( + Qt.locale(), + 'hh:mm' + ) + verticalAlignment: Text.AlignVCenter } - ActionButton { - anchors.verticalCenter: parent.verticalCenter - icon: 'delete' - iconSize: 16 - id: removeAction - onClicked: chat.model.remove(index) - visible: false + // Display content. + Loader { + Layout.fillWidth: true + sourceComponent: $type === 'message' + ? ($outgoing ? outgoingMessage : incomingMessage) + : event } } - // Display content. - Loader { - id: loader - - Layout.fillWidth: true - - source: $type === 'message' - ? ( - 'qrc:/ui/modules/Linphone/Chat/' + - ($outgoing ? 'Outgoing' : 'Incoming') + - 'Message.qml' - ) : 'qrc:/ui/modules/Linphone/Chat/Event.qml' - } } + } - states: State { - name: 'hover' - PropertyChanges { target: removeAction; visible: true } - } + // TMP + model: ListModel { + ListElement { $dateSection: 1465389121000; $outgoing: true; $timestamp: 1465389121000; $type: 'message'; $content: 'This is it: fefe efzzzzzzzzzz aaaaaaaaa erfeezffeefzfzefzefzezfefez wfef efef e efeffefe fee efefefeefef fefefefefe eff fefefe fefeffww.linphone.org' } + ListElement { $dateSection: 1465389121000; $timestamp: 1465389133000; $type: 'event'; $content: 'incoming_call' } + ListElement { $dateSection: 1465389121000; $timestamp: 1465389439000; $type: 'message'; $content: 'Perfect! bg g vg gv v g v hgv gv gv jhb jh b jb jh hg vg cfcy f v u uyg f tf tf ft f tf t t fy ft f tu ty f rd rd d d uu gu y gg y f r dr ' } + ListElement { $dateSection: 1465389121000; $timestamp: 1465389500000; $type: 'event'; $content: 'end_call' } + ListElement { $dateSection: 1465994221000; $outgoing: true; $timestamp: 1465924321000; $type: 'message'; $content: 'You\'ve heard the expression, "Just believe it and it will come." Well, technically, that is true, however, \'believing\' is not just thinking that you can have it...' } + ListElement { $dateSection: 1465994221000; $timestamp: 1465924391000; $type: 'event'; $content: 'lost_incoming_call' } } } - Rectangle { + // ----------------------------------------------------------------- + // Send area. + // ----------------------------------------------------------------- + + Borders { Layout.fillWidth: true - Layout.preferredHeight: 80 - color: '#E2E9EF' + Layout.preferredHeight: ChatStyle.sendArea.height + + ChatStyle.sendArea.border.width + borderColor: ChatStyle.sendArea.border.color + topWidth: ChatStyle.sendArea.border.width DroppableTextArea { anchors.fill: parent - anchors.margins: 10 placeholderText: qsTr('newMessagePlaceholder') } } } + + + + // Icons area. + /* Row { */ + /* Layout.alignment: Qt.AlignTop */ + /* Layout.preferredHeight: 30 */ + /* Layout.preferredWidth: 54 */ + /* spacing: 10 */ + + /* Icon { */ + /* anchors.verticalCenter: parent.verticalCenter */ + /* icon: ($type === 'event' && $content) || '' */ + /* iconSize: 16 */ + /* } */ + + /* ActionButton { */ + /* anchors.verticalCenter: parent.verticalCenter */ + /* icon: 'delete' */ + /* iconSize: 16 */ + /* id: removeAction */ + /* onClicked: chat.model.remove(index) */ + /* visible: false */ + /* } */ + /* } */ diff --git a/tests/ui/modules/Linphone/Chat/Event.qml b/tests/ui/modules/Linphone/Chat/Event.qml index 0859389ee..23c29e927 100644 --- a/tests/ui/modules/Linphone/Chat/Event.qml +++ b/tests/ui/modules/Linphone/Chat/Event.qml @@ -1,24 +1,42 @@ import QtQuick 2.7 +import Common 1.0 +import Linphone.Styles 1.0 import Utils 1.0 // =================================================================== -Text { - Component { - // Never created. - // Private data for `lupdate`. - Item { - property var i18n: [ - QT_TR_NOOP('hangup'), - QT_TR_NOOP('incomingCall'), - QT_TR_NOOP('lostIncomingCall'), - QT_TR_NOOP('lostOutgoingCall') - ] - } +Row { + height: ChatStyle.entry.lineHeight + + Icon { + height: parent.height + icon: $content + iconSize: ChatStyle.entry.event.iconSize + width: ChatStyle.entry.metaWidth } - color: '#898989' - font.bold: true - text: qsTr(Utils.snakeToCamel($content)) + Text { + Component { + // Never created. + // Private data for `lupdate`. + Item { + property var i18n: [ + QT_TR_NOOP('endCall'), + QT_TR_NOOP('incomingCall'), + QT_TR_NOOP('lostIncomingCall'), + QT_TR_NOOP('lostOutgoingCall') + ] + } + } + + color: ChatStyle.entry.event.text.color + font { + bold: true + pointSize: ChatStyle.entry.event.text.fontSize + } + height: parent.height + text: qsTr(Utils.snakeToCamel($content)) + verticalAlignment: Text.AlignVCenter + } } diff --git a/tests/ui/modules/Linphone/Chat/IncomingMessage.qml b/tests/ui/modules/Linphone/Chat/IncomingMessage.qml index 1dcc95289..22fd7c36e 100644 --- a/tests/ui/modules/Linphone/Chat/IncomingMessage.qml +++ b/tests/ui/modules/Linphone/Chat/IncomingMessage.qml @@ -1,18 +1,27 @@ import QtQuick 2.7 import QtQuick.Layouts 1.3 +import Common 1.0 import Linphone 1.0 +import Linphone.Styles 1.0 // =================================================================== RowLayout { implicitHeight: message.height - spacing: 10 + spacing: 0 - Avatar { + Item { Layout.alignment: Qt.AlignTop - Layout.preferredHeight: 30 - Layout.preferredWidth: 30 + Layout.preferredHeight: ChatStyle.entry.lineHeight + Layout.preferredWidth: ChatStyle.entry.metaWidth + + Avatar { + anchors.centerIn: parent + username: contact.username + width: ChatStyle.entry.lineHeight + height: ChatStyle.entry.lineHeight + } } Message { @@ -21,8 +30,20 @@ RowLayout { Layout.fillWidth: true // Not a style. Workaround to avoid a 0 width. + // Arbitrary value. Layout.minimumWidth: 20 - backgroundColor: '#BFBFBF' + backgroundColor: ChatStyle.entry.message.incoming.backgroundColor + color: ChatStyle.entry.message.incoming.text.color + fontSize: ChatStyle.entry.message.incoming.text.fontSize + + ActionButton { + height: ChatStyle.entry.lineHeight + icon: 'delete' + iconSize: ChatStyle.entry.deleteIconSize + visible: isHoverEntry() + + onClicked: deleteEntry() + } } } diff --git a/tests/ui/modules/Linphone/Chat/Message.qml b/tests/ui/modules/Linphone/Chat/Message.qml index 890bb9134..6a4792569 100644 --- a/tests/ui/modules/Linphone/Chat/Message.qml +++ b/tests/ui/modules/Linphone/Chat/Message.qml @@ -1,21 +1,26 @@ import QtQuick 2.7 +import Linphone.Styles 1.0 + // =================================================================== Item { id: container property alias backgroundColor: rectangle.color - + property alias color: text.color + property alias fontSize: text.font.pointSize default property alias _content: content.data + // ----------------------------------------------------------------- + implicitHeight: text.contentHeight + text.padding * 2 Rectangle { id: rectangle height: parent.height - radius: 4 + radius: ChatStyle.entry.message.radius width: ( text.contentWidth < parent.width ? text.contentWidth @@ -31,7 +36,7 @@ Item { right: container.right } - padding: 8 + padding: ChatStyle.entry.message.padding text: $content wrapMode: Text.Wrap @@ -41,6 +46,10 @@ Item { Item { id: content - anchors.left: rectangle.right + + anchors { + left: rectangle.right + leftMargin: ChatStyle.entry.message.extraContent.leftMargin + } } } diff --git a/tests/ui/modules/Linphone/Chat/OutgoingMessage.qml b/tests/ui/modules/Linphone/Chat/OutgoingMessage.qml index b4b293bfd..f2fbdb698 100644 --- a/tests/ui/modules/Linphone/Chat/OutgoingMessage.qml +++ b/tests/ui/modules/Linphone/Chat/OutgoingMessage.qml @@ -1,14 +1,41 @@ +import QtQuick 2.7 +import QtQuick.Layouts 1.3 + import Common 1.0 import Linphone 1.0 +import Linphone.Styles 1.0 -Message { - id: message +// =================================================================== - backgroundColor: '#E4E4E4' +RowLayout { + implicitHeight: message.height + spacing: 0 - // TODO: Success and re-send icon. - Icon { - iconSize: 16 - icon: 'valid' + Message { + id: message + + Layout.fillWidth: true + backgroundColor: ChatStyle.entry.message.outgoing.backgroundColor + color: ChatStyle.entry.message.outgoing.text.color + fontSize: ChatStyle.entry.message.outgoing.text.fontSize + + Row { + spacing: ChatStyle.entry.message.extraContent.spacing + + Icon { + height: ChatStyle.entry.lineHeight + icon: 'chat_send' + iconSize: ChatStyle.entry.message.outgoing.sendIconSize + } + + ActionButton { + height: ChatStyle.entry.lineHeight + icon: 'delete' + iconSize: ChatStyle.entry.deleteIconSize + visible: isHoverEntry() + + onClicked: deleteEntry() + } + } } } diff --git a/tests/ui/modules/Linphone/Presence/PresenceLevel.qml b/tests/ui/modules/Linphone/Presence/PresenceLevel.qml index ffa7c562f..66b9ef53c 100644 --- a/tests/ui/modules/Linphone/Presence/PresenceLevel.qml +++ b/tests/ui/modules/Linphone/Presence/PresenceLevel.qml @@ -11,7 +11,7 @@ Item { property string icon: 'led' Icon { - anchors.fill: parent + anchors.centerIn: parent function _getColorString () { if (level === Presence.Green) { @@ -34,5 +34,8 @@ Item { ? parent.icon + '_' + level : '' } + iconSize: parent.height > parent.width + ? parent.width + : parent.height } } diff --git a/tests/ui/modules/Linphone/Styles/ChatStyle.qml b/tests/ui/modules/Linphone/Styles/ChatStyle.qml new file mode 100644 index 000000000..0b04ef36e --- /dev/null +++ b/tests/ui/modules/Linphone/Styles/ChatStyle.qml @@ -0,0 +1,85 @@ +pragma Singleton +import QtQuick 2.7 + +import Common 1.0 + +// =================================================================== + +QtObject { + property QtObject sectionHeading: QtObject { + property int padding: 5 + property int bottomMargin: 20 + + property QtObject border: QtObject { + property color color: '#E2E9EF' + property int width: 1 + } + + property QtObject text: QtObject { + property int fontSize: 10 + property color color: '#6B7A86' + } + } + + property QtObject sendArea: QtObject { + property int height: 80 + + property QtObject border: QtObject { + property color color: '#B1B1B1' + property int width: 1 + } + } + + property QtObject entry: QtObject { + property int bottomMargin: 10 + property int deleteIconSize: 17 + property int leftMargin: 18 + property int lineHeight: 30 + property int metaWidth: 40 + + property QtObject event: QtObject { + property int iconSize: 18 + + property QtObject text: QtObject { + property color color: '#595759' + property int fontSize: 10 + } + } + + property QtObject message: QtObject { + property int padding: 8 + property int radius: 4 + + property QtObject extraContent: QtObject { + property int leftMargin: 10 + property int spacing: 5 + property int rightMargin: 5 + } + + property QtObject incoming: QtObject { + property color backgroundColor: '#D0D8DE' + + property QtObject text: QtObject { + property color color: '#595759' + property int fontSize: 10 + } + } + + property QtObject outgoing: QtObject { + property color backgroundColor: '#F3F3F3' + property int sendIconSize: 12 + + property QtObject text: QtObject { + property color color: '#595759' + property int fontSize: 10 + } + } + } + + property QtObject time: QtObject { + property color color: '#96A5B1' + property int fontSize: 10 + property int width: 44 + } + } +} diff --git a/tests/ui/modules/Linphone/Styles/qmldir b/tests/ui/modules/Linphone/Styles/qmldir index 882c5d447..de0bb8764 100644 --- a/tests/ui/modules/Linphone/Styles/qmldir +++ b/tests/ui/modules/Linphone/Styles/qmldir @@ -6,6 +6,8 @@ module Linphone.Style singleton AccountStatusStyle 1.0 Account/AccountStatusStyle.qml +singleton ChatStyle 1.0 ChatStyle.qml + singleton AvatarStyle 1.0 Contact/AvatarStyle.qml singleton ContactDescriptionStyle 1.0 Contact/ContactDescriptionStyle.qml singleton ContactStyle 1.0 Contact/ContactStyle.qml diff --git a/tests/ui/views/App/MainWindow/Contacts.qml b/tests/ui/views/App/MainWindow/Contacts.qml index 62edc839e..410fd5312 100644 --- a/tests/ui/views/App/MainWindow/Contacts.qml +++ b/tests/ui/views/App/MainWindow/Contacts.qml @@ -111,57 +111,6 @@ ColumnLayout { anchors.fill: parent color: ContactsStyle.contact.backgroundColor.normal - Rectangle { - id: indicator - - anchors.left: parent.left - color: 'transparent' - height: parent.height - width: ContactsStyle.contact.indicator.width - } - - MouseArea { - id: mouseArea - - anchors.fill: parent - hoverEnabled: true - - RowLayout { - anchors { - fill: parent - leftMargin: ContactsStyle.contact.leftMargin - rightMargin: ContactsStyle.contact.rightMargin - } - spacing: ContactsStyle.contact.spacing - - // Avatar. - Avatar { - Layout.preferredHeight: ContactsStyle.contact.avatarSize - Layout.preferredWidth: ContactsStyle.contact.avatarSize - image: $contact.avatar - username: $contact.username - } - - // Username. - Text { - Layout.preferredWidth: ContactsStyle.contact.username.width - color: ContactsStyle.contact.username.color - elide: Text.ElideRight - font.bold: true - text: $contact.username - } - - // Container. - Loader { - id: loader - - Layout.fillWidth: true - Layout.fillHeight: true - sourceComponent: container1 - } - } - } - // --------------------------------------------------------- Component { @@ -225,6 +174,59 @@ ColumnLayout { // --------------------------------------------------------- + Rectangle { + id: indicator + + anchors.left: parent.left + color: 'transparent' + height: parent.height + width: ContactsStyle.contact.indicator.width + } + + MouseArea { + id: mouseArea + + anchors.fill: parent + hoverEnabled: true + + RowLayout { + anchors { + fill: parent + leftMargin: ContactsStyle.contact.leftMargin + rightMargin: ContactsStyle.contact.rightMargin + } + spacing: ContactsStyle.contact.spacing + + // Avatar. + Avatar { + Layout.preferredHeight: ContactsStyle.contact.avatarSize + Layout.preferredWidth: ContactsStyle.contact.avatarSize + image: $contact.avatar + username: $contact.username + } + + // Username. + Text { + Layout.preferredWidth: ContactsStyle.contact.username.width + color: ContactsStyle.contact.username.color + elide: Text.ElideRight + font.bold: true + text: $contact.username + } + + // Container. + Loader { + id: loader + + Layout.fillWidth: true + Layout.fillHeight: true + sourceComponent: container1 + } + } + } + + // --------------------------------------------------------- + states: State { when: mouseArea.containsMouse diff --git a/tests/ui/views/App/MainWindow/Conversation.qml b/tests/ui/views/App/MainWindow/Conversation.qml index 86d4738a4..6c714a883 100644 --- a/tests/ui/views/App/MainWindow/Conversation.qml +++ b/tests/ui/views/App/MainWindow/Conversation.qml @@ -70,14 +70,14 @@ ColumnLayout { ActionButton { icon: 'contact_edit' - iconSize: ConversationStyle.bar.actions.edit.contactIconSize + iconSize: ConversationStyle.bar.actions.edit.iconSize onClicked: console.log('clicked!!!') // TODO. } ActionButton { icon: 'delete' - iconSize: ConversationStyle.bar.actions.edit.deleteIconSize + iconSize: ConversationStyle.bar.actions.edit.iconSize onClicked: window.setView('Contact') // TODO. } @@ -117,7 +117,8 @@ ColumnLayout { // ----------------------------------------------------------------- Chat { - Layout.fillWidth: true Layout.fillHeight: true + Layout.fillWidth: true + contact: parent.contact } } diff --git a/tests/ui/views/App/Styles/MainWindow/ConversationStyle.qml b/tests/ui/views/App/Styles/MainWindow/ConversationStyle.qml index 3e6e90126..1f82f9e0e 100644 --- a/tests/ui/views/App/Styles/MainWindow/ConversationStyle.qml +++ b/tests/ui/views/App/Styles/MainWindow/ConversationStyle.qml @@ -22,8 +22,7 @@ QtObject { } property QtObject edit: QtObject { - property int contactIconSize: 22 - property int deleteIconSize: 17 + property int iconSize: 22 } }