[Settings] Initial commit of system settings

- added system settings page. This settings page will be used broadly
  in the neptune UI for many use-cases, such as profile, vehicle func
  options, etc.
- added translations language as examples.
- move transitions to import animations instead. since we probably need
  this in other places

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

23 files changed, 674 insertions, 134 deletions

diff --git a/imports/assets/translations/en_US.ts b/imports/assets/translations/en_US.ts
new file mode 100644
index 0000000..3a44fbd
--- /dev/null
+++ b/imports/assets/translations/en_US.ts
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE TS>
+<TS version="2.1" language="en_GB">
+<context>
+    <name></name>
+    <message id="hill_descent_control_id">
+        <source>Hill Descent Control</source>
+        <translation>Hill Descent Control</translation>
+    </message>
+    <message id="intelligent_speed_adaptation_id">
+        <source>Intelligent Speed Adaptation</source>
+        <translation>Intelligent Speed Adaptation</translation>
+    </message>
+    <message id="automatic_beam_switching_id">
+        <source>Automatic Beam Switching</source>
+        <translation>Automatic Beam Switching</translation>
+    </message>
+    <message id="collision_avoidance_id">
+        <source>Automatic Beam Switching</source>
+        <translation>Automatic Beam Switching</translation>
+    </message>
+    <message id="lane_assist_id">
+        <source>Lane Assist</source>
+        <translation>Lane Assist</translation>
+    </message>
+    <message id="traffic_jam_assist_id">
+        <source>Traffic Jam Assist</source>
+        <translation>Traffic Jam Assist</translation>
+    </message>
+    <message id="driver_drowsiness_alert_id">
+        <source>Driver Drowsiness Alert</source>
+        <translation>Driver Drowsiness Alert</translation>
+    </message>
+    <message id="park_assist_id">
+        <source>Park Assist</source>
+        <translation>Park Assist</translation>
+    </message>
+    <message id="language_id">
+        <source>Language</source>
+        <translation>Language</translation>
+    </message>
+</context>
+</TS>
diff --git a/imports/assets/translations/in_ID.ts b/imports/assets/translations/in_ID.ts
new file mode 100644
index 0000000..ef1c840
--- /dev/null
+++ b/imports/assets/translations/in_ID.ts
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE TS>
+<TS version="2.1" language="in_ID">
+<context>
+    <name></name>
+    <message id="hill_descent_control_id">
+        <source>Hill Descent Control</source>
+        <translation>Kontrol Bukit Menurun</translation>
+    </message>
+    <message id="intelligent_speed_adaptation_id">
+        <source>Intelligent Speed Adaptation</source>
+        <translation>Adaptasi Kecepatan Cerdas</translation>
+    </message>
+    <message id="automatic_beam_switching_id">
+        <source>Automatic Beam Switching</source>
+        <translation>Kontrol Lampu Otomatis</translation>
+    </message>
+    <message id="collision_avoidance_id">
+        <source>Collision Avoidance</source>
+        <translation>Pencegah Tabrakan</translation>
+    </message>
+    <message id="lane_assist_id">
+        <source>Lane Assist</source>
+        <translation>Asisten Jalur</translation>
+    </message>
+    <message id="traffic_jam_assist_id">
+        <source>Traffic Jam Assist</source>
+        <translation>Asisten Kemacetan</translation>
+    </message>
+    <message id="driver_drowsiness_alert_id">
+        <source>Driver Drowsiness Alert</source>
+        <translation>Pengingat Kelelahan Supir</translation>
+    </message>
+    <message id="park_assist_id">
+        <source>Park Assist</source>
+        <translation>Asisten Parkir</translation>
+    </message>
+    <message id="language_id">
+        <source>Language</source>
+        <translation>Bahasa Indonesia</translation>
+    </message>
+</context>
+</TS>
diff --git a/sysui/display/windowtransitions/Tumble.qml b/imports/shared/animations/Tumble.qml
index 35aa29b..235332b 100644
--- a/sysui/display/windowtransitions/Tumble.qml
+++ b/imports/shared/animations/Tumble.qml
@@ -107,7 +107,7 @@ QtObject {
             PropertyAction { property: "clip"; value: false }
             ScriptAction {
                 script: {
-                    ApplicationManagerModel.releasingApplicationSurfaceDone(stackView.currentItem)
+                    root.exitAction()
                 }
             }
         }
@@ -176,9 +176,11 @@ QtObject {
             PropertyAction { property: "clip"; value: false }
             ScriptAction {
                 script: {
-                    ApplicationManagerModel.releasingApplicationSurfaceDone(stackView.currentItem)
+                    root.exitAction()
                 }
             }
         }
     }
+
+    signal exitAction()
 }
diff --git a/sysui/display/windowtransitions/Zoom.qml b/imports/shared/animations/Zoom.qml
index 553e6f3..8871216 100644
--- a/sysui/display/windowtransitions/Zoom.qml
+++ b/imports/shared/animations/Zoom.qml
@@ -116,9 +116,11 @@ QtObject {
             }
             ScriptAction {
                 script: {
-                    ApplicationManagerModel.releasingApplicationSurfaceDone(stackView.currentItem)
+                    root.exitAction()
                 }
             }
         }
     }
+
+    signal exitAction()
 }
diff --git a/imports/shared/animations/qmldir b/imports/shared/animations/qmldir
new file mode 100644
index 0000000..567e925
--- /dev/null
+++ b/imports/shared/animations/qmldir
@@ -0,0 +1,2 @@
+Zoom 1.0 Zoom.qml
+Tumble 1.0 Tumble.qml
diff --git a/imports/shared/controls/ListItem.qml b/imports/shared/controls/ListItem.qml
index ad69cde..a6eb82d 100644
--- a/imports/shared/controls/ListItem.qml
+++ b/imports/shared/controls/ListItem.qml
@@ -36,51 +36,59 @@ import QtQuick.Controls 2.0
 import controls 1.0
 import utils 1.0
 
-// TODO: Convert to use QQC2 ItemDelegate
-// TODO: Convert to use RowLayout
-// TODO: Remove this as it is never used
-Control {
+ItemDelegate {
     id: root
 
-    property alias iconName: image.source
-    property alias titleText: titleLabel.text
-    property alias iconFit: image.fit
+    property alias icon: icon.name
+    property alias hasChildren: childIndicator.visible
 
-    signal clicked()
-
-    Row {
-        anchors.verticalCenter: parent.verticalCenter
+    background: Item {
+        anchors.fill: root
+    }
 
-        Icon {
-            id: image
+    contentItem: Control {
+        anchors.fill: root
+        RowLayout {
+            height: parent.height
 
-            width: Style.hspan(2)
-            height: Style.vspan(2)
-            opacity: 0.6
-        }
+            Symbol {
+                id: icon
+                Layout.preferredWidth: Style.hspan(2)
+                Layout.fillHeight: true
+                opacity: 0.4
+            }
 
-        Label {
-            id: titleLabel
+            Label {
+                id: titleLabel
+                Layout.preferredWidth: Style.hspan(18)
+                Layout.fillHeight: true
+                text: root.text
+                elide: Text.ElideRight
+            }
 
-            width: Style.hspan(8); height: Style.vspan(2)
+            Icon {
+                id: childIndicator
+                Layout.preferredWidth: Style.hspan(2)
+                Layout.fillHeight: true
+                source: Style.icon("cloud_arrow")
+            }
         }
 
-        Icon {
-            id: childIndicator
-
-            width: Style.hspan(1); height: Style.vspan(2)
-            source: Style.icon("cloud_arrow")
+        Control {
+            width: root.width
+            anchors.verticalCenter: parent.bottom
+            anchors.horizontalCenter: parent.horizontalCenter
+            height: Style.vspan(2)
+            Image {
+                width: parent.width
+                anchors.centerIn: parent
+                anchors.verticalCenterOffset: 16
+                source: Style.gfx('widgets_hdiv')
+                asynchronous: true
+            }
         }
     }
 
-    Divider {
-        width: parent.width
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: -5
-    }
-
-    MouseArea {
-        anchors.fill: parent
-        onClicked: root.clicked()
+    Tracer {
     }
 }
diff --git a/imports/shared/controls/ListItemRadioButton.qml b/imports/shared/controls/ListItemRadioButton.qml
new file mode 100644
index 0000000..eb5c7ac
--- /dev/null
+++ b/imports/shared/controls/ListItemRadioButton.qml
@@ -0,0 +1,67 @@
+/****************************************************************************
+**
+** 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.Layouts 1.0
+import QtQuick.Controls 2.0
+
+import controls 1.0
+import utils 1.0
+
+ListItem {
+    id: root
+
+    hasChildren: false
+
+    property bool selected: false
+
+    // Replace this with asset when available
+    Rectangle {
+        width: Style.vspan(0.6)
+        height: width
+        radius: width
+        border.width: Style.vspan(0.08)
+        border.color: Style.colorWhite
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.right
+        anchors.rightMargin: Style.vspan(6)
+        color: "transparent"
+
+        Rectangle {
+            width: Style.vspan(0.3)
+            height: width
+            radius: width
+            anchors.centerIn: parent
+            color: Style.colorOrange
+            visible: selected
+        }
+    }
+}
diff --git a/imports/shared/controls/qmldir b/imports/shared/controls/qmldir
index ecd8599..2390712 100644
--- a/imports/shared/controls/qmldir
+++ b/imports/shared/controls/qmldir
@@ -16,6 +16,7 @@ WebBrowser 1.0 WebBrowser.qml
 ListViewManager 1.0 ListViewManager.qml
 Divider 1.0 Divider.qml
 ListItem 1.0 ListItem.qml
+ListItemRadioButton 1.0 ListItemRadioButton.qml
 AppStackView 1.0 AppStackView.qml
 Popup 1.0 Popup.qml
 LetterPicker 1.0 LetterPicker.qml
diff --git a/imports/shared/utils/Style.qml b/imports/shared/utils/Style.qml
index 403ed18..799961b 100644
--- a/imports/shared/utils/Style.qml
+++ b/imports/shared/utils/Style.qml
@@ -113,7 +113,7 @@ QtObject {
         id: translation
         Component.onCompleted: {
             setPath(root.assetPath + "translations/");
-            languageLocale = "en_GB";
+            languageLocale = "en_US";
         }
     }
 
diff --git a/imports/system/models/settings/SettingsModel.qml b/imports/system/models/settings/SettingsModel.qml
index a543287..f3eb69a 100644
--- a/imports/system/models/settings/SettingsModel.qml
+++ b/imports/system/models/settings/SettingsModel.qml
@@ -31,16 +31,20 @@
 
 pragma Singleton
 import QtQuick 2.6
+import animations 1.0
 
 QtObject {
     id: root
 
+    property bool settingsPageVisible: false
     property bool clusterVisible: true
     property string unitSystem: "metric"  // "metric" or "imp_us"
     readonly property bool metric: unitSystem === "metric"
 
     readonly property ListModel languages: ListModel {
         ListElement { name: "en_GB" }
+        ListElement { name: "en_US" }
+        ListElement { name: "in_ID" }
         ListElement { name: "de_DE" }
     }
     property int currentLanguageIndex: 0
@@ -49,6 +53,10 @@ QtObject {
         ListElement { name: "Zoom" }
         ListElement { name: "Tumble" }
     }
+
+    property Component zoomTransition: Zoom {}
+    property Component tumbleTransition: Tumble {}
+
     property int windowTransitionsIndex: 0
 
     property ListModel entries: ListModel {
diff --git a/plugins/translation/translation.pro b/plugins/translation/translation.pro
index b291aac..80ae4dc 100644
--- a/plugins/translation/translation.pro
+++ b/plugins/translation/translation.pro
@@ -30,7 +30,9 @@ target.path = $$installPath
 
 supportedLocales = \
     de_DE \
-    en_GB
+    en_GB \
+    en_US \
+    in_ID
 
 TRANSLATIONS = $$prependAll(supportedLocales, $$assetsPath/translations/, .ts)
 
diff --git a/sysui/display/About.qml b/sysui/display/About.qml
index 6afd4c8..9920a89 100644
--- a/sysui/display/About.qml
+++ b/sysui/display/About.qml
@@ -45,25 +45,12 @@ Control {
     width: Style.screenWidth
     height: Style.vspan(20)
 
-    readonly property bool _fullyHidden: y === -height
-    on_FullyHiddenChanged: {
-        if (_fullyHidden) {
-            // reset state
-            _showUISettings = false;
-        }
-    }
-    visible: !_fullyHidden // Don't bother QSG rendering when offscreen
-
-    property bool _showUISettings: false
-
     Behavior on y {
         NumberAnimation { duration: 500; easing.type: Easing.OutCubic }
     }
 
     Item {
         anchors.fill: parent
-
-        opacity: root._showUISettings ? 0 : 1
         visible: opacity > 0
         Behavior on opacity {
             NumberAnimation { duration: 250; easing.type: Easing.OutCubic }
@@ -121,83 +108,6 @@ Control {
         }
     }
 
-    ColumnLayout {
-        id: settingsUI
-        anchors.fill: parent
-        anchors.topMargin: Style.hspan(2)
-        anchors.leftMargin: Style.hspan(4)
-        anchors.rightMargin: Style.hspan(4)
-
-        opacity: root._showUISettings ? 1 : 0
-        visible: opacity > 0
-        Behavior on opacity {
-            NumberAnimation { duration: 250; easing.type: Easing.OutCubic }
-        }
-
-        RowLayout {
-            Layout.alignment: Qt.AlignCenter
-            Label { text: "Window Transitions:" }
-            ComboBox {
-                id: windowTransitionsComboBox
-                model: SettingsModel.windowTransitions
-                textRole: "name"
-
-                // NB: binding will be broken as soon as the user makes his first selection
-                currentIndex: SettingsModel.windowTransitionsIndex
-
-                // Ensure model and combo box are kept in sync
-                onCurrentIndexChanged: {
-                    SettingsModel.windowTransitionsIndex = currentIndex;
-                }
-                Connections {
-                    target: SettingsModel
-                    onWindowTransitionsIndexChanged: {
-                        windowTransitionsComboBox.currentIndex = SettingsModel.windowTransitionsIndex
-                    }
-                }
-
-                width: Style.hspan(5)
-                implicitWidth: width
-            }
-        }
-
-        RowLayout {
-            Layout.alignment: Qt.AlignCenter
-            Label { text: qsTrId("language_id") + ": " }
-            ComboBox {
-                id: languageComboBox
-                width: Style.hspan(5)
-                implicitWidth: width
-                model: SettingsModel.languages
-                textRole: "name"
-                onCurrentIndexChanged: {
-                    SettingsModel.currentLanguageIndex = currentIndex;
-                }
-
-                Connections {
-                    target: SettingsModel
-                    onCurrentLanguageIndexChanged: {
-                        Style.languageLocale = SettingsModel.languages.get(languageComboBox.currentIndex).name
-                    }
-                }
-            }
-        }
-
-    }
-
-    Symbol {
-        anchors.top: parent.top
-        anchors.right: parent.right
-        anchors.topMargin: Style.hspan(2)
-        anchors.rightMargin: Style.hspan(0.5)
-        size: Style.symbolSizeS
-        name: "settings"
-        MouseArea {
-            anchors.fill: parent
-            onClicked: root._showUISettings = !root._showUISettings
-        }
-    }
-
 //    Button {
 //        id: closeButton
 //        anchors.top: parent.top
diff --git a/sysui/display/Display.qml b/sysui/display/Display.qml
index 861bc7c..b3b8d11 100644
--- a/sysui/display/Display.qml
+++ b/sysui/display/Display.qml
@@ -102,6 +102,13 @@ Item {
         source: "About.qml"
     }
 
+    StageLoader {
+        id: settingsLoader
+        anchors.top: statusBar.bottom
+        active: StagedStartupModel.loadBackgroundElements
+        source: "../settings/Settings.qml"
+    }
+
     ClimateBar {
     }
 
diff --git a/sysui/display/LaunchController.qml b/sysui/display/LaunchController.qml
index f9713c2..8079047 100644
--- a/sysui/display/LaunchController.qml
+++ b/sysui/display/LaunchController.qml
@@ -35,6 +35,7 @@ import QtGraphicalEffects 1.0
 import QtQuick.Controls 2.1
 import controls 1.0
 import utils 1.0
+import animations 1.0
 import models.application 1.0
 import models.settings 1.0
 import models.system 1.0
@@ -74,7 +75,8 @@ Item {
 
         Loader {
             id: windowTransitionsLoader
-            source: "windowtransitions/" + SettingsModel.windowTransitions.get(SettingsModel.windowTransitionsIndex).name + ".qml"
+            sourceComponent: SettingsModel.windowTransitionsIndex === 0 ? SettingsModel.zoomTransition : SettingsModel.tumbleTransition
+
             Binding {
                 target: windowTransitionsLoader.item
                 property: "itemWidth"
@@ -83,6 +85,11 @@ Item {
         }
         property alias windowTransitions: windowTransitionsLoader.item
 
+        Connections {
+            target: windowTransitionsLoader.item
+            onExitAction: ApplicationManagerModel.releasingApplicationSurfaceDone(stackView.currentItem)
+        }
+
         Item {
             id: dummyitem
             anchors.fill: parent
diff --git a/sysui/display/MenuScreen.qml b/sysui/display/MenuScreen.qml
index 6d3ef69..7312077 100644
--- a/sysui/display/MenuScreen.qml
+++ b/sysui/display/MenuScreen.qml
@@ -38,6 +38,7 @@ import utils 1.0
 import cloud 1.0
 
 import models.system 1.0
+import models.settings 1.0
 
 UIScreen {
     id: root
@@ -51,6 +52,7 @@ UIScreen {
     SwipeView {
         id: view
         anchors.fill: parent
+        interactive: !SettingsModel.settingsPageVisible
         currentIndex: SystemModel.currentPageIndex
         onCurrentIndexChanged: SystemModel.currentPageIndex = currentIndex
 
diff --git a/sysui/notification/NotificationCenter.qml b/sysui/notification/NotificationCenter.qml
index f819761..e745507 100644
--- a/sysui/notification/NotificationCenter.qml
+++ b/sysui/notification/NotificationCenter.qml
@@ -35,6 +35,7 @@ import utils 1.0
 import controls 1.0
 import models.notification 1.0
 import models.system 1.0
+import models.settings 1.0
 
 Control {
     id: root
@@ -54,7 +55,33 @@ Control {
             visible: opacity > 0.0
         }
 
+        Label {
+            id: notificationCenterTitle
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: parent.top
+            anchors.topMargin: Style.hspan(0.5)
+            horizontalAlignment: Text.AlignHCenter
+            text: "Notification Center"
+        }
+
+        Symbol {
+            anchors.top: parent.top
+            anchors.right: parent.right
+            anchors.topMargin: Style.hspan(0.1)
+            anchors.rightMargin: Style.hspan(0.5)
+            size: Style.symbolSizeS
+            name: "settings"
+            MouseArea {
+                anchors.fill: parent
+                onClicked: {
+                    SystemModel.notificationCenterVisible = false
+                    SettingsModel.settingsPageVisible = true
+                }
+            }
+        }
+
         Column {
+            anchors.top: notificationCenterTitle.bottom
             Repeater {
                 id: notificationRepeater
                 model: NotificationModel.model
diff --git a/sysui/settings/Settings.qml b/sysui/settings/Settings.qml
new file mode 100644
index 0000000..1fa46af
--- /dev/null
+++ b/sysui/settings/Settings.qml
@@ -0,0 +1,131 @@
+/****************************************************************************
+**
+** 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.2
+
+import controls 1.0
+import utils 1.0
+import animations 1.0
+import models.settings 1.0
+
+Page {
+    id: root
+    x: opacity < 1.0 ? -width : 0
+    width: Style.hspan(24)
+    height: Style.vspan(20)
+    opacity: SettingsModel.settingsPageVisible ? 1.0 : 0.0
+
+    Behavior on opacity {
+        NumberAnimation {
+            duration: 200
+        }
+    }
+
+    Behavior on x {
+        NumberAnimation {
+            duration: 200
+        }
+    }
+
+    background: Rectangle {
+        anchors.fill: parent
+        color: Style.colorGrey
+    }
+
+    Label {
+        id: settingsTitle
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: parent.top
+        anchors.topMargin: Style.hspan(0.5)
+        horizontalAlignment: Text.AlignHCenter
+        visible: root.opacity === 1.0
+        text: "Neptune Settings"
+    }
+
+    ListModel {
+        id: pageModel
+        ListElement {
+            title: "General"
+            page: "general/GeneralSettings.qml"
+        }
+
+        ListElement {
+            title: "System"
+            page: "system/SystemSettings.qml"
+        }
+    }
+
+    StackView {
+        id: stackView
+        width: Style.hspan(24)
+        height: Style.vspan(20)
+        anchors.top: settingsTitle.bottom
+        anchors.topMargin: Style.hspan(0.5)
+        anchors.horizontalCenter: parent.horizontalCenter
+        visible: root.opacity === 1.0
+
+        initialItem: Item {
+            width: stackView.width
+            height: stackView.height
+            ListView {
+                id: settingsListView
+                model: pageModel
+                anchors.fill: parent
+                boundsBehavior: Flickable.StopAtBounds
+                delegate: ListItem {
+                    width: Style.hspan(22)
+                    height: Style.vspan(2)
+                    text: title
+                    onClicked: stackView.push(Qt.resolvedUrl(page))
+                }
+
+            }
+        }
+    }
+
+    Tool {
+        id: backButton
+        anchors.left: parent.left
+        anchors.top: parent.top
+        width: Style.hspan(2)
+        height: Style.vspan(2)
+        visible: root.opacity === 1.0
+        symbol: 'back'
+        onClicked: {
+            if (stackView.depth > 1) {
+                stackView.pop()
+            } else {
+                SettingsModel.settingsPageVisible = false
+            }
+        }
+    }
+}
diff --git a/sysui/settings/general/GeneralSettings.qml b/sysui/settings/general/GeneralSettings.qml
new file mode 100644
index 0000000..bab19d5
--- /dev/null
+++ b/sysui/settings/general/GeneralSettings.qml
@@ -0,0 +1,65 @@
+/****************************************************************************
+**
+** 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.2
+
+import controls 1.0
+import utils 1.0
+import models.settings 1.0
+
+Item {
+    id: root
+    width: Style.hspan(24)
+    height: Style.vspan(20)
+
+    ListModel {
+        id: pageModel
+        ListElement {
+            title: "Animation Settings"
+            page: "animation/AnimationsSettings.qml"
+        }
+    }
+
+    ListView {
+        id: settingsListView
+        model: pageModel
+        anchors.fill: parent
+        boundsBehavior: Flickable.StopAtBounds
+        delegate: ListItem {
+            width: settingsListView.width
+            height: Style.vspan(2)
+            text: title
+            onClicked: stackView.push(Qt.resolvedUrl(page))
+        }
+
+    }
+}
diff --git a/sysui/settings/general/animation/AnimationsSettings.qml b/sysui/settings/general/animation/AnimationsSettings.qml
new file mode 100644
index 0000000..0698082
--- /dev/null
+++ b/sysui/settings/general/animation/AnimationsSettings.qml
@@ -0,0 +1,72 @@
+/****************************************************************************
+**
+** 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.2
+
+import controls 1.0
+import utils 1.0
+import models.settings 1.0
+
+Item {
+    id: root
+    width: Style.hspan(24)
+    height: Style.vspan(20)
+
+    Label {
+        id: title
+        anchors.top: parent.top
+        anchors.topMargin: Style.vspan(1)
+        anchors.left: settingsListView.left
+        text: "Window Transitions:"
+    }
+
+    ListView {
+        id: settingsListView
+        width: Style.hspan(22)
+        height: parent.height
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: title.bottom
+        anchors.topMargin: Style.vspan(0.8)
+        model: SettingsModel.windowTransitions
+        boundsBehavior: Flickable.StopAtBounds
+        delegate: ListItemRadioButton {
+            width: settingsListView.width
+            height: Style.vspan(2)
+            text: name
+            hasChildren: false
+            selected: SettingsModel.windowTransitionsIndex === index
+            onClicked: {
+                SettingsModel.windowTransitionsIndex = index
+            }
+        }
+    }
+}
diff --git a/sysui/settings/qmldir b/sysui/settings/qmldir
new file mode 100644
index 0000000..c1e82db
--- /dev/null
+++ b/sysui/settings/qmldir
@@ -0,0 +1 @@
+Settings 1.0 Settings.qml
diff --git a/sysui/settings/system/SystemSettings.qml b/sysui/settings/system/SystemSettings.qml
new file mode 100644
index 0000000..46269fe
--- /dev/null
+++ b/sysui/settings/system/SystemSettings.qml
@@ -0,0 +1,65 @@
+/****************************************************************************
+**
+** 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.2
+
+import controls 1.0
+import utils 1.0
+import models.settings 1.0
+
+Item {
+    id: root
+    width: Style.hspan(24)
+    height: Style.vspan(20)
+
+    ListModel {
+        id: pageModel
+        ListElement {
+            title: "Language Settings"
+            page: "language/LanguageSettings.qml"
+        }
+    }
+
+    ListView {
+        id: settingsListView
+        model: pageModel
+        anchors.fill: parent
+        boundsBehavior: Flickable.StopAtBounds
+        delegate: ListItem {
+            width: settingsListView.width
+            height: Style.vspan(2)
+            text: title
+            onClicked: stackView.push(Qt.resolvedUrl(page))
+        }
+
+    }
+}
diff --git a/sysui/settings/system/language/LanguageSettings.qml b/sysui/settings/system/language/LanguageSettings.qml
new file mode 100644
index 0000000..e93f5f2
--- /dev/null
+++ b/sysui/settings/system/language/LanguageSettings.qml
@@ -0,0 +1,73 @@
+/****************************************************************************
+**
+** 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.2
+
+import controls 1.0
+import utils 1.0
+import models.settings 1.0
+
+Item {
+    id: root
+    width: Style.hspan(24)
+    height: Style.vspan(20)
+
+    Label {
+        id: title
+        anchors.top: parent.top
+        anchors.topMargin: Style.vspan(1)
+        anchors.left: settingsListView.left
+        text: "System Language:"
+    }
+
+    ListView {
+        id: settingsListView
+        width: Style.hspan(22)
+        height: parent.height
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: title.bottom
+        anchors.topMargin: Style.vspan(0.8)
+        model: SettingsModel.languages
+        boundsBehavior: Flickable.StopAtBounds
+        delegate: ListItemRadioButton {
+            width: settingsListView.width
+            height: Style.vspan(2)
+            text: name
+            hasChildren: false
+            selected: SettingsModel.currentLanguageIndex === index
+            onClicked: {
+                SettingsModel.currentLanguageIndex = index
+                Style.languageLocale = SettingsModel.languages.get(index).name
+            }
+        }
+    }
+}
diff --git a/sysui/statusbar/StatusBar.qml b/sysui/statusbar/StatusBar.qml
index 43c04a3..24bad4e 100644
--- a/sysui/statusbar/StatusBar.qml
+++ b/sysui/statusbar/StatusBar.qml
@@ -49,10 +49,12 @@ Pane {
     MouseArea {
         anchors.fill: parent
         onClicked: {
-            if (SystemModel.climateExpanded) {
-                SystemModel.climateExpanded.expanded = false
-            } else {
-                SystemModel.statusBarExpanded = true
+            if (!SettingsModel.settingsPageVisible) {
+                if (SystemModel.climateExpanded) {
+                    SystemModel.climateExpanded.expanded = false
+                } else {
+                    SystemModel.statusBarExpanded = true
+                }
             }
         }
         onPressAndHold: SystemModel.toolBarMonitorVisible = !SystemModel.toolBarMonitorVisible