From e6fdf8f85b439cdad1c17f3f06a85957af2e7f25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Tinkl?= <ltinkl@luxoft.com>
Date: Thu, 17 Aug 2017 17:04:53 +0200
Subject: slightly revamp the vehicle functions page

- change the popup text from Cancel -> OK
- add an orange indicator to the left of the checked buttons
  (this mimicks at least the previous style which got broken during
  the port to QQC 2, see https://doc.qt.io/NeptuneUI/index.html)

Change-Id: I3b29e99a9eb5a23b28ac49ef8218daa4aa186148
Reviewed-by: Bramastyo Harimukti Santoso <bramastyo.harimukti.santoso@pelagicore.com>
---
 sysui/display/FunctionsPage.qml | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/sysui/display/FunctionsPage.qml b/sysui/display/FunctionsPage.qml
index 94284e7..94aa511 100644
--- a/sysui/display/FunctionsPage.qml
+++ b/sysui/display/FunctionsPage.qml
@@ -31,25 +31,25 @@
 
 import QtQuick 2.6
 import QtQuick.Layouts 1.0
-import QtGraphicalEffects 1.0
-import controls 1.0
 import QtQuick.Controls 2.0
 
+import controls 1.0
 import utils 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
 
     PopupInterface {
         id: popupInterface
-        actions: [ { text: "Cancel" } ]
+        actions: [ { text: "OK" } ]
         title: "Car Settings"
     }
 
-    header : AppInfoPanel {
+    header: AppInfoPanel {
         Layout.fillWidth: true
         Layout.preferredHeight: Style.vspan(2)
         title: 'Car Settings'
@@ -69,16 +69,22 @@ UIPage {
         cellWidth: width/3
         cellHeight: height/3
 
-        delegate: Item {
-            id: delegatedItem
+        delegate: Row {
             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 {
                 checked: model.active
                 text: model.description
-                anchors.fill: parent
-                anchors.margins: padding
                 checkable: true
+                width: parent.width - highlightBar.width
+                height: parent.height
 
                 onClicked: {
                     model.active = !model.active
-- 
cgit v1.2.3