diff --git a/qml.qrc b/qml.qrc index e3d6305b..31516078 100644 --- a/qml.qrc +++ b/qml.qrc @@ -10,6 +10,7 @@ src/commoncomponents/SettingParaCombobox.qml src/commoncomponents/PreferenceItemDelegate.qml src/commoncomponents/PasswordDialog.qml + src/commoncomponents/EditableLineEdit.qml src/commoncomponents/MaterialLineEdit.qml src/commoncomponents/PhotoboothView.qml src/commoncomponents/JamiListView.qml diff --git a/src/commoncomponents/EditableLineEdit.qml b/src/commoncomponents/EditableLineEdit.qml new file mode 100644 index 00000000..663b0b05 --- /dev/null +++ b/src/commoncomponents/EditableLineEdit.qml @@ -0,0 +1,92 @@ +/* + * Copyright (C) 2021 by Savoir-faire Linux + * Author: Sébastien blin + * Author: Mingrui Zhang + * + * 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 . + */ + +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 53e653ab..ae7685eb 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 44196c6f..c12870f7 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 70187487..510abcee 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 7400e76b..5cb70464 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 88468a79..905eef8d 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) } }