Use style singleton on chat bubbles

This commit is contained in:
Angela Mazzurco 2017-06-08 15:16:50 +02:00
parent 6f718bb6f4
commit 69ed518555
4 changed files with 54 additions and 23 deletions

View File

@ -1,7 +1,9 @@
import QtQuick 2.7 import QtQuick 2.7
import QtQuick.Layouts 1.2 import QtQuick.Layouts 1.2
import QtQuick.Controls 2.0 import QtQuick.Controls 2.0
import "." // To load styles
//import './styles'
//import "styles/ChatBubblesStyle.qml" as Style
Item { Item {
@ -9,12 +11,14 @@ Item {
height: bubble.height height: bubble.height
width: parent.width width: parent.width
property int lMarginBubble: 10 // property int lMarginBubble: 10
property int rMarginBubble: 10 // property int rMarginBubble: 10
property int tMarginBubble: 5 // property int tMarginBubble: 5
property int bMarginBubble: 10 // property int bMarginBubble: 10
property int aditionalBubbleHeight: tMarginBubble * 2 // property int aditionalBubbleHeight: tMarginBubble * 2
property int aditionalBubbleWidth: 30 // property int aditionalBubbleWidth: 30
property var styles: StyleChatBubble
Rectangle { Rectangle {
@ -25,29 +29,28 @@ Item {
Rectangle Rectangle
{ {
id: bubble id: bubble
width: Math.max(mesageText.implicitWidth, sendersName.implicitWidth ) + timeText.implicitWidth + aditionalBubbleWidth width: Math.max(mesageText.implicitWidth, sendersName.implicitWidth ) + timeText.implicitWidth + styles.aditionalBubbleWidth
// height: mesageText.height + mesageText.anchors.margins + 10 height: mesageText.height + sendersName.height + styles.aditionalBubbleHeight
height: mesageText.height + sendersName.height + aditionalBubbleHeight
anchors.left: (model.incoming)? parent.left : undefined anchors.left: (model.incoming)? parent.left : undefined
anchors.right: (!model.incoming)? parent.right : undefined anchors.right: (!model.incoming)? parent.right : undefined
color: (!model.incoming)? "aliceblue" : "lightGreen" color: (!model.incoming)? styles.colorOutgoing : styles.colorIncoming
radius: 5 radius: styles.radius
Text { Text {
id: sendersName id: sendersName
visible: model.incoming visible: model.incoming
text: (model.incoming)? model.author_name + ":" : "" text: (model.incoming)? model.author_name + ":" : ""
color: "cornflowerblue" color: styles.colorSenderName
font.bold: true font.bold: true
anchors.leftMargin:lMarginBubble/2 anchors.leftMargin: styles.lMarginBubble
anchors.rightMargin: rMarginBubble anchors.rightMargin: styles.rMarginBubble
anchors.topMargin: tMarginBubble anchors.topMargin: styles.tMarginBubble
anchors.top: bubble.top anchors.top: bubble.top
anchors.left: (model.incoming)? parent.left : undefined anchors.left: (model.incoming)? parent.left : undefined
@ -59,15 +62,15 @@ Item {
Text { Text {
id: timeText id: timeText
text: getMessageTime() text: getMessageTime()
color: "grey" color: styles.colorMessageTime
anchors.left: (!model.incoming)? parent.left : undefined anchors.left: (!model.incoming)? parent.left : undefined
anchors.right:(model.incoming)? parent.right : undefined anchors.right:(model.incoming)? parent.right : undefined
anchors.bottom: bubble.bottom anchors.bottom: bubble.bottom
anchors.leftMargin:lMarginBubble anchors.leftMargin: styles.lMarginBubble
anchors.rightMargin: rMarginBubble anchors.rightMargin: styles.rMarginBubble
anchors.topMargin: tMarginBubble anchors.topMargin: styles.tMarginBubble
} }
@ -79,9 +82,8 @@ Item {
anchors.right:(!model.incoming)? parent.right : undefined anchors.right:(!model.incoming)? parent.right : undefined
anchors.top: sendersName.bottom anchors.top: sendersName.bottom
// anchors.bottomMargin: bMarginBubble anchors.leftMargin: styles.lMarginBubble
anchors.leftMargin:lMarginBubble anchors.rightMargin: styles.rMarginBubble
anchors.rightMargin: rMarginBubble
// wrapMode: Text.Wrap // wrapMode: Text.Wrap
} }

View File

@ -30,5 +30,7 @@
<file>icons/rating.png</file> <file>icons/rating.png</file>
<file>TimedPopup.qml</file> <file>TimedPopup.qml</file>
<file>ChatCache.qml</file> <file>ChatCache.qml</file>
<file>ChatBubbleDelegate.qml</file>
<file>styles/ChatBubblesStyle.qml</file>
</qresource> </qresource>
</RCC> </RCC>

View File

@ -1,3 +1,5 @@
singleton TokensManager 1.0 TokensManager.qml singleton TokensManager 1.0 TokensManager.qml
singleton ClipboardWrapper 1.0 ClipboardWrapper.qml singleton ClipboardWrapper 1.0 ClipboardWrapper.qml
singleton ChatCache ChatCache.qml singleton ChatCache ChatCache.qml
singleton StyleChatBubble styles/ChatBubblesStyle.qml

View File

@ -0,0 +1,25 @@
import QtQuick 2.0
pragma Singleton
QtObject {
// Margins
readonly property int lMarginBubble: 10
readonly property int rMarginBubble: 10
readonly property int tMarginBubble: 5
readonly property int bMarginBubble: 10
readonly property int aditionalBubbleHeight: tMarginBubble * 2
readonly property int aditionalBubbleWidth: 30
// BubbleProps
readonly property int radius: 5
// Colors
readonly property string colorIncoming: "lightGreen"
readonly property string colorOutgoing: "aliceblue"
readonly property string colorSenderName: "cornflowerblue"
readonly property string colorMessageTime: "grey"
}