[sysui] New ListItem components

 - Add a new type of list item ListItemSwitch
 - Add a new type of list item ListItemTwoButtons
 - Add examples with the new types to The Sheet app

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

2 files changed, 125 insertions, 92 deletions

diff --git a/dev/apps/com.pelagicore.sheets/SheetsContent.qml b/dev/apps/com.pelagicore.sheets/SheetsContent.qml
index ba34fb18..4fa616eb 100644
--- a/dev/apps/com.pelagicore.sheets/SheetsContent.qml
+++ b/dev/apps/com.pelagicore.sheets/SheetsContent.qml
@@ -79,11 +79,12 @@ Item {
 
             delegate: Item {
                 width: componentListView.width
-                height: Style.vspan(0.8)
+                height: Style.vspan(1.5)
 
                 Label {
-                    anchors.fill: parent
-                    anchors.margins: Style.hspan(1)
+                    anchors.left: parent.left
+                    anchors.leftMargin: Style.hspan(2)
+                    anchors.verticalCenter: parent.verticalCenter
                     text: fileName.substring(0, fileName.length - 9);
                 }
 
diff --git a/dev/apps/com.pelagicore.sheets/components/ListItemPanel.qml b/dev/apps/com.pelagicore.sheets/components/ListItemPanel.qml
index 314a239d..009e479d 100644
--- a/dev/apps/com.pelagicore.sheets/components/ListItemPanel.qml
+++ b/dev/apps/com.pelagicore.sheets/components/ListItemPanel.qml
@@ -39,111 +39,143 @@ Item {
     id: root
     anchors.horizontalCenter: parent ? parent.horizontalCenter : null
     anchors.top: parent ? parent.top : null
-    anchors.topMargin: Style.vspan(1)
+    anchors.topMargin: Style.vspan(0.5)
     anchors.bottom: parent ? parent.bottom : null
 
-    ColumnLayout {
+    Flickable {
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
         anchors.horizontalCenter: parent.horizontalCenter
         width: Style.hspan(17)
-        spacing: Style.vspan(0.05)
+        contentHeight: columnContent.height
+        contentWidth: columnContent.width
+        flickableDirection: Flickable.VerticalFlick
+        clip: true
+        ColumnLayout {
+            id: columnContent
+            spacing: Style.vspan(0.05)
 
-        ListItem {
-            implicitWidth: Style.hspan(17)
-            implicitHeight: Style.vspan(1.3)
-            text: "Basic ListItem"
-            dividerVisible: false
-        }
-
-        ListItem {
-            implicitWidth: Style.hspan(17)
-            implicitHeight: Style.vspan(1.3)
-            text: "ListItem Text"
-            subText: "ListItem Subtext"
-        }
-
-        ListItem {
-            implicitWidth: Style.hspan(17)
-            implicitHeight: Style.vspan(1.3)
-            text: "ListItem with an image"
-            imageSource: Style.gfx2("fan-speed-5")
-        }
+            ListItem {
+                implicitWidth: Style.hspan(17)
+                implicitHeight: Style.vspan(1.3)
+                text: "Basic ListItem"
+                dividerVisible: false
+            }
 
-        ListItem {
-            implicitWidth: Style.hspan(17)
-            implicitHeight: Style.vspan(1.3)
-            symbol: Style.symbol("ic-update")
-            text: "ListItem with Icon"
-        }
+            ListItem {
+                implicitWidth: Style.hspan(17)
+                implicitHeight: Style.vspan(1.3)
+                text: "ListItem Text"
+                subText: "ListItem Subtext"
+            }
 
-        ListItem {
-            implicitWidth: Style.hspan(17)
-            implicitHeight: Style.vspan(1.3)
-            symbol: Style.symbol("ic-update")
-            text: "ListItem with Secondary Text"
-            secondaryText: "Company"
-        }
+            ListItem {
+                implicitWidth: Style.hspan(17)
+                implicitHeight: Style.vspan(1.3)
+                text: "ListItem with an image"
+                imageSource: Style.gfx2("fan-speed-5")
+            }
 
-        ListItem {
-            implicitWidth: Style.hspan(17)
-            implicitHeight: Style.vspan(1.3)
-            symbol: Style.symbol("ic-update")
-            rightToolSymbol: Style.symbol("ic-close")
-            text: "ListItem with Secondary Text"
-            secondaryText: "68% of 14 MB"
-        }
+            ListItem {
+                implicitWidth: Style.hspan(17)
+                implicitHeight: Style.vspan(1.3)
+                symbol: Style.symbol("ic-update")
+                text: "ListItem with Icon"
+            }
 
-        ListItem {
-            implicitWidth: Style.hspan(17)
-            implicitHeight: Style.vspan(1.3)
-            symbol: Style.symbol("ic-update")
-            rightToolSymbol: Style.symbol("ic-close")
-            text: "ListItem with Looooooooooonnngggg Text"
-            secondaryText: "Loooooooong Secondary Text"
-        }
+            ListItem {
+                implicitWidth: Style.hspan(17)
+                implicitHeight: Style.vspan(1.3)
+                symbol: Style.symbol("ic-update")
+                text: "ListItem with Secondary Text"
+                secondaryText: "Company"
+            }
 
-        ListItemProgress {
-            id: listItemProgress
-            implicitWidth: Style.hspan(17)
-            implicitHeight: Style.vspan(1.3)
-            minimumValue: 0
-            maximumValue: 100
-            symbol: Style.symbol("ic-placeholder")
-            text: "Downloading application"
-            secondaryText: value + " % of 46 MB"
-            cancelable: timerDowloading.running
-            value: 0
-            onProgressCanceled: {
-                timerDowloading.stop()
-                value = 0
+            ListItem {
+                implicitWidth: Style.hspan(17)
+                implicitHeight: Style.vspan(1.3)
+                symbol: Style.symbol("ic-update")
+                rightToolSymbol: Style.symbol("ic-close")
+                text: "ListItem with Secondary Text"
+                secondaryText: "68% of 14 MB"
             }
-            onClicked: {
-                timerDowloading.start()
+
+            ListItem {
+                implicitWidth: Style.hspan(17)
+                implicitHeight: Style.vspan(1.3)
+                symbol: Style.symbol("ic-update")
+                rightToolSymbol: Style.symbol("ic-close")
+                text: "ListItem with Looooooooooonnngggg Text"
+                secondaryText: "Loooooooong Secondary Text"
             }
 
-            Timer {
-                id: timerDowloading
-                interval: 1000
-                repeat: true
-                running: true
-                onTriggered: {
-                    if (listItemProgress.value === listItemProgress.maximumValue) {
-                        listItemProgress.value = 0
-                    } else {
-                        listItemProgress.value += 5
+            ListItemProgress {
+                id: listItemProgress
+                implicitWidth: Style.hspan(17)
+                implicitHeight: Style.vspan(1.3)
+                minimumValue: 0
+                maximumValue: 100
+                symbol: Style.symbol("ic-placeholder")
+                text: "Downloading application"
+                secondaryText: value + " % of 46 MB"
+                cancelable: timerDowloading.running
+                value: 0
+                onProgressCanceled: {
+                    timerDowloading.stop()
+                    value = 0
+                }
+                onClicked: {
+                    timerDowloading.start()
+                }
+
+                Timer {
+                    id: timerDowloading
+                    interval: 1000
+                    repeat: true
+                    running: true
+                    onTriggered: {
+                        if (listItemProgress.value === listItemProgress.maximumValue) {
+                            listItemProgress.value = 0
+                        } else {
+                            listItemProgress.value += 5
+                        }
                     }
                 }
             }
-        }
-        ListItemProgress {
-            id: listItemProgressIndeterminate
-            implicitWidth: Style.hspan(17)
-            implicitHeight: Style.vspan(1.3)
-            indeterminate: true
-            symbol: Style.symbol("ic-placeholder")
-            cancelable: indeterminate
-            text: indeterminate ? "Downloading pending" : "Downloading canceled"
-            onProgressCanceled: indeterminate = false
-            onClicked: indeterminate = true
+            ListItemProgress {
+                id: listItemProgressIndeterminate
+                implicitWidth: Style.hspan(17)
+                implicitHeight: Style.vspan(1.3)
+                indeterminate: true
+                symbol: Style.symbol("ic-placeholder")
+                cancelable: indeterminate
+                text: indeterminate ? "Downloading pending" : "Downloading canceled"
+                onProgressCanceled: indeterminate = false
+                onClicked: indeterminate = true
+            }
+
+            ListItemSwitch {
+                id: listItemSwitch
+                implicitWidth: Style.hspan(17)
+                implicitHeight: Style.vspan(1.3)
+                symbol: Style.symbol("ic-placeholder")
+                text: "List item with a switch " + (listItemSwitch.switchOn ? "(ON)" : "(OFF)")
+                onSwitchClicked: console.log("Switch is clicked")
+                onSwitchToggled: console.log("Switch is toggled")
+            }
+
+            ListItemTwoButtons {
+                id: listItemTwoButtons
+                implicitWidth: Style.hspan(17)
+                implicitHeight: Style.vspan(1.3)
+                symbol: Style.symbol("ic-placeholder")
+                text: "List item with two accessory buttons"
+                symbolAccessoryButton1: Style.symbol("ic-call-contrast")
+                symbolAccessoryButton2: Style.symbol("ic-message-contrast")
+                onAccessoryButton1Clicked: listItemTwoButtons.text = "Call clicked"
+                onAccessoryButton2Clicked: listItemTwoButtons.text = "Message clicked"
+                onClicked: listItemTwoButtons.text = "List item with two accessory buttons"
+            }
         }
     }
 }