style/qtquickcontrols/ToolTip.qml

0001 /* SPDX-FileCopyrightText: 2020 Noah Davis <noahadvs@gmail.com>
0002  * SPDX-License-Identifier: LGPL-2.1-only OR LGPL-3.0-only OR LicenseRef-KDE-Accepted-LGPL
0003  */
0004
0005 import QtQuick
0006 import QtQuick.Layouts
0007 import QtQuick.Window
0008 import QtQuick.Controls as Controls
0009 import QtQuick.Templates as T
0010 import org.kde.kirigami as Kirigami
0011 import org.kde.breeze.impl as Impl
0012
0013 /* NOTE:
0014  * It took a LOT of trial and error to get the text to fit in a specific
0015  * area and also to get the background to fit the text. If you're trying
0016  * to figure out how to do the same thing, please copy what I did so
0017  * that you don't have to experience the same amount of pain.
0018  *  - Noah Davis
0019  */
0020
0021 T.ToolTip {
0022     id: control
0023
0024     // 180pt | 2.5in | 63.5mm
0025     // This value is basically arbitrary. It just looks nice.
0026     property real __preferredWidth: Screen.pixelDensity * 63.5 * Screen.devicePixelRatio
0027
0028     contentWidth: {
0029         // Always ceil text widths since they're usually not integers.
0030         // Using round or floor can cause text to wrap or elide.
0031         let implicitContentOrFirstChildWidth = Math.ceil(implicitContentWidth || (contentChildren.length === 1 ? contentChildren[0].implicitWidth : 0))
0032
0033         /* HACK: Adding 1 prevents the right side from sometimes having an
0034          * unnecessary amount of padding. This could fail to fix the issue
0035          * in some contexts, but it seems to work with Noto Sans at 10pts,
0036          * 10.5pts and 11pts.
0037          */
0038         // If contentWidthSource isn't available, cWidth = 0
0039         let cWidth = Math.ceil(contentWidthSource.contentWidth ?? -1) + 1
0040         return cWidth > 0 ? cWidth : implicitContentOrFirstChildWidth
0041     }
0042
0043     // palette: Kirigami.Theme.palette
0044     Kirigami.Theme.colorSet: Kirigami.Theme.Tooltip
0045     Kirigami.Theme.inherit: false
0046
0047     x: parent ? Math.round((parent.width - implicitWidth) / 2) : 0
0048     y: -implicitHeight - Kirigami.Units.smallSpacing
0049     // Always show the tooltip on top of everything else
0050     z: 999
0051
0052     implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
0053                             contentWidth + leftPadding + rightPadding)
0054     implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
0055                              contentHeight + topPadding + bottomPadding)
0056
0057     padding: Kirigami.Units.mediumSpacing
0058     horizontalPadding: Impl.Units.mediumHorizontalPadding
0059
0060     closePolicy: T.Popup.CloseOnEscape | T.Popup.CloseOnPressOutsideParent | T.Popup.CloseOnReleaseOutsideParent
0061
0062     delay: Kirigami.Units.toolTipDelay
0063
0064     enter: Transition {
0065         OpacityAnimator {
0066             from: 0
0067             to: 1
0068             easing.type: Easing.OutCubic
0069             duration: Kirigami.Units.shortDuration
0070         }
0071     }
0072
0073     exit: Transition {
0074         OpacityAnimator {
0075             from: 1
0076             to: 0
0077             easing.type: Easing.InCubic
0078             duration: Kirigami.Units.shortDuration
0079         }
0080     }
0081
0082     contentItem: Controls.Label {
0083         text: control.text
0084         font: control.font
0085         wrapMode: Text.WordWrap
0086
0087         // This code looks ugly, but I can't think of anything less ugly
0088         // that is just as reliable. TextMetrics doesn't support WordWrap.
0089         Text {
0090             id: contentWidthSource
0091             visible: false
0092             width: control.__preferredWidth
0093             text: parent.text
0094             font: parent.font
0095             wrapMode: parent.wrapMode
0096             renderType: parent.renderType
0097             horizontalAlignment: parent.horizontalAlignment
0098             verticalAlignment: parent.verticalAlignment
0099             elide: parent.elide
0100             fontSizeMode: parent.fontSizeMode
0101             lineHeight: parent.lineHeight
0102             lineHeightMode: parent.lineHeightMode
0103             // Make the 1st line the longest to make text alignment a bit prettier.
0104             maximumLineCount: 1
0105             minimumPixelSize: parent.minimumPixelSize
0106             minimumPointSize: parent.minimumPointSize
0107             style: parent.style
0108             textFormat: parent.textFormat
0109         }
0110     }
0111
0112     background: Rectangle {
0113         implicitWidth: implicitHeight
0114         implicitHeight: Impl.Units.mediumControlHeight
0115         radius: Impl.Units.smallRadius
0116         color: Kirigami.Theme.backgroundColor
0117         border.width: Impl.Units.smallBorder
0118         border.color: Impl.Theme.separatorColor()
0119
0120         Impl.LargeShadow {
0121             radius: parent.radius
0122         }
0123     }
0124
0125     T.Overlay.modal: Impl.OverlayModalBackground {}
0126     T.Overlay.modeless: Impl.OverlayDimBackground {}
0127 }