Skip to content

L
linphone-desktop
Commit c0e724b7 authored by Ronan Abhamon's avatar Ronan Abhamon
Browse files
Options

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

parent b0cf9cbe
Hide whitespace changes
Inline Side-by-side
Showing with 96 additions and 30 deletions
tests/assets/images/tooltip_arrow_bottom.svg 0 → 100644
View file @ c0e724b7
<?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>
tests/assets/images/tooltip_arrow_left.svg 0 → 100644
View file @ c0e724b7
<?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>
tests/assets/images/tooltip_arrow_right.svg 0 → 100644
View file @ c0e724b7
<?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>
tests/resources.qrc
View file @ c0e724b7
...@@ -40,7 +40,10 @@ ...@@ -40,7 +40,10 @@
<file>assets/images/lost_outgoing_call.svg</file> <file>assets/images/lost_outgoing_call.svg</file>
<file>assets/images/outgoing_call.svg</file> <file>assets/images/outgoing_call.svg</file>
<file>assets/images/search.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_hovered.svg</file>
<file>assets/images/video_call_normal.svg</file> <file>assets/images/video_call_normal.svg</file>
<file>assets/images/video_call_pressed.svg</file> <file>assets/images/video_call_pressed.svg</file>
......
tests/ui/modules/Common/Tooltip/Tooltip.qml
View file @ c0e724b7
...@@ -3,22 +3,31 @@ import QtQuick.Controls 2.0 ...@@ -3,22 +3,31 @@ import QtQuick.Controls 2.0
import Common 1.0 import Common 1.0
import Common.Styles 1.0 import Common.Styles 1.0
import Utils 1.0
// =================================================================== // ===================================================================
ToolTip { ToolTip {
id: tooltip id: tooltip
property string _edge: 'left'
// -----------------------------------------------------------------
function _getArrowHeightMargin () { function _getArrowHeightMargin () {
return icon.height > icon.implicitHeight Utils.assert(
? (icon.height - icon.implicitHeight) / 2 icon.height >= icon.implicitHeight,
: icon.height '`icon.height` must be lower than `icon.implicitHeight`.'
)
return (icon.height - icon.implicitHeight) / 2
} }
function _getArrowWidthMargin () { function _getArrowWidthMargin () {
return icon.width > icon.implicitWidth Utils.assert(
? (icon.width - icon.implicitWidth) / 2 icon.width >= icon.implicitWidth,
: icon.width '`icon.width` must be lower than `icon.implicitWidth`.'
)
return (icon.width - icon.implicitWidth) / 2
} }
function _getRelativeXArrowCenter () { function _getRelativeXArrowCenter () {
...@@ -29,38 +38,41 @@ ToolTip { ...@@ -29,38 +38,41 @@ ToolTip {
return tooltip.parent.height / 2 - icon.height / 2 return tooltip.parent.height / 2 - icon.height / 2
} }
function _setArrowPosition () { function _setArrowEdge () {
var a = container.mapToItem(null, 0, 0) var a = container.mapToItem(null, 0, 0)
var b = tooltip.parent.mapToItem(null, 0, 0) var b = tooltip.parent.mapToItem(null, 0, 0)
// Left.
if (a.x + container.width < b.x) { if (a.x + container.width < b.x) {
icon.x = container.width - TooltipStyle.margins - _getArrowWidthMargin() _edge = 'left'
icon.y = b.y - a.y + _getRelativeYArrowCenter() } 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)
// Right. if (_edge === 'left') {
else if (a.x > b.x + container.width) { icon.x = container.width - TooltipStyle.margins - _getArrowWidthMargin()
icon.y = b.y - a.y + _getRelativeYArrowCenter()
} else if (_edge === 'right') {
icon.x = container.width + TooltipStyle.margins + _getArrowWidthMargin() icon.x = container.width + TooltipStyle.margins + _getArrowWidthMargin()
icon.y = b.y - a.y + _getRelativeYArrowCenter() icon.y = b.y - a.y + _getRelativeYArrowCenter()
} } else if (_edge === 'top') {
// Top.
else if (a.y + container.height < b.y) {
icon.x = b.x - a.x + _getRelativeXArrowCenter() icon.x = b.x - a.x + _getRelativeXArrowCenter()
icon.y = container.height - TooltipStyle.margins - _getArrowHeightMargin() icon.y = container.height - TooltipStyle.margins - _getArrowHeightMargin()
} } else if (_edge === 'bottom') {
// Bottom.
else if (a.y > b.y + b.height) {
icon.x = b.x - a.x + _getRelativeXArrowCenter() icon.x = b.x - a.x + _getRelativeXArrowCenter()
icon.y = container.height + TooltipStyle.margins + _getArrowHeightMargin() icon.y = container.height + TooltipStyle.margins + _getArrowHeightMargin()
} }
// Error?
else {
throw new Error('Unable to get the tooltip arrow position')
}
} }
// ----------------------------------------------------------------- // -----------------------------------------------------------------
...@@ -84,10 +96,14 @@ ToolTip { ...@@ -84,10 +96,14 @@ ToolTip {
fillMode: Image.PreserveAspectFit fillMode: Image.PreserveAspectFit
height: TooltipStyle.arrowSize height: TooltipStyle.arrowSize
source: Constants.imagesPath + 'tooltip_arrow' + Constants.imagesFormat source: Constants.imagesPath +
visible: tooltip.visible 'tooltip_arrow_' + _edge +
Constants.imagesFormat
visible: tooltip.visible && _edge
width: TooltipStyle.arrowSize width: TooltipStyle.arrowSize
z: Constants.zMax z: Constants.zMax
onStatusChanged: status === Image.Ready && _setArrowPosition()
} }
} }
...@@ -102,5 +118,5 @@ ToolTip { ...@@ -102,5 +118,5 @@ ToolTip {
delay: TooltipStyle.delay delay: TooltipStyle.delay
onVisibleChanged: visible && _setArrowPosition() onVisibleChanged: visible && _setArrowEdge()
} }
tests/ui/modules/Linphone/Chat/Chat.qml
View file @ c0e724b7
...@@ -162,7 +162,8 @@ ColumnLayout { ...@@ -162,7 +162,8 @@ ColumnLayout {
// TMP // TMP
model: ListModel { 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: 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: 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: 1465389121000; $timestamp: 1465389500000; $type: 'event'; $content: 'end_call' }
......
tests/ui/modules/Linphone/Chat/Message.qml
View file @ c0e724b7
...@@ -41,6 +41,16 @@ Item { ...@@ -41,6 +41,16 @@ Item {
// Little fix. Text may disappear with scrolling. // Little fix. Text may disappear with scrolling.
renderType: Text.NativeRendering renderType: Text.NativeRendering
onLinkActivated: Qt.openUrlExternally(link)
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.NoButton
cursorShape: parent.hoveredLink
? Qt.PointingHandCursor
: Qt.ArrowCursor
}
} }
Item { Item {
......
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

Technounit-GROUP 2023