misc: introduces EditableLineEdit

GitLab: #685
Change-Id: I6c284150b18ea7a866b063411b25e50f3afae559

qml.qrc

@@ -10,6 +10,7 @@
         <file>src/commoncomponents/SettingParaCombobox.qml</file>
         <file>src/commoncomponents/PreferenceItemDelegate.qml</file>
         <file>src/commoncomponents/PasswordDialog.qml</file>
+        <file>src/commoncomponents/EditableLineEdit.qml</file>
         <file>src/commoncomponents/MaterialLineEdit.qml</file>
         <file>src/commoncomponents/PhotoboothView.qml</file>
         <file>src/commoncomponents/JamiListView.qml</file>

src/commoncomponents/EditableLineEdit.qml

@@ -0,0 +1,92 @@
+/*
+ * Copyright (C) 2021 by Savoir-faire Linux
+ * Author: Sébastien blin <sebastien.blin@savoirfairelinux.com>
+ * Author: Mingrui Zhang <mingrui.zhang@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 <https://www.gnu.org/licenses/>.
+ */
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+import net.jami.Constants 1.1
+
+RowLayout {
+    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
+    property alias font: lineEdit.font
+    property alias placeholderText: lineEdit.placeholderText
+    property alias placeholderTextColor: lineEdit.placeholderTextColor
+    property alias backgroundColor: lineEdit.backgroundColor
+
+    property bool editable: false
+
+    MaterialLineEdit {
+        id: lineEdit
+
+        readOnly: !editable
+        underlined: true
+
+        borderColor: JamiTheme.textColor
+
+        Layout.alignment: Qt.AlignCenter
+        Layout.maximumWidth: JamiTheme.preferredFieldWidth
+        Layout.fillHeight: true
+
+        wrapMode: Text.NoWrap
+
+        onFocusChanged: function(focus) {
+            if (!focus && editable) {
+                editable = !editable
+                root.editingFinished()
+            } else if (focus && !editable) {
+                editable = !editable
+                lineEdit.forceActiveFocus()
+            }
+        }
+    }
+
+    PushButton {
+        id: btnEdit
+
+        Layout.alignment: Qt.AlignVCenter
+
+        opacity: 0.8
+        imageColor: JamiTheme.textColor
+        normalColor: "transparent"
+        hoveredColor: JamiTheme.hoveredButtonColor
+
+        Layout.preferredWidth: preferredSize
+        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()
+        }
+    }
+}

src/commoncomponents/MaterialLineEdit.qml

@@ -32,6 +32,7 @@ TextField {
     property var borderColor: JamiTheme.greyBorderColor
 
     property bool loseFocusWhenEnterPressed: false
+    property bool underlined: false
 
     padding: JamiTheme.materialLineEditPadding
     horizontalAlignment: Text.AlignLeft
@@ -57,11 +58,29 @@ TextField {
     }
 
     background: Rectangle {
-        anchors.fill: parent
+        anchors.fill: root
-
         radius: JamiTheme.primaryRadius
-        border.color: readOnly? "transparent" : borderColor
+
-        color: readOnly? "transparent" : backgroundColor
+        border.color: readOnly || underlined? "transparent" : borderColor
+        color: {
+            if (readOnly)
+                return "transparent"
+            if (underlined)
+                return borderColor
+            return backgroundColor
+        }
+
+        Rectangle {
+            visible: !readOnly && underlined
+            anchors {
+                fill: parent
+                topMargin: 0
+                rightMargin: 0
+                bottomMargin: 3
+                leftMargin: 0
+            }
+            color: backgroundColor
+        }
     }
 
     onReleased: function (event) {

src/constant/JamiStrings.qml

@@ -615,6 +615,8 @@ Item {
     property string about: qsTr("About")
     property string members: qsTr("Members")
     property string documents: qsTr("Documents")
+    property string editTitle: qsTr("Edit title")
+    property string editDescription: qsTr("Edit description")
 
     // NewSwarmPage
 

src/constant/JamiTheme.qml

@@ -165,6 +165,7 @@ Item {
     property color chatviewBgColor: darkTheme ? bgDarkMode_ : whiteColor
     property color bgInvitationRectColor: darkTheme ? "#222222" : whiteColor
     property color placeholderTextColor: darkTheme ? "#7a7a7a" : "#767676"
+    property color placeholderTextColorWhite: "#cccccc"
     property color inviteHoverColor: darkTheme ? blackColor : whiteColor
     property color chatviewButtonColor: darkTheme ? whiteColor : blackColor
     property color bgTextInput: darkTheme ? "#060608" : whiteColor

src/mainview/components/NewSwarmPage.qml

@@ -34,17 +34,46 @@ Rectangle {
 
     signal createSwarmClicked
 
-    RowLayout {
+    ColumnLayout {
         id: mainLayout
 
-        anchors.fill: parent
+        anchors.centerIn: root
+
+        EditableLineEdit {
+            Layout.alignment: Qt.AlignCenter
+            Layout.topMargin: JamiTheme.preferredMarginSize
+
+            font.pointSize: JamiTheme.titleFontSize
+
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+
+            placeholderText: JamiStrings.editTitle
+            tooltipText: JamiStrings.editTitle
+            backgroundColor: root.color
+            color: "white"
+        }
+
+        EditableLineEdit {
+            Layout.alignment: Qt.AlignCenter
+            Layout.topMargin: JamiTheme.preferredMarginSize
+
+            font.pointSize: JamiTheme.titleFontSize
+
+            placeholderText: JamiStrings.editDescription
+            tooltipText: JamiStrings.editDescription
+            backgroundColor: root.color
+            color: "white"
+        }
 
         MaterialButton {
             id: btnCreateSwarm
 
+            Layout.alignment: Qt.AlignCenter
+            Layout.topMargin: JamiTheme.preferredMarginSize
+
             preferredWidth: JamiTheme.aboutButtonPreferredWidth
 
-            Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
             color: JamiTheme.buttonTintedBlue
             hoveredColor: JamiTheme.buttonTintedBlueHovered
             pressedColor: JamiTheme.buttonTintedBluePressed

src/mainview/components/SwarmDetailsPanel.qml

@@ -48,41 +48,44 @@ Rectangle {
             showPresenceIndicator: false
         }
 
-        MaterialLineEdit {
+        EditableLineEdit {
+            id: titleLine
             Layout.alignment: Qt.AlignCenter
             Layout.topMargin: JamiTheme.preferredMarginSize
 
-            Layout.preferredWidth: root.width
-
             font.pointSize: JamiTheme.titleFontSize
 
             horizontalAlignment: Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
 
             text: CurrentConversation.title
+            placeholderText: JamiStrings.editTitle
+            placeholderTextColor: JamiTheme.placeholderTextColorWhite
+            tooltipText: JamiStrings.editTitle
+            backgroundColor: root.color
             color: "white"
 
             onEditingFinished: {
-                ConversationsAdapter.updateConversationTitle(LRCInstance.selectedConvUid, this.text)
+                ConversationsAdapter.updateConversationTitle(LRCInstance.selectedConvUid, titleLine.text)
             }
         }
 
-        MaterialLineEdit {
+        EditableLineEdit {
+            id: descriptionLine
             Layout.alignment: Qt.AlignCenter
             Layout.topMargin: JamiTheme.preferredMarginSize
 
-            Layout.preferredWidth: root.width
-
             font.pointSize: JamiTheme.titleFontSize
 
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-
             text: CurrentConversation.description
+            placeholderText: JamiStrings.editDescription
+            placeholderTextColor: JamiTheme.placeholderTextColorWhite
+            tooltipText: JamiStrings.editDescription
+            backgroundColor: root.color
             color: "white"
 
             onEditingFinished: {
-                ConversationsAdapter.updateConversationDescription(LRCInstance.selectedConvUid, this.text)
+                ConversationsAdapter.updateConversationDescription(LRCInstance.selectedConvUid, descriptionLine.text)
             }
         }