feat(StatusColorSpace): impl color space component (#679)

sandbox/controls/Buttons.qml

@@ -3,9 +3,9 @@ import QtQuick.Layouts 1.14
 import QtQuick.Dialogs 1.3
 
 import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
 import StatusQ.Core.Theme 0.1
 
-
 Column {
     spacing: 10
     Grid {
@@ -307,12 +307,14 @@ Column {
         onClicked: {
             colorDialog.open();
         }
-        ColorDialog {
+    }
+
+    StatusColorDialog {
         id: colorDialog
+        anchors.centerIn: parent
         property bool colorSelected: false
         onAccepted: {
             colorSelected = true;
         }
     }
-    }
 }

sandbox/main.qml

@@ -312,6 +312,11 @@ StatusWindow {
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title, true);
                         }
+                        StatusNavigationListItem {
+                            title: "StatusColorSpace"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title, true);
+                        }
                     }
                 }
             }

sandbox/pages/StatusColorSpacePage.qml

@@ -0,0 +1,110 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
+import Sandbox 0.1
+
+Item {
+
+    ColumnLayout {
+        anchors.centerIn: parent
+
+        StatusBaseText {
+            text: qsTr("Thickness")
+        }
+
+        StatusSlider {
+            id: thicknessSlider
+            from: colorSpace.width / 8
+            to: colorSpace.width / 16
+            value: colorSpace.width / 10
+            Layout.fillWidth: true
+        }
+
+        StatusBaseText {
+            text: qsTr("Min saturate: ") + colorSpace.minSaturate.toFixed(2)
+        }
+
+        StatusSlider {
+            id: minSatSlider
+            from: 0
+            to: 0.5
+            value: 0
+            Layout.fillWidth: true
+        }
+
+        StatusBaseText {
+            text: qsTr("Max saturate: ") + colorSpace.maxSaturate.toFixed(2)
+        }
+
+        StatusSlider {
+            id: maxSatSlider
+            from: 0.51
+            to: 1.0
+            value: 1.0
+            Layout.fillWidth: true
+        }
+
+        StatusBaseText {
+            text: qsTr("Min value: ") + colorSpace.minValue.toFixed(2)
+        }
+
+        StatusSlider {
+            id: minValSlider
+            from: 0
+            to: 0.5
+            value: 0
+            Layout.fillWidth: true
+        }
+
+        StatusBaseText {
+            text: qsTr("Max value: ") + colorSpace.maxValue.toFixed(2)
+        }
+
+        StatusSlider {
+            id: maxValSlider
+            from: 0.51
+            to: 1.0
+            value: 1.0
+            Layout.fillWidth: true
+        }
+
+        StatusColorSpace {
+            id: colorSpace
+            color: "#ed77eb"
+            thickness: thicknessSlider.value
+            minSaturate: minSatSlider.value
+            maxSaturate: maxSatSlider.value
+            minValue: minValSlider.value
+            maxValue: maxValSlider.value
+        }
+
+        StatusBaseText {
+            text: qsTr("Color") + ": " + colorSpace.color
+        }
+
+        Rectangle {
+            color: colorSpace.color
+            implicitHeight: 48
+            radius: 10
+            Layout.fillWidth: true
+
+            StatusBaseText {
+                anchors.centerIn: parent
+                color: Theme.palette.white
+                font.pixelSize: 15
+                text: "Quick brown fox jumps over the lazy dog"
+            }
+        }
+
+        StatusButton {
+            text: "Randomize"
+            onPressed: colorSpace.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
+        }
+    }
+}

sandbox/qml.qrc

@@ -43,5 +43,6 @@
         <file>pages/StatusToastMessagePage.qml</file>
         <file>pages/StatusWizardStepperPage.qml</file>
         <file>pages/StatusTabBarButtonPage.qml</file>
+        <file>pages/StatusColorSpacePage.qml</file>
     </qresource>
 </RCC>

src/StatusQ/Components/StatusColorSpace.qml

@@ -0,0 +1,201 @@
+import QtQuick 2.14
+import QtGraphicalEffects 1.0
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+Item {
+    id: root
+
+    property int thickness: width * 0.1
+    property real minSaturate: 0.0
+    property real minValue: 0.0
+    property real maxSaturate: 1.0
+    property real maxValue: 1.0
+    property color color: "red"
+    property color rootColor: Qt.hsva(color.hsvHue, 1, 1, 1)
+
+    function pickColorFromHueGauge(x, y) {
+        // Get angle of picked color
+        let theta = Math.atan2(y - hueGauge.height / 2, x - hueGauge.width / 2) * 0.5 / Math.PI;
+        if (theta < 0.0)
+            theta += 1.0;
+
+        // Convert angle value to color
+        return Qt.hsva(1 - theta, 1, 1, 1)
+    }
+
+    function pickColorFromSatValRect(x, y) {
+        // x for saturation, reversed y for value
+        let sat = mapFromRange(Math.min(Math.max(x, 0), satValRect.width),
+                               minSaturate, maxSaturate, satValRect.width);
+        let val = 1 - mapFromRange(Math.min(Math.max(y, 0), satValRect.height),
+                                   1 - maxValue, 1 - minValue, satValRect.height);
+        return Qt.hsva(rootColor.hsvHue, sat, val, 1);
+    }
+
+    function angleOnHueGauge(pickingColor) {
+        // color hue to angle
+        return (1 - pickingColor.hsvHue) * 2 * Math.PI;
+    }
+
+    // TODO: mapToRange & mapFromRange to helper js
+    function mapToRange(value, minValue, maxValue, range) {
+        return (value - minValue) / (maxValue - minValue) * range;
+    }
+
+    function mapFromRange(pos, minValue, maxValue, range) {
+        return pos / range * (maxValue - minValue) + minValue;
+    }
+
+    onColorChanged: {
+        // update root color if only we are not picking on satValRect
+        if (!d.pickingSatVal)
+            rootColor = Qt.hsva(color.hsvHue, 1, 1, 1)
+    }
+
+    implicitWidth: 340
+    implicitHeight: 340
+
+    QtObject {
+        id: d
+
+        property bool pickingSatVal: false
+    }
+
+    ConicalGradient {
+        id: hueGauge
+        anchors.fill: parent
+        angle: 90.0
+        gradient: Gradient {
+            GradientStop { position: 0.000; color: Qt.hsva(1.000, 1, 1, 1) }
+            GradientStop { position: 0.167; color: Qt.hsva(0.833, 1, 1, 1) }
+            GradientStop { position: 0.333; color: Qt.hsva(0.666, 1, 1, 1) }
+            GradientStop { position: 0.500; color: Qt.hsva(0.500, 1, 1, 1) }
+            GradientStop { position: 0.667; color: Qt.hsva(0.333, 1, 1, 1) }
+            GradientStop { position: 0.833; color: Qt.hsva(0.166, 1, 1, 1) }
+            GradientStop { position: 1.000; color: Qt.hsva(0.000, 1, 1, 1) }
+        }
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            maskSource: Item {
+                width: root.width
+                height: root.height
+
+                Rectangle {
+                    anchors.fill: parent
+                    radius: Math.min(width, height) / 2
+                }
+            }
+        }
+
+        MouseArea {
+            id: hueArea
+
+            property bool pressedOnGauge: false
+
+            anchors.fill: parent
+            preventStealing: true
+            onPressed: {
+                // Check we clicked on gauge
+                let dist = Math.sqrt(Math.pow(width / 2 - mouseX, 2) +
+                                     Math.pow(height / 2 - mouseY, 2));
+                let radius = Math.min(width, height) / 2;
+                if (dist < radius - thickness || dist > radius)
+                    return;
+
+                pressedOnGauge = true;
+                pickRootColor();
+            }
+            onReleased: pressedOnGauge = false
+            onPositionChanged: if (pressedOnGauge) pickRootColor()
+
+            function pickRootColor() {
+                // Update both colors
+                rootColor = pickColorFromHueGauge(mouseX, mouseY);
+                color.hsvHue = rootColor.hsvHue;
+                color.hsvSaturation = Math.min(maxSaturate, Math.max(minSaturate, color.hsvSaturation));
+                color.hsvValue = Math.min(maxValue, Math.max(minValue, color.hsvValue));
+            }
+        }
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        anchors.margins: root.thickness
+        radius: Math.min(width, height) / 2
+
+        color: Theme.palette.baseColor5
+
+        Rectangle {
+            id: satValRect
+            anchors.centerIn: parent
+            width: parent.width * 0.55
+            height: width
+            border.color: Theme.palette.baseColor3
+            gradient: Gradient {
+                orientation: Gradient.Horizontal
+                GradientStop { position: -minSaturate; color: "white" }
+                GradientStop { position: 2.0 - maxSaturate; color: rootColor }
+            }
+
+            Rectangle {
+                anchors.fill: parent
+                gradient: Gradient {
+                    orientation: Gradient.Vertical
+                    GradientStop { position: maxValue - 1; color: "transparent" }
+                    GradientStop { position: 1.0 + minValue; color: "black" }
+                }
+            }
+
+            MouseArea {
+                id: satValArea
+                anchors.fill: parent
+                preventStealing: true
+                onPressed: {
+                    d.pickingSatVal = true;
+                    pickColor();
+                }
+                onReleased: d.pickingSatVal = false
+                onPositionChanged: pickColor()
+
+                function pickColor() {
+                    root.color = pickColorFromSatValRect(mouseX, mouseY);
+                }
+            }
+
+            Rectangle {
+                id: satValLens
+                x: mapToRange(root.color.hsvSaturation, minSaturate, maxSaturate,
+                              satValRect.width) - radius
+                y: mapToRange(1 - root.color.hsvValue, 1 - maxValue, 1 - minValue,
+                              satValRect.height) - radius
+                width: thickness * 1.3
+                height: width
+                radius: height / 2
+                border.width: 2
+                border.color: Theme.palette.baseColor3
+                color: root.color
+                visible: x + 1 >= -radius && x - 1 <= satValRect.width - radius &&
+                         y + 1 >= -radius && y - 1 <= satValRect.height - radius
+            }
+        }
+    }
+
+    Rectangle {
+        id: hueLens
+
+        property real theta: angleOnHueGauge(rootColor);
+        property real dist: (hueGauge.width - width) / 2 + thickness / 6;
+
+        anchors.centerIn: parent
+        anchors.horizontalCenterOffset: dist * Math.cos(theta);
+        anchors.verticalCenterOffset: dist * Math.sin(theta);
+        width: thickness * 1.3
+        height: width
+        radius: height / 2
+        border.width: 2
+        border.color: Theme.palette.baseColor3
+        color: rootColor
+    }
+}

src/StatusQ/Components/qmldir

@@ -34,3 +34,4 @@ StatusTagSelector 0.1 StatusTagSelector.qml
 StatusToastMessage 0.1 StatusToastMessage.qml
 StatusWizardStepper 0.1 StatusWizardStepper.qml
 StatusImageCropPanel 0.1 StatusImageCropPanel.qml
+StatusColorSpace 0.0 StatusColorSpace.qml

src/StatusQ/Controls/StatusColorSelectorGrid.qml

@@ -10,10 +10,11 @@ Column {
 
     property alias titleText: title.text
     property alias title: title
+    property alias columns: grid.columns
 
     property int selectedColorIndex: 0
     property string selectedColor: ""
-    property var model: [StatusColors.colors['black'],
+    property var model:[ StatusColors.colors['black'],
                          StatusColors.colors['grey'],
                          StatusColors.colors['blue2'],
                          StatusColors.colors['purple'],
@@ -24,7 +25,9 @@ Column {
                          StatusColors.colors['green2'],
                          StatusColors.colors['moss'],
                          StatusColors.colors['brown'],
-        StatusColors.colors['brown2']]
+                         StatusColors.colors['brown2'] ]
+
+    signal colorSelected(color color)
 
     spacing: 16
 
@@ -36,6 +39,7 @@ Column {
     }
 
     Grid {
+        id: grid
         columns: 6
         rowSpacing: 16
         columnSpacing: 32
@@ -45,9 +49,10 @@ Column {
                 checked: index === selectedColorIndex
                 radioButtonColor: root.model[index] || "transparent"
                 onCheckedChanged: {
-                    if(checked) {
+                    if (checked) {
-                        selectedColorIndex = index
+                        selectedColorIndex = index;
-                        selectedColor = root.model[index]
+                        selectedColor = root.model[index];
+                        root.colorSelected(selectedColor);
                     }
                 }
             }

src/StatusQ/Popups/StatusColorDialog.qml

@@ -0,0 +1,145 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.12
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Controls.Validators 0.1
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
+
+StatusModal {
+    id: root
+
+    property alias color: colorSpace.color
+    property alias standartColors: colorSelectionGrid.model
+    property alias acceptText: acceptButton.text
+    property alias previewText: preview.text
+
+    signal accepted()
+
+    onColorChanged: {
+        if (!hexInput.locked)
+            hexInput.text = color.toString();
+
+        if (colorSelectionGrid.selectedColor != color)
+            colorSelectionGrid.selectedColorIndex = -1;
+    }
+    Component.onCompleted: {
+        hexInput.text = color.toString();
+    }
+
+    width: 680
+    implicitHeight: 820
+
+    contentItem: ScrollView {
+        id: scroll
+        width: parent.width
+        topPadding: 30
+        leftPadding: 20
+        rightPadding: 20
+        bottomPadding: 20
+        contentHeight: column.height
+
+        ScrollBar.vertical.policy: ScrollBar.AsNeeded
+        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+
+        clip: true
+
+        ColumnLayout {
+            id: column
+            width: scroll.width - scroll.leftPadding - scroll.rightPadding
+            spacing: 12
+
+            StatusColorSpace {
+                id: colorSpace
+
+                property real hueFactor: Math.max(rootColor.g + rootColor.b * 0.4,
+                                                  rootColor.g + rootColor.r * 0.6)
+
+                minSaturate: Math.max(0.4, hueFactor * 0.55)
+                maxSaturate: 1.0
+                minValue: 0.4
+                // Curve to pick colors readable with white text
+                maxValue: Math.min(1.0, 1.65 - hueFactor * 0.5)
+                Layout.alignment: Qt.AlignHCenter
+            }
+
+            StatusInput {
+                id: hexInput
+
+                property color newColor: text
+                // TODO: editingFinished() signal instead of this crutch
+                property bool locked: false
+
+                implicitWidth: 256
+                validators: [
+                    StatusRegularExpressionValidator {
+                        regularExpression: /^#(?:[0-9a-fA-F]{3}){1,2}$/
+                        errorMessage: qsTr("This is not a valid color")
+                    }
+                ]
+                validationMode: StatusInput.ValidationMode.Always
+
+                onNewColorChanged: {
+                    if (!valid)
+                        return;
+
+                    locked = true;
+                    root.color = newColor;
+                    locked = false;
+                }
+                Layout.alignment: Qt.AlignHCenter
+            }
+
+            StatusBaseText {
+                text: qsTr("Preview")
+                font.pixelSize: 15
+            }
+
+            Rectangle {
+                implicitHeight: 48
+                radius: 10
+                color: root.color
+                Layout.fillWidth: true
+
+                StatusBaseText {
+                    id: preview
+                    x: 16
+                    y: 16
+                    text: root.color.toString()
+                    color: Theme.palette.white
+                    font.pixelSize: 15
+                }
+            }
+
+            StatusBaseText {
+                text: qsTr("Standart colours")
+                font.pixelSize: 15
+            }
+
+            StatusColorSelectorGrid {
+                id: colorSelectionGrid
+                columns: 8
+                model: ["#4360df", "#887af9", "#d37ef4", "#51d0f0", "#26a69a", "#7cda00", "#eab700", "#fa6565"]
+                selectedColorIndex: -1
+                onColorSelected: {
+                    root.color = selectedColor;
+                }
+                Layout.alignment: Qt.AlignHCenter
+            }
+        }
+    }
+
+    rightButtons: [
+        StatusButton {
+            id: acceptButton
+            text: qsTr("Select Colour")
+            onClicked: {
+                root.accepted();
+                root.close();
+            }
+        }
+    ]
+}

src/StatusQ/Popups/qmldir

@@ -11,3 +11,4 @@ StatusModalDivider 0.1 StatusModalDivider.qml
 StatusSearchPopupMenuItem 0.1 StatusSearchPopupMenuItem.qml
 StatusSearchLocationMenu 0.1 StatusSearchLocationMenu.qml
 StatusSpellcheckingMenuItems 0.1 StatusSpellcheckingMenuItems.qml
+StatusColorDialog 0.1 StatusColorDialog.qml

statusq.qrc

@@ -34,6 +34,7 @@
         <file>src/StatusQ/Components/StatusTagSelector.qml</file>
         <file>src/StatusQ/Components/StatusToastMessage.qml</file>
         <file>src/StatusQ/Components/StatusWizardStepper.qml</file>
+        <file>src/StatusQ/Components/StatusColorSpace.qml</file>
         <file>src/StatusQ/Components/private/statusMessage/StatusAudioMessage.qml</file>
         <file>src/StatusQ/Components/private/statusMessage/StatusEditMessage.qml</file>
         <file>src/StatusQ/Components/private/statusMessage/StatusImageMessage.qml</file>
@@ -138,6 +139,7 @@
         <file>src/StatusQ/Popups/StatusSearchPopup.qml</file>
         <file>src/StatusQ/Popups/StatusSearchPopupMenuItem.qml</file>
         <file>src/StatusQ/Popups/StatusSpellcheckingMenuItems.qml</file>
+        <file>src/StatusQ/Popups/StatusColorDialog.qml</file>
         <file>src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml</file>
         <file>src/StatusQ/Popups/statusModal/StatusModalFooter.qml</file>
         <file>src/StatusQ/Popups/statusModal/StatusModalHeader.qml</file>