Improve tooltip layouting

This patch ports the default tooltip away from custom spacing,
positioning and Row/Column to QtQuick.Layouts. It makes the sizing more
predictable, and the code more modern and readable. Tooltips feel to
behave a bit smoother with this patch.

In the process, this...
- fixes spacing when no icon or image is set
- limits the maximum height of the subtext to 8 lines (this prevents the
  klipper tooltip for example from growing super-high)
- Makes the icon on the LHS proportional to the text
- Limits the width a bit more to prevent super-wide tooltips
- makes it use units.gridUnit throughout

Changelog: Improve tooltip layout
REVIEW:122717
This commit is contained in:
Sebastian Kügler 2015-02-26 16:25:52 +01:00
parent adfc3a7752
commit d285b818f6

View File

@ -1,5 +1,5 @@
/*
* Copyright 2013 by Sebastian Kügler <sebas@kde.org>
* Copyright 2013-2015 by Sebastian Kügler <sebas@kde.org>
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU Library General Public License as
@ -22,71 +22,71 @@ import QtQuick.Layouts 1.1
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents
import org.kde.plasma.extras 2.0 as PlasmaExtras
import org.kde.kquickcontrolsaddons 2.0 as KQuickControlsAddons
Row {
Item {
id: tooltipContentItem
property Item toolTip
property int preferredTextWidth: units.gridUnit * 20
property int preferredTextWidth: theme.mSize(theme.defaultFont).width * 40
property int _s: imageContainer.visible || (toolTip.mainText != "" && toolTip.subText != "") ? units.largeSpacing / 2 : 0
Layout.minimumWidth: childrenRect.width + units.gridUnit
Layout.minimumHeight: childrenRect.height + units.gridUnit
Layout.maximumWidth: childrenRect.width + units.gridUnit
Layout.maximumHeight: childrenRect.height + units.gridUnit
Layout.minimumWidth: implicitWidth + _s
Layout.minimumHeight: implicitHeight + _s * 2
Layout.maximumWidth: implicitWidth + _s
Layout.maximumHeight: implicitHeight + _s * 2
width: implicitWidth + _s
height: implicitHeight + _s * 2
RowLayout {
spacing: _s*2
anchors {
left: parent.left
top: parent.top
margins: units.gridUnit / 2
}
Item {
id: imageContainer
visible: toolTip != null && (toolTip.image != "" || toolTip.icon != "")
width: Math.max(tooltipImage.width, tooltipIcon.width)
height: Math.max(tooltipImage.height, tooltipIcon.height)
x: _s
y: _s
spacing: units.gridUnit / 2
Image {
id: tooltipImage
source: toolTip ? toolTip.image : ""
x: _s
visible: toolTip != null && toolTip.image != ""
Layout.alignment: Qt.AlignTop
}
PlasmaCore.IconItem {
id: tooltipIcon
x: _s
width: toolTip != undefined && toolTip.icon != null ? units.iconSizes.desktop : 0
height: width
source: toolTip != undefined && toolTip.icon != null ? toolTip.icon : ""
}
source: toolTip ? toolTip.icon : ""
Layout.alignment: Qt.AlignTop
visible: toolTip != null && toolTip.icon != "" && toolTip.image == ""
implicitWidth: toolTip && toolTip.icon != "" ? units.iconSizes.medium : 0
Layout.preferredWidth: implicitWidth
Layout.preferredHeight: implicitWidth
}
Column {
id: mainColumn
x: _s
y: _s
ColumnLayout {
PlasmaExtras.Heading {
id: tooltipMaintext
level: 3
width: Math.min(tooltipMaintext.implicitWidth, preferredTextWidth)
property int _width: Math.min(implicitWidth, preferredTextWidth)
Layout.minimumWidth: _width
Layout.maximumWidth: _width
elide: Text.ElideRight
text: toolTip ? toolTip.mainText : ""
visible: text != ""
}
PlasmaComponents.Label {
id: tooltipSubtext
width: Math.min(tooltipSubtext.implicitWidth, preferredTextWidth)
property int _width: Math.min(implicitWidth, preferredTextWidth)
Layout.minimumWidth: _width
Layout.maximumWidth: _width
wrapMode: Text.WordWrap
text: toolTip ? toolTip.subText : ""
textFormat: toolTip.textFormat
opacity: 0.5
textFormat: toolTip ? toolTip.textFormat : Text.AutoText
opacity: 0.6
visible: text != ""
maximumLineCount: 8
}
}
}
}