diff --git a/src/qmlcontrols/kcmcontrols/qml/GridDelegate.qml b/src/qmlcontrols/kcmcontrols/qml/GridDelegate.qml index 668a20f..7f98955 100644 --- a/src/qmlcontrols/kcmcontrols/qml/GridDelegate.qml +++ b/src/qmlcontrols/kcmcontrols/qml/GridDelegate.qml @@ -1,189 +1,209 @@ /* 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) } 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 * 2, + : 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 anchors { left: thumbnail.left right: thumbnail.right top: thumbnail.bottom - topMargin: Kirigami.Units.smallSpacing + 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 + } + 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 } diff --git a/src/qmlcontrols/kcmcontrols/qml/private/GridViewInternal.qml b/src/qmlcontrols/kcmcontrols/qml/private/GridViewInternal.qml index 8c65082..b55dea3 100644 --- a/src/qmlcontrols/kcmcontrols/qml/private/GridViewInternal.qml +++ b/src/qmlcontrols/kcmcontrols/qml/private/GridViewInternal.qml @@ -1,66 +1,66 @@ /* Copyright (c) 2019 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.7 import QtQuick.Layouts 1.1 import QtQuick.Controls 2.2 as QtControls import org.kde.kirigami 2.3 as Kirigami GridView { id: view property int implicitCellWidth: Kirigami.Units.gridUnit * 10 - property int implicitCellHeight: Math.round(implicitCellWidth / 1.6) + Kirigami.Units.gridUnit*2 + property int implicitCellHeight: Math.round(implicitCellWidth / 1.6) + Kirigami.Units.gridUnit*3 onCurrentIndexChanged: positionViewAtIndex(currentIndex, GridView.Contain); QtObject { id: internal readonly property int availableWidth: scroll.width - internal.scrollBarSpace - 4 readonly property int scrollBarSpace: scroll.QtControls.ScrollBar.vertical.width } anchors { fill: parent margins: 2 leftMargin: scroll.QtControls.ScrollBar.vertical.visible ? 2 : internal.scrollBarSpace/2 + 2 } clip: true activeFocusOnTab: true cellWidth: Math.floor(internal.availableWidth / Math.max(Math.floor(internal.availableWidth / (implicitCellWidth + Kirigami.Units.gridUnit)), 2)) cellHeight: Kirigami.Settings.isMobile ? cellWidth/1.6 + Kirigami.Units.gridUnit : implicitCellHeight keyNavigationEnabled: true keyNavigationWraps: true highlightMoveDuration: 0 remove: Transition { ParallelAnimation { NumberAnimation { property: "scale"; to: 0.5; duration: Kirigami.Units.longDuration } NumberAnimation { property: "opacity"; to: 0.0; duration: Kirigami.Units.longDuration } } } removeDisplaced: Transition { SequentialAnimation { // wait for the "remove" animation to finish PauseAnimation { duration: Kirigami.Units.longDuration } NumberAnimation { properties: "x,y"; duration: Kirigami.Units.longDuration } } } }