mirrors/linphone-desktop
1
0
Fork 0
mirror of https://gitlab.linphone.org/BC/public/linphone-desktop.git synced 2026-05-03 22:56:49 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(Tooltip/Tooltip): use different icons for the 4 edges

Browse source
This commit is contained in:
Ronan Abhamon 2016-11-08 11:35:35 +01:00
parent b0cf9cbe8e
commit c0e724b7ec
8 changed files with 96 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
tests/assets/images/tooltip_arrow_bottom.svg Normal file
View file

@ -0,0 +1,12 @@
<?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 6 4 0 8 6"></polygon>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 570 B

12
tests/assets/images/tooltip_arrow_left.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="6px" height="8px" viewBox="0 0 6 8" 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 6 4 0 8"></polygon>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 570 B

12
tests/assets/images/tooltip_arrow_right.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="6px" height="8px" viewBox="0 0 6 8" 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="6 0 0 4 6 8"></polygon>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 570 B

0
tests/assets/images/tooltip_arrow.svg → tests/assets/images/tooltip_arrow_top.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 569 B

After

Width:  |  Height:  |  Size: 569 B

5
tests/resources.qrc
View file

@ -40,7 +40,10 @@
<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/tooltip_arrow_bottom.svg</file>
<file>assets/images/tooltip_arrow_left.svg</file>
<file>assets/images/tooltip_arrow_right.svg</file>
<file>assets/images/tooltip_arrow_top.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>

72
tests/ui/modules/Common/Tooltip/Tooltip.qml
View file

@ -3,22 +3,31 @@ import QtQuick.Controls 2.0
import Common 1.0
import Common.Styles 1.0
import Utils 1.0
// ===================================================================
ToolTip {
id: tooltip
property string _edge: 'left'
// -----------------------------------------------------------------
function _getArrowHeightMargin () {
return icon.height > icon.implicitHeight
? (icon.height - icon.implicitHeight) / 2
: icon.height
Utils.assert(
icon.height >= icon.implicitHeight,
'`icon.height` must be lower than `icon.implicitHeight`.'
)
return (icon.height - icon.implicitHeight) / 2
}
function _getArrowWidthMargin () {
return icon.width > icon.implicitWidth
? (icon.width - icon.implicitWidth) / 2
: icon.width
Utils.assert(
icon.width >= icon.implicitWidth,
'`icon.width` must be lower than `icon.implicitWidth`.'
)
return (icon.width - icon.implicitWidth) / 2
}
function _getRelativeXArrowCenter () {
@ -29,38 +38,41 @@ ToolTip {
return tooltip.parent.height / 2 - icon.height / 2
}
function _setArrowEdge () {
var a = container.mapToItem(null, 0, 0)
var b = tooltip.parent.mapToItem(null, 0, 0)
if (a.x + container.width < b.x) {
_edge = 'left'
} else if (a.x > b.x + container.width) {
_edge = 'right'
} else if (a.y + container.height < b.y) {
_edge = 'top'
} else if (a.y > b.y + b.height) {
_edge = 'bottom'
} else {
console.warn('Unable to get the tooltip arrow position.')
}
}
// Called when new image is loaded. (When the is edge is updated.)
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) {
if (_edge === 'left') {
icon.x = container.width - TooltipStyle.margins - _getArrowWidthMargin()
icon.y = b.y - a.y + _getRelativeYArrowCenter()
}
// Right.
else if (a.x > b.x + container.width) {
} else if (_edge === 'right') {
icon.x = container.width + TooltipStyle.margins + _getArrowWidthMargin()
icon.y = b.y - a.y + _getRelativeYArrowCenter()
}
// Top.
else if (a.y + container.height < b.y) {
} else if (_edge === 'top') {
icon.x = b.x - a.x + _getRelativeXArrowCenter()
icon.y = container.height - TooltipStyle.margins - _getArrowHeightMargin()
}
// Bottom.
else if (a.y > b.y + b.height) {
} else if (_edge === 'bottom') {
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')
}
}
// -----------------------------------------------------------------
@ -84,10 +96,14 @@ ToolTip {
fillMode: Image.PreserveAspectFit
height: TooltipStyle.arrowSize
source: Constants.imagesPath + 'tooltip_arrow' + Constants.imagesFormat
visible: tooltip.visible
source: Constants.imagesPath +
'tooltip_arrow_' + _edge +
Constants.imagesFormat
visible: tooltip.visible && _edge
width: TooltipStyle.arrowSize
z: Constants.zMax
onStatusChanged: status === Image.Ready && _setArrowPosition()
}
}
@ -102,5 +118,5 @@ ToolTip {
delay: TooltipStyle.delay
onVisibleChanged: visible && _setArrowPosition()
onVisibleChanged: visible && _setArrowEdge()
}

3
tests/ui/modules/Linphone/Chat/Chat.qml
View file

@ -162,7 +162,8 @@ ColumnLayout {
// 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; $outgoing: true; $timestamp: 1465389121000; $type: 'message'; $content: "<a href='http://google.fr'>click here</a>" }
ListElement { $dateSection: 1465389121000; $outgoing: true; $timestamp: 1465389121000; $type: 'message'; $content: "<a href='mailto:qq1@qqpart.com'>Contact mail</a>" }
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' }

10
tests/ui/modules/Linphone/Chat/Message.qml
View file

@ -41,6 +41,16 @@ Item {
// Little fix. Text may disappear with scrolling.
renderType: Text.NativeRendering
onLinkActivated: Qt.openUrlExternally(link)
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.NoButton
cursorShape: parent.hoveredLink
? Qt.PointingHandCursor
: Qt.ArrowCursor
}
}
Item {