status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(StatusChatInput): fine-tune image area and prepare for status update input

This commit is contained in:
Pascal Precht 2020-12-04 12:11:49 +01:00 committed by Pascal Precht
parent 7210bb1370
commit e79c754405
2 changed files with 76 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
ui/shared/status/StatusChatInput.qml
View File

@ -35,6 +35,7 @@ Rectangle {
property string chatInputPlaceholder: qsTr("Type a message.")
property alias textInput: messageInputField
property bool isStatusUpdateInput: chatType === Constants.chatTypeStatusUpdate
height: {
if (extendedArea.visible) {
@ -523,69 +524,15 @@ Rectangle {
}
}
Rectangle {
id: extendedArea
visible: isImage || isReply
height: {
if (visible) {
if (isImage) {
return imageArea.height
}
if (isReply) {
return replyArea.height + replyArea.anchors.topMargin
}
}
return 0
}
anchors.left: messageInput.left
anchors.right: messageInput.right
anchors.bottom: messageInput.top
color: Style.current.inputBackground
radius: 16
Rectangle {
height: 16
color: parent.color
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
}
StatusChatInputImageArea {
id: imageArea
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
visible: isImage
onImageRemoved: {
isImage = false
}
}
StatusChatInputReplyArea {
id: replyArea
visible: isReply
anchors.left: parent.left
anchors.leftMargin: 2
anchors.right: parent.right
anchors.rightMargin: 2
anchors.top: parent.top
anchors.topMargin: 2
onCloseButtonClicked: {
isReply = false
}
}
}
Rectangle {
id: messageInput
property int maxInputFieldHeight: 112
property int defaultInputFieldHeight: 40
anchors.left: imageBtn.visible ? imageBtn.right : parent.left
anchors.leftMargin: imageBtn.visible ? 5 : Style.current.smallPadding
anchors.bottom: parent.bottom
anchors.bottomMargin: 12
anchors.top: control.isStatusUpdateInput ? parent.top : undefined
anchors.bottom: !control.isStatusUpdateInput ? parent.bottom : undefined
anchors.bottomMargin: control.isStatusUpdateInput ? 0 : 12
anchors.right: parent.right
anchors.rightMargin: Style.current.smallPadding
height: scrollView.height
@ -593,21 +540,85 @@ Rectangle {
radius: height > defaultInputFieldHeight || extendedArea.visible ? 16 : 32
Rectangle {
color: parent.color
anchors.right: parent.right
id: extendedArea
visible: isImage || isReply
height: {
if (visible) {
if (isImage) {
return imageArea.height + Style.current.halfPadding
}
if (isReply) {
return replyArea.height + replyArea.anchors.topMargin
}
}
return 0
}
anchors.left: messageInput.left
anchors.right: messageInput.right
anchors.bottom: control.isStatusUpdateInput ? undefined : messageInput.top
anchors.top: control.isStatusUpdateInput ? messageInput.bottom : undefined
anchors.topMargin: control.isStatusUpdateInput ? -Style.current.halfPadding : 0
color: Style.current.inputBackground
radius: control.isStatusUpdateInput ? 36 : 16
Rectangle {
color: parent.color
anchors.right: parent.right
anchors.left: parent.left
height: control.isStatusUpdateInput ? 64 : 30
anchors.top: control.isStatusUpdateInput ? parent.top : undefined
anchors.topMargin: control.isStatusUpdateInput ? -24 : 0
anchors.bottom: control.isStatusUpdateInput ? undefined : parent.bottom
anchors.bottomMargin: control.isStatusUpdateInput ? 0 : -height/2
}
StatusChatInputImageArea {
id: imageArea
anchors.left: parent.left
anchors.leftMargin: control.isStatusUpdateInput ? profileImage.width + Style.current.padding : Style.current.halfPadding
anchors.right: parent.right
anchors.rightMargin: control.isStatusUpdateInput ? actions.width + 2* Style.current.padding : Style.current.halfPadding
anchors.top: parent.top
anchors.topMargin: control.isStatusUpdateInput ? 0 : Style.current.halfPadding
visible: isImage
onImageRemoved: {
isImage = false
}
}
StatusChatInputReplyArea {
id: replyArea
visible: isReply
anchors.left: parent.left
anchors.leftMargin: 2
anchors.right: parent.right
anchors.rightMargin: 2
anchors.top: parent.top
anchors.topMargin: 2
onCloseButtonClicked: {
isReply = false
}
}
}
StatusImageIdenticon {
id: profileImage
source: profileModel.profile.identicon
anchors.left: parent.left
anchors.leftMargin: Style.current.smallPadding
anchors.top: parent.top
height: 18
visible: extendedArea.visible
anchors.topMargin: Style.current.halfPadding
visible: control.isStatusUpdateInput
}
ScrollView {
id: scrollView
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.left: profileImage.visible ? profileImage.right : parent.left
anchors.leftMargin: Style.current.smallPadding
anchors.right: actions.left
anchors.rightMargin: 0
anchors.rightMargin: Style.current.halfPadding
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
height: {
if (messageInputField.implicitHeight <= messageInput.defaultInputFieldHeight) {
@ -676,6 +687,7 @@ Rectangle {
color: parent.color
anchors.bottom: parent.bottom
anchors.right: parent.right
visible: !control.isStatusUpdateInput
height: parent.height / 2
width: 32
radius: Style.current.radius

4
ui/shared/status/StatusChatInputImageArea.qml
View File

@ -6,7 +6,7 @@ import "../../shared"
Rectangle {
id: imageArea
height: 72
height: chatImage.height
signal imageRemoved()
property url imageSource: ""
@ -17,9 +17,7 @@ Rectangle {
property bool hovered: false
height: 64
anchors.left: parent.left
anchors.leftMargin: Style.current.halfPadding
anchors.top: parent.top
anchors.topMargin: Style.current.halfPadding
fillMode: Image.PreserveAspectFit
mipmap: true
smooth: false