From 6c947d2cb928c6e5d4aae006ef908d67f2a2462f Mon Sep 17 00:00:00 2001 From: Christian Mollekopf Date: Mon, 20 Aug 2018 09:31:35 +0200 Subject: Tooltip for truncated calendars --- views/calendar/qml/View.qml | 80 +++++++++++++++++++++++++-------------------- 1 file changed, 45 insertions(+), 35 deletions(-) diff --git a/views/calendar/qml/View.qml b/views/calendar/qml/View.qml index 5820ab87..829d04cc 100644 --- a/views/calendar/qml/View.qml +++ b/views/calendar/qml/View.qml @@ -136,46 +136,56 @@ RowLayout { type: "calendar" roles: ["name", "color"] } - delegate: RowLayout { + delegate: ItemDelegate { + id: delegate width: listView.availableWidth height: Kube.Units.gridUnit - spacing: Kube.Units.smallSpacing - Kube.CheckBox { - id: checkBox - opacity: 0.9 - checked: !model.checked - onToggled: model.checked = !checked - - indicator: Rectangle { - width: Kube.Units.gridUnit - height: Kube.Units.gridUnit - - color: model.color - - Rectangle { - id: highlight - anchors.fill: parent - visible: checkBox.hovered || checkBox.visualFocus - color: Kube.Colors.highlightColor - opacity: 0.4 - } - - Kube.Icon { - anchors.centerIn: parent - height: Kube.Units.gridUnit + RowLayout { + anchors.fill: parent + spacing: Kube.Units.smallSpacing + Kube.CheckBox { + id: checkBox + opacity: 0.9 + checked: !model.checked + onToggled: model.checked = !checked + + indicator: Rectangle { width: Kube.Units.gridUnit - visible: checkBox.checked - iconName: Kube.Icons.checkbox_inverted + height: Kube.Units.gridUnit + + color: model.color + + Rectangle { + id: highlight + anchors.fill: parent + visible: checkBox.hovered || checkBox.visualFocus + color: Kube.Colors.highlightColor + opacity: 0.4 + } + + Kube.Icon { + anchors.centerIn: parent + height: Kube.Units.gridUnit + width: Kube.Units.gridUnit + visible: checkBox.checked + iconName: Kube.Icons.checkbox_inverted + } } - } - } - Kube.Label { - Layout.fillWidth: true - text: model.name - color: Kube.Colors.highlightedTextColor - elide: Text.ElideLeft - clip: true + } + Kube.Label { + id: label + Layout.fillWidth: true + text: model.name + color: Kube.Colors.highlightedTextColor + elide: Text.ElideLeft + clip: true + } + ToolTip { + id: toolTipItem + visible: delegate.hovered && label.truncated + text: label.text + } } } } -- cgit v1.2.3