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:
parent
adfc3a7752
commit
d285b818f6
@ -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
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user