diff --git a/ui/StatusQ/sandbox/Controls.qml b/ui/StatusQ/sandbox/Controls.qml index ba7ceac194..d81b177377 100644 --- a/ui/StatusQ/sandbox/Controls.qml +++ b/ui/StatusQ/sandbox/Controls.qml @@ -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 + } + } +} diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusToolTip.qml b/ui/StatusQ/src/StatusQ/Controls/StatusToolTip.qml new file mode 100644 index 0000000000..d0984fac85 --- /dev/null +++ b/ui/StatusQ/src/StatusQ/Controls/StatusToolTip.qml @@ -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 + } +} + diff --git a/ui/StatusQ/src/StatusQ/Controls/qmldir b/ui/StatusQ/src/StatusQ/Controls/qmldir index a18f776073..b15886762c 100644 --- a/ui/StatusQ/src/StatusQ/Controls/qmldir +++ b/ui/StatusQ/src/StatusQ/Controls/qmldir @@ -1,4 +1,5 @@ module StatusQ.Controls StatusIconTabButton 0.1 StatusIconTabButton.qml +StatusToolTip 0.1 StatusToolTip.qml