animations and relative height based on content

Modules/Launcher.qml

@@ -50,22 +50,31 @@ Scope {
             id: backgroundRect
             anchors.top: parent.top
             anchors.topMargin: 200
-            implicitHeight: 800
+            implicitHeight: mainLayout.childrenRect.height + 20
             implicitWidth: 600
             x: Math.round(( parent.width - width ) / 2 )
             color: "#d01a1a1a"
             radius: 8
             border.color: "#444444"
             border.width: 1
-            ColumnLayout {
+
+            Behavior on implicitHeight {
+                Anim {
+                    duration: MaterialEasing.expressiveFastSpatialTime
+                    easing.bezierCurve: MaterialEasing.expressiveDefaultSpatial
+                }
+            }
+
+            Column {
+                id: mainLayout
                 anchors.fill: parent
                 anchors.margins: 10
+                spacing: 5
 
                 TextField {
                     id: searchInput
-                    Layout.fillWidth: true
+                    implicitHeight: 30
-                    Layout.preferredHeight: 30
+                    implicitWidth: parent.width
-                    Layout.leftMargin: 5
                     color: "white"
                     horizontalAlignment: Text.AlignLeft
                     echoMode: TextInput.Normal
@@ -142,15 +151,15 @@ Scope {
 
                 Rectangle {
                     id: separator
-                    Layout.fillWidth: true
+                    implicitWidth: parent.width
-                    Layout.preferredHeight: 1
+                    implicitHeight: 1
                     color: "#444444"
                 }
 
                 Rectangle {
                     id: appListRect
-                    Layout.fillWidth: true
+                    implicitWidth: parent.width
-                    Layout.fillHeight: true
+                    implicitHeight: appListView.implicitHeight
                     color: "transparent"
                     clip: true
                     ListView {
@@ -164,6 +173,8 @@ Scope {
                             }
                         }
 
+                        implicitHeight: Math.min( count, 15 ) * 48
+
                         preferredHighlightBegin: 0
                         preferredHighlightEnd: appListRect.height
                         highlightFollowsCurrentItem: false
@@ -255,7 +266,6 @@ Scope {
                         }
 
                         add: Transition {
-                            enabled: !appListView.state
                             Anim {
                                 properties: "opacity"
                                 from: 0
@@ -264,13 +274,12 @@ Scope {
 
                             Anim {
                                 properties: "scale"
-                                from: 0.9
+                                from: 0.95
                                 to: 1
                             }
                         }
 
                         remove: Transition {
-                            enabled: !appListView.state
                             Anim {
                                 properties: "opacity"
                                 from: 1
@@ -280,7 +289,7 @@ Scope {
                             Anim {
                                 properties: "scale"
                                 from: 1
-                                to: 0.9
+                                to: 0.95
                             }
                         }