launcher: Enable scrolling for the GridView to display more apps

[apps/launcher.git] / launcher / qml / Launcher.qml

diff --git a/launcher/qml/Launcher.qml b/launcher/qml/Launcher.qml
index 3c948dd..894ff98 100644 (file)
--- a/launcher/qml/Launcher.qml
+++ b/launcher/qml/Launcher.qml
@@ -15,15 +15,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import QtQuick 2.6
+import QtQuick 2.13
 import QtQuick.Layouts 1.1
 import QtQuick.Controls 2.0
 import QtQuick.Window 2.13
+import QtGraphicalEffects 1.0
 import AppModel 1.0
 
 ApplicationWindow {
 
-    id: root 
+    id: root
     //width: container.width
     //height: container.height
     flags: Qt.FramelessWindowHint
@@ -36,77 +37,120 @@ ApplicationWindow {
         height: Window.height
 
         Image {
-          anchors.centerIn: parent
-          source: './images/AGL_HMI_Blue_Background_Car-01.png'
+            anchors.centerIn: parent
+            source: './images/AGL_HMI_Blue_Background_Car-01.png'
         }
 
-    GridView {
-        id: grid
-        anchors {
-          topMargin: 60; bottomMargin: 0 
-          leftMargin: 60; rightMargin: 60
-          fill: parent
-        }
-        contentHeight: 320
-        flickableDirection: Flickable.AutoFlickDirection
-        snapMode: GridView.SnapOneRow
-        visible: true
-        cellWidth: 320
-        cellHeight: 320
-        interactive: false
+        GridView {
+            id: grid
+            anchors {
+                topMargin: 60; bottomMargin: 60
+                leftMargin: 60; rightMargin: 60
+                fill: parent
+            }
+            contentHeight: 320
+            // change this HorizontalFlick or see Flickable documentation
+            // for other possible combinations
+            flickableDirection: Flickable.VerticalFlick
+            snapMode: GridView.SnapOneRow
+            visible: true
+            cellWidth: 320
+            cellHeight: 320
+            interactive: apps_len > 12 ? true : false
 
-        model: ApplicationModel { id: applicationModel }
-        delegate: IconItem {
-            width: grid.cellWidth
-            height: grid.cellHeight
-        }
+            // the follow makes it display from left to right to allow
+            // horizontal scrolling to work
+            //verticalLayoutDirection: Grid.TopToBottom
+            //layoutDirection: Qt.LeftToRight
+            //flow: Grid.TopToBottom
 
-        Connections {
-            target: homescreenHandler
-            onAppListUpdate: {
-                console.warn("applist update in Launcher.qml")
-                applicationModel.updateApplist(info);
-            }
-        }
-        Connections {
-            target: homescreenHandler
-            onInitAppList: {
-                console.warn("applist init in Launcher.qml")
-                applicationModel.initAppList(data);
-            }
-        }
+            // uncomment this out if you want to highlight the currently selected item
+            //highlight: Rectangle { width: 80; height: 80; color: "steelblue"; opacity: 0.3 }
 
-        MouseArea {
-            id: loc
-            anchors.fill: parent
-            property string currentId: ''
-            property int newIndex: -1
-            property int index: grid.indexAt(loc.mouseX, loc.mouseY)
-            x: 62
-            y: 264
-            onPressAndHold: currentId = applicationModel.id(newIndex = index)
-            onReleased: {
-                if(loc.index < 0) {
-                    return
+            model: ApplicationModel { id: applicationModel }
+            delegate: Item {
+                width: grid.cellWidth
+                height: grid.cellHeight
+
+                Text {
+                    color: "white"
+                    anchors.top: myIcon.bottom
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.margins: 20
+                    font.pixelSize: 25
+                    font.letterSpacing: 5
+                    wrapMode: Text.WordWrap
+                    horizontalAlignment: Text.AlignHCenter
+                    text: qsTr(model.name.toUpperCase())
                 }
 
-               //if (applicationModel.appid(loc.index) === 'tbtnavi' ||
-               //    applicationModel.appid(loc.index) === 'hvac') {
-               //      output_screen = 'Virtual-1'
-               //}
-                if (currentId === '') {
-                    homescreenHandler.tapShortcut(applicationModel.appid(loc.index))
-                } else {
-                    currentId = ''
+                Image {
+                    id: myIcon
+                    anchors.top: parent.top
+                    anchors.topMargin: 20
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    // make the image/icons smaller than the grid cell size as
+                    // the text below/above current cell not be on top of the
+                    // current icon
+                    width: 220
+                    height: 220
+                    source: model.icon
+                    antialiasing: true
+                    property string initial: model.name.substring(0,1).toUpperCase()
+
+                    Item {
+                        id: title
+                        width: 125
+                        height: 125
+                        anchors.centerIn: parent
+                        Label {
+                            style: Text.Outline
+                            styleColor: '#00ADDC'
+                            color: 'transparent'
+                            font.pixelSize: 125
+                            anchors.centerIn: parent
+                            anchors.horizontalCenterOffset: model.index / 3 - 1
+                            anchors.verticalCenterOffset: model.index % 3 - 1
+                            text: model.icon === 'blank' ? myIcon.initial : ''
+                        }
+
+                        layer.enabled: true
+                        layer.effect: LinearGradient {
+                            gradient: Gradient {
+                                GradientStop { position: -0.5; color: "#6BFBFF" }
+                                GradientStop { position: +1.5; color: "#00ADDC" }
+                            }
+                        }
+                    }
+                }
+
+                MouseArea {
+                    id: loc
+                    anchors.fill: parent
+                    property string currentApp: ''
+                    onClicked: {
+                        parent.GridView.view.currentIndex = index
+                        currentApp = applicationModel.appid(parent.GridView.view.currentIndex)
+                        homescreenHandler.tapShortcut(currentApp)
+                    }
+                }
+            }
+
+            Connections {
+                target: homescreenHandler
+                onAppListUpdate: {
+                    console.warn("applist update in Launcher.qml")
+                    applicationModel.updateApplist(info);
                 }
             }
-            onPositionChanged: {
-                if (loc.currentId === '') return
-                if (index < 0) return
-                if (index === newIndex) return
-                    applicationModel.move(newIndex, newIndex = index)
+            Connections {
+                target: homescreenHandler
+                onInitAppList: {
+                    console.warn("applist init in Launcher.qml")
+                    applicationModel.initAppList(data);
+                }
             }
         }
     }
 }
-}