swarmdetailspanel: improve about buttons

Change-Id: I4b8e162f8a39363eae614545047056eb4b0ea55a

qml.qrc

@@ -115,6 +115,7 @@
         <file>src/app/mainview/components/CallViewContextMenu.qml</file>
         <file>src/app/mainview/components/UserProfile.qml</file>
         <file>src/app/mainview/components/SwarmDetailsPanel.qml</file>
+        <file>src/app/mainview/components/SwarmDetailsItem.qml</file>
         <file>src/app/mainview/components/AddMemberPanel.qml</file>
         <file>src/app/mainview/components/SelectScreen.qml</file>
         <file>src/app/mainview/components/ScreenRubberBand.qml</file>

src/app/mainview/components/SwarmDetailsItem.qml

@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2022 Savoir-faire Linux Inc.
+ * Author: Sébastien Blin <sebastien.blin@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
+import QtQuick.Controls
+import QtQuick.Layouts
+
+import net.jami.Models 1.1
+import net.jami.Adapters 1.1
+import net.jami.Constants 1.1
+
+Rectangle {
+    id: root
+
+    color: "transparent"
+
+    HoverHandler {
+        target: parent
+        enabled: parent.visible
+        onHoveredChanged: {
+            parent.color = hovered ? Qt.darker(JamiTheme.selectedColor, 1.05) : "transparent"
+        }
+    }
+}

src/app/mainview/components/SwarmDetailsPanel.qml

@@ -227,30 +227,33 @@ Rectangle {
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.rightMargin: JamiTheme.settingsMarginSize
-                spacing: JamiTheme.preferredMarginSize
                 visible: tabBar.currentIndex === 0
                 Layout.alignment: Qt.AlignTop
 
-                ToggleSwitch {
+                SwarmDetailsItem {
-                    id: ignoreSwarm
-
                     Layout.fillWidth: true
-                    Layout.leftMargin: JamiTheme.preferredMarginSize
+                    Layout.preferredHeight: JamiTheme.settingsFontSize + 2 * JamiTheme.preferredMarginSize + 4
-                    Layout.topMargin: JamiTheme.preferredMarginSize
 
-                    checked: false // TODO
+                    ToggleSwitch {
+                        id: ignoreSwarm
 
-                    labelText: JamiStrings.ignoreTheSwarm
+                        anchors.fill: parent
-                    fontPointSize: JamiTheme.settingsFontSize
+                        anchors.leftMargin: JamiTheme.preferredMarginSize
 
-                    tooltipText: JamiStrings.ignoreTheSwarmTooltip
+                        checked: false // TODO
 
-                    onSwitchToggled: {
+                        labelText: JamiStrings.ignoreTheSwarm
-                        // TODO
+                        fontPointSize: JamiTheme.settingsFontSize
+
+                        tooltipText: JamiStrings.ignoreTheSwarmTooltip
+
+                        onSwitchToggled: {
+                            // TODO
+                        }
                     }
                 }
 
-                Rectangle {
+                SwarmDetailsItem {
                     Layout.fillWidth: true
                     Layout.preferredHeight: JamiTheme.settingsFontSize + 2 * JamiTheme.preferredMarginSize + 4
 
@@ -268,16 +271,6 @@ Rectangle {
                         color: JamiTheme.textColor
                     }
 
-                    color: "transparent"
-
-                    HoverHandler {
-                        target: parent
-                        enabled: parent.visible
-                        onHoveredChanged: {
-                            parent.color = hovered ? Qt.darker(JamiTheme.selectedColor, 1.05) : "transparent"
-                        }
-                    }
-
                     TapHandler {
                         target: parent
                         enabled: parent.visible
@@ -287,40 +280,47 @@ Rectangle {
                     }
                 }
 
-                RowLayout {
+                SwarmDetailsItem {
-                    Layout.leftMargin: JamiTheme.preferredMarginSize
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: JamiTheme.settingsFontSize + 2 * JamiTheme.preferredMarginSize + 4
 
-                    Text {
+                    RowLayout {
-                        Layout.fillWidth: true
+                        anchors.fill: parent
-                        Layout.preferredHeight: 30
+                        anchors.leftMargin: JamiTheme.preferredMarginSize
-                        Layout.rightMargin: JamiTheme.preferredMarginSize
 
-                        text: JamiStrings.chooseAColor
+                        Text {
-                        font.pointSize: JamiTheme.settingsFontSize
+                            Layout.fillWidth: true
-                        font.kerning: true
+                            Layout.preferredHeight: 30
-                        elide: Text.ElideRight
+                            Layout.rightMargin: JamiTheme.preferredMarginSize
-                        horizontalAlignment: Text.AlignLeft
-                        verticalAlignment: Text.AlignVCenter
 
-                        color: JamiTheme.textColor
+                            text: JamiStrings.chooseAColor
+                            font.pointSize: JamiTheme.settingsFontSize
+                            font.kerning: true
+                            elide: Text.ElideRight
+                            horizontalAlignment: Text.AlignLeft
+                            verticalAlignment: Text.AlignVCenter
+
+                            color: JamiTheme.textColor
+                        }
+
+                        Rectangle {
+                            id: chooseAColorBtn
+
+                            Layout.alignment: Qt.AlignRight
+
+                            width: JamiTheme.aboutBtnSize
+                            height: JamiTheme.aboutBtnSize
+                            radius: JamiTheme.aboutBtnSize / 2
+
+                            color: CurrentConversation.color
+                        }
                     }
 
-                    Rectangle {
+                    TapHandler {
-                        id: chooseAColorBtn
+                        target: parent
-
+                        enabled: parent.visible
-                        Layout.alignment: Qt.AlignRight
+                        onTapped: function onTapped(eventPoint) {
-
+                            colorDialog.open()
-                        width: JamiTheme.aboutBtnSize
-                        height: JamiTheme.aboutBtnSize
-                        radius: JamiTheme.aboutBtnSize / 2
-
-                        color: CurrentConversation.color
-
-                        MouseArea {
-                            id: mouseArea
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            onClicked: colorDialog.open()
                         }
                     }
                 }

src/app/settingsview/components/ToggleSwitch.qml

@@ -70,4 +70,12 @@ RowLayout {
 
         onToggled: switchToggled()
     }
+
+    TapHandler {
+        target: parent
+        enabled: parent.visible
+        onTapped: function onTapped(eventPoint) {
+            switchOfLayout.checked = !switchOfLayout.checked
+        }
+    }
 }