Commit f3ad84f9 authored by Friedrich W. H. Kossebau's avatar Friedrich W. H. Kossebau
Browse files

Consistently use KQuickControls.ColorButton in the config UI

Summary:
For a consistent UX use the same component for config UI elements
showing a currently selected color and allowing to trigger a color picker to
select another color.

Test Plan:
All buttons adapt to color changes as well as trigger the color dialog if
activated and take over any chosen color.

Reviewers: #plasma, #vdg, davidedmundson

Reviewed By: #plasma, davidedmundson

Subscribers: davidedmundson, ngraham, plasma-devel

Tags: #plasma

Differential Revision: https://phabricator.kde.org/D12318
parent d4b9922e
......@@ -21,8 +21,8 @@
import QtQuick 2.0
import QtQuick.Controls 1.0 as QtControls
import QtQuick.Dialogs 1.1
import QtQuick.Layouts 1.1
import org.kde.kquickcontrols 2.0 as KQuickControls
QtControls.GroupBox {
......@@ -43,18 +43,6 @@ QtControls.GroupBox {
property alias cfg_useCustomColorForGrid: useCustomColorForGridCheckBox.checked
property alias cfg_customColorForGrid: customColorForGrid.color
ColorDialog {
property var element;
id: colorDialog
visible: false
modality: Qt.WindowModal
title: "Choose a color"
showAlphaChannel: true
onAccepted: { element.color=color }
onRejected: { }
}
ColumnLayout {
QtControls.CheckBox {
id: showGridCheckBox
......@@ -81,54 +69,27 @@ QtControls.GroupBox {
id: useCustomColorForActiveCheckBox
text: i18n("Use custom color for active LEDs")
}
Rectangle {
width:20
height:20
id:customColorForActive
MouseArea {
anchors.fill: parent
onClicked: {
colorDialog.element=parent;
colorDialog.color=parent.color;
colorDialog.open();
}
}
KQuickControls.ColorButton {
id: customColorForActive
enabled: useCustomColorForActiveCheckBox.checked
}
QtControls.CheckBox {
id: useCustomColorForInactiveCheckBox
text: i18n("Use custom color for inactive LEDs")
}
Rectangle {
width:20
height:20
KQuickControls.ColorButton {
id:customColorForInactive
MouseArea {
anchors.fill: parent
onClicked: {
colorDialog.element=parent;
colorDialog.color=parent.color;
colorDialog.open();
}
}
enabled: useCustomColorForInactiveCheckBox.checked
}
QtControls.CheckBox {
id: useCustomColorForGridCheckBox
text: i18n("Use custom color for grid")
}
Rectangle {
width:20
height:20
KQuickControls.ColorButton {
id:customColorForGrid
MouseArea {
anchors.fill: parent
onClicked: {
colorDialog.element=parent;
colorDialog.color=parent.color;
colorDialog.open();
}
}
enabled: useCustomColorForGridCheckBox.checked
}
}
}
......
/*
* Copyright (C) 2014 Martin Yrjölä <martin.yrjola@gmail.com>
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License as
* published by the Free Software Foundation; either version 2 of
* the License or (at your option) version 3 or any later version
* accepted by the membership of KDE e.V. (or its successor approved
* by the membership of KDE e.V.), which shall act as a proxy
* defined in Section 14 of version 3 of the license.
*
* This program 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 General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>
*/
import QtQuick 2.2
import QtQuick.Layouts 1.0
import QtQuick.Controls 1.2 as QtControls
import QtQuick.Dialogs 1.0 as QtDialogs
import org.kde.plasma.core 2.0 as PlasmaCore
Item {
id: colorPicker
property alias chosenColor: colorDialog.color
width: childrenRect.width
height: childrenRect.height
Layout.alignment: Qt.AlignVCenter
Rectangle {
color: colorDialog.color
radius: width / 2
height: 20
width: height
opacity: enabled ? 1 : 0.5
border {
width: mouseArea.containsMouse ? 3 : 1
color: Qt.darker(colorDialog.color, 1.5)
}
QtDialogs.ColorDialog {
id: colorDialog
}
}
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: {
colorDialog.open()
}
}
}
......@@ -21,20 +21,21 @@
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.0
import org.kde.kquickcontrols 2.0 as KQuickControls
ColumnLayout {
id: colorSettings
property alias cfg_memApplicationColor: memApplicationColorPicker.chosenColor
property alias cfg_memBuffersColor: memBuffersColorPicker.chosenColor
property alias cfg_memCachedColor: memCachedColorPicker.chosenColor
property alias cfg_cpuUserColor: cpuUserColorPicker.chosenColor
property alias cfg_cpuIOWaitColor: cpuIOWaitColorPicker.chosenColor
property alias cfg_cpuSysColor: cpuSysColorPicker.chosenColor
property alias cfg_cpuNiceColor: cpuNiceColorPicker.chosenColor
property alias cfg_swapUsedColor: swapUsedColorPicker.chosenColor
property alias cfg_cacheDirtyColor: cacheDirtyColorPicker.chosenColor
property alias cfg_cacheWritebackColor: cacheWritebackColorPicker.chosenColor
property alias cfg_memApplicationColor: memApplicationColorPicker.color
property alias cfg_memBuffersColor: memBuffersColorPicker.color
property alias cfg_memCachedColor: memCachedColorPicker.color
property alias cfg_cpuUserColor: cpuUserColorPicker.color
property alias cfg_cpuIOWaitColor: cpuIOWaitColorPicker.color
property alias cfg_cpuSysColor: cpuSysColorPicker.color
property alias cfg_cpuNiceColor: cpuNiceColorPicker.color
property alias cfg_swapUsedColor: swapUsedColorPicker.color
property alias cfg_cacheDirtyColor: cacheDirtyColorPicker.color
property alias cfg_cacheWritebackColor: cacheWritebackColorPicker.color
property alias cfg_setColorsManually: setColorsManuallyGroupBox.checked
GroupBox {
......@@ -57,7 +58,7 @@ ColumnLayout {
Layout.alignment: Qt.AlignRight
}
ColorPicker {
KQuickControls.ColorButton {
id: cpuUserColorPicker
}
......@@ -66,7 +67,7 @@ ColumnLayout {
Layout.alignment: Qt.AlignRight
}
ColorPicker {
KQuickControls.ColorButton {
id: cpuIOWaitColorPicker
}
......@@ -75,7 +76,7 @@ ColumnLayout {
Layout.alignment: Qt.AlignRight
}
ColorPicker {
KQuickControls.ColorButton {
id: cpuSysColorPicker
}
......@@ -84,7 +85,7 @@ ColumnLayout {
Layout.alignment: Qt.AlignRight
}
ColorPicker {
KQuickControls.ColorButton {
id: cpuNiceColorPicker
}
......@@ -100,7 +101,7 @@ ColumnLayout {
Layout.alignment: Qt.AlignRight
}
ColorPicker {
KQuickControls.ColorButton {
id: memApplicationColorPicker
}
......@@ -109,7 +110,7 @@ ColumnLayout {
Layout.alignment: Qt.AlignRight
}
ColorPicker {
KQuickControls.ColorButton {
id: memBuffersColorPicker
}
......@@ -118,7 +119,7 @@ ColumnLayout {
Layout.alignment: Qt.AlignRight
}
ColorPicker {
KQuickControls.ColorButton {
id: memCachedColorPicker
}
......@@ -134,7 +135,7 @@ ColumnLayout {
Layout.alignment: Qt.AlignRight
}
ColorPicker {
KQuickControls.ColorButton {
id: swapUsedColorPicker
}
......@@ -149,7 +150,7 @@ ColumnLayout {
Layout.alignment: Qt.AlignRight
}
ColorPicker {
KQuickControls.ColorButton {
id: cacheDirtyColorPicker
}
......@@ -158,7 +159,7 @@ ColumnLayout {
Layout.alignment: Qt.AlignRight
}
ColorPicker {
KQuickControls.ColorButton {
id: cacheWritebackColorPicker
}
}
......
......@@ -20,14 +20,14 @@
import QtQuick 2.5
import QtQuick.Layouts 1.0
import QtQuick.Controls 1.0 as QtControls
import QtQuick.Dialogs 1.1 as QtDialogs
import org.kde.kquickcontrols 2.0 as KQuickControls
import org.kde.plasma.core 2.0 as PlasmaCore
ColumnLayout {
id: root
property string cfg_Provider
property int cfg_FillMode
property alias cfg_Color: colorDialog.color
property alias cfg_Color: colorButton.color
ListModel {
id: providerModel
}
......@@ -134,13 +134,6 @@ ColumnLayout {
}
}
QtDialogs.ColorDialog {
id: colorDialog
modality: Qt.WindowModal
showAlphaChannel: false
title: i18nd("plasma_wallpaper_org.kde.potd", "Select Background Color")
}
Row {
id: colorRow
spacing: units.largeSpacing / 2
......@@ -150,19 +143,8 @@ ColumnLayout {
horizontalAlignment: Text.AlignRight
text: i18nd("plasma_wallpaper_org.kde.potd", "Background Color:")
}
QtControls.Button {
KQuickControls.ColorButton {
id: colorButton
width: units.gridUnit * 3
text: " " // needed to it gets a proper height...
onClicked: colorDialog.open()
Rectangle {
id: colorRect
anchors.centerIn: parent
width: parent.width - 2 * units.smallSpacing
height: theme.mSize(theme.defaultFont).height
color: colorDialog.color
}
}
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment