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,6 +39,55 @@ RowLayout {
     property alias backgroundColor: lineEdit.backgroundColor
 
     property bool editable: false
+    property bool hovered: false
+    property string tooltipText: ""
+    property int preferredWidth: JamiTheme.preferredFieldWidth
+
+    height: lineEdit.height
+    width: preferredWidth
+
+    MaterialToolTip {
+        parent: lineEdit
+        visible: tooltipText != "" && hovered
+        delay: Qt.styleHints.mousePressAndHoldInterval
+        text: tooltipText
+    }
+
+    HoverHandler {
+        target : parent
+        onHoveredChanged: {
+            root.hovered = hovered
+        }
+        cursorShape: Qt.PointingHandCursor
+    }
+
+    RowLayout {
+        id: row
+        anchors.centerIn: parent
+        z: 1
+
+        Image {
+            id: editImg
+            opacity: editable
+
+            Layout.alignment: Qt.AlignVCenter
+
+            layer {
+                enabled: true
+                effect: ColorOverlay {
+                    color: root.color
+                }
+            }
+
+            source: JamiResources.round_edit_24dp_svg
+
+            Behavior on opacity {
+                NumberAnimation {
+                    from: 0
+                    duration: JamiTheme.longFadeDuration
+                }
+            }
+        }
 
         MaterialLineEdit {
             id: lineEdit
@@ -49,7 +98,7 @@ RowLayout {
             borderColor: root.color
 
             Layout.alignment: Qt.AlignCenter
-        Layout.maximumWidth: JamiTheme.preferredFieldWidth
+            Layout.preferredWidth: root.preferredFieldWidth - btnEdit.width - editImg.width - btnEdit.width
             Layout.fillHeight: true
 
             wrapMode: Text.NoWrap
@@ -74,23 +123,46 @@ RowLayout {
 
             Layout.alignment: Qt.AlignVCenter
 
-        opacity: 0.8
+            enabled: editable
+            opacity: editable ? 0.8 : 0
             imageColor: root.color
             normalColor: "transparent"
             hoveredColor: JamiTheme.hoveredButtonColor
 
-        Layout.preferredWidth: preferredSize
+            source: JamiResources.round_close_24dp_svg
-        Layout.preferredHeight: preferredSize
-
-        source: editable ?
-                JamiResources.round_close_24dp_svg :
-                JamiResources.round_edit_24dp_svg
 
             onClicked: {
-            if (root.editable)
                 root.editingFinished()
                 root.editable = !root.editable
                 lineEdit.forceActiveFocus()
             }
+
+            Behavior on opacity {
+                NumberAnimation {
+                    from: 0
+                    duration: JamiTheme.longFadeDuration
+                }
+            }
+        }
+    }
+
+    Rectangle {
+        anchors.fill: row
+        radius: JamiTheme.primaryRadius
+
+        visible: root.editable || root.hovered
+        color: root.color
+
+        Rectangle {
+            visible: parent.visible
+            anchors {
+                fill: parent
+                topMargin: 0
+                rightMargin: 0
+                bottomMargin: 3
+                leftMargin: 0
+            }
+            color: root.backgroundColor
+        }
     }
 }

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