swarm details page: improve

GitLab: #340
Change-Id: I03becae1c33be5a6ab10452c6986d7b5abd009e3

src/constant/JamiStrings.qml

@@ -613,7 +613,8 @@ Item {
 
     // SwarmDetailsPanel
     property string about: qsTr("About")
-    property string members: qsTr("Members")
+    property string members: qsTr("%1 Members")
+    property string member: qsTr("Member")
     property string documents: qsTr("Documents")
     property string editTitle: qsTr("Edit title")
     property string editDescription: qsTr("Edit description")

src/constant/JamiTheme.qml

@@ -55,6 +55,7 @@ Item {
     property color selectedColor: darkTheme ? "#0e81c5" : "#e0e0e0"
     property color editBackgroundColor: darkTheme ? "#373737" : lightGrey_
     property color textColor: primaryForegroundColor
+    property color textColorHovered: darkTheme? "#cccccc" : "#333333"
     property color tabbarBorderColor: darkTheme ? blackColor : "#e3e3e3"
     property color popupOverlayColor: darkTheme ? Qt.rgba(255, 255, 255, 0.22) :
                                                   Qt.rgba(0, 0, 0, 0.33)

src/currentconversation.cpp

@@ -52,7 +52,7 @@ CurrentConversation::updateData()
             auto& convInfo = optConv->get();
             set_title(accInfo.conversationModel->title(convId));
             set_description(accInfo.conversationModel->description(convId));
-            set_uris(accInfo.conversationModel->peersForConversation(convId).toList());
+            set_uris(convInfo.participants.toList());
             set_isSwarm(convInfo.isSwarm());
             set_isLegacy(convInfo.isLegacy());
             set_isCoreDialog(convInfo.isCoreDialog());

src/mainview/MainView.qml

@@ -418,7 +418,6 @@ Rectangle {
         visible: false
 
         onCreateSwarmClicked: {
-            console.warn("@@@")
             backToMainView()
         }
     }

src/mainview/components/ChatView.qml

@@ -43,6 +43,7 @@ Rectangle {
 
     function focusChatView() {
         chatViewFooter.textInput.forceActiveFocus()
+        swarmDetailsPanel.visible = false
     }
 
     color: JamiTheme.chatviewBgColor

src/mainview/components/FilterTabButton.qml

@@ -31,6 +31,16 @@ TabButton {
     property alias labelText: label.text
     property alias acceleratorSequence: accelerator.sequence
     property alias badgeCount: badge.count
+
+    property var backgroundColor: JamiTheme.backgroundColor
+    property var hoverColor: JamiTheme.backgroundColor
+    property var textColor: JamiTheme.textColor
+    property var textColorHovered: JamiTheme.textColorHovered
+    property var borderWidth: 2
+    property var bottomMargin: 1
+    property var underlineContentOnly: false
+    property var fontSize: JamiTheme.filterItemFontSize
+
     signal selected
 
     hoverEnabled: true
@@ -42,10 +52,11 @@ TabButton {
         anchors.fill: root
 
         color: root.hovered ?
-                   JamiTheme.hoverColor :
-                   JamiTheme.backgroundColor
+                   root.hoverColor :
+                   root.backgroundColor
 
         RowLayout {
+            id: informations
             anchors.horizontalCenter: contentRect.horizontalCenter
             anchors.verticalCenter: contentRect.verticalCenter
 
@@ -53,10 +64,14 @@ TabButton {
                 id: label
 
                 Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
-                Layout.bottomMargin: 1
+                Layout.bottomMargin: root.bottomMargin
 
-                font.pointSize: JamiTheme.filterItemFontSize
-                color: JamiTheme.textColor
+                font.pointSize: fontSize
+                color: {
+                    if (!root.down && root.hovered)
+                        return root.textColorHovered
+                    return root.textColor
+                }
                 opacity: root.down ? 1.0 : 0.5
             }
 
@@ -69,10 +84,17 @@ TabButton {
     }
 
     Rectangle {
-        width: contentRect.width
+        width: underlineContentOnly ? informations.width + JamiTheme.menuBorderPreferredHeight : contentRect.width
+        anchors.horizontalCenter: contentRect.horizontalCenter
         anchors.bottom: contentRect.bottom
-        height: 2
-        color: root.down ? JamiTheme.textColor : "transparent"
+        height: borderWidth
+        color: {
+            if (!root.down && root.hovered)
+                return root.textColorHovered
+            if (!root.down)
+                return "transparent"
+            return root.textColor
+        }
     }
 
     Shortcut {

src/mainview/components/SwarmDetailsPanel.qml

@@ -33,8 +33,14 @@ Rectangle {
 
     ColumnLayout {
         id: swarmProfileDetails
-        Layout.fillWidth: true
         Layout.fillHeight: true
+        Layout.fillWidth: true
+        spacing: 0
+
+        ColumnLayout {
+            id: header
+            Layout.fillWidth: true
+            spacing: 0
 
             ConversationAvatar {
                 id: conversationAvatar
@@ -74,6 +80,7 @@ Rectangle {
                 id: descriptionLine
                 Layout.alignment: Qt.AlignCenter
                 Layout.topMargin: JamiTheme.preferredMarginSize
+                Layout.bottomMargin: JamiTheme.preferredMarginSize
 
                 font.pointSize: JamiTheme.titleFontSize
 
@@ -92,37 +99,115 @@ Rectangle {
             TabBar {
                 id: tabBar
 
-            currentIndex: 1
+                Layout.topMargin: JamiTheme.preferredMarginSize
                 Layout.preferredWidth: root.width
+                Layout.preferredHeight: membersTabButton.height
 
-            FilterTabButton {
+                /*FilterTabButton {
                     id: aboutTabButton
+                    backgroundColor: JamiTheme.buttonTintedBlue
+                    hoverColor: JamiTheme.buttonTintedBlue
+                    borderWidth: 4
+                    bottomMargin: JamiTheme.preferredMarginSize
+                    fontSize: JamiTheme.titleFontSize
+                    underlineContentOnly: true
 
                     down: tabBar.currentIndex === 0
                     labelText: JamiStrings.about
-            }
+                }*/
 
                 FilterTabButton {
                     id: membersTabButton
-
-                down: tabBar.currentIndex === 1
-                labelText: JamiStrings.members
+                    backgroundColor: JamiTheme.buttonTintedBlue
+                    hoverColor: JamiTheme.buttonTintedBlue
+                    borderWidth: 4
+                    bottomMargin: JamiTheme.preferredMarginSize
+                    fontSize: JamiTheme.titleFontSize
+                    underlineContentOnly: true
+
+                    down: true//tabBar.currentIndex === 1
+                    labelText: {
+                        var membersNb = CurrentConversation.uris.length;
+                        if (membersNb > 1)
+                            return JamiStrings.members.arg(membersNb)
+                        return JamiStrings.member
+                    }
                 }
 
-            FilterTabButton {
+                /*FilterTabButton {
                     id: documentsTabButton
+                    backgroundColor: JamiTheme.buttonTintedBlue
+                    hoverColor: JamiTheme.buttonTintedBlue
+                    borderWidth: 4
+                    bottomMargin: JamiTheme.preferredMarginSize
+                    fontSize: JamiTheme.titleFontSize
+                    underlineContentOnly: true
 
                     down: tabBar.currentIndex === 2
                     labelText: JamiStrings.documents
+                }*/
             }
         }
 
-    
         Rectangle {
-            Layout.alignment: Qt.AlignCenter
-            Layout.preferredWidth: root.width
-            Layout.preferredHeight: root.height
+            id: details
+            Layout.fillWidth: true
+            Layout.preferredHeight: root.height - header.height
             color: JamiTheme.secondaryBackgroundColor
+
+            JamiListView {
+                id: members
+                anchors.fill: parent
+                spacing: JamiTheme.preferredMarginSize
+                anchors.topMargin: JamiTheme.preferredMarginSize
+
+                model: CurrentConversation.uris
+                delegate: RowLayout {
+                    spacing: 10
+
+                    Avatar {
+                        width: JamiTheme.smartListAvatarSize
+                        height: JamiTheme.smartListAvatarSize
+                        z: -index
+
+                        imageId: CurrentAccount.uri == modelData ? CurrentAccount.id : modelData
+                        showPresenceIndicator: UtilsAdapter.getContactPresence(CurrentAccount.id, modelData)
+                        mode: CurrentAccount.uri == modelData ? Avatar.Mode.Account : Avatar.Mode.Contact
+                    }
+
+                    ElidedTextLabel {
+                        id: bestName
+
+                        Layout.preferredWidth: JamiTheme.preferredFieldWidth
+                        Layout.preferredHeight: JamiTheme.preferredFieldHeight
+
+                        eText: UtilsAdapter.getContactBestName(CurrentAccount.id, modelData)
+                        maxWidth: JamiTheme.preferredFieldWidth
+
+                        font.pointSize: JamiTheme.participantFontSize
+                        color: JamiTheme.primaryForegroundColor
+                        font.kerning: true
+
+                        verticalAlignment: Text.AlignVCenter
+                    }
+
+                    ElidedTextLabel {
+                        id: role
+
+                        Layout.preferredHeight: JamiTheme.preferredFieldHeight
+
+                        eText: UtilsAdapter.getParticipantRole(CurrentAccount.id, CurrentConversation.id, modelData)
+                        maxWidth: JamiTheme.preferredFieldWidth
+
+                        font.pointSize: JamiTheme.participantFontSize
+                        color: JamiTheme.textColorHovered
+                        font.kerning: true
+
+                        horizontalAlignment: Text.AlignRight
+                        verticalAlignment: Text.AlignVCenter
+                    }
+                }
+            }
         }
     }
 }

src/utilsadapter.cpp

@@ -471,3 +471,36 @@ UtilsAdapter::supportedLang()
     }
     return result;
 }
+
+bool
+UtilsAdapter::getContactPresence(const QString& accountId, const QString& uri)
+{
+    try {
+        if (lrcInstance_->getAccountInfo(accountId).profileInfo.uri == uri)
+            return true; // It's the same account
+        auto info = lrcInstance_->getAccountInfo(accountId).contactModel->getContact(uri);
+        return info.isPresent;
+    } catch (...) {
+    }
+    return false;
+}
+
+QString
+UtilsAdapter::getContactBestName(const QString& accountId, const QString& uri)
+{
+    try {
+        if (lrcInstance_->getAccountInfo(accountId).profileInfo.uri == uri)
+            return lrcInstance_->accountModel().bestNameForAccount(
+                accountId); // It's the same account
+        return lrcInstance_->getAccountInfo(accountId).contactModel->bestNameForContact(uri);
+    } catch (...) {
+    }
+    return {};
+}
+
+QString
+UtilsAdapter::getParticipantRole(const QString& accountId, const QString& convId, const QString& uri)
+{
+    // TODO get role
+    return {};
+}

src/utilsadapter.h

@@ -92,6 +92,13 @@ public:
     Q_INVOKABLE void clearInteractionsCache(const QString& accountId, const QString& convUid);
     Q_INVOKABLE QVariantMap supportedLang();
 
+    // For Swarm details page
+    Q_INVOKABLE bool getContactPresence(const QString& accountId, const QString& uri);
+    Q_INVOKABLE QString getContactBestName(const QString& accountId, const QString& uri);
+    Q_INVOKABLE QString getParticipantRole(const QString& accountId,
+                                           const QString& convId,
+                                           const QString& uri);
+
 Q_SIGNALS:
     void debugMessageReceived(const QString& message);