[SelectRoller] prototype

examples/touch/content/SelectRollerPage.qml

+import QtQuick 2.1
+import QtQuick.Controls 1.0 //needed for the Stack attached property
+import QtQuick.Controls.Nemo 1.0
+import QtQuick.Controls.Styles.Nemo 1.0
+
+Page {
+    id: root
+
+    headerTools: HeaderToolsLayout {
+        showBackButton: true;
+        title: "Roller"
+    }
+
+    allowedOrientations: Qt.PortraitOrientation | Qt.LandscapeOrientation | Qt.InvertedLandscapeOrientation | Qt.InvertedPortraitOrientation
+
+
+    ListModel {
+        id: animalsModel
+        ListElement { name: "Ant";}
+        ListElement { name: "Flea"; }
+        ListElement { name: "Parrot"; }
+        ListElement { name: "Guinea pig";}
+        ListElement { name: "Rat";}
+        ListElement { name: "Butterfly";}
+        ListElement { name: "Dog";}
+        ListElement { name: "Cat";}
+        ListElement { name: "Pony";}
+        ListElement { name: "Koala";}
+        ListElement { name: "Horse";}
+        ListElement { name: "Tiger";}
+        ListElement { name: "Giraffe";}
+        ListElement { name: "Elephant";}
+        ListElement { name: "Whale";}
+    }
+
+
+    GlacierRoller {
+        id: simpleRoller
+        width: parent.width
+        anchors{
+            top: parent.top
+            topMargin: 40
+        }
+
+        clip: true
+        model: animalsModel
+        label: qsTr("Choose your favorite animal")
+    }
+
+    GlacierRoller {
+        id: simpleRoller2
+        width: parent.width
+        anchors{
+            top: simpleRoller.bottom
+            topMargin: 40
+        }
+
+        clip: true
+        model: animalsModel
+        label: qsTr("Choose your second favorite animal")
+    }
+}

examples/touch/main.qml

@@ -92,6 +92,10 @@ ApplicationWindow {
             title: "Spinner"
             page: "content/SpinnerPage.qml"
         }
+        ListElement {
+            title: "SelectRoller"
+            page: "content/SelectRollerPage.qml"
+        }
         ListElement {
             title: "ListView"
             page: "content/ListViewPage.qml"

examples/touch/touch.pro

@@ -34,5 +34,6 @@ desktop.files = glacier-gallery.desktop
 INSTALLS += desktop
 
 DISTFILES += \
-    content/ListViewPage.qml
+    content/ListViewPage.qml \
+    content/SelectRollerPage.qml
 

src/controls/GlacierRoller.qml

+import QtQuick 2.0
+
+Item {
+    id: glacierRoller
+    property alias model : view.model
+    property alias label: label.text
+
+    property int currentIndex: -1
+    property int activateSize: 5
+    property int itemHeight: 40
+
+    property bool active: false
+
+    signal clicked();
+    signal select(int currentItem);
+
+    width: parent.width
+    height: childrenRect.height
+
+    Text{
+        id: label
+        visible: label.text != ""
+        font.capitalization: Font.AllUppercase
+        font.pixelSize: 14
+        color: "white"
+
+        anchors{
+            top: parent.top
+            left: parent.left
+            leftMargin: itemHeight/2
+        }
+    }
+
+    Rectangle{
+        id: topLine
+        width: view.width
+        height: 1
+        color: "white"
+        anchors.top: view.top
+        z: 2
+    }
+
+    Rectangle{
+        id: bottomLine
+        width: view.width
+        height: 3
+        color: "white"
+        anchors.bottom: view.bottom
+        z: 2
+    }
+
+    ListView{
+        id: view
+
+        interactive: active
+        width: parent.width
+        height: 40
+        clip: true
+
+        anchors{
+            top: label.top
+            topMargin: 20
+            left: label.left
+            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
+
+            x: view.currentItem.width+25
+
+            anchors{
+                verticalCenter: view.verticalCenter
+            }
+        }
+
+        delegate:Text{
+            id: listItem
+            //width: parent.width
+            height: itemHeight
+            text: name
+            color: "white"
+            font.pixelSize: 32
+            font.bold: (active && ListView.view.currentIndex === index)
+
+            MouseArea{
+                anchors.fill: parent
+                onClicked: {
+                    if(!active)
+                    {
+                        active = true;
+                    }
+                    else
+                    {
+                        glacierRoller.currentIndex = index
+                        view.currentIndex = index
+                        active = false
+                    }
+                }
+            }
+        }
+    }
+
+    Component.onCompleted: {
+        if(active)
+        {
+            bottomLine.opacity = 1
+            topLine.opacity = 1
+            view.height = itemHeight*activateSize
+            arrowDown.visible = false
+        }
+        else
+        {
+            bottomLine.opacity = 0
+            topLine.opacity = 0
+            view.height = itemHeight
+            arrowDown.visible = true
+        }
+    }
+
+    onActiveChanged: {
+        if(active)
+        {
+            arrowDown.visible = false
+            activateAnimations.start()
+        }
+        else
+        {
+            deActivateAnimations.start()
+            view.positionViewAtIndex(currentIndex,ListView.SnapPosition)
+        }
+    }
+
+    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}
+    }
+
+    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}
+        onStopped: {
+            arrowDown.visible = true
+        }
+    }
+}

src/controls/controls.pro

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

src/controls/images/glacierroller-icon-arrow-down.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   version="1.1"
+   id="svg4377"
+   viewBox="0 0 48.000001 48.000001"
+   height="48"
+   width="48">
+  <defs
+     id="defs4379" />
+  <metadata
+     id="metadata4382">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     transform="translate(0,-1004.3622)"
+     id="layer1">
+    <path
+       style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:0.3;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.35433072;marker:none;enable-background:accumulate"
+       id="path7257"
+       d="m 24.000001,1047.8478 -11.25,-19.4856 -11.2500017,-19.4856 22.5000007,0 22.5,0 -11.250001,19.4856 z" />
+  </g>
+</svg>

src/controls/qmldir

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