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
11d2d2e883
commit
cc6d28b7ce
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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
|
module StatusQ.Controls
|
||||||
|
|
||||||
StatusIconTabButton 0.1 StatusIconTabButton.qml
|
StatusIconTabButton 0.1 StatusIconTabButton.qml
|
||||||
|
StatusToolTip 0.1 StatusToolTip.qml
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue