From d7e0923227edbe496cadbd784ecb5adfb8fde7b8 Mon Sep 17 00:00:00 2001 From: Claudio Cambra Date: Thu, 27 Feb 2025 15:05:18 +0800 Subject: [PATCH 1/5] gui/tray: Use standard native buttons for bottom buttons in user status selector page Signed-off-by: Claudio Cambra --- src/gui/UserStatusSelector.qml | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/gui/UserStatusSelector.qml b/src/gui/UserStatusSelector.qml index 15abf6595d876..207c5206da204 100644 --- a/src/gui/UserStatusSelector.qml +++ b/src/gui/UserStatusSelector.qml @@ -321,26 +321,22 @@ ColumnLayout { Layout.fillWidth: true Layout.alignment: Qt.AlignBottom - UserStatusSelectorButton { + Button { // Prevent being squashed by the other buttons with larger text Layout.minimumWidth: implicitWidth Layout.fillHeight: true - primary: true text: qsTr("Cancel") onClicked: finished() } - UserStatusSelectorButton { + Button { Layout.fillWidth: true Layout.fillHeight: true - primary: true text: qsTr("Clear status message") onClicked: userStatusSelectorModel.clearUserStatus() } - UserStatusSelectorButton { + Button { Layout.fillWidth: true Layout.fillHeight: true - primary: true - colored: true focusPolicy: Qt.StrongFocus text: qsTr("Set status message") onClicked: userStatusSelectorModel.setUserStatus() From 0668730f093760702fb4bcc0131e484aa175d4a1 Mon Sep 17 00:00:00 2001 From: Claudio Cambra Date: Thu, 27 Feb 2025 15:34:27 +0800 Subject: [PATCH 2/5] gui/tray: Let menu handle sizing of child menu items in tray window header Signed-off-by: Claudio Cambra --- src/gui/tray/TrayWindowHeader.qml | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/gui/tray/TrayWindowHeader.qml b/src/gui/tray/TrayWindowHeader.qml index 9ba808e5b7019..a78aab5f842e3 100644 --- a/src/gui/tray/TrayWindowHeader.qml +++ b/src/gui/tray/TrayWindowHeader.qml @@ -121,14 +121,11 @@ Rectangle { model: UserAppsModel delegate: MenuItem { id: appEntry - anchors.left: parent.left - anchors.right: parent.right text: model.appName font.pixelSize: Style.topLinePixelSize icon.source: model.appIconUrl icon.color: palette.windowText onTriggered: UserAppsModel.openAppUrl(appUrl) - hoverEnabled: true Accessible.role: Accessible.MenuItem Accessible.name: qsTr("Open %1 in browser").arg(model.appName) Accessible.onPressAction: appEntry.triggered() From 67194613185325a9a3ddf855bcb218a38b75a259 Mon Sep 17 00:00:00 2001 From: Claudio Cambra Date: Thu, 27 Feb 2025 16:21:50 +0800 Subject: [PATCH 3/5] gui/tray: Add hacky workaround to avoid icon and text for menu items in tray header being too close Signed-off-by: Claudio Cambra --- src/gui/tray/TrayWindowHeader.qml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/gui/tray/TrayWindowHeader.qml b/src/gui/tray/TrayWindowHeader.qml index a78aab5f842e3..3fbd8fc538764 100644 --- a/src/gui/tray/TrayWindowHeader.qml +++ b/src/gui/tray/TrayWindowHeader.qml @@ -121,7 +121,9 @@ Rectangle { model: UserAppsModel delegate: MenuItem { id: appEntry - text: model.appName + // HACK: Without creating our own component (and killing native styling) + // HACK: we do not have a way to adjust the text and icon spacing. + text: " " + model.appName font.pixelSize: Style.topLinePixelSize icon.source: model.appIconUrl icon.color: palette.windowText From 284a403037ebd96f4e574ede98e0f066a01b54ba Mon Sep 17 00:00:00 2001 From: Claudio Cambra Date: Thu, 27 Feb 2025 17:22:31 +0800 Subject: [PATCH 4/5] gui/tray: Do not add custom styling to status message text field in user status Signed-off-by: Claudio Cambra --- src/gui/UserStatusSelector.qml | 54 ---------------------------------- 1 file changed, 54 deletions(-) diff --git a/src/gui/UserStatusSelector.qml b/src/gui/UserStatusSelector.qml index 207c5206da204..8967bc2f9419a 100644 --- a/src/gui/UserStatusSelector.qml +++ b/src/gui/UserStatusSelector.qml @@ -145,33 +145,11 @@ ColumnLayout { property color borderColor: showBorder ? Style.ncBlue : palette.dark - // We create the square with only the top-left and bottom-left rounded corners - // by overlaying different rectangles on top of each other background: Rectangle { radius: Style.slightlyRoundedButtonRadius color: palette.button border.color: fieldButton.borderColor border.width: Style.normalBorderWidth - - Rectangle { - anchors.fill: parent - anchors.leftMargin: parent.width / 2 - anchors.rightMargin: -1 - z: 1 - color: palette.button - border.color: fieldButton.borderColor - border.width: Style.normalBorderWidth - } - - Rectangle { // We need to cover the blue border of the non-radiused rectangle - anchors.fill: parent - anchors.leftMargin: parent.width / 4 - anchors.rightMargin: parent.width / 4 - anchors.topMargin: Style.normalBorderWidth - anchors.bottomMargin: Style.normalBorderWidth - z: 2 - color: palette.button - } } contentItem: Label { @@ -212,43 +190,11 @@ ColumnLayout { TextField { id: userStatusMessageTextField - property color borderColor: activeFocus ? Style.ncBlue : palette.dark - Layout.fillWidth: true - Layout.preferredHeight: contentHeight + (Style.smallSpacing * 2) - placeholderText: qsTr("What is your status?") - placeholderTextColor: palette.dark text: userStatusSelectorModel.userStatusMessage - verticalAlignment: TextInput.AlignVCenter selectByMouse: true onEditingFinished: userStatusSelectorModel.userStatusMessage = text - - background: Rectangle { - radius: Style.slightlyRoundedButtonRadius - color: palette.base - border.color: userStatusMessageTextField.borderColor - border.width: Style.normalBorderWidth - - Rectangle { - anchors.fill: parent - anchors.rightMargin: parent.width / 2 - z: 1 - color: palette.base - border.color: userStatusMessageTextField.borderColor - border.width: Style.normalBorderWidth - } - - Rectangle { // We need to cover the blue border of the non-radiused rectangle - anchors.fill: parent - anchors.leftMargin: parent.width / 4 - anchors.rightMargin: parent.width / 4 - anchors.topMargin: Style.normalBorderWidth - anchors.bottomMargin: Style.normalBorderWidth - z: 2 - color: palette.base - } - } } } From 0a241a33548bd3938132f49433e9c217dda32c4d Mon Sep 17 00:00:00 2001 From: Claudio Cambra Date: Thu, 27 Feb 2025 17:32:53 +0800 Subject: [PATCH 5/5] gui/tray: Make bottom buttons in user status selector smaller Signed-off-by: Claudio Cambra --- src/gui/UserStatusSelector.qml | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/src/gui/UserStatusSelector.qml b/src/gui/UserStatusSelector.qml index 8967bc2f9419a..736dbe5a86a05 100644 --- a/src/gui/UserStatusSelector.qml +++ b/src/gui/UserStatusSelector.qml @@ -268,23 +268,19 @@ ColumnLayout { Layout.alignment: Qt.AlignBottom Button { - // Prevent being squashed by the other buttons with larger text - Layout.minimumWidth: implicitWidth - Layout.fillHeight: true text: qsTr("Cancel") onClicked: finished() } - Button { + Item { // Spacing Layout.fillWidth: true - Layout.fillHeight: true - text: qsTr("Clear status message") + } + Button { + text: qsTr("Clear") onClicked: userStatusSelectorModel.clearUserStatus() } Button { - Layout.fillWidth: true - Layout.fillHeight: true focusPolicy: Qt.StrongFocus - text: qsTr("Set status message") + text: qsTr("Apply") onClicked: userStatusSelectorModel.setUserStatus() } }