From 9bf0176a39fb908cd33514dcb21718dd92be76ad Mon Sep 17 00:00:00 2001
From: Fadi SHEHADEH <fadi.shehadeh@savoirfairelinux.com>
Date: Wed, 12 Apr 2023 09:25:29 -0400
Subject: [PATCH] linked devices: design update
- radius for linked devices
- hover
- buttons instead of icons for edition
Change-Id: I315262a29bf2828bf1f58356b7d84c7c7ab9ef18
---
src/app/constant/JamiStrings.qml | 6 +-
.../components/DeviceItemDelegate.qml | 58 ++++++++++---------
.../components/LinkedDevicesBase.qml | 15 ++++-
3 files changed, 46 insertions(+), 33 deletions(-)
diff --git a/src/app/constant/JamiStrings.qml b/src/app/constant/JamiStrings.qml
index 519475bf9..8a29377b8 100644
--- a/src/app/constant/JamiStrings.qml
+++ b/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
diff --git a/src/app/settingsview/components/DeviceItemDelegate.qml b/src/app/settingsview/components/DeviceItemDelegate.qml
index 7035802ee..e2251da46 100644
--- a/src/app/settingsview/components/DeviceItemDelegate.qml
+++ b/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();
}
}
}
diff --git a/src/app/settingsview/components/LinkedDevicesBase.qml b/src/app/settingsview/components/LinkedDevicesBase.qml
index 49b93c0c6..39edd5838 100644
--- a/src/app/settingsview/components/LinkedDevicesBase.qml
+++ b/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
+ }
}
}
}
--
GitLab