linkeddevice: ui refinement and remove infoLineEdit

Gitlab: #359

Change-Id: I996caeca53eb71baa5127f2f32b5b97681a6002d

qml.qrc

@@ -53,7 +53,6 @@
         <file>src/settingsview/components/LinkDeviceDialog.qml</file>
         <file>src/settingsview/components/RevokeDevicePasswordDialog.qml</file>
         <file>src/commoncomponents/PasswordDialog.qml</file>
-        <file>src/commoncomponents/InfoLineEdit.qml</file>
         <file>src/commoncomponents/MaterialLineEdit.qml</file>
         <file>src/commoncomponents/PhotoboothView.qml</file>
         <file>src/commoncomponents/LookupStatusLabel.qml</file>

src/commoncomponents/InfoLineEdit.qml

-/*
- * Copyright (C) 2019-2020 by Savoir-faire Linux
- * Author: Yang Wang   <yang.wang@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 <http://www.gnu.org/licenses/>.
- */
-
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-import QtQuick.Layouts 1.14
-
-import net.jami.Constants 1.0
-
-TextField{
-    enum BorderColorMode{
-        NORMAL,
-        RIGHT,
-        ERROR
-    }
-
-    property int fieldLayoutWidth: 256
-    property int fieldLayoutHeight: 30
-    property bool layoutFillwidth: false
-
-    property int borderColorMode: InfoLineEdit.NORMAL
-    property var backgroundColor: JamiTheme.rgb256(240,240,240)
-    property var borderColor: {
-        switch(borderColorMode){
-        case InfoLineEdit.NORMAL:
-            return "transparent"
-        case InfoLineEdit.RIGHT:
-            return "green"
-        case InfoLineEdit.ERROR:
-            return "red"
-        }
-    }
-
-    wrapMode: Text.Wrap
-    color: JamiTheme.textColor
-    readOnly: false
-    selectByMouse: true
-    font.pointSize: JamiTheme.settingsFontSize
-    font.kerning: true
-    horizontalAlignment: Text.AlignLeft
-    verticalAlignment: Text.AlignVCenter
-
-    background: Rectangle {
-        anchors.fill: parent
-        radius: readOnly? 0 : height / 2
-        border.color: readOnly? "transparent" : borderColor
-        border.width:readOnly? 0 : 2
-        color: readOnly? "transparent" : backgroundColor
-    }
-}

src/commoncomponents/PasswordDialog.qml

@@ -42,8 +42,8 @@ BaseDialog {
         purpose = purposeIn
         path = exportPathIn
         currentPasswordEdit.clear()
-        passwordEdit.borderColorMode = InfoLineEdit.NORMAL
-        confirmPasswordEdit.borderColorMode = InfoLineEdit.NORMAL
+        passwordEdit.borderColorMode = MaterialLineEdit.NORMAL
+        confirmPasswordEdit.borderColorMode = MaterialLineEdit.NORMAL
         passwordEdit.clear()
         confirmPasswordEdit.clear()
         validatePassword()

src/constant/JamiStrings.qml

@@ -267,6 +267,7 @@ Item {
     property string deleteAccountInfos: qsTr("If your account has not been backed up or added to another device, your account and registered name 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")
 

src/settingsview/components/DeviceItemDelegate.qml

@@ -39,25 +39,9 @@ ItemDelegate {
 
     signal btnRemoveDeviceClicked
 
-    function btnEditDeviceEnter() {
-        btnEditDevice.enterBtn()
-    }
-
-    function btnEditDeviceExit() {
-        btnEditDevice.exitBtn()
-    }
-
-    function btnEditPress() {
-        btnEditDevice.pressBtn()
-    }
-
-    function btnEditRelease() {
-        btnEditDevice.releaseBtn()
-    }
-
     function toggleEditable() {
         editable = !editable
-        if (editable) {
+        if (!editable) {
            SettingsAdapter.setDeviceName(elidedTextDeviceName.text)
         }
     }
@@ -67,58 +51,70 @@ ItemDelegate {
     }
     highlighted: ListView.isCurrentItem
 
+    CustomBorder {
+        commonBorder: false
+        lBorderwidth: 0
+        rBorderwidth: 0
+        tBorderwidth: 0
+        bBorderwidth: 2
+        borderColor: JamiTheme.selectedColor
+    }
+
     RowLayout {
         anchors.fill: root
 
         Image {
             id: deviceImage
-            Layout.leftMargin: JamiTheme.preferredMarginSize
+
             Layout.alignment: Qt.AlignVCenter
+            Layout.preferredWidth: 24
+            Layout.preferredHeight: 24
+            Layout.leftMargin: JamiTheme.preferredMarginSize
+
             layer {
                 enabled: true
                 effect: ColorOverlay {
                     color: JamiTheme.textColor
                 }
             }
-
-            Layout.preferredWidth: 24
-            Layout.preferredHeight: 24
             source: "qrc:/images/icons/baseline-desktop_windows-24px.svg"
         }
 
         ColumnLayout {
             Layout.fillWidth: true
-            Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+            Layout.fillHeight: true
             Layout.leftMargin: JamiTheme.preferredMarginSize
 
-            InfoLineEdit {
+            MaterialLineEdit {
                 id: editDeviceName
-                implicitWidth: parent.width
+
+                Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
                 Layout.fillWidth: true
                 Layout.preferredHeight: 30
-                Layout.alignment: Qt.AlignLeft
+
                 font.pointSize: JamiTheme.textFontSize
-                font.kerning: true
 
                 wrapMode: Text.NoWrap
                 readOnly: !editable
                 backgroundColor: JamiTheme.editBackgroundColor
                 text: elidedTextDeviceName.elidedText
+                padding: 8
             }
 
             TextMetrics {
                 id: elidedTextDeviceName
 
                 elide: Text.ElideRight
-                elideWidth: root.width - btnEditDevice.width - deviceImage.width - 8
+                elideWidth: root.width - btnEditDevice.width - deviceImage.width
+                            - editDeviceName.leftPadding
                 text: deviceName
             }
 
             ElidedTextLabel {
                 id: labelDeviceId
 
-                Layout.preferredHeight: 24
-                Layout.leftMargin: 8
+                Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+                Layout.leftMargin: editDeviceName.leftPadding
 
                 maxWidth: root.width - btnEditDevice.width - deviceImage.width
                 eText: deviceId === "" ? qsTr("Device Id") : deviceId
@@ -132,6 +128,7 @@ ItemDelegate {
             Layout.rightMargin: 16
             Layout.preferredWidth: JamiTheme.preferredFieldHeight
             Layout.preferredHeight: JamiTheme.preferredFieldHeight
+
             imageColor: JamiTheme.textColor
             normalColor: highlighted? JamiTheme.selectedColor : JamiTheme.editBackgroundColor
 
@@ -149,9 +146,9 @@ ItemDelegate {
             toolTipText: {
                 if(isCurrent) {
                     if (editable) {
-                        return JamiStrings.editDeviceName
+                        return JamiStrings.saveNewDeviceName
                     } else {
-                        return qsTr("Save new device name")
+                        return JamiStrings.editDeviceName
                     }
                 } else {
                     return JamiStrings.unlinkDevice

src/settingsview/components/LinkDeviceDialog.qml

@@ -154,7 +154,7 @@ BaseDialog {
 
                         placeholderText: JamiStrings.enterCurrentPassword
 
-                        borderColorMode: InfoLineEdit.NORMAL
+                        borderColorMode: MaterialLineEdit.NORMAL
 
                         onTextChanged: {
                             btnConfirm.enabled = text.length > 0

src/settingsview/components/LinkedDevices.qml

@@ -133,6 +133,8 @@ ColumnLayout {
         Layout.fillWidth: true
         Layout.preferredHeight: 160
 
+        border.width: 0
+
         model: DeviceItemListModel {
             lrcInstance: LRCInstance
         }
@@ -148,8 +150,6 @@ ColumnLayout {
             deviceId: DeviceID
             isCurrent: IsCurrent
 
-            onClicked: settingsListView.currentIndex = index
-
             onBtnRemoveDeviceClicked: removeDeviceSlot(index)
         }
     }

src/settingsview/components/RevokeDevicePasswordDialog.qml

@@ -76,7 +76,7 @@ BaseDialog {
 
                 echoMode: TextInput.Password
                 placeholderText: JamiStrings.enterCurrentPassword
-                borderColorMode: InfoLineEdit.NORMAL
+                borderColorMode: MaterialLineEdit.NORMAL
 
                 onTextChanged: {
                     btnRemove.enabled = text.length > 0