[lucee] Layout of climate and status bars

Change-Id: I0bdf12d7bc195fdc7a556bcbc9976dee0590e2a7
Reviewed-by: Bramastyo Harimukti Santoso <bramastyo.harimukti.santoso@pelagicore.com>

10 files changed, 425 insertions, 126 deletions

diff --git a/apps/com.pelagicore.climate/panels/+lucee/ClimateIndicatorPanel.qml b/apps/com.pelagicore.climate/panels/+lucee/ClimateIndicatorPanel.qml
new file mode 100644
index 00000000..f38856c8
--- /dev/null
+++ b/apps/com.pelagicore.climate/panels/+lucee/ClimateIndicatorPanel.qml
@@ -0,0 +1,68 @@
+/****************************************************************************
+**
+** 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.9
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.3
+
+import "../helpers" 1.0
+import shared.Style 1.0
+import shared.Sizes 1.0
+
+Item {
+    id: root
+
+    property var store
+    width: parent.width
+    height: Sizes.dp(80)
+
+    Label {
+        anchors.left: parent.left
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.leftMargin: Sizes.dp(44)
+        text: root.store ? root.store.leftSeat.valueString : ""
+        horizontalAlignment: Text.AlignHCenter
+        font.pixelSize: Sizes.fontSizeXL
+        font.weight: Font.DemiBold
+        opacity: Style.opacityMedium
+    }
+
+    Label {
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.rightMargin: Sizes.dp(44)
+        text: root.store ? root.store.rightSeat.valueString : ""
+        horizontalAlignment: Text.AlignHCenter
+        font.pixelSize: Sizes.fontSizeXL
+        font.weight: Font.DemiBold
+        opacity: Style.opacityMedium
+    }
+}
diff --git a/imports_shared/assets/icons/lucee/sysui/qt-badge.png b/imports_shared/assets/icons/lucee/sysui/qt-badge.png
deleted file mode 100644
index 313be35d..00000000
--- a/imports_shared/assets/icons/lucee/sysui/qt-badge.png
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:0d2cb681563bca1baed619a0e070cfbf181e7a9baa0207b7dc47d24fd548bbce
-size 960
diff --git a/styles/lucee/images/luxoft-footer.png b/styles/lucee/images/luxoft-footer.png
new file mode 100644
index 00000000..6d752964
--- /dev/null
+++ b/styles/lucee/images/luxoft-footer.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:eaebc43c8dfefae428c7f9f084b064ee5a743883b9eacf71176728924718bf6f
+size 1524
diff --git a/sysui/centerconsole/+lucee/CenterConsole.qml b/sysui/centerconsole/+lucee/CenterConsole.qml
new file mode 100644
index 00000000..cb62fb0c
--- /dev/null
+++ b/sysui/centerconsole/+lucee/CenterConsole.qml
@@ -0,0 +1,72 @@
+/****************************************************************************
+**
+** 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.7
+import QtGraphicalEffects 1.0
+import QtQuick.Controls 2.2
+import QtGraphicalEffects 1.0
+
+import shared.controls 1.0
+import shared.utils 1.0
+import shared.animations 1.0
+import about 1.0
+import centerconsole 1.0
+import statusbar 1.0
+import stores 1.0
+import system.controls 1.0
+
+import shared.Style 1.0
+import shared.Sizes 1.0
+
+AbstractCenterConsole {
+    id: root
+
+    Image {
+        id: luxoftIcon
+        anchors.centerIn: bottomBar
+        source: Style.image("luxoft-footer")
+        MouseArea {
+            anchors.fill: parent
+            anchors.topMargin: - Sizes.dp(10)
+            anchors.bottomMargin: - Sizes.dp(10)
+            onClicked: about.open()
+        }
+    }
+
+    About {
+        id: about
+        popupParent: root.popupParent
+        originItem: luxoftIcon
+        applicationModel: root.store.applicationModel
+        systemModel: root.store.systemStore
+        sysInfo: root.store.sysInfo
+    }
+}
diff --git a/sysui/centerconsole/AbstractCenterConsole.qml b/sysui/centerconsole/AbstractCenterConsole.qml
new file mode 100644
index 00000000..13932a2a
--- /dev/null
+++ b/sysui/centerconsole/AbstractCenterConsole.qml
@@ -0,0 +1,173 @@
+/****************************************************************************
+**
+** Copyright (C) 2017-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.7
+import QtGraphicalEffects 1.0
+import QtQuick.Controls 2.2
+import QtGraphicalEffects 1.0
+
+import shared.controls 1.0
+import shared.utils 1.0
+import shared.animations 1.0
+import centerconsole 1.0
+import volume 1.0
+import statusbar 1.0
+import stores 1.0
+import system.controls 1.0
+
+import shared.Style 1.0
+import shared.Sizes 1.0
+
+Item {
+    id: root
+
+    property Item popupParent
+    property RootStore store
+    property alias mainContentArea: mainContentArea
+    readonly property Item bottomBar: bottomBar
+
+    rotation: store.centerConsole.rotation
+
+    // If the Window aspect ratio differs from Config.centerConsoleAspectRatio the Center Console item will be
+    // letterboxed so that a Config.centerConsoleAspectRatio is preserved.
+    states: [
+        State {
+            name: "constrainWidth"
+            when: root.store.centerConsole.availableAspectRatio > Config.centerConsoleAspectRatio
+            PropertyChanges { target: root
+                width: Math.round(root.height * Config.centerConsoleAspectRatio)
+                height: root.store.centerConsole.availableHeight
+            }
+        },
+        State {
+            name: "constrainHeight"
+            when: root.store.centerConsole.availableAspectRatio <= Config.centerConsoleAspectRatio
+            PropertyChanges { target: root
+                width: root.store.centerConsole.availableWidth
+                height: Math.round(root.width / Config.centerConsoleAspectRatio)
+            }
+        }
+    ]
+
+    Component.onCompleted: {
+        // N.B. need to use a Timer here to "push" the available languages to settings server
+        // since it uses QMetaObject::invokeMethod(), possibly running in a different thread
+        root.store.languageTimer.start();
+    }
+
+    Binding { target: root.store.systemStore; property: "activeAppInfo"; value: root.store.applicationModel.activeAppInfo }
+    Binding { target: root.store.systemStore; property: "monitorEnabled"; value: about.state === "open" && about.currentTabName === "system" }
+
+    Image {
+        anchors.fill: parent
+        source: Style.image("bg-home")
+        opacity: mainContentArea.item && mainContentArea.item.launcherOpen && Style.theme === Style.Light ? 0.7 : 1
+        Behavior on opacity { DefaultNumberAnimation {} }
+    }
+
+    // Content Elements
+    StageLoader {
+        id: mainContentArea
+        source: "MainContentArea.qml"
+        anchors.fill: parent
+
+        Binding { target: mainContentArea.item; property: "applicationModel"; value: root.store.applicationModel }
+        Binding { target: mainContentArea.item; property: "launcherY"; value: statusBar.y + statusBar.height }
+        Binding { target: mainContentArea.item; property: "homeBottomMargin"; value: bottomBar.height }
+        Binding { target: mainContentArea.item; property: "popupParent"; value: root.popupParent }
+        Binding { target: mainContentArea.item; property: "virtualKeyboard"; value: virtualKeyboard.item }
+    }
+
+    StatusBar {
+        id: statusBar
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.leftMargin: Sizes.dp(20)
+        anchors.right: parent.right
+        anchors.rightMargin: Sizes.dp(20)
+        uiSettings: root.store.uiSettings
+        popupParent: root.popupParent
+        z: 1
+        model: root.store
+        onScreenshotRequested: root.store.generateScreenshotAndInfo()
+    }
+
+     NeptuneWindowItem {
+        id: bottomBar
+        width: root.width
+        height: Sizes.dp(120)
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        window: root.store.applicationModel.bottomBarAppInfo.window
+    }
+
+    ApplicationPopups {
+        anchors.fill: parent
+        popupParent: root.popupParent
+        store: root.store.applicationPopupsStore
+        z: 100
+    }
+
+    Loader {
+        id: virtualKeyboard
+        source: "VirtualKeyboard.qml"
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        z: 101
+    }
+
+    UIShortcuts {
+        onCtrlRPressed: {
+            root.store.centerConsole.inverted = !root.store.centerConsole.inverted;
+        }
+        onCtrlShiftRPressed: {
+            root.store.clusterStore.invertedCluster = !root.store.clusterStore.invertedCluster;
+        }
+        onCtrlTPressed: {
+            if (root.Style.supportsMultipleThemes)
+                root.store.uiSettings.theme = root.store.uiSettings.theme === 0 ? 1 : 0;
+        }
+        onCtrlLPressed: {
+            const locales = Config.translation.availableTranslations;
+            const currentLocale = Config.languageLocale;
+            const currentIndex = locales.indexOf(currentLocale);
+            var nextIndex = currentIndex === locales.length - 1 ? 0 : currentIndex + 1;
+            root.store.uiSettings.language = locales[nextIndex];
+        }
+        onCtrlBPressed: {
+            root.store.applicationModel.goBack();
+        }
+        onCtrlPPressed: {
+            root.store.generateScreenshotAndInfo();
+        }
+    }
+}
diff --git a/sysui/centerconsole/CenterConsole.qml b/sysui/centerconsole/CenterConsole.qml
index d63a5112..123624d0 100644
--- a/sysui/centerconsole/CenterConsole.qml
+++ b/sysui/centerconsole/CenterConsole.qml
@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2017-2018 Pelagicore AG
+** Copyright (C) 2018 Pelagicore AG
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of the Neptune 3 IVI UI.
@@ -47,87 +47,9 @@ import system.controls 1.0
 import shared.Style 1.0
 import shared.Sizes 1.0
 
-Item {
+AbstractCenterConsole {
     id: root
 
-    property Item popupParent
-    property RootStore store
-    property alias mainContentArea: mainContentArea
-
-    rotation: store.centerConsole.rotation
-
-    // If the Window aspect ratio differs from Config.centerConsoleAspectRatio the Center Console item will be
-    // letterboxed so that a Config.centerConsoleAspectRatio is preserved.
-    states: [
-        State {
-            name: "constrainWidth"
-            when: root.store.centerConsole.availableAspectRatio > Config.centerConsoleAspectRatio
-            PropertyChanges { target: root
-                width: Math.round(root.height * Config.centerConsoleAspectRatio)
-                height: root.store.centerConsole.availableHeight
-            }
-        },
-        State {
-            name: "constrainHeight"
-            when: root.store.centerConsole.availableAspectRatio <= Config.centerConsoleAspectRatio
-            PropertyChanges { target: root
-                width: root.store.centerConsole.availableWidth
-                height: Math.round(root.width / Config.centerConsoleAspectRatio)
-            }
-        }
-    ]
-
-    Component.onCompleted: {
-        // N.B. need to use a Timer here to "push" the available languages to settings server
-        // since it uses QMetaObject::invokeMethod(), possibly running in a different thread
-        root.store.languageTimer.start();
-    }
-
-    Binding { target: root.store.systemStore; property: "activeAppInfo"; value: root.store.applicationModel.activeAppInfo }
-    Binding { target: root.store.systemStore; property: "monitorEnabled"; value: about.state === "open" && about.currentTabName === "system" }
-
-    Image {
-        anchors.fill: parent
-        source: Style.image("bg-home")
-        opacity: mainContentArea.item && mainContentArea.item.launcherOpen && Style.theme === Style.Light ? 0.7 : 1
-        Behavior on opacity { DefaultNumberAnimation {} }
-    }
-
-    // Content Elements
-    StageLoader {
-        id: mainContentArea
-        source: "MainContentArea.qml"
-        anchors.fill: parent
-
-        Binding { target: mainContentArea.item; property: "applicationModel"; value: root.store.applicationModel }
-        Binding { target: mainContentArea.item; property: "launcherY"; value: statusBar.y + statusBar.height }
-        Binding { target: mainContentArea.item; property: "homeBottomMargin"; value: bottomBar.height }
-        Binding { target: mainContentArea.item; property: "popupParent"; value: root.popupParent }
-        Binding { target: mainContentArea.item; property: "virtualKeyboard"; value: virtualKeyboard.item }
-    }
-
-    StatusBar {
-        id: statusBar
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.leftMargin: Sizes.dp(20)
-        anchors.right: parent.right
-        anchors.rightMargin: Sizes.dp(20)
-        uiSettings: root.store.uiSettings
-        z: 1
-        model: root.store.statusBarStore
-        onScreenshotRequested: root.store.generateScreenshotAndInfo()
-    }
-
-     NeptuneWindowItem {
-        id: bottomBar
-        width: root.width
-        height: Sizes.dp(120)
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.bottom: parent.bottom
-        window: root.store.applicationModel.bottomBarAppInfo.window
-    }
-
     ToolButton {
         id: leftIcon
         objectName: "volumePopupButton"
@@ -168,44 +90,4 @@ Item {
         systemModel: root.store.systemStore
         sysInfo: root.store.sysInfo
     }
-
-    ApplicationPopups {
-        anchors.fill: parent
-        popupParent: root.popupParent
-        store: root.store.applicationPopupsStore
-    }
-
-    Loader {
-        id: virtualKeyboard
-        source: "VirtualKeyboard.qml"
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
-    }
-
-    UIShortcuts {
-        onCtrlRPressed: {
-            root.store.centerConsole.inverted = !root.store.centerConsole.inverted;
-        }
-        onCtrlShiftRPressed: {
-            root.store.clusterStore.invertedCluster = !root.store.clusterStore.invertedCluster;
-        }
-        onCtrlTPressed: {
-            if (root.Style.supportsMultipleThemes)
-                root.store.uiSettings.theme = root.store.uiSettings.theme === 0 ? 1 : 0;
-        }
-        onCtrlLPressed: {
-            const locales = Config.translation.availableTranslations;
-            const currentLocale = Config.languageLocale;
-            const currentIndex = locales.indexOf(currentLocale);
-            var nextIndex = currentIndex === locales.length - 1 ? 0 : currentIndex + 1;
-            root.store.uiSettings.language = locales[nextIndex];
-        }
-        onCtrlBPressed: {
-            root.store.applicationModel.goBack();
-        }
-        onCtrlPPressed: {
-            root.store.generateScreenshotAndInfo();
-        }
-    }
 }
diff --git a/sysui/centerconsole/qmldir b/sysui/centerconsole/qmldir
index bd9932fa..0cd463b5 100644
--- a/sysui/centerconsole/qmldir
+++ b/sysui/centerconsole/qmldir
@@ -1,3 +1,4 @@
+AbstractCenterConsole 1.0 AbstractCenterConsole.qml
 ApplicationFrame 1.0 ApplicationFrame.qml
 ApplicationPopup 1.0 ApplicationPopup.qml
 ApplicationPopups 1.0 ApplicationPopups.qml
diff --git a/sysui/statusbar/+lucee/StatusBar.qml b/sysui/statusbar/+lucee/StatusBar.qml
new file mode 100644
index 00000000..27a3ae01
--- /dev/null
+++ b/sysui/statusbar/+lucee/StatusBar.qml
@@ -0,0 +1,102 @@
+/****************************************************************************
+**
+** 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.6
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.0
+
+import shared.utils 1.0
+import shared.controls 1.0
+import volume 1.0
+
+import shared.Sizes 1.0
+import system.controls 1.0
+
+RowLayout {
+    id: root
+
+    implicitHeight: Sizes.dp(Config.statusBarHeight)
+
+    spacing: Sizes.dp(5)
+    property var uiSettings
+    property var model
+    property Item popupParent
+
+    signal screenshotRequested()
+
+    ToolButton {
+        Layout.preferredWidth: Sizes.dp(60)
+        Layout.fillHeight: true
+        id: volumeIcon
+        objectName: "volumePopupButton"
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.leftMargin: Sizes.dp(27)
+        icon.name: root.model.volumeStore.volumeIcon
+        onClicked: volumePopup.open()
+    }
+
+    Item {
+        Layout.fillWidth: true
+    }
+
+    IndicatorTray {
+        Layout.fillHeight: true
+        model: root.model.statusBarStore.indicators
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+    }
+
+    DateAndTime {
+        Layout.fillHeight: true
+        currentDate: root.model.statusBarStore.currentDate
+        uiSettings: root.uiSettings
+
+        MouseArea {
+            anchors.fill: parent
+            onPressAndHold: {
+                root.screenshotRequested();
+                mouse.accepted = true;
+            }
+        }
+    }
+
+    property var popupLoader: PopupItemLoader {
+        id: volumePopup
+        source: "../volume/VolumePopup.qml"
+        popupParent: root.popupParent
+        property var originPos: originItem.mapToItem(root.parent, originItem.width/2, originItem.height/2)
+        popupX: (root.LayoutMirroring.enabled ? root.parent.width - item.width - Sizes.dp(5) : Sizes.dp(5))
+        popupY: originPos.y
+        originItem: volumeIcon
+        Binding { target: volumePopup.item; property: "model"; value: root.model.volumeStore }
+    }
+}
diff --git a/sysui/statusbar/IndicatorTray.qml b/sysui/statusbar/IndicatorTray.qml
index a8903bd8..e2cf44a8 100644
--- a/sysui/statusbar/IndicatorTray.qml
+++ b/sysui/statusbar/IndicatorTray.qml
@@ -40,7 +40,7 @@ import shared.Sizes 1.0
 Control {
     id: root
 
-    width: Sizes.dp(24 * 4) // roughly 4 icons
+    implicitWidth: Sizes.dp(35 * 4) // roughly 4 icons
 
     property alias model: repeater.model
 
diff --git a/sysui/statusbar/StatusBar.qml b/sysui/statusbar/StatusBar.qml
index 5f4b732f..ce8e34a1 100644
--- a/sysui/statusbar/StatusBar.qml
+++ b/sysui/statusbar/StatusBar.qml
@@ -45,13 +45,14 @@ RowLayout {
 
     property var uiSettings
     property var model
+    property Item popupParent
 
     signal screenshotRequested()
 
     IndicatorTray {
         Layout.alignment: Qt.AlignLeading
         Layout.fillHeight: true
-        model: root.model.indicators
+        model: root.model.statusBarStore.indicators
         anchors.top: parent.top
         anchors.bottom: parent.bottom
     }
@@ -59,7 +60,7 @@ RowLayout {
     DateAndTime {
         Layout.alignment: Qt.AlignTrailing
         Layout.fillHeight: true
-        currentDate: root.model.currentDate
+        currentDate: root.model.statusBarStore.currentDate
         uiSettings: root.uiSettings
 
         MouseArea {