Display the user status emoji separated from the message.

It allows to align the emoji with the message.

Signed-off-by: Camila <hello@camila.codes>

src/gui/accountstate.cpp

@@ -142,6 +142,11 @@ QUrl AccountState::statusIcon() const
     return _userStatus->icon();
 }
 
+QString AccountState::statusEmoji() const
+{
+    return _userStatus->emoji();
+}
+
 QString AccountState::stateString(State state)
 {
     switch (state) {

src/gui/accountstate.h

@@ -167,13 +167,17 @@ public:
     */
     UserStatus::Status status() const;
 
-    /** Returns the user status Message (emoji + text)
+    /** Returns the user status Message (text)
     */
     QString statusMessage() const;
-
+    
     /** Returns the user status icon url
     */
     QUrl statusIcon() const;
+    
+    /** Returns the user status emoji
+    */
+    QString statusEmoji() const;
 
     /** Returns the notifications status retrieved by the notificatons endpoint
      *  https://github.com/nextcloud/desktop/issues/2318#issuecomment-680698429

src/gui/tray/UserLine.qml

@@ -111,16 +111,27 @@ MenuItem {
                             font.pixelSize: 12
                             font.bold: true
                         }
-                        Label {
-                            id: userStatusMessage
+                        Row {
+                            id: userStatus
+                            spacing: 8
                             visible: model.isConnected && 
-                                     model.serverHasUserStatus && 
-                                     statusMessage !== ""
-                            width: 128
-                            text: statusMessage
-                            elide: Text.ElideRight
-                            color: "black"
-                            font.pixelSize: 10
+                                     model.serverHasUserStatus
+                            Label {
+                                id: emoji
+                                visible: model.statusEmoji !== ""
+                                width: Style.userStatusEmojiSize
+                                text: statusEmoji
+                            }
+                            Label {
+                                id: message
+                                anchors.bottom: emoji.bottom
+                                visible: model.statusMessage !== ""
+                                width: 128
+                                text: statusMessage
+                                elide: Text.ElideRight
+                                color: "black"
+                                font.pixelSize: 10
+                            }
                         }
                         Label {
                             id: accountServer

src/gui/tray/UserModel.cpp

@@ -576,6 +576,11 @@ QUrl User::statusIcon() const
     return _account->statusIcon();
 }
 
+QString User::statusEmoji() const
+{
+    return _account->statusEmoji();
+}
+
 bool User::serverHasUserStatus() const
 {
     return _account->account()->capabilities().userStatus();
@@ -696,16 +701,6 @@ Q_INVOKABLE bool UserModel::isUserConnected(const int &id)
     return _users[id]->isConnected();
 }
 
-Q_INVOKABLE QUrl UserModel::statusIcon(int id)
-{
-    if (id < 0 || id >= _users.size()) {
-        return {};
-    }
-
-    return _users[id]->statusIcon();
-}
-
-
 QImage UserModel::avatarById(const int &id)
 {
     if (id < 0 || id >= _users.size())
@@ -744,6 +739,7 @@ void UserModel::addUser(AccountStatePtr &user, const bool &isCurrent)
 
         connect(u, &User::statusChanged, this, [this, row] {
             emit dataChanged(index(row, 0), index(row, 0), {UserModel::StatusIconRole, 
+			    				    UserModel::StatusEmojiRole,     
                                                             UserModel::StatusMessageRole});
         });
         
@@ -885,6 +881,8 @@ QVariant UserModel::data(const QModelIndex &index, int role) const
         return _users[index.row()]->serverHasUserStatus();
     } else if (role == StatusIconRole) {
         return _users[index.row()]->statusIcon();
+    } else if (role == StatusEmojiRole) {
+        return _users[index.row()]->statusEmoji();
     } else if (role == StatusMessageRole) {
         return _users[index.row()]->statusMessage();
     } else if (role == DesktopNotificationsAllowedRole) {
@@ -908,6 +906,7 @@ QHash<int, QByteArray> UserModel::roleNames() const
     roles[ServerRole] = "server";
     roles[ServerHasUserStatusRole] = "serverHasUserStatus";
     roles[StatusIconRole] = "statusIcon";
+    roles[StatusEmojiRole] = "statusEmoji";
     roles[StatusMessageRole] = "statusMessage";
     roles[DesktopNotificationsAllowedRole] = "desktopNotificationsAllowed";
     roles[AvatarRole] = "avatar";

src/gui/tray/UserModel.h

@@ -23,6 +23,7 @@ class User : public QObject
     Q_PROPERTY(QString server READ server CONSTANT)
     Q_PROPERTY(bool serverHasUserStatus READ serverHasUserStatus CONSTANT)
     Q_PROPERTY(QUrl statusIcon READ statusIcon NOTIFY statusChanged)
+    Q_PROPERTY(QString statusEmoji READ statusEmoji NOTIFY statusChanged)
     Q_PROPERTY(QString statusMessage READ statusMessage NOTIFY statusChanged)
     Q_PROPERTY(QString desktopNotificationsAllowed READ isDesktopNotificationsAllowed NOTIFY desktopNotificationsAllowedChanged)
     Q_PROPERTY(bool hasLocalFolder READ hasLocalFolder NOTIFY hasLocalFolderChanged)
@@ -57,6 +58,7 @@ public:
     UserStatus::Status status() const;
     QString statusMessage() const;
     QUrl statusIcon() const;
+    QString statusEmoji() const;
     void processCompletedSyncItem(const Folder *folder, const SyncFileItemPtr &item);
 
 signals:
@@ -148,7 +150,6 @@ public:
     Q_INVOKABLE QString currentUserServer();
     int currentUserId() const;
     Q_INVOKABLE bool isUserConnected(const int &id);
-    Q_INVOKABLE QUrl statusIcon(int id);
     Q_INVOKABLE void switchCurrentUser(const int &id);
     Q_INVOKABLE void login(const int &id);
     Q_INVOKABLE void logout(const int &id);
@@ -161,6 +162,7 @@ public:
         ServerRole,
         ServerHasUserStatusRole,
         StatusIconRole,
+        StatusEmojiRole,
         StatusMessageRole,
         DesktopNotificationsAllowedRole,
         AvatarRole,

src/gui/tray/Window.qml

@@ -344,6 +344,7 @@ Window {
                             Image {
                                 id: currentAccountStatusIndicator
                                 visible: UserModel.currentUser.isConnected
+                                         && UserModel.currentUser.serverHasUserStatus
                                 source: UserModel.currentUser.statusIcon
                                 cache: false
                                 x: currentAccountStatusIndicatorBackground.x + 1
@@ -371,18 +372,29 @@ Window {
                                 font.pixelSize: Style.topLinePixelSize
                                 font.bold: true
                             }
-                            Label {
+                            Row {
                                 id: currentUserStatus
+                                spacing: 8
                                 visible: UserModel.currentUser.isConnected &&
-                                         UserModel.currentUser.serverHasUserStatus &&
-                                         UserModel.currentUser.statusMessage !== ""
-                                width: Style.currentAccountLabelWidth
-                                text: UserModel.currentUser.statusMessage !== ""
-                                      ? UserModel.currentUser.statusMessage 
-                                      : UserModel.currentUser.server
-                                elide: Text.ElideRight
-                                color: Style.ncTextColor
-                                font.pixelSize: Style.subLinePixelSize
+                                         UserModel.currentUser.serverHasUserStatus
+                                Label {
+                                    id: emoji
+                                    visible: UserModel.currentUser.statusEmoji !== ""
+                                    width: Style.userStatusEmojiSize
+                                    text: UserModel.currentUser.statusEmoji
+                                }
+                                Label {
+                                    id: message
+                                    anchors.bottom: emoji.bottom
+                                    visible: UserModel.currentUser.statusMessage !== ""
+                                    width: Style.currentAccountLabelWidth
+                                    text: UserModel.currentUser.statusMessage !== ""
+                                          ? UserModel.currentUser.statusMessage 
+                                          : UserModel.currentUser.server
+                                    elide: Text.ElideRight
+                                    color: Style.ncTextColor
+                                    font.pixelSize: Style.subLinePixelSize
+                                }
                             }
                         }
 
@@ -430,7 +442,7 @@ Window {
                    Image {
                         id: folderStateIndicator
                         visible: UserModel.currentUser.hasLocalFolder
-                        source: UserModel.isUserConnected(UserModel.currentUserId)
+                        source: UserModel.currentUser.isConnected
                                 ? Style.stateOnlineImageSource
                                 : Style.stateOfflineImageSource
                         cache: false
@@ -441,7 +453,7 @@ Window {
                         sourceSize.height: Style.folderStateIndicatorSize
     
                         Accessible.role: Accessible.Indicator
-                        Accessible.name: UserModel.isUserConnected(UserModel.currentUserId()) ? qsTr("Connected") : qsTr("Disconnected")
+                        Accessible.name: UserModel.currentUser.isConnected ? qsTr("Connected") : qsTr("Disconnected")
                     }
 
                     Accessible.role: Accessible.Button

src/gui/userstatus.cpp

@@ -100,16 +100,11 @@ void UserStatus::slotFetchUserStatusFinished(const QJsonDocument &json, int stat
     }
     
     const auto retrievedData = json.object().value("ocs").toObject().value("data").toObject(defaultValues);
-    const auto messageIsPredefined = retrievedData.value("messageIsPredefined").toBool();
-    const auto statusIsUserDefined = retrievedData.value("statusIsUserDefined").toBool();
-    
-    const auto emoji = retrievedData.value("icon").toString().trimmed();
+
+    _emoji = retrievedData.value("icon").toString().trimmed();
     _status = stringToEnum(retrievedData.value("status").toString());
     _message = retrievedData.value("message").toString().trimmed();
-    if (messageIsPredefined && statusIsUserDefined) {
-        _message = QString("%1 %2").arg(emoji, _message);
-    } 
-    
+
     emit fetchUserStatusFinished();
 }
 
@@ -123,6 +118,11 @@ QString UserStatus::message() const
     return _message;
 }
 
+QString UserStatus::emoji() const
+{
+    return _emoji;
+}
+
 QUrl UserStatus::icon() const
 {
     switch (_status) {

src/gui/userstatus.h

@@ -39,6 +39,7 @@ public:
     void fetchUserStatus(AccountPtr account);
     Status status() const;
     QString message() const;
+    QString emoji() const;
     QUrl icon() const;
 
 private slots:
@@ -51,6 +52,7 @@ private:
     QPointer<JsonApiJob> _job; // the currently running job
     Status _status = Status::Online;
     QString _message;
+    QString _emoji;
 };
 
 

theme/Style/Style.qml

@@ -44,6 +44,8 @@ QtObject {
     property int headerButtonIconSize: 32
 
     property int activityLabelBaseWidth: 240
+    
+    property int userStatusEmojiSize: 8
 
     // Visual behaviour
     property bool hoverEffectsEnabled: true