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