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

feat: implement design for the emoji suggestion picker

This commit is contained in:
Jonathan Rainville 2020-10-20 10:51:52 -04:00 committed by Iuri Matias
parent c68498fcfe
commit d2a4a9cfd5
1 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -359,16 +359,30 @@ Rectangle {
} }
id: emojiSuggestions id: emojiSuggestions
width: parent.width - Style.current.padding * 2 width: messageInput.width
height: Math.min(400, emojiList.contentHeight + Style.current.smallPadding * 2) height: Math.min(400, emojiList.contentHeight + Style.current.smallPadding)
x : Style.current.padding / 2 x : messageInput.x
y: -height - Style.current.smallPadding y: -height
background: Rectangle { background: Rectangle {
id: bgRectangle
visible: !!emojiSuggestions.emojis && emojiSuggestions.emojis.length > 0 visible: !!emojiSuggestions.emojis && emojiSuggestions.emojis.length > 0
color: Style.current.secondaryBackground color: Style.current.background
border.width: 1 border.width: 0
border.color: Style.current.borderSecondary
radius: Style.current.radius radius: Style.current.radius
layer.enabled: true
layer.effect: DropShadow{
width: bgRectangle.width
height: bgRectangle.height
x: bgRectangle.x
y: bgRectangle.y + 10
visible: bgRectangle.visible
source: bgRectangle
horizontalOffset: 0
verticalOffset: 2
radius: 10
samples: 15
color: "#22000000"
}
} }
ListView { ListView {
@ -380,7 +394,7 @@ Rectangle {
delegate: Rectangle { delegate: Rectangle {
id: rectangle id: rectangle
color: emojiList.currentIndex === index ? Style.current.inputBorderFocus : Style.current.transparent color: emojiList.currentIndex === index ? Style.current.backgroundHover : Style.current.transparent
border.width: 0 border.width: 0
width: parent.width width: parent.width
height: 42 height: 42
@ -396,7 +410,7 @@ Rectangle {
StyledText { StyledText {
text: modelData.shortname text: modelData.shortname
color: emojiList.currentIndex === index ? Style.current.currentUserTextColor : Style.current.textColor color: Style.current.textColor
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.left: emojiImage.right anchors.left: emojiImage.right
anchors.leftMargin: Style.current.smallPadding anchors.leftMargin: Style.current.smallPadding