[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>

5 files changed, 82 insertions, 36 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
diff --git a/plugins/styles/neptune/ButtonBackground.qml b/plugins/styles/neptune/ButtonBackground.qml
new file mode 100644
index 00000000..de4459e0
--- /dev/null
+++ b/plugins/styles/neptune/ButtonBackground.qml
@@ -0,0 +1,62 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 Pelagicore AG
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Neptune 3 IVI UI.
+**
+** $QT_BEGIN_LICENSE:GPL-QTAS$
+** Commercial License Usage
+** Licensees holding valid commercial Qt Automotive Suite licenses may use
+** this file in accordance with the commercial license agreement provided
+** with the Software or, alternatively, in accordance with the terms
+** contained in a written agreement between you and The Qt Company.  For
+** licensing terms and conditions see https://www.qt.io/terms-conditions.
+** For further information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+** SPDX-License-Identifier: GPL-3.0
+**
+****************************************************************************/
+
+import QtQuick 2.10
+
+import shared.com.pelagicore.styles.neptune 3.0
+
+Rectangle {
+    border.width: !parent.enabled && !parent.checked ? NeptuneStyle.dp(2) : 0
+    border.color: NeptuneStyle.contrastColor
+    visible: !parent.flat
+    color: {
+        if (parent.checked) {
+            return NeptuneStyle.accentColor;
+        } else if (!parent.enabled) {
+            return "transparent";
+        } else {
+            return NeptuneStyle.contrastColor;
+        }
+    }
+    opacity: {
+        if (parent.checked) {
+            return 1.0;
+        } else if (parent.pressed) {
+            return 0.12;
+        } else {
+            return 0.06;
+        }
+    }
+    Behavior on opacity { NumberAnimation { duration: 200 } }
+    Behavior on color { ColorAnimation { duration: 200 } }
+
+    radius: width / 2
+}
diff --git a/plugins/styles/neptune/neptune.pro b/plugins/styles/neptune/neptune.pro
index a0d57dbf..b1121a75 100644
--- a/plugins/styles/neptune/neptune.pro
+++ b/plugins/styles/neptune/neptune.pro
@@ -9,6 +9,10 @@ load(qmlplugin)
 
 DEFINES += "NEPTUNE_ICONS_PATH=$$clean_path($$INSTALL_PREFIX/neptune3/imports/assets/icons)"
 
+qmlfiles.files = ButtonBackground.qml
+qmlfiles.path = $$installPath
+INSTALLS += qmlfiles
+
 SOURCES += \
     neptunestyle.cpp \
     neptunestyleplugin.cpp \
diff --git a/plugins/styles/neptune/qmldir b/plugins/styles/neptune/qmldir
index f69fe893..44dc94b8 100644
--- a/plugins/styles/neptune/qmldir
+++ b/plugins/styles/neptune/qmldir
@@ -1,2 +1,3 @@
 module shared.com.pelagicore.styles.neptune
 plugin neptunestyle
+ButtonBackground 3.0 ButtonBackground.qml
diff --git a/styles/neptune/Button.qml b/styles/neptune/Button.qml
index 9cb409f7..709f3a14 100644
--- a/styles/neptune/Button.qml
+++ b/styles/neptune/Button.qml
@@ -40,8 +40,6 @@ import shared.com.pelagicore.styles.neptune 3.0
 T.Button {
     id: control
 
-    property string customBackgroundColor: ""
-
     implicitWidth: NeptuneStyle.cellWidth + leftPadding + rightPadding
     implicitHeight: NeptuneStyle.cellHeight + leftPadding + rightPadding
 
@@ -67,36 +65,5 @@ T.Button {
         opacity: control.enabled ? 1.0 : NeptuneStyle.defaultDisabledOpacity
     }
 
-    background: Rectangle {
-        border.width: !control.enabled && !control.checked ? NeptuneStyle.dp(2) : 0
-        border.color: NeptuneStyle.contrastColor
-        visible: !control.flat
-        color: {
-            if (customBackgroundColor !== "") {
-                if (control.pressed) {
-                    return Qt.darker(customBackgroundColor, (1 / 0.94))
-                }
-                return customBackgroundColor;
-            } else if (control.checked) {
-                return NeptuneStyle.accentColor;
-            } else if (!control.enabled) {
-                return "transparent";
-            } else {
-                return NeptuneStyle.contrastColor;
-            }
-        }
-        opacity: {
-            if (control.pressed && !control.checked && customBackgroundColor === "") {
-                return 0.12;
-            } else if (control.checked || customBackgroundColor !== "") {
-                return 1.0;
-            } else {
-                return 0.06;
-            }
-        }
-        Behavior on opacity { NumberAnimation { duration: 200 } }
-        Behavior on color { ColorAnimation { duration: 200 } }
-
-        radius: width / 2
-    }
+    background: ButtonBackground {}
 }