contents/ui/CompactRepresentation.qml

0001 /*
0002     SPDX-FileCopyrightText: 2015 Kai Uwe Broulik <kde@privat.broulik.de>
0003
0004     SPDX-License-Identifier: GPL-2.0-or-later
0005 */
0006
0007 import QtQuick 2.15
0008 import QtQuick.Layouts 1.15
0009
0010 import org.kde.kwindowsystem 1.0
0011 import org.kde.plasma.core as PlasmaCore
0012 import org.kde.kirigami 2.20 as Kirigami
0013 import org.kde.plasma.components 3.0 as PlasmaComponents3
0014 import org.kde.plasma.plasmoid 2.0
0015 import org.kde.plasma.private.colorpicker 2.0 as ColorPicker
0016
0017 import "logic.js" as Logic
0018
0019 DropArea {
0020     id: dropArea
0021
0022     Layout.minimumWidth: root.isVertical ? Kirigami.Units.iconSizes.small : (grid.width + spacer.implicitWidth)
0023     Layout.minimumHeight: root.isVertical ? (grid.height + spacer.implicitHeight) : Kirigami.Units.iconSizes.small
0024     Layout.preferredWidth: Layout.minimumWidth
0025     Layout.preferredHeight: Layout.minimumHeight
0026
0027     readonly property real buttonSize: root.isVertical ? parent.width : parent.height
0028     property bool containsAcceptableDrag: false
0029
0030     onEntered: containsAcceptableDrag = (drag.hasColor || drag.hasUrls || ColorPicker.Utils.isValidColor(drag.text))
0031     onExited: containsAcceptableDrag = false
0032     onDropped: {
0033         if (drop.hasColor) {
0034             addColorToHistory(drop.colorData)
0035         } else if (ColorPicker.Utils.isValidColor(drop.text)) {
0036             addColorToHistory(drop.text)
0037         } else if (drop.hasUrls) {
0038             // Show loading indicator above the pick button if there are more than 1 circle
0039             const indicatorParent = circleRepeater.count === 1 ? circleRepeater.itemAt(0) : pickColorButton;
0040             Logic.showLoadingIndicator(indicatorParent, drop.urls);
0041             const component = Qt.createComponent("ImageColors.qml");
0042             drop.urls.forEach(path => {
0043                 component.incubateObject(indicatorParent, {
0044                     "source": path,
0045                     "loadingIndicator": indicatorParent.loadingIndicator,
0046                 }, Qt.Asynchronous);
0047             });
0048             component.destroy();
0049         }
0050         containsAcceptableDrag = false
0051     }
0052
0053     GridLayout {
0054         id: grid
0055
0056         width: root.isVertical ? dropArea.buttonSize : implicitWidth
0057         height: root.isVertical ? implicitHeight : dropArea.buttonSize
0058
0059         columns: root.isVertical ? 1 : (1 + (circleRepeater.count > 0 ? circleRepeater.count + 1 : 0))
0060         rows: root.isVertical ? (1 + (circleRepeater.count > 0 ? circleRepeater.count + 1 : 0)) : 1
0061         rowSpacing: 0
0062         columnSpacing: 0
0063
0064         PlasmaComponents3.ToolButton {
0065             id: pickColorButton
0066
0067             Layout.preferredWidth: dropArea.buttonSize
0068             Layout.preferredHeight: dropArea.buttonSize
0069
0070             property Item loadingIndicator: null
0071
0072             display: PlasmaComponents3.AbstractButton.IconOnly
0073             enabled: KWindowSystem.isPlatformWayland || KX11Extras.compositingActive
0074             text: i18nc("@info:tooltip", "Pick color")
0075
0076             onClicked: root.pickColor()
0077
0078             PlasmaCore.ToolTipArea {
0079                 anchors.fill: parent
0080                 mainText: parent.text
0081                 subText: xi18nc("@info:usagetip", "Drag a color code here to save it<nl/>Drag an image file here to get its average color");
0082             }
0083
0084             Kirigami.Icon {
0085                 id: pickerIcon
0086                 anchors.centerIn: parent
0087                 width: Math.round(parent.width * 0.9)
0088                 height: width
0089                 source: "color-picker"
0090                 active: parent.hovered
0091             }
0092         }
0093
0094         Item { // spacer
0095             id: spacer
0096
0097             readonly property real thickness: dropArea.buttonSize / Kirigami.Units.iconSizes.small
0098
0099             Layout.preferredWidth: root.isVertical ? parent.width : thickness
0100             Layout.preferredHeight: root.isVertical ? thickness : parent.height
0101             visible: circleRepeater.count > 0
0102
0103             Rectangle {
0104                 anchors.centerIn: parent
0105                 width: circleRepeater.count > 0 ? Math.min(parent.width, circleRepeater.itemAt(0).colorCircle.width) : 0
0106                 height: circleRepeater.count > 0 ? Math.min(parent.height, circleRepeater.itemAt(0).colorCircle.height) : 0
0107                 color: Kirigami.Theme.textColor
0108                 opacity: 0.6
0109             }
0110         }
0111
0112         Repeater {
0113             id: circleRepeater
0114
0115             model: Plasmoid.configuration.compactPreviewCount
0116
0117             delegate: ColorCircle {
0118                 Layout.preferredWidth: dropArea.buttonSize
0119                 Layout.preferredHeight: dropArea.buttonSize
0120
0121                 color: historyModel.count > index ? historyModel.get(index).color : "#00000000" // transparent as fallback
0122             }
0123         }
0124     }
0125 }