left sidebar: bouncy command buttons

This commit is contained in:
end-4
2025-05-24 19:00:18 +02:00
parent 76abad2487
commit 2641c79d65
5 changed files with 71 additions and 61 deletions
@@ -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
}]
}
@@ -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)
@@ -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 = ""
}
}
}
}
@@ -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 = ""
}
}
}
}
@@ -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