lilith/jami-client-qt
1
0
Fork 0
mirror of https://git.jami.net/savoirfairelinux/jami-client-qt.git synced 2025-07-24 17:35:43 +02:00
Code Activity

EditableLineEdit: new design

Browse source 
Change-Id: Ieebfacdf8128610ed60cdf73b1b4af6c209dcb36
This commit is contained in:
Sébastien Blin 2022-04-15 15:07:37 -04:00
parent a75f8c2356
commit b3bcbd6eab
2 changed files with 115 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

154
src/commoncomponents/EditableLineEdit.qml
View file

@ -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 {
id: lineEdit
height: lineEdit.height
width: preferredWidth
readOnly: !editable
underlined: true
MaterialToolTip {
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
Layout.maximumWidth: JamiTheme.preferredFieldWidth
Layout.fillHeight: true
RowLayout {
id: row
anchors.centerIn: parent
z: 1
wrapMode: Text.NoWrap
Image {
id: editImg
opacity: editable
onFocusChanged: function(focus) {
if (!focus && editable) {
editable = !editable
root.editingFinished()
} else if (focus && !editable) {
editable = !editable
lineEdit.forceActiveFocus()
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
}
}
}
onAccepted: {
editable = !editable
root.editingFinished()
MaterialLineEdit {
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 {
id: btnEdit
Rectangle {
anchors.fill: row
radius: JamiTheme.primaryRadius
Layout.alignment: Qt.AlignVCenter
visible: root.editable || root.hovered
color: root.color
opacity: 0.8
imageColor: root.color
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()
Rectangle {
visible: parent.visible
anchors {
fill: parent
topMargin: 0
rightMargin: 0
bottomMargin: 3
leftMargin: 0
}
color: root.backgroundColor
}
}
}

4
src/mainview/components/SwarmDetailsPanel.qml
View file

@ -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