[SelectRoller] Add GlacierRollerItem

examples/touch/content/SelectRollerPage.qml

@@ -45,26 +45,13 @@ Page {
         clip: true
         model: animalsModel
         label: qsTr("Choose your favorite animal")
-        delegate:Text{
+        delegate: GlacierRollerItem{
+            Text{
                 height: simpleRoller.itemHeight
                 text: name
                 color: "white"
                 font.pixelSize: 32
-            font.bold: (simpleRoller.active && ListView.view.currentIndex === index)
-
-            MouseArea{
-                anchors.fill: parent
-                onClicked: {
-                    if(!simpleRoller.active)
-                    {
-                        simpleRoller.active = true;
-                    }
-                    else
-                    {
-                        simpleRoller.currentIndex = index
-                        simpleRoller.active = false
-                    }
-                }
+                font.bold: (simpleRoller.activated && simpleRoller.currentIndex === index)
             }
         }
     }
@@ -80,26 +67,14 @@ Page {
         clip: true
         model: animalsModel
         label: qsTr("Choose your second favorite animal")
-        delegate:Text{
+
+        delegate: GlacierRollerItem{
+            Text{
                 height: simpleRoller2.itemHeight
                 text: name
                 color: "white"
                 font.pixelSize: 32
-            font.bold: (simpleRoller2.active && ListView.view.currentIndex === index)
-
-            MouseArea{
-                anchors.fill: parent
-                onClicked: {
-                    if(!simpleRoller2.active)
-                    {
-                        simpleRoller2.active = true;
-                    }
-                    else
-                    {
-                        simpleRoller2.currentIndex = index
-                        simpleRoller2.active = false
-                    }
-                }
+                font.bold: (simpleRoller2.activated && simpleRoller2.currentIndex === index)
             }
         }
     }

src/controls/GlacierRoller.qml

@@ -5,12 +5,11 @@ Item {
     property alias model : view.model
     property alias label: label.text
     property alias delegate: view.delegate
-
     property int currentIndex: -1
     property int activateSize: 5
-    property int itemHeight: 40
+    property alias itemHeight: view.itemHeight
 
-    property bool active: false
+    property bool activated: false
 
     signal clicked();
     signal select(int currentItem);
@@ -50,11 +49,13 @@ Item {
         z: 2
     }
 
-    ListView{
+    PathView{
         id: view
+        property int itemHeight: 40
+        property bool showRow: false
 
-        interactive: active
-        width: parent.width
+        interactive: activated
+        width: parent.width-60
         height: 40
         clip: true
 
@@ -65,58 +66,45 @@ Item {
             leftMargin: 30
         }
 
-        snapMode: ListView.SnapToItem
-
-        Image{
-            id: arrowDown
-            source: "images/glacierroller-icon-arrow-down.svg"
-            width: itemHeight/4
-            height: width
-
-            sourceSize.width: width
-            sourceSize.height: height
+        pathItemCount: height/itemHeight
+        preferredHighlightBegin: 0.5
+        preferredHighlightEnd: 0.5
+        dragMargin: view.width
 
-            x: view.currentItem.width+25
-
-            anchors{
-                verticalCenter: view.verticalCenter
+        path: Path {
+            startX: view.width/2; startY: 0
+            PathLine { x: view.width/2; y: view.pathItemCount*itemHeight }
         }
 
-            MouseArea{
-                anchors.fill: parent
-                onClicked: {
-                    active = true
-                }
-            }
-        }
+        snapMode: PathView.SnapToItem
     }
 
+
     Component.onCompleted: {
-        if(active)
+        if(activated)
         {
+            view.showRow = false
             bottomLine.opacity = 1
             topLine.opacity = 1
             view.height = itemHeight*activateSize
-            arrowDown.visible = false
         }
         else
         {
+            view.showRow = true
             bottomLine.opacity = 0
             topLine.opacity = 0
             view.height = itemHeight
-            arrowDown.visible = true
         }
     }
 
     onCurrentIndexChanged: {
         view.currentIndex = currentIndex
-        arrowDown.x = view.currentItem.width+25
     }
 
-    onActiveChanged: {
-        if(active)
+    onActivatedChanged: {
+        if(activated)
         {
-            arrowDown.visible = false
+            view.showRow = false
             activateAnimations.start()
         }
         else
@@ -128,18 +116,18 @@ Item {
 
     ParallelAnimation {
         id: activateAnimations
-        NumberAnimation{target: bottomLine; property: "opacity"; to: 1; duration: 400}
-        NumberAnimation{target: topLine; property: "opacity"; to: 1; duration: 400}
-        NumberAnimation{target: view; property: "height"; to: itemHeight*activateSize; duration: 400}
+        NumberAnimation{target: bottomLine; property: "opacity"; to: 1; duration: 250}
+        NumberAnimation{target: topLine; property: "opacity"; to: 1; duration: 250}
+        NumberAnimation{target: view; property: "height"; to: itemHeight*activateSize; duration: 250}
     }
 
     ParallelAnimation {
         id: deActivateAnimations
-        NumberAnimation{target: bottomLine; property: "opacity"; to: 0; duration: 400}
-        NumberAnimation{target: topLine; property: "opacity"; to: 0; duration: 400}
-        NumberAnimation{target: view; property: "height"; to: itemHeight; duration: 400}
+        NumberAnimation{target: bottomLine; property: "opacity"; to: 0; duration: 250}
+        NumberAnimation{target: topLine; property: "opacity"; to: 0; duration: 250}
+        NumberAnimation{target: view; property: "height"; to: itemHeight; duration: 250}
         onStopped: {
-            arrowDown.visible = true
+            view.showRow = true
         }
     }
 }

src/controls/GlacierRollerItem.qml

+import QtQuick 2.0
+
+Rectangle{
+    id: glacierRollerItem
+    color: "transparent"
+    width: parent.width
+    height: parent.itemHeight
+
+    property alias cWidth: dataLine.width
+
+    default property alias contentItem: dataLine.children
+    Rectangle{
+        id: dataLine
+        width: childrenRect.width
+        height: parent.height
+        color: "transparent"
+    }
+
+    Image{
+        id: arrowDown
+        source: "images/glacierroller-icon-arrow-down.svg"
+        width: glacierRollerItem.height/4
+        height: width
+
+        sourceSize.width: width
+        sourceSize.height: height
+
+        visible: glacierRollerItem.parent.showRow
+
+        anchors{
+            verticalCenter: dataLine.verticalCenter
+            left: dataLine.right
+            leftMargin: width
+        }
+
+        MouseArea{
+            anchors.fill: parent
+            onClicked: {
+                glacierRollerItem.parent.parent.activated = true
+            }
+        }
+    }
+
+    MouseArea{
+        anchors.fill: dataLine
+        onClicked: {
+            if(!glacierRollerItem.parent.parent.activated)
+            {
+                glacierRollerItem.parent.parent.activated = true;
+            }
+            else
+            {
+                glacierRollerItem.parent.parent.currentIndex = index
+                glacierRollerItem.parent.parent.activated = false
+            }
+        }
+    }
+}

src/controls/controls.pro

@@ -20,7 +20,8 @@ QML_FILES += \
     Slider.qml\
     ListView.qml \
     ListViewItemWithActions.qml\
-    GlacierRoller.qml
+    GlacierRoller.qml \
+    GlacierRollerItem.qml
 
 OTHER_FILES += qmldir \
     $$QML_FILES

src/controls/qmldir

@@ -22,6 +22,7 @@ Slider 1.0 Slider.qml
 ListView 1.0 ListView.qml
 ListViewItemWithActions 1.0 ListViewItemWithActions.qml
 GlacierRoller 1.0 GlacierRoller.qml
+GlacierRollerItem 1.0 GlacierRollerItem.qml
 
 # MIRRORED CONTROLS: 
 # These are the controls that we take directly from official QQC.