diff --git a/.config/quickshell/modules/common/widgets/ButtonGroup.qml b/.config/quickshell/modules/common/widgets/ButtonGroup.qml index 15e0a8dd7..702768c17 100644 --- a/.config/quickshell/modules/common/widgets/ButtonGroup.qml +++ b/.config/quickshell/modules/common/widgets/ButtonGroup.qml @@ -14,12 +14,13 @@ Rectangle { default property alias content: rowLayout.data property real spacing: 5 property real padding: 5 + property int clickIndex: rowLayout.clickIndex property real contentWidth: { let total = 0; for (let i = 0; i < rowLayout.children.length; ++i) { - if (rowLayout.children[i].baseWidth !== undefined) - total += rowLayout.children[i].baseWidth; + const child = rowLayout.children[i]; + total += child.baseWidth ?? child.implicitWidth ?? child.width; } return total + rowLayout.spacing * (rowLayout.children.length - 1); } @@ -27,23 +28,20 @@ Rectangle { topLeftRadius: rowLayout.children.length > 0 ? (rowLayout.children[0].radius + padding) : Appearance?.rounding?.small bottomLeftRadius: topLeftRadius - topRightRadius: { - console.log(rowLayout.children.length > 0 ? (rowLayout.children[rowLayout.children.length - 1].radius + padding) : - Appearance?.rounding?.small) - return rowLayout.children.length > 0 ? (rowLayout.children[rowLayout.children.length - 1].radius + padding) : - Appearance?.rounding?.small - } + topRightRadius: rowLayout.children.length > 0 ? (rowLayout.children[rowLayout.children.length - 1].radius + padding) : + Appearance?.rounding?.small bottomRightRadius: topRightRadius color: "transparent" width: root.contentWidth + padding * 2 implicitHeight: rowLayout.implicitHeight + padding * 2 + implicitWidth: root.contentWidth + padding * 2 children: [RowLayout { id: rowLayout anchors.fill: parent anchors.margins: root.padding spacing: root.spacing - property int clickIndex: -1 + property int clickIndex: -1 }] } diff --git a/.config/quickshell/modules/common/widgets/GroupButton.qml b/.config/quickshell/modules/common/widgets/GroupButton.qml index f1029047a..0413cac11 100644 --- a/.config/quickshell/modules/common/widgets/GroupButton.qml +++ b/.config/quickshell/modules/common/widgets/GroupButton.qml @@ -15,6 +15,7 @@ Button { property real buttonRadius: Appearance?.rounding?.small ?? 4 property real buttonRadiusPressed: buttonRadius property var altAction + property bool bounce: true property real baseWidth: 40 property real baseHeight: 40 property real clickedWidth: baseWidth + 20 @@ -23,8 +24,8 @@ Button { property int clickIndex: parentGroup?.clickIndex ?? -1 Layout.fillWidth: (clickIndex - 1 <= parentGroup.children.indexOf(button) && parentGroup.children.indexOf(button) <= clickIndex + 1) - implicitWidth: button.down ? clickedWidth : baseWidth - implicitHeight: button.down ? clickedHeight : baseHeight + implicitWidth: (button.down && bounce) ? clickedWidth : baseWidth + implicitHeight: (button.down && bounce) ? clickedHeight : baseHeight Behavior on implicitWidth { animation: Appearance.animation.clickBounce.numberAnimation.createObject(this) diff --git a/.config/quickshell/modules/sidebarLeft/AiChat.qml b/.config/quickshell/modules/sidebarLeft/AiChat.qml index 6e613d1fb..32c109743 100644 --- a/.config/quickshell/modules/sidebarLeft/AiChat.qml +++ b/.config/quickshell/modules/sidebarLeft/AiChat.qml @@ -271,6 +271,7 @@ int main(int argc, char* argv[]) { id: suggestions visible: root.suggestionList.length > 0 && messageInputField.text.length > 0 property int selectedIndex: 0 + property int clickIndex: -1 Layout.fillWidth: true spacing: 5 @@ -283,20 +284,12 @@ int main(int argc, char* argv[]) { delegate: ApiCommandButton { id: commandButton colBackground: suggestions.selectedIndex === index ? Appearance.colors.colLayer2Hover : Appearance.colors.colLayer2 - - contentItem: RowLayout { - spacing: 5 - StyledText { - font.pixelSize: Appearance.font.pixelSize.small - color: Appearance.m3colors.m3onSurface - text: modelData.displayName ?? modelData.name - } - StyledText { - visible: modelData.count !== undefined - font.pixelSize: Appearance.font.pixelSize.smaller - color: Appearance.m3colors.m3outline - text: modelData.count ?? "" - } + bounce: false + contentItem: StyledText { + font.pixelSize: Appearance.font.pixelSize.small + color: Appearance.m3colors.m3onSurface + horizontalAlignment: Text.AlignHCenter + text: modelData.displayName ?? modelData.name } onHoveredChanged: { @@ -524,20 +517,25 @@ int main(int argc, char* argv[]) { Item { Layout.fillWidth: true } - Repeater { // Command buttons - id: commandRepeater - model: commandButtonsRow.commandsShown - delegate: ApiCommandButton { - id: commandButton - property string commandRepresentation: `${root.commandPrefix}${modelData.name}` - buttonText: commandRepresentation - onClicked: { - if(modelData.sendDirectly) { - root.handleInput(commandRepresentation) - } else { - messageInputField.text = commandRepresentation + " " - messageInputField.cursorPosition = messageInputField.text.length - messageInputField.forceActiveFocus() + ButtonGroup { + padding: 0 + + Repeater { // Command buttons + model: commandButtonsRow.commandsShown + delegate: ApiCommandButton { + property string commandRepresentation: `${root.commandPrefix}${modelData.name}` + buttonText: commandRepresentation + onClicked: { + if(modelData.sendDirectly) { + root.handleInput(commandRepresentation) + } else { + messageInputField.text = commandRepresentation + " " + messageInputField.cursorPosition = messageInputField.text.length + messageInputField.forceActiveFocus() + } + if (modelData.name === "clear") { + messageInputField.text = "" + } } } } diff --git a/.config/quickshell/modules/sidebarLeft/Anime.qml b/.config/quickshell/modules/sidebarLeft/Anime.qml index 166c237fa..b0835d07b 100644 --- a/.config/quickshell/modules/sidebarLeft/Anime.qml +++ b/.config/quickshell/modules/sidebarLeft/Anime.qml @@ -308,20 +308,24 @@ Item { } delegate: ApiCommandButton { id: tagButton - colBackground: tagSuggestions.selectedIndex === index ? Appearance.colors.colLayer2Hover : Appearance.colors.colLayer2 - + bounce: false contentItem: RowLayout { + anchors.centerIn: parent spacing: 5 StyledText { + Layout.fillWidth: false font.pixelSize: Appearance.font.pixelSize.small color: Appearance.m3colors.m3onSurface + horizontalAlignment: Text.AlignRight text: modelData.displayName ?? modelData.name } StyledText { + Layout.fillWidth: false visible: modelData.count !== undefined font.pixelSize: Appearance.font.pixelSize.smaller color: Appearance.m3colors.m3outline + horizontalAlignment: Text.AlignLeft text: modelData.count ?? "" } } @@ -615,22 +619,28 @@ Item { Item { Layout.fillWidth: true } - Repeater { // Command buttons - id: commandRepeater - model: commandButtonsRow.commandsShown - delegate: ApiCommandButton { - id: tagButton - property string commandRepresentation: `${root.commandPrefix}${modelData.name}` - buttonText: commandRepresentation - colBackground: Appearance.colors.colLayer2 + ButtonGroup { + padding: 0 + Repeater { // Command buttons + id: commandRepeater + model: commandButtonsRow.commandsShown + delegate: ApiCommandButton { + id: tagButton + property string commandRepresentation: `${root.commandPrefix}${modelData.name}` + buttonText: commandRepresentation + colBackground: Appearance.colors.colLayer2 - onClicked: { - if(modelData.sendDirectly) { - root.handleInput(commandRepresentation) - } else { - tagInputField.text = commandRepresentation + " " - tagInputField.cursorPosition = tagInputField.text.length - tagInputField.forceActiveFocus() + onClicked: { + if(modelData.sendDirectly) { + root.handleInput(commandRepresentation) + } else { + tagInputField.text = commandRepresentation + " " + tagInputField.cursorPosition = tagInputField.text.length + tagInputField.forceActiveFocus() + } + if (modelData.name === "clear") { + tagInputField.text = "" + } } } } diff --git a/.config/quickshell/modules/sidebarLeft/ApiCommandButton.qml b/.config/quickshell/modules/sidebarLeft/ApiCommandButton.qml index dc414bfb0..b9fab2961 100644 --- a/.config/quickshell/modules/sidebarLeft/ApiCommandButton.qml +++ b/.config/quickshell/modules/sidebarLeft/ApiCommandButton.qml @@ -6,17 +6,20 @@ import QtQuick.Controls import QtQuick.Layouts import Quickshell -RippleButton { +GroupButton { id: button property string buttonText - implicitHeight: 30 - leftPadding: 10 - rightPadding: 10 + horizontalPadding: 8 + verticalPadding: 6 + + baseWidth: contentItem.implicitWidth + horizontalPadding * 2 + clickedWidth: baseWidth + 20 + baseHeight: contentItem.implicitHeight + verticalPadding * 2 colBackground: Appearance.colors.colLayer2 colBackgroundHover: Appearance.colors.colLayer2Hover - colRipple: Appearance.colors.colLayer2Active + colBackgroundActive: Appearance.colors.colLayer2Active contentItem: StyledText { horizontalAlignment: Text.AlignHCenter