added colorpicker

qml/settings/BackgroundPage.qml

@@ -6,6 +6,18 @@ import "../components"
 Item {
     id: page
 
+    function syncColors() {
+        c1Picker.hex = settingsContainer.backgroundColor1
+        c2Picker.hex = settingsContainer.backgroundColor2
+    }
+
+    Component.onCompleted: syncColors()
+
+    Connections {
+        target: settingsContainer
+        function onChanged() { page.syncColors() }
+    }
+
     Rectangle {
         anchors.fill: parent
         color: "#161628"
@@ -42,29 +54,22 @@ Item {
             }
         }
 
-        GridLayout {
+        ColumnLayout {
             Layout.fillWidth: true
-            columns: 2
             visible: settingsContainer.backgroundType !== "image"
+            spacing: 8
 
-            Text { text: "Цвет 1:"; color: "#ffffff" }
-            TextField {
-                id: c1
-                Layout.fillWidth: true
-                text: settingsContainer.backgroundColor1
-                onEditingFinished: btnController.setBackgroundColors(text, c2.text)
+            ColorPickerField {
+                id: c1Picker
+                label: "Цвет 1:"
+                onColorChanged: btnController.setBackgroundColors(hex, c2Picker.hex)
             }
-            Text {
-                text: "Цвет 2:"
-                color: "#ffffff"
+
+            ColorPickerField {
+                id: c2Picker
+                label: "Цвет 2:"
                 visible: settingsContainer.backgroundType === "gradient"
-            }
-            TextField {
-                id: c2
-                Layout.fillWidth: true
-                text: settingsContainer.backgroundColor2
-                visible: settingsContainer.backgroundType === "gradient"
-                onEditingFinished: btnController.setBackgroundColors(c1.text, text)
+                onColorChanged: btnController.setBackgroundColors(c1Picker.hex, hex)
             }
         }