settings: clean plugins UI

- standardize buttons
- remove scrolling from lists
- avoid highlights

Change-Id: I41f345d5e04a874f70e104df695e652a602df9b8

src/commoncomponents/PreferenceItemDelegate.qml

@@ -134,32 +134,27 @@ ItemDelegate {
             currentIndex: pluginListPreferenceModel.getCurrentSettingIndex()
             textRole: "PreferenceValue"
             tooltipText: JamiStrings.select
-            onActivated: {
-                getNewPreferenceValueSlot(index)
-            }
+            onActivated: getNewPreferenceValueSlot(index)
         }
 
-        PushButton {
+        MaterialButton {
             id: pathPreferenceButton
 
             visible: preferenceType === PreferenceItemDelegate.PATH
-            Layout.maximumWidth: root.width / 2 - 16
-            Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
-            Layout.rightMargin: 30
-
             width: root.width / 2 - 16
             Layout.preferredWidth: width
-            Layout.preferredHeight: 32
-
-            source: "qrc:/images/icons/round-folder-24px.svg"
+            Layout.preferredHeight: 30
+            Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
+            Layout.rightMargin: 30
 
+            text: UtilsAdapter.fileName(preferenceCurrentValue)
             toolTipText: JamiStrings.chooseImageFile
-            buttonText: UtilsAdapter.fileName(preferenceCurrentValue)
-            fontPointSize: JamiTheme.buttonFontSize
+            source: "qrc:/images/icons/round-folder-24px.svg"
+            color: JamiTheme.buttonTintedGrey
+            hoveredColor: JamiTheme.buttonTintedGreyHovered
+            pressedColor: JamiTheme.buttonTintedGreyPressed
 
-            onClicked: {
-                getNewPreferenceValueSlot(0)
-            }
+            onClicked: getNewPreferenceValueSlot(0)
         }
     }
 }

src/settingsview/components/PluginItemDelegate.qml

@@ -38,26 +38,28 @@ ItemDelegate {
     signal btnLoadPluginToggled
     signal btnPreferencesPluginClicked
 
-    RowLayout{
+    RowLayout {
         anchors.fill: parent
 
-        Label{
+        Label {
             id: pluginImage
             Layout.leftMargin: 8
             Layout.alignment: Qt.AlignLeft | Qt.AlingVCenter
             width: 30
 
-            background: Rectangle{
+            background: Rectangle {
                 Image {
                     anchors.centerIn: parent
-                    source: "file:"+pluginIcon
-                    width: 30
-                    height: 30
+                    source: "file:" + pluginIcon
+                    sourceSize: Qt.size(256, 256)
+                    mipmap: true
+                    width: 32
+                    height: 32
                 }
             }
         }
 
-        Label{
+        Label {
             id: labelDeviceId
             Layout.fillWidth: true
             Layout.leftMargin: 8
@@ -74,22 +76,16 @@ ItemDelegate {
             width: 20
 
             ToolTip.visible: hovered
-            ToolTip.text: {
-                return qsTr("Load/Unload")
-            }
+            ToolTip.text: qsTr("Load/Unload")
 
             checked: isLoaded
-            onClicked: {
-                btnLoadPluginToggled()
-            }
+            onClicked: btnLoadPluginToggled()
 
             background: Rectangle {
                 id: switchBackground
                 MouseArea {
                     id: btnMouseArea
                     hoverEnabled: true
-                    onPressed: {
-                    }
                     onReleased: {
                         loadSwitch.clicked()
                     }

src/settingsview/components/PluginListPreferencesView.qml

@@ -110,8 +110,9 @@ Rectangle {
                 Image {
                     anchors.centerIn: parent
                     source: pluginIcon === "" ? "" : "file:" + pluginIcon
-                    height: 36
-                    width: 36
+                    sourceSize: Qt.size(256, 256)
+                    height: 48
+                    width: 48
                     mipmap: true
                 }
             }
@@ -119,7 +120,7 @@ Rectangle {
 
         Label {
             Layout.alignment: Qt.AlignHCenter
-            Layout.topMargin: 10
+            Layout.topMargin: 16
 
             text: qsTr(pluginName + "\npreferences")
             font.pointSize: JamiTheme.headerFontSize
@@ -133,26 +134,38 @@ Rectangle {
             Layout.topMargin: 10
             height: 30
 
-            PushButton {
+            MaterialButton {
                 id: resetButton
 
                 Layout.fillWidth: true
+                Layout.preferredHeight: JamiTheme.preferredFieldHeight
+
+                color: JamiTheme.buttonTintedBlack
+                hoveredColor: JamiTheme.buttonTintedBlackHovered
+                pressedColor: JamiTheme.buttonTintedBlackPressed
+                outlined: true
 
                 source: "qrc:/images/icons/settings_backup_restore-24px.svg"
-                buttonText: JamiStrings.reset
-                fontPointSize: JamiTheme.settingsFontSize
+
+                text: JamiStrings.reset
 
                 onClicked: resetPluginSlot()
             }
 
-            PushButton {
+            MaterialButton {
                 id: uninstallButton
 
                 Layout.fillWidth: true
+                Layout.preferredHeight: JamiTheme.preferredFieldHeight
+
+                color: JamiTheme.buttonTintedBlack
+                hoveredColor: JamiTheme.buttonTintedBlackHovered
+                pressedColor: JamiTheme.buttonTintedBlackPressed
+                outlined: true
 
                 source: "qrc:/images/icons/delete-24px.svg"
-                buttonText: qsTr("Uninstall")
-                fontPointSize: JamiTheme.settingsFontSize
+
+                text: qsTr("Uninstall")
 
                 onClicked: uninstallPluginSlot()
             }
@@ -166,12 +179,13 @@ Rectangle {
             Layout.preferredHeight: childrenRect.height + 30
 
             model: PluginAdapter.getPluginPreferencesModel(pluginId)
+            interactive: false
 
             delegate: PreferenceItemDelegate {
                 id: preferenceItemDelegate
 
                 width: pluginPreferenceView.width
-                height: childrenRect.height
+                height: 50
 
                 preferenceName: PreferenceName
                 preferenceSummary: PreferenceSummary
@@ -182,19 +196,21 @@ Rectangle {
                 preferenceKey: PreferenceKey
                 fileFilters: FileFilters
                 isImage: IsImage
-                pluginListPreferenceModel: PluginListPreferenceModel{
+                pluginListPreferenceModel: PluginListPreferenceModel {
                     id: pluginListPreferenceModel
                     preferenceKey : PreferenceKey
                     pluginId: PluginId
                 }
 
-                onClicked: {
-                    pluginPreferenceView.currentIndex = index
-                }
                 onBtnPreferenceClicked: {
                     setPreference(pluginId, preferenceKey, preferenceNewValue)
                     pluginPreferenceView.model = PluginAdapter.getPluginPreferencesModel(pluginId)
                 }
+
+                background: Rectangle {
+                    anchors.fill: parent
+                    color: "white"
+                }
             }
         }
     }

src/settingsview/components/PluginListSettingsView.qml

@@ -138,6 +138,7 @@ Rectangle {
             Layout.preferredHeight: childrenRect.height
 
             model: PluginAdapter.getPluginSelectableModel()
+            interactive: false
 
             delegate: PluginItemDelegate {
                 id: pluginItemDelegate
@@ -150,14 +151,17 @@ Rectangle {
                 pluginIcon: PluginIcon
                 isLoaded: IsLoaded
 
-                onClicked: pluginListView.currentIndex = index
-
                 onBtnLoadPluginToggled: {
                     loadPluginSlot(pluginId, isLoaded)
                     pluginListView.model = PluginAdapter.getPluginSelectableModel()
                 }
 
                 onBtnPreferencesPluginClicked: openPreferencesPluginSlot(pluginName, pluginIcon, pluginId, isLoaded)
+
+                background: Rectangle {
+                    anchors.fill: parent
+                    color: "white"
+                }
             }
         }
     }