[style] Refactor Button.customBackgroundColor

- Avoids adding new API to Button
- Is explicit since you want also to change opacity and color behaviors. So
  you get what you say in the code, without hidden side effects
- Is more flexible as you can override any behavior for background color,
  opacity, etc without affecting the Button API. It's all about the background
  not the Button itself. Exploit modularity.
- If the custom colored background button turns out to be a thing, we could
  then create a ColoredButtonBackground to avoid copy-pasting the new
  behavior everywhere (helping with consistency). But while that doesn't
  happen, reusing ButtonBackground suffices.

Task-number: AUTOSUITE-674
Change-Id: I120a5995d25bccb613f62028c70f078e3a224c35
Reviewed-by: Bramastyo Harimukti Santoso <bramastyo.harimukti.santoso@pelagicore.com>

1 files changed, 14 insertions, 2 deletions

diff --git a/dev/apps/com.pelagicore.sheets/components/ButtonPanel.qml b/dev/apps/com.pelagicore.sheets/components/ButtonPanel.qml
index 32d5cc8e..c53cc58a 100644
--- a/dev/apps/com.pelagicore.sheets/components/ButtonPanel.qml
+++ b/dev/apps/com.pelagicore.sheets/components/ButtonPanel.qml
@@ -140,12 +140,20 @@ Item {
         RowLayout {
             spacing: NeptuneStyle.dp(13)
 
+            Label {
+                text: "Custom background:"
+            }
+
             Button {
                 implicitHeight: largeButtonHeight
                 implicitWidth: 160
                 icon.width: 40
                 icon.height: 40
-                customBackgroundColor: NeptuneStyle.clusterMarksColor
+                background: ButtonBackground {
+                    color: parent.pressed ? Qt.darker(NeptuneStyle.clusterMarksColor, (1 / NeptuneStyle.opacityHigh))
+                                          : NeptuneStyle.clusterMarksColor
+                    opacity: 1
+                }
                 icon.name: "ic-seat-heat-passenger_OFF"
                 icon.color: "white"
             }
@@ -154,7 +162,11 @@ Item {
                 implicitWidth: 160
                 icon.width: 35
                 icon.height: 35
-                customBackgroundColor: NeptuneStyle.accentDetailColor
+                background: ButtonBackground {
+                    color: parent.pressed ? Qt.darker(NeptuneStyle.accentDetailColor, (1 / NeptuneStyle.opacityHigh))
+                                          : NeptuneStyle.accentDetailColor
+                    opacity: 1
+                }
                 icon.name: "ic-seat-heat-passenger_OFF"
                 text: "text"
                 font.pixelSize: NeptuneStyle.fontSizeS