linked devices: design update

- radius for linked devices
- hover
- buttons instead of icons for edition

Change-Id: I315262a29bf2828bf1f58356b7d84c7c7ab9ef18

src/app/constant/JamiStrings.qml

@@ -481,9 +481,9 @@ Item {
     property string deleteAccountInfos: qsTr("If your account has not been backed up or added to another device, your account and registered username will be IRREVOCABLY LOST.")
 
     // DeviceItemDelegate
-    property string saveNewDeviceName: qsTr("Save new device name")
-    property string editDeviceName: qsTr("Edit device name")
-    property string unlinkDevice: qsTr("Unlink device from account")
+    property string saveNewDeviceName: qsTr("Save")
+    property string editDeviceName: qsTr("Edit")
+    property string unlinkDevice: qsTr("Remove")
     property string deviceId: qsTr("Device Id")
 
     // SystemSettings

src/app/settingsview/components/DeviceItemDelegate.qml

@@ -33,18 +33,19 @@ ItemDelegate {
     property bool isCurrent: false
 
     property bool editable: false
+    property bool isHovered: root.hovered || button.hovered || root.editable
 
     signal btnRemoveDeviceClicked
 
     background: Rectangle {
-        color: JamiTheme.editBackgroundColor
-        height: root.height
-        radius: 5
+        color: isHovered ? JamiTheme.smartListSelectedColor : JamiTheme.editBackgroundColor
+        radius: JamiTheme.settingsBoxRadius
     }
 
     RowLayout {
         id: rowLayout
         anchors.fill: root
+        anchors.rightMargin: isHovered ? button.width + 20 : 0
 
         ResponsiveImage {
             id: deviceImage
@@ -89,6 +90,7 @@ ItemDelegate {
                     AvAdapter.setDeviceName(editDeviceName.text);
                     editable = !editable;
                 }
+
                 onReadOnlyChanged: {
                     if (readOnly)
                         editDeviceName.text = Qt.binding(function () {
@@ -122,34 +124,34 @@ ItemDelegate {
                 text: deviceId === "" ? JamiStrings.deviceId : deviceId
             }
         }
+    }
 
-        PushButton {
-            id: btnEditDevice
-
-            Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
-            Layout.rightMargin: 13
-            Layout.preferredWidth: JamiTheme.preferredFieldHeight
-            Layout.preferredHeight: JamiTheme.preferredFieldHeight
-
-            imageColor: JamiTheme.tintedBlue
-            normalColor: highlighted ? JamiTheme.selectedColor : JamiTheme.editBackgroundColor
-
-            source: isCurrent ? (editable ? JamiResources.round_save_alt_24dp_svg : JamiResources.round_edit_24dp_svg) : JamiResources.delete_24dp_svg
-
-            toolTipText: isCurrent ? (editable ? JamiStrings.saveNewDeviceName : JamiStrings.editDeviceName) : JamiStrings.unlinkDevice
-
-            onClicked: {
-                if (isCurrent) {
-                    if (!editable) {
-                        editable = !editable;
-                        editDeviceName.forceActiveFocus();
-                    } else {
-                        editDeviceName.focus = false;
-                        editDeviceName.accepted();
-                    }
+    MaterialButton {
+        id: button
+        z: 1
+        anchors.right: parent.right
+        anchors.rightMargin: 13
+        anchors.verticalCenter: parent.verticalCenter
+        Layout.preferredWidth: 86
+        preferredWidth: 86
+        Layout.preferredHeight: 36
+        layer.enabled: false
+        visible: isHovered
+        secondary: true
+
+        text: isCurrent ? (editable ? JamiStrings.saveNewDeviceName : JamiStrings.editDeviceName) : JamiStrings.unlinkDevice
+
+        onClicked: {
+            if (isCurrent) {
+                if (!editable) {
+                    editable = !editable;
+                    editDeviceName.forceActiveFocus();
                 } else {
-                    btnRemoveDeviceClicked();
+                    editDeviceName.focus = false;
+                    editDeviceName.accepted();
                 }
+            } else {
+                btnRemoveDeviceClicked();
             }
         }
     }

src/app/settingsview/components/LinkedDevicesBase.qml

@@ -71,14 +71,20 @@ ColumnLayout {
         font.kerning: true
     }
 
-    JamiListView {
+    ListView {
         id: settingsListView
 
         Layout.fillWidth: true
-        Layout.preferredHeight: Math.min(model.count, 5) * (70 + spacing)
+        Layout.preferredHeight: Math.min(model.count, 3) * (70 + spacing)
+        Layout.maximumHeight: Layout.preferredHeight
+
         spacing: JamiTheme.settingsListViewsSpacing
         interactive: !isCurrent
 
+        Component.onCompleted: {
+            positionViewAtIndex(0, ListView.Beginning);
+        }
+
         model: SortFilterProxyModel {
             sourceModel: DeviceItemListModel
             sorters: [
@@ -105,6 +111,11 @@ ColumnLayout {
             deviceId: DeviceID
             onBtnRemoveDeviceClicked: removeDeviceSlot(index)
             isCurrent: root.isCurrent
+
+            MouseArea {
+                anchors.fill: parent
+                cursorShape: Qt.PointingHandCursor
+            }
         }
     }
 }