Skip to content
Snippets Groups Projects
Unverified Commit 0ef5cca5 authored by Fadi Shehadeh's avatar Fadi Shehadeh Committed by Sébastien Blin
Browse files

chatview: bubbles style 

- radius
- spacing username
- spacing avatar bubble
- added username on top

Change-Id: Iaea52d2c6334a64727fc818ef3232623b938d41e
Gitlab: #730
parent e0b3b4ad
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/app/commoncomponents/MessageBubble.qml
+ 7
− 10
View file @ 0ef5cca5
......@@ -18,29 +18,26 @@
import QtQuick
import Qt5Compat.GraphicalEffects
import net.jami.Constants 1.1
Rectangle {
id: root
property bool out: true
property int type: MsgSeq.single
Rectangle {
id: mask
visible: type !== MsgSeq.single
z: -1
radius: 2
radius: 5
color: root.color
anchors {
fill: parent
leftMargin: out ? root.width - root.radius : 0
rightMargin: out ? 0 : root.width - root.radius
topMargin: type === MsgSeq.first ? root.height - root.radius : 0
bottomMargin: type === MsgSeq.last ? root.height - root.radius : 0
leftMargin: out ? root.width/2 : 0
rightMargin: out ? 0 : root.width/2
topMargin: type === MsgSeq.first ? root.height /2 : 0
bottomMargin: type === MsgSeq.last ? root.height /2 : 0
}
}
}
src/app/commoncomponents/SBSMessageBase.qml
+ 37
− 6
View file @ 0ef5cca5
......@@ -25,6 +25,7 @@ import net.jami.Models 1.1
import net.jami.Adapters 1.1
import net.jami.Constants 1.1
Control {
id: root
......@@ -39,6 +40,7 @@ Control {
property int seq
property string author
property string transferId
property string registeredNameText
property string transferName
property string formattedTime
property string location
......@@ -46,8 +48,8 @@ Control {
property var readers: []
readonly property real senderMargin: 64
readonly property real avatarSize: 32
readonly property real msgRadius: 18
readonly property real avatarSize: 20
readonly property real msgRadius: 20
readonly property real hPadding: JamiTheme.sbsMessageBasePreferredPadding
width: ListView.view ? ListView.view.width : 0
......@@ -63,15 +65,35 @@ Control {
width: parent.width - hPadding * 2
spacing: 2
spacing: 0
Item {
id: usernameblock
Layout.preferredHeight: (seq === MsgSeq.first || seq === MsgSeq.single) ? 10 : 0
Label {
id: username
text: chatView.headerUserUserNameLabelText
font.bold: true
visible: (seq === MsgSeq.first || seq === MsgSeq.single) && !isOutgoing
font.pixelSize: JamiTheme.usernameBlockFontSize
font.family: JamiTheme.chatviewFontFamily
color: JamiTheme.chatviewUsernameColor
lineHeight: JamiTheme.usernameBlockLineHeight
leftPadding: JamiTheme.usernameBlockPadding
}
}
RowLayout {
Layout.preferredHeight: innerContent.height + root.extraHeight
Layout.topMargin: (seq === MsgSeq.first || seq === MsgSeq.single) ? 6 : 0
spacing: 0
Item {
id: avatarBlock
Layout.preferredWidth: isOutgoing ? 0 : avatar.width + hPadding
Layout.preferredWidth: isOutgoing ? 0 : avatar.width + hPadding/3
Layout.preferredHeight: isOutgoing ? 0 : bubble.height
Avatar {
id: avatar
......@@ -90,6 +112,7 @@ Control {
Column {
id: innerContent
width: parent.width
// place actual content here
}
MessageBubble {
......@@ -102,11 +125,13 @@ Control {
CurrentConversation.isCoreDialog ? JamiTheme.messageInBgColor : Qt.lighter(CurrentConversation.color, 1.5)
radius: msgRadius
anchors.right: isOutgoing ? parent.right : undefined
anchors.top: parent.top
width: innerContent.childrenRect.width
height: innerContent.childrenRect.height + (visible ? root.extraHeight : 0)
}
}
}
ListView {
id: infoCell
......@@ -120,6 +145,7 @@ Control {
return 0
}
Label {
id: formattedTimeLabel
......@@ -128,13 +154,15 @@ Control {
visible: showTime || seq === MsgSeq.last
height: visible * implicitHeight
font.pointSize: 9
topPadding : 4
anchors.right: !isOutgoing ? undefined : reads.left
anchors.rightMargin: 8
anchors.left: isOutgoing ? undefined : parent.left
anchors.leftMargin: avatarBlockWidth + 6
}
ReadStatus {
id: reads
visible: root.readers.length !== 0 && CurrentAccount.sendReadReceipt
width: {
......@@ -144,7 +172,10 @@ Control {
var margin = JamiTheme.avatarReadReceiptSize / 3
return nbAvatars * JamiTheme.avatarReadReceiptSize - (nbAvatars - 1) * margin
}
anchors.right: parent.right
anchors.top : parent.top
anchors.topMargin: 1
readers: root.readers
}
}
......
src/app/commoncomponents/TextMessageDelegate.qml
+ 12
− 3
View file @ 0ef5cca5
......@@ -31,6 +31,7 @@ SBSMessageBase {
id : root
property bool isRemoteImage
property real maxMsgWidth: root.width - senderMargin - 2 * hPadding - avatarBlockWidth
isOutgoing: Author === ""
......@@ -38,23 +39,31 @@ SBSMessageBase {
readers: Readers
formattedTime: MessagesAdapter.getFormattedTime(Timestamp)
extraHeight: extraContent.active && !isRemoteImage ? msgRadius : -isRemoteImage
innerContent.children: [
TextEdit {
padding: 10
padding: JamiTheme.chatviewPadding
anchors.right: isOutgoing ? parent.right : undefined
text: Body
horizontalAlignment: isOutgoing ? Text.AlignRight : Text.AlignLeft
width: {
if (extraContent.active)
Math.max(extraContent.width,
Math.min(implicitWidth - avatarBlockWidth,
extraContent.minSize) - senderMargin)
extraContent.minSize) - senderMargin )
else
Math.min(implicitWidth, innerContent.width - senderMargin)
}
height: implicitHeight
wrapMode: Label.WrapAtWordBoundaryOrAnywhere
selectByMouse: true
font.pointSize: 11
font.pixelSize: 15
font.family: 'Ubuntu'
font.hintingPreference: Font.PreferNoHinting
renderType: Text.NativeRendering
textFormat: Text.MarkdownText
......
src/app/constant/JamiTheme.qml
+ 18
− 5
View file @ 0ef5cca5
......@@ -157,14 +157,14 @@ Item {
// Chatview
property color jamiLightBlue: darkTheme ? "#003b4e" : Qt.rgba(59, 193, 211, 0.3)
property color jamiDarkBlue: darkTheme ? "#28b1ed" : "#003b4e"
property color chatviewTextColor: darkTheme ? "#f0f0f0" : "#353637"
property color chatviewTextColor: darkTheme ? "#f0f0f0" : "#000000"
property color chatviewTextColorLight: "#f0f0f0"
property color chatviewTextColorDark: "#353637"
property color timestampColor: darkTheme ? "#bbb" : "#777"
property color messageOutTxtColor: chatviewTextColor
property color messageInBgColor: darkTheme ? "#28b1ed" : "#cfd8dc"
property color messageOutBgColor: darkTheme? "#616161" : "#cfebf5"
property color messageInTxtColor: chatviewTextColor
property color messageOutTxtColor: "#000000"
property color messageInBgColor: darkTheme ? "#28b1ed" : "#e5e5e5"
property color messageOutBgColor: darkTheme? "#616161" : "#005699"
property color messageInTxtColor: "#FFFFFF"
property color fileOutTimestampColor: darkTheme ? "#eee" : "#555"
property color fileInTimestampColor: darkTheme ? "#999" : "#555"
property color chatviewBgColor: darkTheme ? bgDarkMode_ : whiteColor
......@@ -179,6 +179,7 @@ Item {
property color previewCardContainerColor : darkTheme ? blackColor : whiteColor
property color previewUrlColor : darkTheme ? "#eeeeee" : "#333"
property color messageWebViewFooterButtonImageColor: darkTheme ? "#838383" : "#656565"
property color chatviewUsernameColor : "#A7A7A7"
// Files To Send Container
property color removeFileButtonColor: Qt.rgba(96, 95, 97, 0.5)
......@@ -191,6 +192,7 @@ Item {
property color typingDotsEnlargeColor: darkTheme ? "white" : Qt.darker("lightgrey", 3.0)
// Font.
property color faddedFontColor: darkTheme? "#c0c0c0" : "#a0a0a0"
property color faddedLastInteractionFontColor: darkTheme ? "#c0c0c0" : "#505050"
......@@ -213,6 +215,9 @@ Item {
property int overlayFadeDuration: 250
property int smartListTransitionDuration: 120
property string chatviewFontFamily : 'Ubuntu'
// Sizes
property real qrCodeImageSize: 256
property real splitViewHandlePreferredWidth: 4
......@@ -283,6 +288,8 @@ Item {
property real lineEditContextMenuItemsWidth: 100
property real lineEditContextMenuSeparatorsHeight: 2
// Jami switch
property real switchIndicatorRadius: 30
property real switchPreferredHeight: 25
......@@ -294,8 +301,10 @@ Item {
// MessageWebView
property real chatViewHairLineSize: 1
property real chatviewPadding : 16
property real chatViewMaximumWidth: 900
property real chatViewHeaderPreferredHeight: 64
property real chatViewHeaderMinimumWidth: 200
property real chatViewFooterPreferredHeight: 50
property real chatViewFooterMaximumHeight: 280
property real chatViewFooterRowSpacing: 1
......@@ -306,6 +315,10 @@ Item {
property real chatViewFooterTextAreaMaximumHeight: 130
property real chatViewScrollToBottomButtonBottomMargin: 8
property real usernameBlockFontSize : 12
property real usernameBlockLineHeight : 14
property real usernameBlockPadding : contactMessageAvatarSize + 8
// TypingDots
property real typingDotsAnimationInterval: 500
property real typingDotsRadius: 30
......
src/app/mainview/components/ChatView.qml
+ 3
− 1
View file @ 0ef5cca5
......@@ -61,6 +61,7 @@ Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: JamiTheme.chatViewHeaderPreferredHeight
Layout.maximumHeight: JamiTheme.chatViewHeaderPreferredHeight
Layout.minimumWidth: JamiTheme.chatViewHeaderMinimumWidth
userAliasLabelText: headerUserAliasLabelText
userUserNameLabelText: headerUserUserNameLabelText
......@@ -137,9 +138,10 @@ Rectangle {
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
Layout.fillHeight: true
Layout.maximumWidth: JamiTheme.chatViewMaximumWidth
Layout.topMargin: JamiTheme.chatViewHairLineSize
Layout.bottomMargin: JamiTheme.chatViewHairLineSize
Layout.leftMargin: JamiTheme.chatviewMargin
Layout.rightMargin: JamiTheme.chatviewMargin
currentIndex: CurrentConversation.isRequest ||
CurrentConversation.needsSyncing
......
src/app/mainview/components/MessageBar.qml
+ 0
− 1
View file @ 0ef5cca5
......@@ -50,7 +50,6 @@ ColumnLayout {
Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
Layout.preferredHeight: JamiTheme.chatViewHairLineSize
Layout.fillWidth: true
Layout.maximumWidth: JamiTheme.chatViewMaximumWidth
color: JamiTheme.tabbarBorderColor
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment