From ed55afbcd87807b3a84910c51c1791c9425de1a6 Mon Sep 17 00:00:00 2001 From: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com> Date: Fri, 9 May 2025 22:24:49 +1000 Subject: launcher: better style --- modules/launcher/AppItem.qml | 2 +- modules/launcher/AppList.qml | 5 +- modules/launcher/Content.qml | 153 +++++++++++++++++++++++++++------------ modules/launcher/ContentList.qml | 2 - 4 files changed, 112 insertions(+), 50 deletions(-) (limited to 'modules') diff --git a/modules/launcher/AppItem.qml b/modules/launcher/AppItem.qml index dd0682f..6335dd0 100644 --- a/modules/launcher/AppItem.qml +++ b/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); diff --git a/modules/launcher/AppList.qml b/modules/launcher/AppList.qml index b408276..7e3bef0 100644 --- a/modules/launcher/AppList.qml +++ b/modules/launcher/AppList.qml @@ -38,8 +38,9 @@ ListView { highlightResizeDuration: 0 highlight: StyledRect { - radius: Appearance.rounding.normal - color: Colours.alpha(Colours.palette.m3surfaceContainerHigh, true) + radius: Appearance.rounding.full + color: Colours.palette.m3onSurface + opacity: 0.08 } delegate: isAction ? actionItem : appItem diff --git a/modules/launcher/Content.qml b/modules/launcher/Content.qml index 6df3ed5..51e59f8 100644 --- a/modules/launcher/Content.qml +++ b/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) - radius: root.rounding - - implicitWidth: list.width + root.padding * 2 - implicitHeight: list.height + root.padding * 2 + implicitWidth: list.width + implicitHeight: list.height + root.padding anchors.horizontalCenter: parent.horizontalCenter - anchors.bottom: search.top - anchors.bottomMargin: root.spacing + anchors.bottom: searchWrapper.top + 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 { - id: search + StyledRect { + 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 - bottomPadding: Appearance.padding.normal - leftPadding: root.padding - rightPadding: root.padding + MaterialIcon { + id: searchIcon - placeholderText: qsTr("Type \"%1\" for commands").arg(LauncherConfig.actionPrefix) + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.leftMargin: root.padding - background: StyledRect { - color: Colours.alpha(Colours.palette.m3surfaceContainer, true) - radius: root.rounding + text: "search" + color: Colours.palette.m3onSurfaceVariant } - 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; + StyledTextField { + id: search + + anchors.left: searchIcon.right + anchors.right: clearIcon.left + anchors.leftMargin: Appearance.spacing.small + anchors.rightMargin: Appearance.spacing.small + + topPadding: Appearance.padding.larger + bottomPadding: Appearance.padding.larger + + 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() - Keys.onDownPressed: list.currentList?.incrementCurrentIndex() + MaterialIcon { + id: clearIcon + + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + anchors.rightMargin: root.padding + + width: search.text ? implicitWidth : implicitWidth / 2 + opacity: { + if (!search.text) + return 0; + if (mouse.pressed) + return 0.7; + if (mouse.hovered) + return 0.8; + return 1; + } + + text: "close" + color: Colours.palette.m3onSurfaceVariant + + MouseArea { + id: mouse - Keys.onEscapePressed: root.launcher.launcherVisible = false + property bool hovered - Connections { - target: root.launcher + 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 + } + } - function onLauncherVisibleChanged(): void { - if (root.launcher.launcherVisible) - search.forceActiveFocus(); - else { - search.text = ""; - const current = list.currentList; - if (current) - current.currentIndex = 0; + Behavior on opacity { + NumberAnimation { + duration: Appearance.anim.durations.small + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.standard } } } diff --git a/modules/launcher/ContentList.qml b/modules/launcher/ContentList.qml index 5f8c783..3cd4f3e 100644 --- a/modules/launcher/ContentList.qml +++ b/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" -- cgit v1.2.3-freya