smartlist: refactor filter tab QML

- remove some code duplication and MouseAreas

Change-Id: I2650aa94d302ab53dd7f389077f20d0ed3a62abd
Gitlab: #241

qml.qrc

@@ -136,5 +136,6 @@
         <file>src/mainview/js/screenrubberbandcreation.js</file>
         <file>src/mainview/js/contactpickercreation.js</file>
         <file>src/mainview/js/pluginhandlerpickercreation.js</file>
+        <file>src/mainview/components/FilterTabButton.qml</file>
     </qresource>
 </RCC>

src/mainview/components/FilterTabButton.qml

@@ -0,0 +1,103 @@
+/*
+ * Copyright (C) 2020-2021 by Savoir-faire Linux
+ * Author: Mingrui Zhang <mingrui.zhang@savoirfairelinux.com>
+ * Author: Andreas Traczyk <andreas.traczyk@savoirfairelinux.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+import QtGraphicalEffects 1.14
+
+import net.jami.Models 1.0
+import net.jami.Adapters 1.0
+import net.jami.Constants 1.0
+
+import "../../commoncomponents"
+
+TabButton {
+    id: root
+
+    property var tabBar: undefined
+    property alias labelText: label.text
+    property alias acceleratorSequence: accelerator.sequence
+    property int badgeCount
+    signal selected
+
+    hoverEnabled: true
+    onClicked: selected()
+
+    Rectangle {
+        id: rect
+
+        width: tabBar.width / 2 + 1
+        height: tabBar.height
+        color: root.hovered ?
+                   JamiTheme.hoverColor :
+                   JamiTheme.backgroundColor
+
+        Text {
+            id: label
+
+            anchors.horizontalCenter: rect.horizontalCenter
+            anchors.bottom: rect.bottom
+            anchors.bottomMargin: 12
+
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+
+            font.pointSize: JamiTheme.textFontSize
+            color: Qt.lighter(JamiTheme.textColor, root.down ? 1.0 : 1.5)
+        }
+
+        Rectangle {
+            id: badgeRect
+
+            anchors.left: label.right
+            anchors.leftMargin: 4
+            anchors.verticalCenter: label.verticalCenter
+            anchors.verticalCenterOffset : -5
+
+            width: 12
+            height: 12
+
+            visible: badgeCount > 0
+
+            Text {
+                anchors.centerIn: badgeRect
+                text: badgeCount > 9 ? "···" : badgeCount
+                color: JamiTheme.whiteColor
+                font.pointSize: JamiTheme.indicatorFontSize
+            }
+            radius: 30
+            color: JamiTheme.notificationBlue
+        }
+
+        Rectangle {
+            width: rect.width
+            anchors.bottom: rect.bottom
+            height: 2
+            color: root.down ? JamiTheme.textColor : "transparent"
+        }
+    }
+
+    Shortcut {
+        id: accelerator
+        context: Qt.ApplicationShortcut
+        enabled: rect.visible
+        onActivated: selected()
+    }
+}

src/mainview/components/SidePanelTabBar.qml

@@ -1,7 +1,7 @@
-
 /*
- * Copyright (C) 2020 by Savoir-faire Linux
+ * Copyright (C) 2020-2021 by Savoir-faire Linux
  * Author: Mingrui Zhang <mingrui.zhang@savoirfairelinux.com>
+ * Author: Andreas Traczyk <andreas.traczyk@savoirfairelinux.com>
  *
  * This program is free software; you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -28,6 +28,12 @@ import net.jami.Constants 1.0
 
 import "../../commoncomponents"
 
+// TODO:
+// - totalUnreadMessagesCount and pendingRequestCount could be
+//   properties of ConversationsAdapter
+// - onCurrentTypeFilterChanged shouldn't need to update the smartlist
+// - tabBarVisible could be factored out
+
 TabBar {
     id: tabBar
 
@@ -48,200 +54,34 @@ TabBar {
     }
 
     function selectTab(tabIndex) {
-        ConversationsAdapter.currentTypeFilter = tabIndex ===
+        ConversationsAdapter.currentTypeFilter =
-                SidePanelTabBar.Conversations ? AccountAdapter.getCurrentAccountType() :
+                (tabIndex === SidePanelTabBar.Conversations) ?
+                    AccountAdapter.currentAccountType :
                     Profile.Type.PENDING
     }
 
-    property alias converstationTabWidth: pageOne.width
-    property alias invitationTabWidth: pageTwo.width
-    property alias converstationTabHeight: pageOne.height
-    property alias invitationTabHeight: pageTwo.height
-    property real opacityDegree: 0.5
-
     visible: tabBarVisible
 
     currentIndex: 0
 
-    TabButton {
+    FilterTabButton {
-
         id: pageOne
+
+        tabBar: parent
         down: true
-
+        labelText: JamiStrings.conversations
-
+        onSelected: selectTab(SidePanelTabBar.Conversations)
-        background: Rectangle {
+        badgeCount: totalUnreadMessagesCount
-
+        acceleratorSequence: "Ctrl+L"
-            id: buttonRectOne
-            width: tabBar.width / 2 + 1
-            height: tabBar.height
-            color: JamiTheme.backgroundColor
-
-            Text {
-                id: textConvElement
-
-                anchors.horizontalCenter: buttonRectOne.horizontalCenter
-                anchors.bottom: buttonRectOne.bottom
-                anchors.bottomMargin: 12
-
-                horizontalAlignment: Text.AlignHCenter
-                verticalAlignment: Text.AlignVCenter
-
-                text: JamiStrings.conversations
-                font.pointSize: JamiTheme.textFontSize
-                opacity: pageOne.down == true ? 1.0 : opacityDegree
-                color: JamiTheme.textColor
     }
 
-            Rectangle {
+    FilterTabButton {
-                id: totalUnreadMessagesCountRect
-
-                anchors.left: textConvElement.right
-                anchors.leftMargin: 4
-                anchors.verticalCenter: textConvElement.verticalCenter
-                anchors.verticalCenterOffset : -5
-
-                width: 12
-                height: 12
-
-                visible: totalUnreadMessagesCount > 0
-
-                Text {
-                    id: totalUnreadMessagesCountText
-
-                    anchors.centerIn: totalUnreadMessagesCountRect
-
-                    text: totalUnreadMessagesCount > 9 ? "···" : totalUnreadMessagesCount
-                    color: "white"
-                    font.pointSize: JamiTheme.indicatorFontSize
-                }
-                radius: 30
-                color: JamiTheme.notificationBlue
-            }
-
-            Rectangle {
-                id: markerTabOne
-                width: buttonRectOne.width
-                anchors.bottom: buttonRectOne.bottom
-                height: 2
-                color: pageOne.down == true ? JamiTheme.textColor : "transparent"
-            }
-
-            MouseArea {
-                anchors.fill: parent
-                hoverEnabled: true
-                onPressed: {
-                    selectTab(SidePanelTabBar.Conversations)
-                }
-                onReleased: {
-                    buttonRectOne.color = Qt.binding(function(){return JamiTheme.backgroundColor})
-                }
-                onEntered: {
-                    buttonRectOne.color = Qt.binding(function(){return JamiTheme.hoverColor})
-                }
-                onExited: {
-                    buttonRectOne.color = Qt.binding(function(){return JamiTheme.backgroundColor})
-                }
-            }
-
-            Shortcut {
-                sequence: "Ctrl+L"
-                context: Qt.ApplicationShortcut
-                enabled: buttonRectOne.visible
-                onActivated: {
-                    selectTab(SidePanelTabBar.Conversations)
-                }
-            }
-        }
-    }
-
-    TabButton {
-
         id: pageTwo
 
-        background: Rectangle {
+        tabBar: parent
-            id: buttonRectTwo
+        labelText: JamiStrings.invitations
-
+        onSelected: selectTab(SidePanelTabBar.Requests)
-            width: tabBar.width / 2
+        badgeCount: pendingRequestCount
-            height: tabBar.height
+        acceleratorSequence: "Ctrl+R"
-            color: JamiTheme.backgroundColor
-
-            Text {
-                id: textInvElement
-
-                anchors.horizontalCenter: buttonRectTwo.horizontalCenter
-                anchors.bottom: buttonRectTwo.bottom
-                anchors.bottomMargin: 12
-
-                horizontalAlignment: Text.AlignHCenter
-                verticalAlignment: Text.AlignVCenter
-
-                font.pointSize: JamiTheme.textFontSize
-
-                text: JamiStrings.invitations
-                //opacity: enabled ? 1.0 : 0.3
-                opacity: pageTwo.down == true ? 1.0 : opacityDegree
-                color: JamiTheme.textColor
-            }
-
-            Rectangle {
-                id: pendingRequestCountRect
-
-                anchors.left: textInvElement.right
-                anchors.leftMargin: 4
-                anchors.verticalCenter: textInvElement.verticalCenter
-                anchors.verticalCenterOffset : -5
-
-                width: 12
-                height: 12
-
-                visible: pendingRequestCount > 0
-
-                Text {
-                    id: pendingRequestCountText
-
-                    anchors.centerIn: pendingRequestCountRect
-
-                    text: pendingRequestCount > 9 ? "···" : pendingRequestCount
-                    color: "white"
-                    font.pointSize: JamiTheme.indicatorFontSize
-                }
-                radius: 30
-                color: JamiTheme.notificationBlue
-            }
-
-            Rectangle {
-                id: markerTabTwo
-                width: buttonRectTwo.width
-                anchors.bottom: buttonRectTwo.bottom
-                height: 2
-                color: pageTwo.down == true ? JamiTheme.textColor : "transparent"
-            }
-
-            MouseArea {
-                anchors.fill: parent
-                hoverEnabled: true
-                onPressed: {
-                    selectTab(SidePanelTabBar.Requests)
-                }
-                onReleased: {
-                    buttonRectTwo.color = Qt.binding(function(){return JamiTheme.backgroundColor})
-                }
-                onEntered: {
-                    buttonRectTwo.color = Qt.binding(function(){return JamiTheme.hoverColor})
-                }
-                onExited: {
-                    buttonRectTwo.color = Qt.binding(function(){return JamiTheme.backgroundColor})
-                }
-            }
-
-            Shortcut {
-                sequence: "Ctrl+R"
-                context: Qt.ApplicationShortcut
-                enabled: buttonRectTwo.visible
-                onActivated: {
-                    selectTab(SidePanelTabBar.Requests)
-                }
-            }
-        }
     }
 }