misc: remove HoverableRadiusButton

Change-Id: I0cbefdf530a7fe5d67a67795f3006a993ad6c742

images/icons/delete-24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>

images/icons/settings_backup_restore-24px.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M14 12c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-2-9c-4.97 0-9 4.03-9 9H0l4 4 4-4H5c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.51 0-2.91-.49-4.06-1.3l-1.42 1.44C8.04 20.3 9.94 21 12 21c4.97 0 9-4.03 9-9s-4.03-9-9-9z"/></svg>

qml.qrc

@@ -52,7 +52,6 @@
         <file>src/settingsview/components/NameRegistrationDialog.qml</file>
         <file>src/settingsview/components/LinkDeviceDialog.qml</file>
         <file>src/settingsview/components/RevokeDevicePasswordDialog.qml</file>
-        <file>src/commoncomponents/HoverableRadiusButton.qml</file>
         <file>src/commoncomponents/PasswordDialog.qml</file>
         <file>src/commoncomponents/InfoLineEdit.qml</file>
         <file>src/commoncomponents/MaterialLineEdit.qml</file>

resources.qrc

@@ -134,5 +134,7 @@
         <file>images/icons/arrow_drop_down-24px.svg</file>
         <file>images/icons/expand_less-24px.svg</file>
         <file>images/icons/expand_more-24px.svg</file>
+        <file>images/icons/delete-24px.svg</file>
+        <file>images/icons/settings_backup_restore-24px.svg</file>
     </qresource>
 </RCC>

src/commoncomponents/HoverableRadiusButton.qml

@@ -1,94 +0,0 @@
-/*
- * Copyright (C) 2020 by Savoir-faire Linux
- * Author: Mingrui Zhang <mingrui.zhang@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.15
-import QtQuick.Controls 2.14
-import net.jami.Models 1.0
-
-
-// HoverableButton contains the following configurable properties:
-// 1. Color changes on different button state
-// 2. Radius control (rounded)
-// 3. Text content or image content
-// 4. Can use OnClicked slot to implement some click logic
-
-Button {
-    id: root
-    property int fontPointSize: 9
-    property int buttonImageHeight: hoverableButtonBackground.height - 10
-    property int buttonImageWidth: hoverableButtonBackground.width - 10
-    property string backgroundColor: JamiTheme.normalButtonColor
-    property string onPressColor: JamiTheme.pressColor
-    property string onReleaseColor: backgroundColor
-    property string onEnterColor: JamiTheme.hoverColor
-    property string onExitColor: backgroundColor
-    property alias radius: hoverableButtonBackground.radius
-    property alias source: hoverableButtonImage.source
-    property string toolTipText: ""
-    radius: height / 2
-    function enterBtn(){
-        btnMouseArea.entered()
-    }
-    function exitBtn(){
-        btnMouseArea.exited()
-    }
-    function pressBtn(){
-        btnMouseArea.pressed()
-    }
-    function releaseBtn(){
-        btnMouseArea.released()
-    }
-
-    ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
-    ToolTip.visible: hovered && (toolTipText.length > 0)
-    ToolTip.text: toolTipText
-
-    font.pointSize: fontPointSize
-    font.kerning:  true
-    hoverEnabled: true
-    background: Rectangle {
-        id: hoverableButtonBackground
-        color: backgroundColor
-        Image {
-            id: hoverableButtonImage
-            anchors.centerIn: hoverableButtonBackground
-            height: buttonImageHeight
-            width: buttonImageWidth
-            fillMode: Image.PreserveAspectFit
-            mipmap: true
-            asynchronous: true
-        }
-        MouseArea {
-            id: btnMouseArea
-            anchors.fill: parent
-            hoverEnabled: true
-            onPressed: {
-                hoverableButtonBackground.color = onPressColor
-            }
-            onReleased: {
-                hoverableButtonBackground.color = onReleaseColor
-                root.clicked()
-            }
-            onEntered: {
-                hoverableButtonBackground.color = onEnterColor
-            }
-            onExited: {
-                hoverableButtonBackground.color = onExitColor
-            }
-        }
-    }
-}

src/commoncomponents/PreferenceItemDelegate.qml

@@ -61,7 +61,7 @@ ItemDelegate {
                 btnPreferenceClicked()
                 break
             case PreferenceItemDelegate.PATH:
-                if(index == 0){
+                if(index === 0){
                     preferenceFilePathDialog.title = qsTr("Select An Image to " + preferenceName)
                     preferenceFilePathDialog.nameFilters = fileFilters
                     preferenceFilePathDialog.open()
@@ -101,35 +101,27 @@ ItemDelegate {
             ToolTip.text: preferenceSummary
         }
 
-        HoverableRadiusButton {
+        PushButton {
             id: btnPreference
+
             visible: preferenceType === PreferenceItemDelegate.DEFAULT
-            backgroundColor: "white"
+            normalColor: JamiTheme.primaryBackgroundColor
 
             Layout.alignment: Qt.AlignRight | Qt.AlingVCenter
-            Layout.rightMargin: 7
+            Layout.rightMargin: 8
-            Layout.preferredWidth: 30
+            Layout.preferredWidth: preferredSize
-            Layout.preferredHeight: 30
+            Layout.preferredHeight: preferredSize
 
-            buttonImageHeight: 20
+            source: "qrc:/images/icons/round-settings-24px.svg"
-            buttonImageWidth: 20
 
-            source: {
+            toolTipText: qsTr("Edit preference")
-                return "qrc:/images/icons/round-settings-24px.svg"
-            }
 
-            ToolTip.visible: hovered
+            onClicked: btnPreferenceClicked()
-            ToolTip.text: {
-                return qsTr("Edit preference")
-            }
-
-            onClicked: {
-                btnPreferenceClicked()
-            }
         }
 
         SettingParaCombobox {
             id: listPreferenceComboBox
+
             visible: preferenceType === PreferenceItemDelegate.LIST
             Layout.preferredWidth: root.width / 2 - 8
             Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
@@ -147,23 +139,22 @@ ItemDelegate {
             }
         }
 
-        HoverableRadiusButton {
+        PushButton {
             id: pathPreferenceButton
+
             visible: preferenceType === PreferenceItemDelegate.PATH
-            Layout.preferredWidth: root.width / 2 - 16
             Layout.maximumWidth: root.width / 2 - 16
             Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
             Layout.rightMargin: 30
-            Layout.preferredHeight: 30
 
-            radius: height / 2
+            width: root.width / 2 - 16
+            Layout.preferredWidth: width
+            Layout.preferredHeight: 32
 
-            icon.source: "qrc:/images/icons/round-folder-24px.svg"
+            source: "qrc:/images/icons/round-folder-24px.svg"
-            icon.height: 24
-            icon.width: 24
 
             toolTipText: JamiStrings.chooseImageFile
-            text: UtilsAdapter.fileName(preferenceCurrentValue)
+            buttonText: UtilsAdapter.fileName(preferenceCurrentValue)
             fontPointSize: JamiTheme.buttonFontSize
 
             onClicked: {

src/commoncomponents/PushButton.qml

@@ -71,6 +71,7 @@ AbstractButton {
     checkable: true
     checked: false
     hoverEnabled: true
+    focusPolicy: Qt.TabFocus
 
     ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
     ToolTip.visible: hovered && (toolTipText.length > 0)

src/mainview/components/MediaHandlerItemDelegate.qml

@@ -42,7 +42,7 @@ ItemDelegate {
     RowLayout{
         anchors.fill: parent
 
-        Label{
+        Label {
             Layout.leftMargin: 8
             Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
 
@@ -58,7 +58,7 @@ ItemDelegate {
             }
         }
 
-        Label{
+        Label {
             id: labelDeviceId
             Layout.leftMargin: 8
             Layout.fillWidth: true
@@ -110,30 +110,18 @@ ItemDelegate {
             }
         }
 
-         HoverableRadiusButton{
+        PushButton {
             id: btnPreferencesMediaHandler
 
-            backgroundColor: "white"
-
             Layout.alignment: Qt.AlingVCenter | Qt.AlignRight
             Layout.rightMargin: 8
-            Layout.preferredHeight: 25
 
-            buttonImageHeight: height
+            normalColor: JamiTheme.primaryBackgroundColor
-            buttonImageWidth: height
+            source: "qrc:/images/icons/round-settings-24px.svg"
 
-            source:{
+            toolTipText: qsTr(pluginId)
-                return "qrc:/images/icons/round-settings-24px.svg"
-            }
 
-            ToolTip.visible: hovered
+            onClicked: openPreferences()
-            ToolTip.text: {
-                return qsTr(pluginId)
-            }
-
-            onClicked: {
-                openPreferences()
-            }
         }
     }
 }

src/mainview/components/RecordBox.qml

@@ -262,106 +262,82 @@ Rectangle {
         anchors.verticalCenterOffset: (isVideo ? 0 : -100)
     }
 
-    HoverableRadiusButton {
+    PushButton {
         id: recordButton
 
-        width: btnSize
+        preferredSize: btnSize
-        height: btnSize
 
         anchors.horizontalCenter: recBox.horizontalCenter
         anchors.bottom: recBox.bottom
         anchors.bottomMargin: 5
 
-        buttonImageHeight: height
+        normalColor: isVideo? "#000000cc" : "white"
-        buttonImageWidth: height
-        backgroundColor: isVideo? "#000000cc" : "white"
 
-        radius: height / 2
+        source: "qrc:/images/icons/av_icons/fiber_manual_record-24px.svg"
+        imageColor: "#dc2719"
 
-        icon.source: "qrc:/images/icons/av_icons/fiber_manual_record-24px.svg"
-        icon.height: 24
-        icon.width: 24
-        icon.color: "#dc2719"
         onClicked: {
             updateState(RecordBox.States.RECORDING)
             startRecording()
         }
     }
 
-    HoverableRadiusButton {
+    PushButton {
         id: btnStop
 
-        width: btnSize
+        preferredSize: btnSize
-        height: btnSize
 
         anchors.horizontalCenter: recBox.horizontalCenter
         anchors.bottom: recBox.bottom
         anchors.bottomMargin: 5
 
-        buttonImageHeight: height
+        normalColor: isVideo? "#000000cc" : "white"
-        buttonImageWidth: height
-        backgroundColor: isVideo? "#000000cc" : "white"
 
-        radius: height / 2
+        source: "qrc:/images/icons/av_icons/stop-24px-red.svg"
+        imageColor: isVideo? "white" : "black"
 
-        icon.source: "qrc:/images/icons/av_icons/stop-24px-red.svg"
-        icon.height: 24
-        icon.width: 24
-        icon.color: isVideo? "white" : "black"
         onClicked: {
             stopRecording()
             updateState(RecordBox.States.REC_SUCCESS)
         }
     }
 
-    HoverableRadiusButton {
+    PushButton {
         id: btnRestart
 
-        width: btnSize
+        preferredSize: btnSize
-        height: btnSize
 
         anchors.horizontalCenter: recBox.horizontalCenter
         anchors.horizontalCenterOffset: -25
         anchors.bottom: recBox.bottom
         anchors.bottomMargin: 5
 
-        buttonImageHeight: height
+        normalColor: isVideo? "#000000cc" : "white"
-        buttonImageWidth: height
-        backgroundColor: isVideo? "#000000cc" : "white"
 
-        radius: height / 2
+        source: "qrc:/images/icons/av_icons/re-record-24px.svg"
+        imageColor: isVideo? "white" : "black"
 
-        icon.source: "qrc:/images/icons/av_icons/re-record-24px.svg"
-        icon.height: 24
-        icon.width: 24
-        icon.color: isVideo? "white" : "black"
         onClicked: {
             stopRecording()
             updateState(RecordBox.States.INIT)
         }
     }
 
-    HoverableRadiusButton {
+    PushButton {
         id: btnSend
 
-        width: btnSize
+        preferredSize: btnSize
-        height: btnSize
 
         anchors.horizontalCenter: recBox.horizontalCenter
         anchors.horizontalCenterOffset: 25
         anchors.bottom: parent.bottom
         anchors.bottomMargin: 5
 
-        buttonImageHeight: height
+        normalColor: isVideo? "#000000cc" : "white"
-        buttonImageWidth: height
-        backgroundColor: isVideo? "#000000cc" : "white"
 
-        radius: height / 2
+        source: "qrc:/images/icons/av_icons/send-24px.svg"
+        imageColor: isVideo? "white" : "black"
 
-        icon.source: "qrc:/images/icons/av_icons/send-24px.svg"
-        icon.height: 24
-        icon.width: 24
-        icon.color: isVideo? "white" : "black"
         onClicked: {
             stopRecording()
             sendRecord()

src/mainview/components/WelcomePage.qml

@@ -126,11 +126,13 @@ Rectangle {
                     PushButton {
                         id: copyRegisterednameButton
 
+                        Layout.alignment: Qt.AlignCenter
+
                         preferredSize: 34
                         imagePadding: 4
 
-                        Layout.alignment: Qt.AlignCenter
                         source: "qrc:/images/icons/content_copy-24px.svg"
+
                         onClicked: {
                             UtilsAdapter.setText(
                                         textMetricsjamiRegisteredNameText.text)

src/settingsview/components/BannedItemDelegate.qml

@@ -36,22 +36,6 @@ ItemDelegate {
 
     signal btnReAddContactClicked
 
-    function btnReAddContactEnter(){
-        btnReAddContact.enterBtn()
-    }
-
-    function btnReAddContactExit(){
-        btnReAddContact.exitBtn()
-    }
-
-    function btnReAddContactPress(){
-        btnReAddContact.pressBtn()
-    }
-
-    function btnReAddContactRelease(){
-        btnReAddContact.releaseBtn()
-    }
-
     highlighted: ListView.isCurrentItem
 
     RowLayout {
@@ -130,32 +114,19 @@ ItemDelegate {
             }
         }
 
-        HoverableRadiusButton{
+        PushButton{
             id: btnReAddContact
 
             Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
-            Layout.rightMargin: 8
+            Layout.rightMargin: 16
-
             Layout.preferredWidth: JamiTheme.preferredFieldHeight
             Layout.preferredHeight: JamiTheme.preferredFieldHeight
 
-            buttonImageHeight: height - 8
-            buttonImageWidth: width - 8
-
             source: "qrc:/images/icons/person_add-24px.svg"
 
-            radius: height / 2
+            toolTipText: JamiStrings.reinstateContact
-            width: 25
-            height: 25
 
-            backgroundColor: "transparent"
+            onClicked: btnReAddContactClicked()
-
-            ToolTip.visible: hovered
-            ToolTip.text: JamiStrings.reinstateContact
-
-            onClicked: {
-                btnReAddContactClicked()
-            }
         }
     }
 }

src/settingsview/components/DeviceItemDelegate.qml

@@ -120,7 +120,7 @@ ItemDelegate {
             id: btnEditDevice
 
             Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
-            Layout.rightMargin: 8
+            Layout.rightMargin: 16
             Layout.preferredWidth: JamiTheme.preferredFieldHeight
             Layout.preferredHeight: JamiTheme.preferredFieldHeight
 

src/settingsview/components/PluginItemDelegate.qml

@@ -103,24 +103,15 @@ ItemDelegate {
             }
         }
 
-        HoverableRadiusButton{
+        PushButton {
             id: btnPreferencesPlugin
 
-            backgroundColor: "white"
-
             Layout.alignment: Qt.AlingVCenter | Qt.AlignRight
             Layout.rightMargin: 8
-            Layout.preferredHeight: 25
 
-            buttonImageHeight: height
+            source: "qrc:/images/icons/round-settings-24px.svg"
-            buttonImageWidth: height
+            normalColor: JamiTheme.primaryBackgroundColor
-
+            toolTipText: JamiStrings.showHidePrefs
-            source:{
-                return "qrc:/images/icons/round-settings-24px.svg"
-            }
-
-            ToolTip.visible: hovered
-            ToolTip.text: JamiStrings.showHidePrefs
 
             onClicked: btnPreferencesPluginClicked()
         }

src/settingsview/components/PluginListPreferencesView.qml

@@ -110,8 +110,9 @@ Rectangle {
                 Image {
                     anchors.centerIn: parent
                     source: pluginIcon === "" ? "" : "file:" + pluginIcon
-                    height: 35
+                    height: 36
-                    width: 35
+                    width: 36
+                    mipmap: true
                 }
             }
         }
@@ -132,38 +133,26 @@ Rectangle {
             Layout.topMargin: 10
             height: 30
 
-            HoverableRadiusButton {
+            PushButton {
                 id: resetButton
+
                 Layout.fillWidth: true
 
-                radius: height / 2
+                source: "qrc:/images/icons/settings_backup_restore-24px.svg"
-
+                buttonText: JamiStrings.reset
-                icon.source: "qrc:/images/icons/settings_backup_restore-black-18dp.svg"
-                icon.height: 24
-                icon.width: 24
-
-                text: JamiStrings.reset
                 fontPointSize: JamiTheme.settingsFontSize
-                font.kerning: true
 
-                onClicked: {
+                onClicked: resetPluginSlot()
-                    resetPluginSlot()
-                }
             }
 
-            HoverableRadiusButton {
+            PushButton {
                 id: uninstallButton
+
                 Layout.fillWidth: true
 
-                radius: height / 2
+                source: "qrc:/images/icons/delete-24px.svg"
-
+                buttonText: qsTr("Uninstall")
-                icon.source: "qrc:/images/icons/ic_delete_black_18dp_2x.png"
-                icon.height: 24
-                icon.width: 24
-
-                text: qsTr("Uninstall")
                 fontPointSize: JamiTheme.settingsFontSize
-                font.kerning: true
 
                 onClicked: uninstallPluginSlot()
             }
@@ -178,7 +167,7 @@ Rectangle {
 
             model: PluginAdapter.getPluginPreferencesModel(pluginId)
 
-            delegate: PreferenceItemDelegate{
+            delegate: PreferenceItemDelegate {
                 id: preferenceItemDelegate
 
                 width: pluginPreferenceView.width