Commit b0cf9cbe authored by Ronan Abhamon's avatar Ronan Abhamon

feat(app): add a Tooltip system controled by `Tooltip` and `TooltipArea`

parent a53fe99b
......@@ -4,9 +4,9 @@
<title>contact_default</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="contact_default" stroke-width="2" stroke="#FFFFFF">
<path d="M12.0554009,1 C15.2314768,1 17.8061559,3.60010197 17.8061559,6.80739857 C17.8061559,8.34243497 17.2167979,9.73804761 16.2536873,10.7767134 C16.1185235,10.9227371 16.1718776,10.8971623 16.0222125,11.0283362 L16.2621693,11.1916847 C24.9780461,15.0229508 22.7431919,21.4633938 22.7431919,21.4633938 C17.1300632,23.2613278 12.0644301,22.9846803 12.0644301,22.9846803 L11.9358329,22.9846803 C11.9358329,22.9844053 6.86965253,23.2613278 1.25679748,21.4633938 C1.25679748,21.4633938 -0.978056771,15.0229508 7.73809369,11.1916847 L7.97805049,11.0283362 C7.8283853,10.8971623 7.88173944,10.9227371 7.74657563,10.7767134 C6.78373869,9.73804761 6.19410709,8.34243497 6.19410709,6.80739857 C6.19410709,3.60010197 8.76878614,1 11.9448621,1 L12.0554009,1 L12.0554009,1 Z"></path>
<g id="Symbols-vecto" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.5">
<g id="contact_default" fill="#FFFFFF">
<path d="M16.8061559,6.80739857 C16.8061559,8.04777355 16.3417672,9.21099173 15.5204136,10.0967799 C15.4434922,10.1798811 15.4365738,10.1883818 15.3574501,10.2897899 C14.8712019,10.7074152 14.9187969,11.4869099 15.4594834,11.8549776 L15.6994402,12.0183261 L15.859758,12.1071437 C18.0426652,13.0666913 19.5879248,14.2312064 20.5911168,15.5459618 C21.9323211,17.3037066 22.209108,19.1412082 21.8904449,20.7591593 C21.8516838,20.9559612 21.8158733,21.0853677 21.7984541,21.1355667 L22.4381495,20.511055 C20.3066086,21.1938061 18.1017272,21.6205507 15.9222911,21.8384954 C14.462433,21.984482 13.2209671,22.0194037 12.2962639,21.9927551 C12.2052904,21.9901334 12.1455704,21.9876214 12.1189614,21.9861682 L11.9358329,21.9846803 L11.9358329,22.9846803 L12.9358329,22.9846803 L11.9108224,21.9849931 C11.8628815,21.9870261 11.8628815,21.9870261 11.8423479,21.9879051 C11.7889591,21.9900363 11.7889591,21.9900363 11.7035112,21.9926929 C10.7769249,22.0192234 9.53621081,21.984275 8.07648162,21.8382841 C5.89725134,21.6203341 3.69283284,21.1936639 1.56185338,20.5110593 L2.20153524,21.1355667 C2.18411742,21.0853718 2.14830897,20.9559724 2.1095499,20.7591801 C1.79088868,19.1412341 2.06769549,17.3037306 3.40895961,15.545977 C4.41219415,14.2312179 5.95751214,13.0666988 8.14049436,12.1071484 L8.30082278,12.0183261 L8.54077958,11.8549776 C9.08146603,11.4869099 9.12906109,10.7074152 8.63717186,10.2762996 C8.56368915,10.1883818 8.55677078,10.1798811 8.48044484,10.0974226 C7.65859291,9.21084479 7.19410709,8.0475319 7.19410709,6.80739857 C7.19410709,4.15018114 9.32330008,2 11.9448621,2 L12.0554009,2 C14.6769629,2 16.8061559,4.15018114 16.8061559,6.80739857 Z M11.9448621,0 C8.21431525,0 5.19410709,3.04997933 5.19410709,6.80739857 C5.19410709,8.55620797 5.85198152,10.203866 7.01320556,11.456543 C7.03781127,11.4831261 7.02183844,11.4635001 7.06599939,11.5200985 C7.14632933,11.6207546 7.21387737,11.6883003 7.31892913,11.7803728 L7.97805049,11.0283362 L7.41532141,10.2016948 L7.1753646,10.3650434 L7.73809369,11.1916847 L7.33569302,10.2762211 C4.85488983,11.3666815 3.03679647,12.7367584 1.81897884,14.3327329 C0.0899618353,16.5986445 -0.273330095,19.0102549 0.147247578,21.1456637 C0.204787561,21.4378128 0.265278163,21.6564049 0.312059712,21.7912208 C0.415188143,22.0884181 0.652154443,22.3197632 0.951741577,22.4157282 C3.2260852,23.1442558 5.56632944,23.5972155 7.87744985,23.828356 C9.42772204,23.9834024 10.7529177,24.0207305 11.7607528,23.9918736 C11.8595647,23.9888037 11.8595647,23.9888037 11.925618,23.9861709 C10.9358329,23.536965 12.0644301,23.9846803 12.0644301,23.9846803 C12.0534187,23.9855691 12.1302768,23.988802 12.2386508,23.9919252 C13.2447467,24.0209193 14.5708311,23.9836174 16.1212996,23.8285697 C18.4326271,23.5974358 20.7733351,23.1444026 23.0482343,22.4157325 C23.3478275,22.3197702 23.5847996,22.0884228 23.6879296,21.7912208 C23.7347124,21.6564012 23.795205,21.4378024 23.852747,21.145644 C24.2733244,19.0102426 23.9100607,16.5986484 22.1811207,14.3327481 C20.9633485,12.7367699 19.1453124,11.366689 16.6645805,10.2762257 L16.2621693,11.1916847 L16.8248984,10.3650434 L16.5849415,10.2016948 L16.0222125,11.0283362 L16.6813338,11.7803728 C16.7863856,11.6883003 16.8539336,11.6207546 16.9213349,11.5364713 C16.9784245,11.4635001 16.9624517,11.4831261 16.9875565,11.4560042 C18.1483583,10.204139 18.8061559,8.55646302 18.8061559,6.80739857 C18.8061559,3.04997933 15.7859477,0 12.0554009,0 L11.9448621,0 Z"></path>
</g>
</g>
</svg>
\ No newline at end of file
......@@ -4,9 +4,9 @@
<title>contact_selected</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="contact_selected" stroke-width="2" stroke="#FFFFFF">
<path d="M12.0554009,1 C15.2314768,1 17.8061559,3.60010197 17.8061559,6.80739857 C17.8061559,8.34243497 17.2167979,9.73804761 16.2536873,10.7767134 C16.1185235,10.9227371 16.1718776,10.8971623 16.0222125,11.0283362 L16.2621693,11.1916847 C24.9780461,15.0229508 22.7431919,21.4633938 22.7431919,21.4633938 C17.1300632,23.2613278 12.0644301,22.9846803 12.0644301,22.9846803 L11.9358329,22.9846803 C11.9358329,22.9844053 6.86965253,23.2613278 1.25679748,21.4633938 C1.25679748,21.4633938 -0.978056771,15.0229508 7.73809369,11.1916847 L7.97805049,11.0283362 C7.8283853,10.8971623 7.88173944,10.9227371 7.74657563,10.7767134 C6.78373869,9.73804761 6.19410709,8.34243497 6.19410709,6.80739857 C6.19410709,3.60010197 8.76878614,1 11.9448621,1 L12.0554009,1 L12.0554009,1 Z"></path>
<g id="Symbols-vecto" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="contact_selected" fill="#FFFFFF">
<path d="M16.8061559,6.80739857 C16.8061559,8.04777355 16.3417672,9.21099173 15.5204136,10.0967799 C15.4434922,10.1798811 15.4365738,10.1883818 15.3574501,10.2897899 C14.8712019,10.7074152 14.9187969,11.4869099 15.4594834,11.8549776 L15.6994402,12.0183261 L15.859758,12.1071437 C18.0426652,13.0666913 19.5879248,14.2312064 20.5911168,15.5459618 C21.9323211,17.3037066 22.209108,19.1412082 21.8904449,20.7591593 C21.8516838,20.9559612 21.8158733,21.0853677 21.7984541,21.1355667 L22.4381495,20.511055 C20.3066086,21.1938061 18.1017272,21.6205507 15.9222911,21.8384954 C14.462433,21.984482 13.2209671,22.0194037 12.2962639,21.9927551 C12.2052904,21.9901334 12.1455704,21.9876214 12.1189614,21.9861682 L11.9358329,21.9846803 L11.9358329,22.9846803 L12.9358329,22.9846803 L11.9108224,21.9849931 C11.8628815,21.9870261 11.8628815,21.9870261 11.8423479,21.9879051 C11.7889591,21.9900363 11.7889591,21.9900363 11.7035112,21.9926929 C10.7769249,22.0192234 9.53621081,21.984275 8.07648162,21.8382841 C5.89725134,21.6203341 3.69283284,21.1936639 1.56185338,20.5110593 L2.20153524,21.1355667 C2.18411742,21.0853718 2.14830897,20.9559724 2.1095499,20.7591801 C1.79088868,19.1412341 2.06769549,17.3037306 3.40895961,15.545977 C4.41219415,14.2312179 5.95751214,13.0666988 8.14049436,12.1071484 L8.30082278,12.0183261 L8.54077958,11.8549776 C9.08146603,11.4869099 9.12906109,10.7074152 8.63717186,10.2762996 C8.56368915,10.1883818 8.55677078,10.1798811 8.48044484,10.0974226 C7.65859291,9.21084479 7.19410709,8.0475319 7.19410709,6.80739857 C7.19410709,4.15018114 9.32330008,2 11.9448621,2 L12.0554009,2 C14.6769629,2 16.8061559,4.15018114 16.8061559,6.80739857 Z M11.9448621,0 C8.21431525,0 5.19410709,3.04997933 5.19410709,6.80739857 C5.19410709,8.55620797 5.85198152,10.203866 7.01320556,11.456543 C7.03781127,11.4831261 7.02183844,11.4635001 7.06599939,11.5200985 C7.14632933,11.6207546 7.21387737,11.6883003 7.31892913,11.7803728 L7.97805049,11.0283362 L7.41532141,10.2016948 L7.1753646,10.3650434 L7.73809369,11.1916847 L7.33569302,10.2762211 C4.85488983,11.3666815 3.03679647,12.7367584 1.81897884,14.3327329 C0.0899618353,16.5986445 -0.273330095,19.0102549 0.147247578,21.1456637 C0.204787561,21.4378128 0.265278163,21.6564049 0.312059712,21.7912208 C0.415188143,22.0884181 0.652154443,22.3197632 0.951741577,22.4157282 C3.2260852,23.1442558 5.56632944,23.5972155 7.87744985,23.828356 C9.42772204,23.9834024 10.7529177,24.0207305 11.7607528,23.9918736 C11.8595647,23.9888037 11.8595647,23.9888037 11.925618,23.9861709 C10.9358329,23.536965 12.0644301,23.9846803 12.0644301,23.9846803 C12.0534187,23.9855691 12.1302768,23.988802 12.2386508,23.9919252 C13.2447467,24.0209193 14.5708311,23.9836174 16.1212996,23.8285697 C18.4326271,23.5974358 20.7733351,23.1444026 23.0482343,22.4157325 C23.3478275,22.3197702 23.5847996,22.0884228 23.6879296,21.7912208 C23.7347124,21.6564012 23.795205,21.4378024 23.852747,21.145644 C24.2733244,19.0102426 23.9100607,16.5986484 22.1811207,14.3327481 C20.9633485,12.7367699 19.1453124,11.366689 16.6645805,10.2762257 L16.2621693,11.1916847 L16.8248984,10.3650434 L16.5849415,10.2016948 L16.0222125,11.0283362 L16.6813338,11.7803728 C16.7863856,11.6883003 16.8539336,11.6207546 16.9213349,11.5364713 C16.9784245,11.4635001 16.9624517,11.4831261 16.9875565,11.4560042 C18.1483583,10.204139 18.8061559,8.55646302 18.8061559,6.80739857 C18.8061559,3.04997933 15.7859477,0 12.0554009,0 L11.9448621,0 Z"></path>
</g>
</g>
</svg>
\ No newline at end of file
......@@ -3,16 +3,10 @@
<!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
<title>home_icon_default</title>
<desc>Created with Sketch.</desc>
<defs>
<polygon id="path-1" points="11.6533805 22 4.20958624 22 4.20958624 11.769531 2 11.769531 11.8075425 2 21.9872183 11.816648 19.9060871 11.816648 19.9060865 22"></polygon>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-2" y="-2" width="23.9872183" height="24">
<rect x="0" y="0" width="23.9872183" height="24" fill="white"></rect>
<use xlink:href="#path-1" fill="black"></use>
</mask>
</defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" opacity="0.5" stroke-linejoin="round">
<g id="home_icon_default" stroke="#FFFFFF" stroke-width="4">
<use mask="url(#mask-2)" xlink:href="#path-1"></use>
<defs></defs>
<g id="Symbols-vecto" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.5">
<g id="home_icon_default" fill="#FFFFFF">
<path d="M11.6533805,22 L19.9060865,22 L19.9060871,11.816648 L21.9872183,11.816648 L11.8075425,2 L2,11.769531 L4.20958624,11.769531 L4.20958624,22 L11.6533805,22 Z M11.6533805,24 L4.20958624,24 C3.10501674,24 2.20958624,23.1045695 2.20958624,22 L2.20958624,11.769531 L4.20958624,13.769531 L2,13.769531 C0.21631736,13.769531 -0.675165619,11.6113771 0.588534983,10.3525742 L10.3960775,0.583043223 C11.1675448,-0.185434046 12.4120294,-0.195521499 13.1958527,0.560349009 L23.3755284,10.376997 C24.6707593,11.6260373 23.7865862,13.816648 21.9872183,13.816648 L19.9060871,13.816648 L21.9060871,11.8166481 L21.9060865,22.0000001 C21.9060864,23.1045696 21.0106559,24 19.9060865,24 L11.6533805,24 Z"></path>
</g>
</g>
</svg>
\ No newline at end of file
......@@ -3,16 +3,10 @@
<!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
<title>home_icon_selected</title>
<desc>Created with Sketch.</desc>
<defs>
<polygon id="path-1" points="11.6533805 22 4.20958624 22 4.20958624 11.769531 2 11.769531 11.8075425 2 21.9872183 11.816648 19.9060871 11.816648 19.9060865 22"></polygon>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-2" y="-2" width="23.9872183" height="24">
<rect x="0" y="0" width="23.9872183" height="24" fill="white"></rect>
<use xlink:href="#path-1" fill="black"></use>
</mask>
</defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g id="home_icon_selected" stroke-width="4" stroke="#FFFFFF">
<use mask="url(#mask-2)" xlink:href="#path-1"></use>
<defs></defs>
<g id="Symbols-vecto" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="home_icon_selected" fill="#FFFFFF">
<path d="M11.6533805,22 L19.9060865,22 L19.9060871,11.816648 L21.9872183,11.816648 L11.8075425,2 L2,11.769531 L4.20958624,11.769531 L4.20958624,22 L11.6533805,22 Z M11.6533805,24 L4.20958624,24 C3.10501674,24 2.20958624,23.1045695 2.20958624,22 L2.20958624,11.769531 L4.20958624,13.769531 L2,13.769531 C0.21631736,13.769531 -0.675165619,11.6113771 0.588534983,10.3525742 L10.3960775,0.583043223 C11.1675448,-0.185434046 12.4120294,-0.195521499 13.1958527,0.560349009 L23.3755284,10.376997 C24.6707593,11.6260373 23.7865862,13.816648 21.9872183,13.816648 L19.9060871,13.816648 L21.9060871,11.8166481 L21.9060865,22.0000001 C21.9060864,23.1045696 21.0106559,24 19.9060865,24 L11.6533805,24 Z"></path>
</g>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="8px" height="6px" viewBox="0 0 8 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
<title>tooltip</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols-vecto" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="tooltip" fill="#6B7A86">
<polygon id="Path-2" points="0 0 4 6 8 0"></polygon>
</g>
</g>
</svg>
\ No newline at end of file
......@@ -159,6 +159,10 @@
<source>dropYourAttachment</source>
<translation>Drop your attachment</translation>
</message>
<message>
<source>attachmentTooltip</source>
<translation type="unfinished"></translation>
</message>
</context>
<context>
<name>Event</name>
......
......@@ -159,6 +159,10 @@
<source>dropYourAttachment</source>
<translation>Déposez votre pièce jointe</translation>
</message>
<message>
<source>attachmentTooltip</source>
<translation type="unfinished"></translation>
</message>
</context>
<context>
<name>Event</name>
......
......@@ -40,6 +40,7 @@
<file>assets/images/lost_outgoing_call.svg</file>
<file>assets/images/outgoing_call.svg</file>
<file>assets/images/search.svg</file>
<file>assets/images/tooltip_arrow.svg</file>
<file>assets/images/video_call_hovered.svg</file>
<file>assets/images/video_call_normal.svg</file>
<file>assets/images/video_call_pressed.svg</file>
......@@ -99,6 +100,9 @@
<file>ui/modules/Common/Styles/PopupStyle.qml</file>
<file>ui/modules/Common/Styles/qmldir</file>
<file>ui/modules/Common/Styles/SearchBoxStyle.qml</file>
<file>ui/modules/Common/Styles/TooltipStyle.qml</file>
<file>ui/modules/Common/Tooltip/TooltipArea.qml</file>
<file>ui/modules/Common/Tooltip/Tooltip.qml</file>
<file>ui/modules/Common/View/ScrollableListView.qml</file>
<file>ui/modules/Linphone/Account/AccountStatus.qml</file>
<file>ui/modules/Linphone/Call/CallControls.qml</file>
......
......@@ -74,6 +74,10 @@ Item {
onAccepted: _emitFiles(fileDialog.fileUrls)
}
TooltipArea {
text: qsTr('attachmentTooltip')
}
}
// Hover style.
......
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
}
......@@ -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
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()
}
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
}
}
......@@ -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
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