feat(Controls): introduce StatusToolTip component

This moves the `StatusToolTip` component into `StatusQ` and applies some of
the changes done by @jrainville in https://github.com/status-im/status-desktop/pull/2447.

Usage:

```
import StatusQ.Controls 0.1

Button {
    text: "Hover me!"
    StatusToolTip {
        visible: parent.hovered
        text: "Top"
        orientation: StatusToolTip.Orientation.Top // default: Top
    }
}
```

Closes #14
This commit is contained in:
Pascal Precht 2021-05-06 13:10:17 +02:00 committed by Pascal Precht
parent f4b5b271a8
commit f3a6c9f4be
3 changed files with 105 additions and 1 deletions

View File

@ -1,4 +1,5 @@
import QtQuick 2.14 import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14 import QtQuick.Layouts 1.14
import StatusQ.Core 0.1 import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
@ -21,5 +22,32 @@ GridLayout {
StatusIconTabButton { StatusIconTabButton {
name: "#status" name: "#status"
} }
}
Button {
text: "Hover me!"
StatusToolTip {
visible: parent.hovered
text: "Top"
}
StatusToolTip {
visible: parent.hovered
text: "Right"
orientation: StatusToolTip.Orientation.Right
x: parent.width + 16
y: parent.height / 2 - height / 2 + 4
}
StatusToolTip {
visible: parent.hovered
text: "Bottom"
orientation: StatusToolTip.Orientation.Bottom
y: parent.height + 12
}
StatusToolTip {
visible: parent.hovered
text: "Left"
orientation: StatusToolTip.Orientation.Left
x: -parent.width /2 -8
y: parent.height / 2 - height / 2 + 4
}
}
}

View File

@ -0,0 +1,75 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
ToolTip {
id: statusToolTip
enum Orientation {
Top,
Bottom,
Left,
Right
}
property int maxWidth: 800
property int orientation: StatusToolTip.Orientation.Top
implicitWidth: Math.min(maxWidth, textContent.implicitWidth + 16)
leftPadding: 8
rightPadding: 8
topPadding: 8
bottomPadding: 8
delay: 200
background: Item {
id: statusToolTipBackground
Rectangle {
id: statusToolTipContentBackground
color: Theme.palette.black
radius: 8
anchors.fill: parent
anchors.bottomMargin: 8
}
Rectangle {
color: statusToolTipContentBackground.color
height: 20
width: 20
rotation: 45
radius: 1
x: {
if (orientation === StatusToolTip.Orientation.Top || orientation === StatusToolTip.Orientation.Bottom) {
return statusToolTipBackground.width / 2 - width / 2
}
if (orientation === StatusToolTip.Orientation.Left) {
return statusToolTipContentBackground.width - (width / 2) - 8
}
if (orientation === StatusToolTip.Orientation.Right) {
return -width/2 + 8
}
}
y: {
if (orientation === StatusToolTip.Orientation.Bottom) {
return -height / 2 + 5
}
if (orientation === StatusToolTip.Orientation.Top) {
return statusToolTipBackground.height - height - 5
}
if (orientation === StatusToolTip.Orientation.Left || orientation === StatusToolTip.Orientation.Right) {
return statusToolTipContentBackground.height / 2 - (height / 2)
}
}
}
}
contentItem: StatusBaseText {
id: textContent
text: statusToolTip.text
color: Theme.palette.white
wrapMode: Text.WordWrap
font.pixelSize: 13
font.weight: Font.Medium
horizontalAlignment: Text.AlignHCenter
bottomPadding: 8
}
}

View File

@ -1,4 +1,5 @@
module StatusQ.Controls module StatusQ.Controls
StatusIconTabButton 0.1 StatusIconTabButton.qml StatusIconTabButton 0.1 StatusIconTabButton.qml
StatusToolTip 0.1 StatusToolTip.qml