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:
parent
f4b5b271a8
commit
f3a6c9f4be
|
@ -1,4 +1,5 @@
|
|||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
@ -21,5 +22,32 @@ GridLayout {
|
|||
StatusIconTabButton {
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
module StatusQ.Controls
|
||||
|
||||
StatusIconTabButton 0.1 StatusIconTabButton.qml
|
||||
StatusToolTip 0.1 StatusToolTip.qml
|
||||
|
||||
|
|
Loading…
Reference in New Issue