colors/ui/main.qml

0001 /*
0002     SPDX-FileCopyrightText: 2018 Kai Uwe Broulik <kde@privat.broulik.de>
0003
0004     SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
0005 */
0006
0007 import QtCore
0008 import QtQuick 2.6
0009 import QtQuick.Layouts 1.1
0010 import QtQuick.Window 2.2
0011 import QtQuick.Dialogs 6.3 as QtDialogs
0012 import QtQuick.Controls 2.3 as QtControls
0013 import QtQuick.Templates 2.3 as T
0014 import QtQml 2.15
0015
0016 import org.kde.kirigami 2.8 as Kirigami
0017 import org.kde.newstuff 1.91 as NewStuff
0018 import org.kde.kcmutils as KCM
0019 import org.kde.private.kcms.colors 1.0 as Private
0020
0021 KCM.GridViewKCM {
0022     id: root
0023
0024     view.model: kcm.filteredModel
0025     view.currentIndex: kcm.filteredModel.selectedSchemeIndex
0026
0027     Binding {
0028         target: kcm.filteredModel
0029         property: "query"
0030         value: searchField.text
0031         restoreMode: Binding.RestoreBinding
0032     }
0033
0034     Binding {
0035         target: kcm.filteredModel
0036         property: "filter"
0037         value:  filterCombo.model[filterCombo.currentIndex].filter
0038         restoreMode: Binding.RestoreBinding
0039     }
0040
0041     KCM.SettingStateBinding {
0042         configObject: kcm.colorsSettings
0043         settingName: "colorScheme"
0044         extraEnabledConditions: !kcm.downloadingFile
0045     }
0046
0047     KCM.SettingHighlighter {
0048         target: colourFlow
0049         highlight: !Qt.colorEqual(kcm.accentColor, "transparent")
0050     }
0051
0052     // The thumbnails are a bit more elaborate and need more room, especially when translated
0053     view.implicitCellWidth: Kirigami.Units.gridUnit * 15
0054     view.implicitCellHeight: Kirigami.Units.gridUnit * 13
0055
0056     // we have a duplicate property here as "var" instead of "color", so that we
0057     // can set it to "undefined", which lets us use the "a || b" shorthand for
0058     // "a if a is defined, otherwise b"
0059     readonly property var accentColor: Qt.colorEqual(kcm.accentColor, "transparent") ? undefined : kcm.accentColor
0060
0061     DropArea {
0062         anchors.fill: parent
0063         onEntered: {
0064             if (!drag.hasUrls) {
0065                 drag.accepted = false;
0066             }
0067         }
0068         onDropped: {
0069             infoLabel.visible = false;
0070             kcm.installSchemeFromFile(drop.urls[0]);
0071         }
0072     }
0073
0074     // putting the InlineMessage as header item causes it to show up initially despite visible false
0075     header: ColumnLayout {
0076         Kirigami.InlineMessage {
0077             id: notInstalledWarning
0078             Layout.fillWidth: true
0079
0080             type: Kirigami.MessageType.Warning
0081             showCloseButton: true
0082             visible: false
0083
0084             Connections {
0085                 target: kcm
0086                 function onShowSchemeNotInstalledWarning(schemeName) {
0087                     notInstalledWarning.text = i18n("The color scheme '%1' is not installed. Selecting the default theme instead.", schemeName)
0088                     notInstalledWarning.visible = true;
0089                 }
0090             }
0091         }
0092
0093         AccentColorUI {
0094             id: colourFlow
0095             Layout.topMargin: Kirigami.Units.smallSpacing
0096             Layout.bottomMargin: Kirigami.Units.smallSpacing
0097         }
0098
0099         RowLayout {
0100             Layout.fillWidth: true
0101
0102             Kirigami.SearchField {
0103                 id: searchField
0104                 Layout.fillWidth: true
0105             }
0106
0107             QtControls.ComboBox {
0108                 id: filterCombo
0109                 Layout.rightMargin: parent.spacing * 3
0110                 textRole: "text"
0111                 model: [
0112                     {text: i18n("All Schemes"), filter: Private.KCM.AllSchemes},
0113                     {text: i18n("Light Schemes"), filter: Private.KCM.LightSchemes},
0114                     {text: i18n("Dark Schemes"), filter: Private.KCM.DarkSchemes}
0115                 ]
0116
0117                 // HACK QQC2 doesn't support icons, so we just tamper with the desktop style ComboBox's background
0118                 // and inject a nice little filter icon.
0119                 Component.onCompleted: {
0120                     if (!background || !background.hasOwnProperty("properties")) {
0121                         // not a KQuickStyleItem
0122                         return;
0123                     }
0124
0125                     var props = background.properties || {};
0126
0127                     background.properties = Qt.binding(function() {
0128                         var newProps = props;
0129                         newProps.currentIcon = "view-filter";
0130                         newProps.iconColor = Kirigami.Theme.textColor;
0131                         return newProps;
0132                     });
0133                 }
0134             }
0135         }
0136     }
0137
0138     actions: [
0139         Kirigami.Action {
0140             text: i18n("Install from File…")
0141             icon.name: "document-import"
0142             onTriggered: fileDialogLoader.active = true
0143         },
0144         NewStuff.Action {
0145             text: i18n("Get New…")
0146             configFile: "colorschemes.knsrc"
0147             onEntryEvent: function (entry, event) {
0148                 if (event == NewStuff.Entry.StatusChangedEvent) {
0149                     kcm.knsEntryChanged(entry)
0150                 } else if (event == NewStuff.Entry.AdoptedEvent) {
0151                     kcm.loadSelectedColorScheme()
0152                 }
0153             }
0154         }
0155     ]
0156
0157     view.delegate: KCM.GridDelegate {
0158         id: delegate
0159
0160         text: model.display
0161
0162         thumbnailAvailable: true
0163         thumbnail: Rectangle {
0164             anchors.fill: parent
0165
0166             opacity: model.pendingDeletion ? 0.3 : 1
0167             Behavior on opacity {
0168                 NumberAnimation { duration: Kirigami.Units.longDuration }
0169             }
0170
0171             color: kcm.tinted(model.palette.window, kcm.accentColor, model.tints, model.tintFactor)
0172
0173             Kirigami.Theme.inherit: false
0174             Kirigami.Theme.highlightColor: root.accentColor || model.palette.highlight
0175             Kirigami.Theme.textColor: kcm.tinted(model.palette.text, kcm.accentColor, model.tints, model.tintFactor)
0176
0177             Rectangle {
0178                 id: windowTitleBar
0179                 width: parent.width
0180                 height: Math.round(Kirigami.Units.gridUnit * 1.5)
0181                 color: kcm.tinted((model.accentActiveTitlebar && root.accentColor) ? kcm.accentBackground(root.accentColor, model.palette.window) : model.activeTitleBarBackground, kcm.accentColor, model.tints, model.tintFactor)
0182
0183                 QtControls.Label {
0184                     anchors {
0185                         fill: parent
0186                         leftMargin: Kirigami.Units.smallSpacing
0187                         rightMargin: Kirigami.Units.smallSpacing
0188                     }
0189                     horizontalAlignment: Text.AlignHCenter
0190                     verticalAlignment: Text.AlignVCenter
0191                     color: (model.accentActiveTitlebar && root.accentColor) ? kcm.accentForeground(kcm.accentBackground(root.accentColor, model.palette.window), true) : model.activeTitleBarForeground
0192                     text: i18n("Window Title")
0193                     textFormat: Text.PlainText
0194                     elide: Text.ElideRight
0195                 }
0196             }
0197
0198             ColumnLayout {
0199                 anchors {
0200                     left: parent.left
0201                     right: parent.right
0202                     top: windowTitleBar.bottom
0203                     bottom: parent.bottom
0204                     margins: Kirigami.Units.smallSpacing
0205                 }
0206                 spacing: Kirigami.Units.smallSpacing
0207
0208                 RowLayout {
0209                     Layout.fillWidth: true
0210
0211                     QtControls.Label {
0212                         Layout.fillWidth: true
0213                         Layout.fillHeight: true
0214                         verticalAlignment: Text.AlignVCenter
0215                         text: i18n("Window text")
0216                         textFormat: Text.PlainText
0217                         elide: Text.ElideRight
0218                         color: model.palette.windowText
0219                     }
0220
0221                     QtControls.Button {
0222                         Layout.alignment: Qt.AlignBottom
0223                         text: i18n("Button")
0224                         Kirigami.Theme.inherit: false
0225                         Kirigami.Theme.highlightColor: kcm.tinted(root.accentColor ? kcm.accentBackground(root.accentColor, model.palette.base) : model.palette.highlight, kcm.accentColor, model.tints, model.tintFactor)
0226                         Kirigami.Theme.backgroundColor: kcm.tinted(model.palette.button, kcm.accentColor, model.tints, model.tintFactor)
0227                         Kirigami.Theme.textColor: kcm.tinted(model.palette.buttonText, kcm.accentColor, model.tints, model.tintFactor)
0228                         activeFocusOnTab: false
0229                     }
0230                 }
0231
0232                 QtControls.Frame {
0233                     Layout.fillWidth: true
0234                     Layout.fillHeight: true
0235                     padding: 0
0236
0237                     activeFocusOnTab: false
0238
0239                     // Frame by default has a transparent background, override it so we can use the view color
0240                     // instead.
0241                     background: Rectangle {
0242                         color: Kirigami.Theme.backgroundColor
0243                         border.width: 1
0244                         border.color: kcm.tinted(Qt.rgba(model.palette.text.r, model.palette.text.g, model.palette.text.b, 0.3), kcm.accentColor, model.tints, model.tintFactor)
0245                     }
0246
0247                     // We need to set inherit to false here otherwise the child ItemDelegates will not use the
0248                     // alternative base color we set here.
0249                     Kirigami.Theme.inherit: false
0250                     Kirigami.Theme.backgroundColor: kcm.tinted(model.palette.base, kcm.accentColor, model.tints, model.tintFactor)
0251                     Kirigami.Theme.disabledTextColor: kcm.tinted(model.disabledText, kcm.accentColor, model.tints, model.tintFactor)
0252                     Kirigami.Theme.highlightColor: kcm.tinted(root.accentColor ? kcm.accentBackground(root.accentColor, model.palette.base) : model.palette.highlight, kcm.accentColor, model.tints, model.tintFactor)
0253                     Kirigami.Theme.highlightedTextColor: kcm.tinted(root.accentColor ? kcm.accentForeground(kcm.accentBackground(root.accentColor, model.palette.base), true) : model.palette.highlightedText, kcm.accentColor, model.tints, model.tintFactor)
0254                     Kirigami.Theme.linkColor: kcm.tinted(root.accentColor || model.palette.link, kcm.accentColor, model.tints, model.tintFactor)
0255                     Kirigami.Theme.textColor: kcm.tinted(model.palette.text, kcm.accentColor, model.tints, model.tintFactor)
0256
0257                     Column {
0258                         id: listPreviewColumn
0259
0260                         function demoText(palette) {
0261                             return " <a href='#'><font color='%1'>%2</font></a> <a href='#'><font color='%3'>%4</font></a>"
0262                             .arg(palette.link)
0263                             .arg(i18nc("Hyperlink", "link"))
0264                             .arg(palette.linkVisited)
0265                             .arg(i18nc("Visited hyperlink", "visited"));
0266                         }
0267
0268                         anchors.fill: parent
0269                         anchors.margins: 1
0270
0271                         QtControls.ItemDelegate {
0272                             width: parent.width
0273                             text: i18n("Normal text") + listPreviewColumn.demoText(model.palette)
0274                             activeFocusOnTab: false
0275                         }
0276
0277                         QtControls.ItemDelegate {
0278                             width: parent.width
0279                             highlighted: true
0280                             text: i18n("Highlighted text") + listPreviewColumn.demoText(model.selectedPalette)
0281                             activeFocusOnTab: false
0282                         }
0283
0284                         QtControls.ItemDelegate {
0285                             width: parent.width
0286                             enabled: false
0287                             text: i18n("Disabled text") + listPreviewColumn.demoText(model.palette)
0288                             activeFocusOnTab: false
0289                         }
0290                     }
0291                 }
0292             }
0293
0294             // Make the preview non-clickable but still reacting to hover
0295             MouseArea {
0296                 anchors.fill: parent
0297                 onClicked: delegate.clicked()
0298                 onDoubleClicked: delegate.doubleClicked()
0299             }
0300         }
0301
0302         actions: [
0303             Kirigami.Action {
0304                 icon.name: "document-edit"
0305                 tooltip: i18n("Edit Color Scheme…")
0306                 enabled: !model.pendingDeletion
0307                 onTriggered: kcm.editScheme(model.schemeName, root)
0308             },
0309             Kirigami.Action {
0310                 icon.name: "edit-delete"
0311                 tooltip: i18n("Remove Color Scheme")
0312                 enabled: model.removable
0313                 visible: !model.pendingDeletion
0314                 onTriggered: model.pendingDeletion = true
0315             },
0316             Kirigami.Action {
0317                 icon.name: "edit-undo"
0318                 tooltip: i18n("Restore Color Scheme")
0319                 visible: model.pendingDeletion
0320                 onTriggered: model.pendingDeletion = false
0321             }
0322         ]
0323         onClicked: {
0324             kcm.model.selectedScheme = model.schemeName;
0325             view.forceActiveFocus();
0326         }
0327         onDoubleClicked: {
0328             kcm.save();
0329         }
0330     }
0331
0332     footer: ColumnLayout {
0333         Kirigami.InlineMessage {
0334             id: infoLabel
0335             Layout.fillWidth: true
0336
0337             showCloseButton: true
0338
0339             Connections {
0340                 target: kcm
0341                 function onShowSuccessMessage(message) {
0342                     infoLabel.type = Kirigami.MessageType.Positive;
0343                     infoLabel.text = message;
0344                     infoLabel.visible = true;
0345                     // Avoid dual message widgets
0346                     notInstalledWarning.visible = false;
0347                 }
0348                 function onShowErrorMessage(message) {
0349                     infoLabel.type = Kirigami.MessageType.Error;
0350                     infoLabel.text = message;
0351                     infoLabel.visible = true;
0352                     notInstalledWarning.visible = false;
0353                 }
0354             }
0355         }
0356     }
0357
0358     Loader {
0359         id: fileDialogLoader
0360         active: false
0361         sourceComponent: QtDialogs.FileDialog {
0362             title: i18n("Open Color Scheme")
0363             currentFolder: StandardPaths.standardLocations(StandardPaths.HomeLocation)[0]
0364             nameFilters: [ i18n("Color Scheme Files (*.colors)") ]
0365             Component.onCompleted: open()
0366             onAccepted: {
0367                 infoLabel.visible = false;
0368                 kcm.installSchemeFromFile(selectedFile)
0369                 fileDialogLoader.active = false
0370             }
0371             onRejected: {
0372                 fileDialogLoader.active = false
0373             }
0374         }
0375     }
0376 }