Fix alignment of predefined status contents regardless of emoji fonts

Signed-off-by: Claudio Cambra <claudio.cambra@gmail.com>
nextcloud · Aug 10, 2022 · 735cee2 · 735cee2
1 parent ddcb834
commit 735cee2
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/gui/PredefinedStatusButton.qml b/src/gui/PredefinedStatusButton.qml
@@ -28,7 +28,8 @@ AbstractButton {
     leftPadding: Style.standardSpacing / 2
     rightPadding: Style.standardSpacing / 2
 
-    property real internalSpacing: Style.standardSpacing
+    property int emojiWidth: -1
+    property int internalSpacing: Style.standardSpacing
     property string emoji: ""
 
     background: Rectangle {
@@ -37,15 +38,19 @@ AbstractButton {
     }
 
     contentItem: Row {
-        spacing: internalSpacing
+        spacing: root.internalSpacing
 
         Label {
+            width: root.emojiWidth > 0 ? root.emojiWidth : implicitWidth
             text: emoji
+            horizontalAlignment: Image.AlignHCenter
+            verticalAlignment: Image.AlignVCenter
         }
 
         Label {
             text: root.text
             color: Style.ncTextColor
+            verticalAlignment: Text.AlignVCenter
         }
     }
 }
diff --git a/src/gui/UserStatusSelector.qml b/src/gui/UserStatusSelector.qml
@@ -141,6 +141,7 @@ ColumnLayout {
             }
 
             RowLayout {
+                id: statusFieldLayout
                 Layout.fillWidth: true
                 spacing: 0
 
@@ -264,9 +265,11 @@ ColumnLayout {
                     model: userStatusSelectorModel.predefinedStatuses
 
                     PredefinedStatusButton {
-                        id: control
                         Layout.fillWidth: true
-                        internalSpacing: Style.standardSpacing + fieldButton.padding + userStatusMessageTextField.padding
+
+                        leftPadding: 0
+                        emojiWidth: fieldButton.width
+                        internalSpacing: statusFieldLayout.spacing + userStatusMessageTextField.leftPadding
 
                         emoji: modelData.icon
                         text: "<b>%1</b> – %2".arg(modelData.message).arg(userStatusSelectorModel.clearAtReadable(modelData))