Warning, /plasma/plasma-workspace/kcms/colors/ui/AccentColorUI.qml is written in an unsupported language. File is not indexed.
0001 /*
0002 SPDX-FileCopyrightText: 2023 Tanbir Jishan <tantalising007@gmail.com>
0003
0004 SPDX-License-Identifier: GPL-2.0-or-later
0005 */
0006
0007 import QtQuick 2.15
0008 import QtQuick.Layouts 1.1
0009 import QtQuick.Dialogs as QtDialogs
0010 import QtQuick.Controls 2.3 as QQC2
0011 import QtQuick.Templates 2.3 as T
0012
0013 import org.kde.kirigami 2.8 as Kirigami
0014
0015 Item {
0016 id: accentColorUI
0017
0018 implicitWidth: root.width
0019 implicitHeight: colorList.height
0020
0021 // We are centering the content here if the window has more width than the content of the item.
0022 // We are taking the extra width and then adding the half of it to the left side as padding.
0023 // We will end up with same spacing at both the side of the item when there is excess width.
0024 Item {
0025 id: spacer
0026 width: Math.max(Math.round((parent.width - colorList.contentWidth) / 2), 0)
0027 anchors.left: parent.left
0028 }
0029
0030 QQC2.ComboBox {
0031 id: colorModeBox
0032 anchors.left: spacer.right
0033 anchors.verticalCenter: colorList.row === 1 ? colorList.verticalCenter : colorList.top
0034 anchors.verticalCenterOffset: colorList.row === 1 ? 0 : Math.round(height / 2)
0035
0036 model: [
0037 i18nc("@item:inlistbox Accent color from color scheme", "Accent Color From Color Scheme"),
0038 i18nc("@item:inlistbox Accent color from wallpaper", "Accent Color From Wallpaper"),
0039 i18nc("@item:inlistbox User-chosen custom accent color", "Custom Accent Color")
0040 ]
0041
0042 currentIndex: {
0043 if (kcm.accentColorFromWallpaper) return 1;
0044 return Qt.colorEqual(kcm.accentColor, "transparent") ? 0 : 2;
0045 }
0046
0047 onCurrentIndexChanged: {
0048 switch (currentIndex) {
0049 case 0: // colorScheme
0050 kcm.accentColor = "transparent";
0051 kcm.accentColorFromWallpaper = false;
0052 break;
0053
0054 case 1: // wallpaper
0055 kcm.accentColorFromWallpaper = true;
0056 break;
0057
0058 case 2: // custom
0059 if(!colorRepeater.model.some(color => Qt.colorEqual(color, kcm.accentColor))) { // if not accent is from the provided list, assign the last used color, if any, or a sensible value
0060 kcm.accentColor = Qt.colorEqual(kcm.lastUsedCustomAccentColor, "transparent") ? colorRepeater.model[0] : kcm.lastUsedCustomAccentColor;
0061 kcm.accentColorFromWallpaper = false;
0062 }
0063 break;
0064 }
0065 }
0066 }
0067
0068 Flow {
0069 id: colorList
0070 // This is the total width of flow and the items before it: all the color options + color picker + wallpaper button + spacing between them given by flow or other elements + combobox
0071 readonly property var contentWidth: (colorRepeater.count * (colorRepeater.itemAt(0).width + spacing)) + (customColorIndicator.width + spacing) + colorModeBox.width + anchors.leftMargin
0072 readonly property int row: Math.ceil(height / customColorIndicator.height)
0073
0074 spacing: Kirigami.Units.largeSpacing
0075 width: parent.width - colorModeBox.width
0076 opacity: colorModeBox.currentIndex === 2 ? 1.0 : 0.5
0077
0078 anchors.verticalCenter: parent.verticalCenter
0079 anchors.left: colorModeBox.right
0080 anchors.leftMargin: Kirigami.Units.smallSpacing
0081
0082 component ColorRadioButton : T.RadioButton {
0083 id: control
0084 autoExclusive: false
0085
0086 property color color: "transparent"
0087 property bool highlight: true
0088
0089 implicitWidth: Math.round(Kirigami.Units.gridUnit * 1.25)
0090 implicitHeight: Math.round(Kirigami.Units.gridUnit * 1.25)
0091
0092 background: Rectangle {
0093 readonly property bool showHighlight: parent.hovered && !control.checked && control.highlight
0094 radius: showHighlight ? Math.round(height / 4) : Math.round(height / 2)
0095 color: control.color
0096 border {
0097 color: showHighlight ? Kirigami.Theme.highlightColor : Qt.rgba(0, 0, 0, 0.15)
0098 }
0099 Behavior on radius {
0100 PropertyAnimation {
0101 duration: Kirigami.Units.veryShortDuration
0102 from: Math.round(height / 2)
0103 }
0104 }
0105 Rectangle {
0106 id: tabHighlight
0107 anchors.fill: parent
0108 radius: Math.round(height / 2)
0109 scale: 1.3
0110 color: "transparent"
0111 visible: control.visualFocus
0112 border {
0113 color: Kirigami.Theme.highlightColor
0114 width: 1
0115 }
0116 }
0117 }
0118
0119 indicator: Rectangle {
0120 radius: height / 2
0121 visible: control.checked
0122 anchors {
0123 fill: parent
0124 margins: Math.round(Kirigami.Units.smallSpacing * 1.25)
0125 }
0126 border {
0127 color: Qt.rgba(0, 0, 0, 0.15)
0128 width: 1
0129 }
0130 }
0131 }
0132
0133 Repeater {
0134 id: colorRepeater
0135
0136 model: [
0137 "#e93a9a",
0138 "#e93d58",
0139 "#e9643a",
0140 "#e8cb2d",
0141 "#3dd425",
0142 "#00d3b8",
0143 "#3daee9",
0144 "#b875dc",
0145 "#926ee4",
0146 "#686b6f",
0147 ]
0148
0149 delegate: ColorRadioButton {
0150 color: modelData
0151 checked: Qt.colorEqual(kcm.accentColor, modelData) && !kcm.accentColorFromWallpaper
0152
0153 onToggled: {
0154 kcm.accentColorFromWallpaper = false;
0155 kcm.accentColor = modelData;
0156 kcm.lastUsedCustomAccentColor = modelData;
0157 checked = Qt.binding(() => Qt.colorEqual(kcm.accentColor, modelData) && !kcm.accentColorFromWallpaper);
0158 }
0159 }
0160 }
0161
0162 QtDialogs.ColorDialog {
0163 id: colorDialog
0164 title: i18n("Choose custom accent color")
0165 // User must either choose a colour or cancel the operation before doing something else
0166 modality: Qt.ApplicationModal
0167 parentWindow: accentColorUI.Window.window
0168 selectedColor: Qt.colorEqual(kcm.lastUsedCustomAccentColor, "transparent") ? kcm.accentColor : kcm.lastUsedCustomAccentColor
0169 onAccepted: {
0170 kcm.accentColor = colorDialog.selectedColor;
0171 kcm.lastUsedCustomAccentColor = colorDialog.selectedColor;
0172 kcm.accentColorFromWallpaper = false;
0173 }
0174 }
0175
0176 Rectangle {
0177 id: customColorIndicator
0178
0179 height: customColorButton.height
0180 width: customColorButton.visibleWidth + colorPicker.width
0181 radius: customColorButton.background.radius
0182 color: complementary(kcm.accentColor)
0183
0184 function complementary(color) {
0185 return Qt.hsla((((color.hslHue + 0.5) % 1) + 1) % 1, color.hslSaturation, color.hslLightness, color.a);
0186 }
0187
0188
0189 ColorRadioButton {
0190 id: customColorButton
0191
0192 readonly property bool isCustomColor: !kcm.accentColorFromWallpaper
0193 && !Qt.colorEqual(kcm.accentColor, "transparent")
0194 && !colorRepeater.model.some(color => Qt.colorEqual(color, root.accentColor))
0195
0196 readonly property real visibleWidth: visible ? width + Kirigami.Units.smallSpacing : 0
0197
0198 color: kcm.accentColor
0199 highlight: false
0200 checked: isCustomColor
0201 visible: isCustomColor
0202 anchors.left: parent.left
0203
0204 MouseArea { // To prevent the button being toggled when clicked. The toggle state should only be controlled through isCustomColor
0205 anchors.fill: parent
0206 onClicked: colorDialog.open()
0207 }
0208 onFocusChanged: colorPicker.focus = true;
0209 }
0210 QQC2.RoundButton {
0211 id: colorPicker
0212 anchors.right: parent.right
0213 height: customColorButton.height
0214 width: customColorButton.width
0215 padding: 0 // Round button adds some padding by default which we don't need. Setting this to 0 centers the icon
0216 icon.name: "color-picker"
0217 icon.width : Math.round(Kirigami.Units.iconSizes.small * 0.9) // This provides a nice padding.
0218 onClicked: colorDialog.open()
0219 }
0220 }
0221 }
0222 }