diff --git a/tests/assets/images/contact_normal.svg b/tests/assets/images/contact_normal.svg
index f429be3bd..f7197ac04 100644
--- a/tests/assets/images/contact_normal.svg
+++ b/tests/assets/images/contact_normal.svg
@@ -4,9 +4,9 @@
contact_default
Created with Sketch.
-
-
-
+
+
+
\ No newline at end of file
diff --git a/tests/assets/images/contact_selected.svg b/tests/assets/images/contact_selected.svg
index 61833222b..f0a637c0b 100644
--- a/tests/assets/images/contact_selected.svg
+++ b/tests/assets/images/contact_selected.svg
@@ -4,9 +4,9 @@
contact_selected
Created with Sketch.
-
-
-
+
+
+
\ No newline at end of file
diff --git a/tests/assets/images/home_normal.svg b/tests/assets/images/home_normal.svg
index 33bf3cf08..926fd686f 100644
--- a/tests/assets/images/home_normal.svg
+++ b/tests/assets/images/home_normal.svg
@@ -3,16 +3,10 @@
home_icon_default
Created with Sketch.
-
-
-
-
-
-
-
-
-
-
+
+
+
+
\ No newline at end of file
diff --git a/tests/assets/images/home_selected.svg b/tests/assets/images/home_selected.svg
index 953dc8bfe..9d4be5dc4 100644
--- a/tests/assets/images/home_selected.svg
+++ b/tests/assets/images/home_selected.svg
@@ -3,16 +3,10 @@
home_icon_selected
Created with Sketch.
-
-
-
-
-
-
-
-
-
-
+
+
+
+
\ No newline at end of file
diff --git a/tests/assets/images/tooltip_arrow.svg b/tests/assets/images/tooltip_arrow.svg
new file mode 100644
index 000000000..ba81f1b70
--- /dev/null
+++ b/tests/assets/images/tooltip_arrow.svg
@@ -0,0 +1,12 @@
+
+
\ No newline at end of file
diff --git a/tests/assets/languages/en.ts b/tests/assets/languages/en.ts
index a750714ff..34598f97c 100644
--- a/tests/assets/languages/en.ts
+++ b/tests/assets/languages/en.ts
@@ -159,6 +159,10 @@
dropYourAttachment
Drop your attachment
+
+ attachmentTooltip
+
+
Event
diff --git a/tests/assets/languages/fr.ts b/tests/assets/languages/fr.ts
index 4ba2666d1..824e3d752 100644
--- a/tests/assets/languages/fr.ts
+++ b/tests/assets/languages/fr.ts
@@ -159,6 +159,10 @@
dropYourAttachment
Déposez votre pièce jointe
+
+ attachmentTooltip
+
+
Event
diff --git a/tests/resources.qrc b/tests/resources.qrc
index d04fb4e7f..debd8b59e 100644
--- a/tests/resources.qrc
+++ b/tests/resources.qrc
@@ -40,6 +40,7 @@
assets/images/lost_outgoing_call.svg
assets/images/outgoing_call.svg
assets/images/search.svg
+ assets/images/tooltip_arrow.svg
assets/images/video_call_hovered.svg
assets/images/video_call_normal.svg
assets/images/video_call_pressed.svg
@@ -99,6 +100,9 @@
ui/modules/Common/Styles/PopupStyle.qml
ui/modules/Common/Styles/qmldir
ui/modules/Common/Styles/SearchBoxStyle.qml
+ ui/modules/Common/Styles/TooltipStyle.qml
+ ui/modules/Common/Tooltip/TooltipArea.qml
+ ui/modules/Common/Tooltip/Tooltip.qml
ui/modules/Common/View/ScrollableListView.qml
ui/modules/Linphone/Account/AccountStatus.qml
ui/modules/Linphone/Call/CallControls.qml
diff --git a/tests/ui/modules/Common/DroppableTextArea.qml b/tests/ui/modules/Common/DroppableTextArea.qml
index 28b0d9545..b25b8d2fc 100644
--- a/tests/ui/modules/Common/DroppableTextArea.qml
+++ b/tests/ui/modules/Common/DroppableTextArea.qml
@@ -74,6 +74,10 @@ Item {
onAccepted: _emitFiles(fileDialog.fileUrls)
}
+
+ TooltipArea {
+ text: qsTr('attachmentTooltip')
+ }
}
// Hover style.
diff --git a/tests/ui/modules/Common/Styles/TooltipStyle.qml b/tests/ui/modules/Common/Styles/TooltipStyle.qml
new file mode 100644
index 000000000..3748bfe99
--- /dev/null
+++ b/tests/ui/modules/Common/Styles/TooltipStyle.qml
@@ -0,0 +1,17 @@
+pragma Singleton
+import QtQuick 2.7
+
+import Common 1.0
+
+// ===================================================================
+
+QtObject {
+ property color backgroundColor: '#6B7A86'
+ property color color: '#FFFFFF'
+ property int arrowSize: 8
+ property int delay: 500
+ property int fontSize: 9
+ property int margins: 8
+ property int padding: 4
+ property int radius: 4
+}
diff --git a/tests/ui/modules/Common/Styles/qmldir b/tests/ui/modules/Common/Styles/qmldir
index 03ed2d3f5..ad66a6a7a 100644
--- a/tests/ui/modules/Common/Styles/qmldir
+++ b/tests/ui/modules/Common/Styles/qmldir
@@ -33,3 +33,5 @@ singleton PanedStyle 1.0 PanedStyle.qml
singleton PopupStyle 1.0 PopupStyle.qml
singleton SearchBoxStyle 1.0 SearchBoxStyle.qml
+
+singleton TooltipStyle 1.0 TooltipStyle.qml
diff --git a/tests/ui/modules/Common/Tooltip/Tooltip.qml b/tests/ui/modules/Common/Tooltip/Tooltip.qml
new file mode 100644
index 000000000..c95a6306a
--- /dev/null
+++ b/tests/ui/modules/Common/Tooltip/Tooltip.qml
@@ -0,0 +1,106 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+
+import Common 1.0
+import Common.Styles 1.0
+
+// ===================================================================
+
+ToolTip {
+ id: tooltip
+
+ function _getArrowHeightMargin () {
+ return icon.height > icon.implicitHeight
+ ? (icon.height - icon.implicitHeight) / 2
+ : icon.height
+ }
+
+ function _getArrowWidthMargin () {
+ return icon.width > icon.implicitWidth
+ ? (icon.width - icon.implicitWidth) / 2
+ : icon.width
+ }
+
+ function _getRelativeXArrowCenter () {
+ return tooltip.parent.width / 2 - icon.width / 2
+ }
+
+ function _getRelativeYArrowCenter () {
+ return tooltip.parent.height / 2 - icon.height / 2
+ }
+
+ function _setArrowPosition () {
+ var a = container.mapToItem(null, 0, 0)
+ var b = tooltip.parent.mapToItem(null, 0, 0)
+
+ // Left.
+ if (a.x + container.width < b.x) {
+ icon.x = container.width - TooltipStyle.margins - _getArrowWidthMargin()
+ icon.y = b.y - a.y + _getRelativeYArrowCenter()
+ }
+
+ // Right.
+ else if (a.x > b.x + container.width) {
+ icon.x = container.width + TooltipStyle.margins + _getArrowWidthMargin()
+ icon.y = b.y - a.y + _getRelativeYArrowCenter()
+ }
+
+ // Top.
+ else if (a.y + container.height < b.y) {
+ icon.x = b.x - a.x + _getRelativeXArrowCenter()
+ icon.y = container.height - TooltipStyle.margins - _getArrowHeightMargin()
+ }
+
+ // Bottom.
+ else if (a.y > b.y + b.height) {
+ icon.x = b.x - a.x + _getRelativeXArrowCenter()
+ icon.y = container.height + TooltipStyle.margins + _getArrowHeightMargin()
+ }
+
+ // Error?
+ else {
+ throw new Error('Unable to get the tooltip arrow position')
+ }
+ }
+
+ // -----------------------------------------------------------------
+
+ background: Item {
+ id: container
+
+ Rectangle {
+ anchors {
+ fill: parent
+ margins: TooltipStyle.margins
+ }
+ color: TooltipStyle.backgroundColor
+ radius: TooltipStyle.radius
+ }
+
+ // Do not use `Icon` component to access to `implicitHeight`
+ // and `implicitWidth`.
+ Image {
+ id: icon
+
+ fillMode: Image.PreserveAspectFit
+ height: TooltipStyle.arrowSize
+ source: Constants.imagesPath + 'tooltip_arrow' + Constants.imagesFormat
+ visible: tooltip.visible
+ width: TooltipStyle.arrowSize
+ z: Constants.zMax
+ }
+ }
+
+ contentItem: Text {
+ id: text
+
+ color: TooltipStyle.color
+ font.pointSize: TooltipStyle.fontSize
+ padding: TooltipStyle.padding + TooltipStyle.margins
+ text: tooltip.text
+ }
+
+ delay: TooltipStyle.delay
+
+ onVisibleChanged: visible && _setArrowPosition()
+}
diff --git a/tests/ui/modules/Common/Tooltip/TooltipArea.qml b/tests/ui/modules/Common/Tooltip/TooltipArea.qml
new file mode 100644
index 000000000..33765fb9e
--- /dev/null
+++ b/tests/ui/modules/Common/Tooltip/TooltipArea.qml
@@ -0,0 +1,20 @@
+import QtQuick 2.7
+
+// ===================================================================
+
+MouseArea {
+ property alias text: tooltip.text
+ property var toolTipParent: this
+
+ anchors.fill: parent
+ hoverEnabled: true
+
+ onPressed: mouse.accepted = false
+
+ Tooltip {
+ id: tooltip
+
+ parent: toolTipParent
+ visible: containsMouse
+ }
+}
diff --git a/tests/ui/modules/Common/qmldir b/tests/ui/modules/Common/qmldir
index 988596b68..15d89c672 100644
--- a/tests/ui/modules/Common/qmldir
+++ b/tests/ui/modules/Common/qmldir
@@ -66,5 +66,8 @@ PopupShadow 1.0 Popup/PopupShadow.qml
# SearchBox
SearchBox 1.0 SearchBox.qml
+# Tooltip
+TooltipArea 1.0 Tooltip/TooltipArea.qml
+
# View
ScrollableListView 1.0 View/ScrollableListView.qml