Update Function Button

- added icon to function button
- moved app button from control to display instead cause it is a
  specific control and not used anywhere else

Task-number: QTAUTO-555
Change-Id: Ideec60faf241ebe2222bdcde1861b77be1f0458f
Reviewed-by: Daniel d'Andrada <daniel.dandrada@luxoft.com>

4 files changed, 86 insertions, 27 deletions

diff --git a/imports/shared/controls/qmldir b/imports/shared/controls/qmldir
index 2390712..f6d66e9 100644
--- a/imports/shared/controls/qmldir
+++ b/imports/shared/controls/qmldir
@@ -21,7 +21,6 @@ AppStackView 1.0 AppStackView.qml
 Popup 1.0 Popup.qml
 LetterPicker 1.0 LetterPicker.qml
 AppInfoPanel 1.0 AppInfoPanel.qml
-AppButton 1.0 AppButton.qml
 BackgroundPane 1.0 BackgroundPane.qml
 TemperatureSlider 1.0 TemperatureSlider.qml
 ImageButton 1.0 ImageButton.qml
diff --git a/imports/shared/controls/AppButton.qml b/sysui/display/AppButton.qml
index bbda98b..ebe36ca 100644
--- a/imports/shared/controls/AppButton.qml
+++ b/sysui/display/AppButton.qml
@@ -34,7 +34,6 @@ import QtQuick.Controls 2.1
 
 import utils 1.0
 import controls 1.0
-import com.pelagicore.styles.neptune 1.0
 
 Button {
     id: root
@@ -82,7 +81,7 @@ Button {
 
     RoundButton {
         text: "\u2715"
-        font.pixelSize: root.NeptuneStyle.fontSizeL
+        font.pixelSize: Style.fontSizeL
         anchors.right: parent.right
         anchors.bottom: parent.bottom
         anchors.bottomMargin: -padding
diff --git a/sysui/display/FunctionButton.qml b/sysui/display/FunctionButton.qml
new file mode 100644
index 0000000..28065ce
--- /dev/null
+++ b/sysui/display/FunctionButton.qml
@@ -0,0 +1,76 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 Pelagicore AG
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Neptune 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.6
+import QtQuick.Controls 2.1
+import QtGraphicalEffects 1.0
+
+import utils 1.0
+
+Button {
+    id: root
+
+    width: Style.hspan(4)
+    height: Style.vspan(7)
+    topPadding: root.height * .75
+
+    property url icon: icon.source
+
+    RectangularGlow {
+        anchors.fill: highlightBar
+        glowRadius: 6
+        spread: 0.1
+        color: Style.colorWhite
+        cornerRadius: highlightBar.radius + glowRadius
+        opacity: root.highlighted ? 1.0 : 0.0
+
+        Behavior on opacity {
+            NumberAnimation {
+                duration: 200
+            }
+        }
+    }
+
+    Rectangle {
+        id: highlightBar
+        anchors.left: root.left
+        width: Style.hspan(0.1)
+        height: parent.height
+        border.color: Style.colorGrey
+        radius: 8
+        color: root.highlighted ? Style.colorOrange : Style.colorBlack
+    }
+
+    indicator: Image {
+        anchors.centerIn: parent
+        source: root.icon
+    }
+}
diff --git a/sysui/display/FunctionsPage.qml b/sysui/display/FunctionsPage.qml
index 38e7e57..0df4b7c 100644
--- a/sysui/display/FunctionsPage.qml
+++ b/sysui/display/FunctionsPage.qml
@@ -31,14 +31,11 @@
 
 import QtQuick 2.6
 import QtQuick.Layouts 1.0
-import QtQuick.Controls 2.0
 
-import controls 1.0
 import utils 1.0
+import controls 1.0
 import models.settings 1.0
-import service.notification 1.0
 import service.popup 1.0
-import com.pelagicore.styles.neptune 1.0
 
 UIPage {
     id: root
@@ -69,29 +66,17 @@ UIPage {
         cellWidth: width/3
         cellHeight: height/3
 
-        delegate: Row {
+        delegate: FunctionButton {
             width: GridView.view.cellWidth
             height: GridView.view.cellHeight
-            spacing: 0
-
-            Rectangle {
-                id: highlightBar
-                width: 5
-                height: parent.height
-                color: model.active ? NeptuneStyle.accentColor : NeptuneStyle.darkColor
-            }
-            Button {
-                width: parent.width - highlightBar.width
-                height: parent.height
-                text: qsTrId(model.description)
-                checked: model.active
-                checkable: true
+            text: qsTrId(model.description)
+            icon: Style.symbolM(model.icon, model.active)
+            highlighted: model.active
 
-                onClicked: {
-                    model.active = !model.active
-                    popupInterface.summary = model.description + (model.active ? " activated" : " deactivated");
-                    popupInterface.show();
-                }
+            onClicked: {
+                model.active = !model.active
+                popupInterface.summary = model.description + (model.active ? " activated" : " deactivated");
+                popupInterface.show();
             }
         }
     }