EditableLineEdit: new design

Change-Id: Ieebfacdf8128610ed60cdf73b1b4af6c209dcb36

src/commoncomponents/EditableLineEdit.qml

@@ -20,16 +20,16 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
 
 import net.jami.Constants 1.1
 
-RowLayout {
+Item {
     id: root
 
     signal editingFinished
 
     property alias text: lineEdit.text
-    property alias tooltipText: btnEdit.toolTipText
     property alias color: lineEdit.color
     property alias verticalAlignment: lineEdit.verticalAlignment
     property alias horizontalAlignment: lineEdit.horizontalAlignment
@@ -39,58 +39,130 @@ RowLayout {
     property alias backgroundColor: lineEdit.backgroundColor
 
     property bool editable: false
+    property bool hovered: false
+    property string tooltipText: ""
+    property int preferredWidth: JamiTheme.preferredFieldWidth
 
-    MaterialLineEdit {
+    height: lineEdit.height
-        id: lineEdit
+    width: preferredWidth
 
-        readOnly: !editable
+    MaterialToolTip {
-        underlined: true
+        parent: lineEdit
+        visible: tooltipText != "" && hovered
+        delay: Qt.styleHints.mousePressAndHoldInterval
+        text: tooltipText
+    }
 
-        borderColor: root.color
+    HoverHandler {
+        target : parent
+        onHoveredChanged: {
+            root.hovered = hovered
+        }
+        cursorShape: Qt.PointingHandCursor
+    }
 
-        Layout.alignment: Qt.AlignCenter
+    RowLayout {
-        Layout.maximumWidth: JamiTheme.preferredFieldWidth
+        id: row
-        Layout.fillHeight: true
+        anchors.centerIn: parent
+        z: 1
 
-        wrapMode: Text.NoWrap
+        Image {
+            id: editImg
+            opacity: editable
 
-        onFocusChanged: function(focus) {
+            Layout.alignment: Qt.AlignVCenter
-            if (!focus && editable) {
+
-                editable = !editable
+            layer {
-                root.editingFinished()
+                enabled: true
-            } else if (focus && !editable) {
+                effect: ColorOverlay {
-                editable = !editable
+                    color: root.color
-                lineEdit.forceActiveFocus()
+                }
+            }
+
+            source: JamiResources.round_edit_24dp_svg
+
+            Behavior on opacity {
+                NumberAnimation {
+                    from: 0
+                    duration: JamiTheme.longFadeDuration
+                }
             }
         }
-        onAccepted: {
+
-            editable = !editable
+        MaterialLineEdit {
-            root.editingFinished()
+            id: lineEdit
+
+            readOnly: !editable
+            underlined: true
+
+            borderColor: root.color
+
+            Layout.alignment: Qt.AlignCenter
+            Layout.preferredWidth: root.preferredFieldWidth - btnEdit.width - editImg.width - btnEdit.width
+            Layout.fillHeight: true
+
+            wrapMode: Text.NoWrap
+
+            onFocusChanged: function(focus) {
+                if (!focus && editable) {
+                    editable = !editable
+                    root.editingFinished()
+                } else if (focus && !editable) {
+                    editable = !editable
+                    lineEdit.forceActiveFocus()
+                }
+            }
+            onAccepted: {
+                editable = !editable
+                root.editingFinished()
+            }
+        }
+
+        PushButton {
+            id: btnEdit
+
+            Layout.alignment: Qt.AlignVCenter
+
+            enabled: editable
+            opacity: editable ? 0.8 : 0
+            imageColor: root.color
+            normalColor: "transparent"
+            hoveredColor: JamiTheme.hoveredButtonColor
+
+            source: JamiResources.round_close_24dp_svg
+
+            onClicked: {
+                root.editingFinished()
+                root.editable = !root.editable
+                lineEdit.forceActiveFocus()
+            }
+
+            Behavior on opacity {
+                NumberAnimation {
+                    from: 0
+                    duration: JamiTheme.longFadeDuration
+                }
+            }
         }
     }
 
-    PushButton {
+    Rectangle {
-        id: btnEdit
+        anchors.fill: row
+        radius: JamiTheme.primaryRadius
 
-        Layout.alignment: Qt.AlignVCenter
+        visible: root.editable || root.hovered
+        color: root.color
 
-        opacity: 0.8
+        Rectangle {
-        imageColor: root.color
+            visible: parent.visible
-        normalColor: "transparent"
+            anchors {
-        hoveredColor: JamiTheme.hoveredButtonColor
+                fill: parent
-
+                topMargin: 0
-        Layout.preferredWidth: preferredSize
+                rightMargin: 0
-        Layout.preferredHeight: preferredSize
+                bottomMargin: 3
-
+                leftMargin: 0
-        source: editable ?
+            }
-                JamiResources.round_close_24dp_svg :
+            color: root.backgroundColor
-                JamiResources.round_edit_24dp_svg
-
-        onClicked: {
-            if (root.editable)
-                root.editingFinished()
-            root.editable = !root.editable
-            lineEdit.forceActiveFocus()
         }
     }
 }

src/mainview/components/SwarmDetailsPanel.qml

@@ -60,7 +60,7 @@ Rectangle {
             EditableLineEdit {
                 id: titleLine
 
-                Layout.alignment: Qt.AlignCenter
+                Layout.alignment: Qt.AlignHCenter
                 Layout.topMargin: JamiTheme.preferredMarginSize
 
                 font.pointSize: JamiTheme.titleFontSize
@@ -85,7 +85,7 @@ Rectangle {
             EditableLineEdit {
                 id: descriptionLine
 
-                Layout.alignment: Qt.AlignCenter
+                Layout.alignment: Qt.AlignHCenter
                 Layout.topMargin: JamiTheme.preferredMarginSize
                 Layout.bottomMargin: JamiTheme.preferredMarginSize