launcher: better style

modules/launcher/AppItem.qml

@@ -18,7 +18,7 @@ PaddedRect {
     anchors.right: parent.right
 
     StateLayer {
-        radius: Appearance.rounding.normal
+        radius: Appearance.rounding.full
 
         function onClicked(): void {
             Apps.launch(root.modelData);

modules/launcher/AppList.qml

@@ -38,8 +38,9 @@ ListView {
     highlightResizeDuration: 0
 
     highlight: StyledRect {
-        radius: Appearance.rounding.normal
+        radius: Appearance.rounding.full
-        color: Colours.alpha(Colours.palette.m3surfaceContainerHigh, true)
+        color: Colours.palette.m3onSurface
+        opacity: 0.08
     }
 
     delegate: isAction ? actionItem : appItem

modules/launcher/Content.qml

@@ -11,27 +11,23 @@ Item {
 
     required property Scope launcher
     readonly property int padding: Appearance.padding.large
-    readonly property int spacing: Appearance.spacing.normal
     readonly property int rounding: Appearance.rounding.large
 
     implicitWidth: listWrapper.width + padding * 2
-    implicitHeight: search.height + listWrapper.height + padding * 2 + spacing
+    implicitHeight: searchWrapper.height + listWrapper.height + padding * 2
 
     anchors.top: parent.top
     anchors.horizontalCenter: parent.horizontalCenter
 
-    StyledRect {
+    Item {
         id: listWrapper
 
-        color: Colours.alpha(Colours.palette.m3surfaceContainer, true)
+        implicitWidth: list.width
-        radius: root.rounding
+        implicitHeight: list.height + root.padding
-
-        implicitWidth: list.width + root.padding * 2
-        implicitHeight: list.height + root.padding * 2
 
         anchors.horizontalCenter: parent.horizontalCenter
-        anchors.bottom: search.top
+        anchors.bottom: searchWrapper.top
-        anchors.bottomMargin: root.spacing
+        anchors.bottomMargin: root.padding
 
         ContentList {
             id: list
@@ -39,62 +35,129 @@ Item {
             launcher: root.launcher
             search: search
             padding: root.padding
-            spacing: root.spacing
             rounding: root.rounding
         }
     }
 
-    StyledTextField {
+    StyledRect {
-        id: search
+        id: searchWrapper
+
+        color: Colours.alpha(Colours.palette.m3surfaceContainer, true)
+        radius: Appearance.rounding.full
 
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.bottom: parent.bottom
         anchors.margins: root.padding
 
-        topPadding: Appearance.padding.normal
+        MaterialIcon {
-        bottomPadding: Appearance.padding.normal
+            id: searchIcon
-        leftPadding: root.padding
-        rightPadding: root.padding
 
-        placeholderText: qsTr("Type \"%1\" for commands").arg(LauncherConfig.actionPrefix)
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            anchors.leftMargin: root.padding
 
-        background: StyledRect {
+            text: "search"
-            color: Colours.alpha(Colours.palette.m3surfaceContainer, true)
+            color: Colours.palette.m3onSurfaceVariant
-            radius: root.rounding
         }
 
-        onAccepted: {
+        StyledTextField {
-            const currentItem = list.currentList?.currentItem;
+            id: search
-            if (currentItem) {
+
-                if (list.showWallpapers) {
+            anchors.left: searchIcon.right
-                    Wallpapers.setWallpaper(currentItem.modelData.path);
+            anchors.right: clearIcon.left
-                    root.launcher.launcherVisible = false;
+            anchors.leftMargin: Appearance.spacing.small
-                } else if (text.startsWith(LauncherConfig.actionPrefix)) {
+            anchors.rightMargin: Appearance.spacing.small
-                    currentItem.modelData.onClicked(list.currentList);
+
-                } else {
+            topPadding: Appearance.padding.larger
-                    Apps.launch(currentItem.modelData);
+            bottomPadding: Appearance.padding.larger
-                    root.launcher.launcherVisible = false;
+
+            placeholderText: qsTr("Type \"%1\" for commands").arg(LauncherConfig.actionPrefix)
+            background: null
+
+            onAccepted: {
+                const currentItem = list.currentList?.currentItem;
+                if (currentItem) {
+                    if (list.showWallpapers) {
+                        Wallpapers.setWallpaper(currentItem.modelData.path);
+                        root.launcher.launcherVisible = false;
+                    } else if (text.startsWith(LauncherConfig.actionPrefix)) {
+                        currentItem.modelData.onClicked(list.currentList);
+                    } else {
+                        Apps.launch(currentItem.modelData);
+                        root.launcher.launcherVisible = false;
+                    }
+                }
+            }
+
+            Keys.onUpPressed: list.currentList?.decrementCurrentIndex()
+            Keys.onDownPressed: list.currentList?.incrementCurrentIndex()
+
+            Keys.onEscapePressed: root.launcher.launcherVisible = false
+
+            Connections {
+                target: root.launcher
+
+                function onLauncherVisibleChanged(): void {
+                    if (root.launcher.launcherVisible)
+                        search.forceActiveFocus();
+                    else {
+                        search.text = "";
+                        const current = list.currentList;
+                        if (current)
+                            current.currentIndex = 0;
+                    }
                 }
             }
         }
 
-        Keys.onUpPressed: list.currentList?.decrementCurrentIndex()
+        MaterialIcon {
-        Keys.onDownPressed: list.currentList?.incrementCurrentIndex()
+            id: clearIcon
 
-        Keys.onEscapePressed: root.launcher.launcherVisible = false
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: parent.right
+            anchors.rightMargin: root.padding
 
-        Connections {
+            width: search.text ? implicitWidth : implicitWidth / 2
-            target: root.launcher
+            opacity: {
+                if (!search.text)
+                    return 0;
+                if (mouse.pressed)
+                    return 0.7;
+                if (mouse.hovered)
+                    return 0.8;
+                return 1;
+            }
 
-            function onLauncherVisibleChanged(): void {
+            text: "close"
-                if (root.launcher.launcherVisible)
+            color: Colours.palette.m3onSurfaceVariant
-                    search.forceActiveFocus();
+
-                else {
+            MouseArea {
-                    search.text = "";
+                id: mouse
-                    const current = list.currentList;
+
-                    if (current)
+                property bool hovered
-                        current.currentIndex = 0;
+
+                anchors.fill: parent
+                hoverEnabled: true
+
+                onEntered: hovered = true
+                onExited: hovered = false
+                onClicked: search.text = ""
+            }
+
+            Behavior on width {
+                NumberAnimation {
+                    duration: Appearance.anim.durations.small
+                    easing.type: Easing.BezierSpline
+                    easing.bezierCurve: Appearance.anim.curves.standard
+                }
+            }
+
+            Behavior on opacity {
+                NumberAnimation {
+                    duration: Appearance.anim.durations.small
+                    easing.type: Easing.BezierSpline
+                    easing.bezierCurve: Appearance.anim.curves.standard
                 }
             }
         }

modules/launcher/ContentList.qml

@@ -13,7 +13,6 @@ Item {
     required property Scope launcher
     required property TextField search
     required property int padding
-    required property int spacing
     required property int rounding
 
     property bool showWallpapers: search.text.startsWith(`${LauncherConfig.actionPrefix}wallpaper `)
@@ -21,7 +20,6 @@ Item {
 
     anchors.horizontalCenter: parent.horizontalCenter
     anchors.bottom: parent.bottom
-    anchors.bottomMargin: root.padding
 
     clip: true
     state: showWallpapers ? "wallpapers" : "apps"

widgets/StyledScrollBar.qml

@@ -7,7 +7,8 @@ ScrollBar {
     id: root
 
     contentItem: StyledRect {
-        opacity: root.pressed ? 0.8 : root.policy === ScrollBar.AlwaysOn || (root.active && root.size < 1) ? 0.6 : 0
+        implicitWidth: 6
+        opacity: root.pressed ? 1 : root.policy === ScrollBar.AlwaysOn || (root.active && root.size < 1) ? 0.8 : 0
         radius: Appearance.rounding.full
         color: Colours.palette.m3secondary
 
@@ -20,21 +21,6 @@ ScrollBar {
         }
     }
 
-    background: StyledRect {
-        implicitWidth: 10
-        opacity: root.policy === ScrollBar.AlwaysOn || (root.active && root.size < 1) ? 0.4 : 0
-        radius: Appearance.rounding.full
-        color: Colours.palette.m3surfaceContainerLow
-
-        Behavior on opacity {
-            NumberAnimation {
-                duration: Appearance.anim.durations.normal
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: Appearance.anim.curves.standard
-            }
-        }
-    }
-
     MouseArea {
         z: -1
         anchors.fill: parent