launcher: better style

This commit is contained in:
2 * r + 2 * t 2025-05-09 22:24:49 +10:00
parent e45083b2a8
commit ed55afbcd8
5 changed files with 114 additions and 66 deletions

View file

@ -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);

View file

@ -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

View file

@ -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
Keys.onEscapePressed: root.launcher.launcherVisible = false
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: root.padding
Connections {
target: root.launcher
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;
}
function onLauncherVisibleChanged(): void {
if (root.launcher.launcherVisible)
search.forceActiveFocus();
else {
search.text = "";
const current = list.currentList;
if (current)
current.currentIndex = 0;
text: "close"
color: Colours.palette.m3onSurfaceVariant
MouseArea {
id: mouse
property bool hovered
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
}
}
}

View file

@ -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"

View file

@ -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