[controls] Add ToolsColumn for Settings view

- Alexa app requires settings view, it is added using ToolsColumn with two
views: Main and Settings. Settings are filled with dummy data.
Later it will be possible to choose mic device, reset amazon account,
switch keyword detection

Depends-On: AUTOSUITE-1215
Task-number: AUTOSUITE-1318
Change-Id: I8b32dcce6245617d858e54bba8bead6caa1bf5be
Reviewed-by: Bramastyo Harimukti Santoso <bramastyo.harimukti.santoso@pelagicore.com>

10 files changed, 215 insertions, 50 deletions

diff --git a/app/Header.qml b/app/Header.qml
index 19b2223..3400385 100644
--- a/app/Header.qml
+++ b/app/Header.qml
@@ -37,7 +37,6 @@ import alexainterface 1.0
 
 Control {
     id: root
-    property bool unfoldHeader: false
 
     QtObject {
         id: privateData
@@ -109,9 +108,7 @@ Control {
         }
     }
 
-    onUnfoldHeaderChanged: {
-        if (unfoldHeader && privateData.headerTextIndex === 0) {
-            timerTextAnimation.start()
-        }
+    Component.onCompleted: {
+        timerTextAnimation.start()
     }
 }
diff --git a/app/MainView.qml b/app/MainView.qml
index 78e6dd7..f4aee3f 100644
--- a/app/MainView.qml
+++ b/app/MainView.qml
@@ -50,30 +50,6 @@ Item {
 
     property string neptuneState: "Maximized"
 
-    AuthWebPageInteraction {
-        id: alexaAuth
-        onErrorChanged: {
-            if (error === AlexaAuth.AutomaticAuthFailed){
-                authView.state = "manual_auth"
-            }
-        }
-    }
-
-    Connections {
-        target: AlexaInterface
-        onAuthCodeChanged: {
-            if (AlexaInterface.authCode !== "") {
-                alexaAuth.authCode = AlexaInterface.authCode
-            }
-        }
-        onAuthUrlChanged: {
-            alexaAuth.authUrl = AlexaInterface.authUrl
-        }
-        Component.onCompleted: {
-            AlexaInterface.logLevel = Alexa.Debug9
-        }
-    }
-
     Header {
         id: header
         anchors.top: parent.top
@@ -81,30 +57,128 @@ Item {
         width: parent.width
         height: Sizes.dp(356)
         anchors.horizontalCenter: parent.horizontalCenter
-        unfoldHeader: alexaView.visible || authView.visible
         visible: root.neptuneState === "Maximized"
     }
 
-    Item {
-        id: paneMainView
-        anchors.top: header.bottom
+    ToolsColumn {
+        id: sectionsColumn
+
         anchors.left: parent.left
+        width: Sizes.dp(264)
+        anchors.top: header.bottom
+        anchors.bottom: parent.bottom
+        anchors.topMargin: Sizes.dp(53)
+
+        onClicked: {
+            applyIndex(currentIndex);
+        }
+
+        // not to have settings all the time and have alexa view all the time
+        // we use StackView, function pushes settings and pops it
+        function applyIndex(index) {
+            //show main, pop settings
+            if (index === 0) {
+                if (stack.depth > 1) {
+                    stack.pop();
+                }
+            }
+            //show settings, push settings
+            if (index === 1) {
+                if (stack.depth === 1) {
+                    stack.push(settingsView);
+                }
+            }
+        }
+
+        ListModel {
+            id: toolsModel
+
+            Component.onCompleted: {
+                //fill list and set model to ToolsColumn
+                append({ "sourceOn": Qt.resolvedUrl("assets/ic-logo_ON.png"),
+                         "sourceOff": Qt.resolvedUrl("assets/ic-logo_OFF.png"),
+                         "text": qsTr("Alexa") });
+                append({"sourceOn": Qt.resolvedUrl("assets/ic-settings_ON.png"),
+                        "sourceOff": Qt.resolvedUrl("assets/ic-settings_OFF.png"),
+                         "text": qsTr("Settings")});
+                sectionsColumn.model = toolsModel
+            }
+        }
+    }
+
+    StackView {
+        id: stack
+
+        anchors.top: header.bottom
+        anchors.left: sectionsColumn.right
         anchors.right: parent.right
-        // to not overlap content with on-top widget
-        height: parent.height - (header.y + header.height)
+        height: parent.height - Sizes.dp(50)
+        initialItem: mainView
+        pushEnter: Transition {
+            PropertyAnimation { property: "opacity"; from: 0; to: 1.0; duration: 200 }
+        }
+        pushExit: Transition {
+            PropertyAnimation { property: "opacity"; from: 1.0; to: 0; duration: 200 }
+        }
+        popEnter: Transition {
+            PropertyAnimation { property: "opacity"; from: 0; to: 1.0; duration: 200 }
+        }
+        popExit: Transition {
+            PropertyAnimation { property: "opacity"; from: 1.0; to: 0; duration: 200 }
+        }
+    }
 
-        AlexaView {
-            id: alexaView
-            anchors.fill: parent
-            visible: AlexaInterface.authState === Alexa.Refreshed
-            neptuneState: root.neptuneState
+    Component{
+        id: mainView
+
+        Item {
+            Connections {
+                target: AlexaInterface
+                onAuthCodeChanged: {
+                    if (AlexaInterface.authCode !== "") {
+                        alexaAuth.authCode = AlexaInterface.authCode
+                    }
+                }
+                onAuthUrlChanged: { alexaAuth.authUrl = AlexaInterface.authUrl }
+                onAuthStateChanged: {
+                    if (AlexaInterface.authState === Alexa.Uninitialized) {
+                        alexaAuth.reset()
+                    }
+                }
+                Component.onCompleted: { AlexaInterface.logLevel = Alexa.Debug9 }
+            }
+
+            AuthWebPageInteraction {
+                id: alexaAuth
+                onErrorChanged: {
+                    if (error === AlexaAuth.AutomaticAuthFailed){
+                        authView.state = "manual_auth"
+                    }
+                }
+            }
+
+            AlexaView {
+                id: alexaView
+                anchors.fill: parent
+                visible: AlexaInterface.authState === Alexa.Refreshed
+                neptuneState: root.neptuneState
+            }
+
+            AuthView {
+                id: authView
+                anchors.fill: parent
+                alexaAuth: alexaAuth
+                visible: AlexaInterface.authState !== Alexa.Refreshed
+            }
         }
+    }
 
-        AuthView {
-            id: authView
-            anchors.fill: parent
-            alexaAuth: alexaAuth
-            visible: AlexaInterface.authState !== Alexa.Refreshed
+    Component{
+        id: settingsView
+        SettingsView{
+            onResetAccountClicked: {
+                sectionsColumn.applyIndex(0)
+            }
         }
     }
 
diff --git a/app/SettingsView.qml b/app/SettingsView.qml
new file mode 100644
index 0000000..43de08f
--- /dev/null
+++ b/app/SettingsView.qml
@@ -0,0 +1,93 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 Luxoft Sweden AB
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Neptune 3 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.0
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+
+import shared.Sizes 1.0
+import shared.Style 1.0
+import shared.controls 1.0
+import shared.utils 1.0
+
+import alexainterface 1.0
+
+
+Item {
+    id: root
+
+    signal resetAccountClicked()
+
+    ColumnLayout {
+        anchors.fill: parent
+        anchors.topMargin: Sizes.dp(80)
+        spacing: Sizes.dp(40)
+
+        ListItem {
+            subText: "123456";
+            text: qsTr("Device serial number")
+            Layout.fillWidth: true
+        }
+
+        ListItem {
+            subText: "amzn1.application-oa2-client.a92e3edd0c8542a6bafcd89e5f125851";
+            text: qsTr("Alexa Client ID")
+            Layout.fillWidth: true
+        }
+
+        ListItem {
+            subText: "default";
+            text: qsTr("Recording device")
+            Layout.fillWidth: true
+        }
+
+        ListItemSwitch {
+            text: qsTr("Alexa wake word")
+            switchOn: true
+            enabled: false
+            Layout.fillWidth: true
+        }
+
+        Button {
+            visible: AlexaInterface.loggedIn
+            implicitWidth: Sizes.dp(315)
+            implicitHeight: Sizes.dp(64)
+            font.pixelSize: Sizes.fontSizeS
+            text: qsTr("Reset account")
+            Layout.alignment: Qt.AlignHCenter
+            enabled: false
+        }
+
+        Item {
+            Layout.fillHeight: true
+        }
+    }
+}
diff --git a/app/WeatherCard.qml b/app/WeatherCard.qml
index 02c088e..13b9be1 100644
--- a/app/WeatherCard.qml
+++ b/app/WeatherCard.qml
@@ -74,8 +74,8 @@ BasicCard {
         anchors.rightMargin: Sizes.dp(50)
         spacing: Sizes.dp(50)
         Image {
-            Layout.preferredHeight: root.height/3
-            Layout.preferredWidth: root.height/4
+            Layout.preferredHeight: root.width/8
+            Layout.preferredWidth: root.width/8
             fillMode: Image.PreserveAspectFit
             source: cardData.weatherIcon
             BusyIndicator {
@@ -85,13 +85,13 @@ BasicCard {
         }
         Label {
             Layout.fillWidth: true
-            font.pixelSize: root.height/4
+            font.pixelSize: root.width/5
             text: cardData.temperature + "\u00b0"
             opacity: 0.7
         }
 
         Column {
-            Layout.preferredHeight: root.height/3
+            Layout.preferredHeight: root.width/3
             Layout.preferredWidth: height
             Label {
                 height: parent.height / 2
diff --git a/app/app.pro b/app/app.pro
index c777cf8..f31955e 100644
--- a/app/app.pro
+++ b/app/app.pro
@@ -13,7 +13,8 @@ FILES += info.yaml \
          WeatherCard.qml \
          InfoCard.qml \
          MainView.qml \
-         AuthWebPageInteraction.qml
+         AuthWebPageInteraction.qml \
+         SettingsView.qml
 
 app.files = $$FILES
 app.path = $$INSTALL_PREFIX/apps/com.luxoft.alexa
diff --git a/app/icon.png b/app/icon.png
index 798b50d..5196e82 100644
--- a/app/icon.png
+++ b/app/icon.png
diff --git a/gfx/ic-logo_OFF.png b/gfx/ic-logo_OFF.png
new file mode 100644
index 0000000..b8f5b43
--- /dev/null
+++ b/gfx/ic-logo_OFF.png
diff --git a/gfx/ic-logo_ON.png b/gfx/ic-logo_ON.png
new file mode 100644
index 0000000..fe5522c
--- /dev/null
+++ b/gfx/ic-logo_ON.png
diff --git a/gfx/ic-settings_OFF.png b/gfx/ic-settings_OFF.png
new file mode 100644
index 0000000..bef36da
--- /dev/null
+++ b/gfx/ic-settings_OFF.png
diff --git a/gfx/ic-settings_ON.png b/gfx/ic-settings_ON.png
new file mode 100644
index 0000000..bef36da
--- /dev/null
+++ b/gfx/ic-settings_ON.png