diff --git a/qml.qrc b/qml.qrc
index e3d6305b31a4b1552928fac72e7d4d6d202f18a5..3151607882fb5326c67f3574ca0cd343a430a68c 100644
--- a/qml.qrc
+++ b/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>
diff --git a/src/commoncomponents/EditableLineEdit.qml b/src/commoncomponents/EditableLineEdit.qml
new file mode 100644
index 0000000000000000000000000000000000000000..663b0b05502e502ecfe4f7a176924a5bc1c2ca6a
--- /dev/null
+++ b/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()
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/commoncomponents/MaterialLineEdit.qml b/src/commoncomponents/MaterialLineEdit.qml
index 53e653abfb1d9b60cc85dc8d1c61b355fa976e8f..ae7685eb5b50791ddff00353513ad2794fec9b0b 100644
--- a/src/commoncomponents/MaterialLineEdit.qml
+++ b/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) {
diff --git a/src/constant/JamiStrings.qml b/src/constant/JamiStrings.qml
index 44196c6f3bc2330014de96c3c8443913927a3a9e..c12870f705e5ac74cfb1ca912b414ad5e960128c 100644
--- a/src/constant/JamiStrings.qml
+++ b/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
diff --git a/src/constant/JamiTheme.qml b/src/constant/JamiTheme.qml
index 701874871291a32d032e1576f213a5d3b216d112..510abcee54cb1c57d72437f27f85de3391049bb3 100644
--- a/src/constant/JamiTheme.qml
+++ b/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
diff --git a/src/mainview/components/NewSwarmPage.qml b/src/mainview/components/NewSwarmPage.qml
index 7400e76bfc6fabbde98be17ff9d0fb2205a85b10..5cb70464af21bcdf9b2740fed39fbb86f000f255 100644
--- a/src/mainview/components/NewSwarmPage.qml
+++ b/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
diff --git a/src/mainview/components/SwarmDetailsPanel.qml b/src/mainview/components/SwarmDetailsPanel.qml
index 88468a79844551764e81ea4038de5c0f399e6b5e..905eef8dd7f889037f32681585a4a6cc8f01ab8d 100644
--- a/src/mainview/components/SwarmDetailsPanel.qml
+++ b/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)
}
}