diff --git a/src/qmlcontrols/kcmcontrols/qml/GridDelegate.qml b/src/qmlcontrols/kcmcontrols/qml/GridDelegate.qml index 7f98955..ac1938a 100644 --- a/src/qmlcontrols/kcmcontrols/qml/GridDelegate.qml +++ b/src/qmlcontrols/kcmcontrols/qml/GridDelegate.qml @@ -1,209 +1,215 @@ /* Copyright (c) 2015 Marco Martin This library is free software; you can redistribute it and/or modify it under the terms of the GNU Library General Public License version 2 as published by the Free Software Foundation. This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Library General Public License for more details. You should have received a copy of the GNU Library General Public License along with this library; see the file COPYING.LIB. If not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import QtQuick 2.8 import QtQuick.Layouts 1.1 import QtQuick.Controls 2.2 as Controls import QtQuick.Templates 2.2 as T2 import QtGraphicalEffects 1.0 import org.kde.kirigami 2.2 as Kirigami /** * Base delegate for KControlmodules based on Grid views of thumbnails * Use the onClicked signal handler for managing the main action when * the user clicks on the thumbnail * @inherits QtQuick.Templates.ItemDelegate */ T2.ItemDelegate { id: delegate /** * toolTip: string * string for a tooltip for the whole delegate */ property string toolTip /** * subtitle: string * optional string for the text to show below the main label */ property string subtitle /** * thumbnail: Item * the item actually implementing the thumbnail: the visualization is up to the implementation */ property alias thumbnail: thumbnailArea.data /** * thumbnailAvailable: bool * Set it to true when a thumbnail is actually available: when false, * only an icon will be shown instead of the actual thumbnail * ("edit-none" if pluginName is "None", otherwise it uses "view-preview"). */ property bool thumbnailAvailable: false /** * actions: list * A list of extra actions for the thumbnails. They will be shown as * icons on the bottom-right corner of the thumbnail on mouse over */ property list actions width: GridView.view.cellWidth height: GridView.view.cellHeight hoverEnabled: true Rectangle { id: thumbnail anchors { centerIn: parent - verticalCenterOffset: Math.ceil(-label.height/2) + verticalCenterOffset: Math.ceil(-labelLayout.height/2) } width: Kirigami.Settings.isMobile ? delegate.width - Kirigami.Units.gridUnit : Math.min(delegate.GridView.view.implicitCellWidth, delegate.width - Kirigami.Units.gridUnit) height: Kirigami.Settings.isMobile ? Math.round((delegate.width - Kirigami.Units.gridUnit) / 1.6) : Math.min(delegate.GridView.view.implicitCellHeight - Kirigami.Units.gridUnit * 3, delegate.height - Kirigami.Units.gridUnit) radius: Kirigami.Units.smallSpacing Kirigami.Theme.inherit: false Kirigami.Theme.colorSet: Kirigami.Theme.View color: { if (delegate.GridView.isCurrentItem) { return Kirigami.Theme.highlightColor; } else if (parent.hovered) { return Kirigami.Theme.highlightColor; } else { return Kirigami.Theme.backgroundColor; } } Behavior on color { ColorAnimation { duration: Kirigami.Units.longDuration easing.type: Easing.OutQuad } } Rectangle { id: thumbnailArea radius: Kirigami.Units.smallSpacing/2 anchors { fill: parent margins: Kirigami.Units.smallSpacing } color: Kirigami.Theme.backgroundColor Kirigami.Icon { visible: !delegate.thumbnailAvailable anchors.centerIn: parent width: Kirigami.Units.iconSizes.large height: width source: typeof pluginName === "string" && pluginName === "None" ? "edit-none" : "view-preview" } } Rectangle { anchors.fill: thumbnailArea visible: actionsRow.children.length > 0 opacity: Kirigami.Settings.isMobile || delegate.hovered || (actionsScope.focus) ? 1 : 0 radius: delegate.thumbnailAvailable ? 0 : thumbnailArea.radius color: Kirigami.Settings.isMobile ? "transparent" : Qt.rgba(1, 1, 1, 0.2) Behavior on opacity { PropertyAnimation { duration: Kirigami.Units.longDuration easing.type: Easing.OutQuad } } FocusScope { id: actionsScope anchors { right: parent.right rightMargin: Kirigami.Units.smallSpacing bottom: parent.bottom bottomMargin: Kirigami.Units.smallSpacing } width: actionsRow.width height: actionsRow.height RowLayout { id: actionsRow Repeater { model: delegate.actions delegate: Controls.Button { icon.name: modelData.iconName activeFocusOnTab: focus || delegate.focus onClicked: modelData.trigger() enabled: modelData.enabled visible: modelData.visible //NOTE: there aren't any global settings where to take "official" tooltip timeouts Controls.ToolTip.delay: 1000 Controls.ToolTip.timeout: 5000 Controls.ToolTip.visible: (Kirigami.Settings.isMobile ? pressed : hovered) && modelData.tooltip.length > 0 Controls.ToolTip.text: modelData.tooltip } } } } } // Bug 397367: explicitly using "delegate" as otherwise it crashes when switching between KCMs layer.enabled: delegate.GraphicsInfo.api === GraphicsInfo.OpenGL layer.effect: DropShadow { horizontalOffset: 0 verticalOffset: 2 radius: 10 samples: 32 color: Qt.rgba(0, 0, 0, 0.3) } } - Controls.Label { - id: label + ColumnLayout { + id: labelLayout + spacing: 0 anchors { left: thumbnail.left right: thumbnail.right top: thumbnail.bottom topMargin: caption.visible ? Kirigami.Units.smallSpacing : Kirigami.Units.largeSpacing } - text: delegate.text - horizontalAlignment: Text.AlignHCenter - elide: Text.ElideRight - } - Controls.Label { - id: caption - visible: delegate.subtitle.length > 0 - opacity: 0.6 - anchors { - left: thumbnail.left - right: thumbnail.right - top: label.bottom + + // FIXME: These labels are center-aligned with a maximum width instead + // of the more conventional combination of "Layout.fillWidth: true" + // and "horizontalAlignment: Text.AlignHCenter" because that combination + // triggers https://bugreports.qt.io/browse/QTBUG-49646 + Controls.Label { + Layout.alignment: Qt.AlignHCenter + Layout.maximumWidth: labelLayout.width + text: delegate.text + elide: Text.ElideRight + } + Controls.Label { + id: caption + Layout.alignment: Qt.AlignHCenter + Layout.maximumWidth: labelLayout.width + visible: delegate.subtitle.length > 0 + opacity: 0.6 + text: delegate.subtitle + font.pointSize: theme.smallestFont.pointSize + elide: Text.ElideRight } - text: delegate.subtitle - font.pointSize: theme.smallestFont.pointSize - horizontalAlignment: Text.AlignHCenter - elide: Text.ElideRight } + Controls.ToolTip.delay: 1000 Controls.ToolTip.timeout: 5000 Controls.ToolTip.visible: hovered && delegate.toolTip.length > 0 Controls.ToolTip.text: toolTip }