diff --git a/ui/app/AppLayouts/Chat/ChatColumn/Message.qml b/ui/app/AppLayouts/Chat/ChatColumn/Message.qml index 0c6b770432..b6e1704a85 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/Message.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/Message.qml @@ -36,8 +36,6 @@ Item { property var scrollToBottom: function () {} property var appSettings - property bool isCompact: appSettings.compactMode - id: messageItem width: parent.width anchors.right: !isCurrentUser ? undefined : parent.right @@ -58,7 +56,6 @@ Item { Loader { active :true width: parent.width - // TODO get prop from settings sourceComponent: { switch(contentType) { case Constants.chatIdentifier: @@ -66,7 +63,7 @@ Item { case Constants.systemMessagePrivateGroupType: return channelIdentifierComponent default: - return isCompact ? compactMessageComponent : messageComponent + return appSettings.compactMode ? compactMessageComponent : messageComponent } } } diff --git a/ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml b/ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml index 202879de8d..eebec5d494 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml @@ -21,6 +21,10 @@ Rectangle { channelName: chatsModel.activeChannel.name channelType: chatsModel.activeChannel.chatType channelIdenticon: chatsModel.activeChannel.identicon + anchors.left: parent.left + anchors.leftMargin: Style.current.padding + anchors.top: parent.top + anchors.topMargin: Style.current.smallPadding } StyledTextEdit { diff --git a/ui/app/AppLayouts/Chat/ContactsColumn/Channel.qml b/ui/app/AppLayouts/Chat/ContactsColumn/Channel.qml index e039eb834b..e9242fbbba 100644 --- a/ui/app/AppLayouts/Chat/ContactsColumn/Channel.qml +++ b/ui/app/AppLayouts/Chat/ContactsColumn/Channel.qml @@ -12,6 +12,7 @@ Rectangle { property bool hasMentions: false property int chatType: Constants.chatTypePublic property string searchStr: "" + property bool isCompact: appSettings.compactMode id: wrapper color: ListView.isCurrentItem ? Style.current.secondaryBackground : Style.current.transparent @@ -22,7 +23,7 @@ Rectangle { // Hide the box if it is filtered out property bool isVisible: searchStr == "" || name.includes(searchStr) visible: isVisible ? true : false - height: isVisible ? 64 : 0 + height: isVisible ? !isCompact ? 64 : contactImage.height + Style.current.smallPadding * 2 : 0 MouseArea { cursorShape: Qt.PointingHandCursor @@ -35,13 +36,15 @@ Rectangle { ChannelIcon { id: contactImage - height: 40 - width: 40 - topMargin: 12 - bottomMargin: 12 + height: !isCompact ? 40 : 20 + width: !isCompact ? 40 : 20 + fontSize: !isCompact ? this.defaultFontSize : 14 channelName: wrapper.name channelType: wrapper.chatType channelIdenticon: identicon + anchors.left: parent.left + anchors.leftMargin: !isCompact ? Style.current.padding : Style.current.smallPadding + anchors.verticalCenter: parent.verticalCenter } SVGImage { @@ -52,8 +55,9 @@ Rectangle { source: "../../../img/channel-icon-" + (wrapper.chatType === Constants.chatTypePublic ? "public-chat.svg" : "group.svg") anchors.left: contactImage.right anchors.leftMargin: Style.current.padding - anchors.top: parent.top - anchors.topMargin: Style.current.smallPadding + anchors.top: !isCompact ? parent.top : undefined + anchors.topMargin: !isCompact ? Style.current.smallPadding : 0 + anchors.verticalCenter: !isCompact ? undefined : parent.verticalCenter visible: wrapper.chatType !== Constants.chatTypeOneToOne } @@ -67,12 +71,14 @@ Rectangle { font.pixelSize: 15 anchors.left: channelIcon.visible ? channelIcon.right : contactImage.right anchors.leftMargin: channelIcon.visible ? 2 : Style.current.padding - anchors.top: parent.top - anchors.topMargin: Style.current.smallPadding + anchors.top: !isCompact ? parent.top : undefined + anchors.topMargin: !isCompact ? Style.current.smallPadding : 0 + anchors.verticalCenter: !isCompact ? undefined : parent.verticalCenter } StyledText { id: lastChatMessage + visible: !isCompact //% "No messages" text: lastMessage ? Emoji.parse(lastMessage, "26x26").replace(/\n|\r/g, ' ') : qsTrId("no-messages") clip: true // This is needed because emojis don't ellide correctly @@ -86,54 +92,63 @@ Rectangle { anchors.leftMargin: Style.current.padding color: Style.current.darkGrey } + StyledText { id: contactTime text: { - let now = new Date() - let yesterday = new Date() - yesterday.setDate(now.getDate()-1) - let messageDate = new Date(Math.floor(wrapper.timestamp)) - let lastWeek = new Date() - lastWeek.setDate(now.getDate()-7) + let now = new Date() + let yesterday = new Date() + yesterday.setDate(now.getDate()-1) + let messageDate = new Date(Math.floor(wrapper.timestamp)) + let lastWeek = new Date() + lastWeek.setDate(now.getDate()-7) - let minutes = messageDate.getMinutes(); - let hours = messageDate.getHours(); + let minutes = messageDate.getMinutes(); + let hours = messageDate.getHours(); - if (now.toDateString() == messageDate.toDateString()) { - return (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) - } else if (yesterday.toDateString() == messageDate.toDateString()) { - //% "Yesterday" - return qsTrId("yesterday") - } else if (lastWeek.getTime() < messageDate.getTime()) { - //% "Sunday" - //% "Monday" - //% "Tuesday" - //% "Wednesday" - //% "Thursday" - //% "Friday" - //% "Saturday" - let days = [qsTrId("sunday"), qsTrId("monday"), qsTrId("tuesday"), qsTrId("wednesday"), qsTrId("thursday"), qsTrId("friday"), qsTrId("saturday")]; - return days[messageDate.getDay()]; - } else { - return messageDate.getMonth()+1+"/"+messageDate.getDay()+"/"+messageDate.getFullYear() - } - } - anchors.right: parent.right - anchors.rightMargin: Style.current.padding - anchors.top: parent.top - anchors.topMargin: Style.current.smallPadding - font.pixelSize: 11 - color: Style.current.darkGrey + if (now.toDateString() === messageDate.toDateString()) { + return (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + } else if (yesterday.toDateString() === messageDate.toDateString()) { + //% "Yesterday" + return qsTrId("yesterday") + } else if (lastWeek.getTime() < messageDate.getTime()) { + //% "Sunday" + let days = [qsTrId("sunday"), + //% "Monday" + qsTrId("monday"), + //% "Tuesday" + qsTrId("tuesday"), + //% "Wednesday" + qsTrId("wednesday"), + //% "Thursday" + qsTrId("thursday"), + //% "Friday" + qsTrId("friday"), + //% "Saturday" + qsTrId("saturday")]; + return days[messageDate.getDay()]; + } else { + return messageDate.getMonth()+1+"/"+messageDate.getDay()+"/"+messageDate.getFullYear() + } + } + anchors.right: parent.right + anchors.rightMargin: !isCompact ? Style.current.padding : Style.current.smallPadding + anchors.top: !isCompact ? parent.top : undefined + anchors.topMargin: !isCompact ? Style.current.smallPadding : 0 + anchors.verticalCenter: !isCompact ? undefined : parent.verticalCenter + font.pixelSize: 11 + color: Style.current.darkGrey } Rectangle { id: contactNumberChatsCircle width: 22 height: 22 radius: 50 - anchors.bottom: parent.bottom - anchors.bottomMargin: Style.current.smallPadding - anchors.right: parent.right - anchors.rightMargin: Style.current.padding + anchors.right: !isCompact ? parent.right : contactTime.left + anchors.rightMargin: !isCompact ? Style.current.padding : Style.current.smallPadding + anchors.bottom: !isCompact ? parent.bottom : undefined + anchors.bottomMargin: !isCompact ? Style.current.smallPadding : 0 + anchors.verticalCenter: !isCompact ? undefined : parent.verticalCenter color: Style.current.blue visible: (unviewedMessagesCount > 0) || wrapper.hasMentions StyledText { @@ -142,7 +157,7 @@ Rectangle { font.pixelSize: 12 anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter - color: "white" + color: Style.current.white } } } diff --git a/ui/app/AppLayouts/Chat/components/ChannelIcon.qml b/ui/app/AppLayouts/Chat/components/ChannelIcon.qml index 58535274dc..25849474ac 100644 --- a/ui/app/AppLayouts/Chat/components/ChannelIcon.qml +++ b/ui/app/AppLayouts/Chat/components/ChannelIcon.qml @@ -4,75 +4,68 @@ import QtQuick.Layouts 1.13 import "../../../../imports" import "../../../../shared" -Rectangle { - property int topMargin: Style.current.smallPadding - property int bottomMargin: Style.current.smallPadding - property string channelName - property int channelType - property string channelIdenticon - id: contactImage - width: 36 - height: 36 - anchors.left: parent.left - anchors.leftMargin: Style.current.padding - anchors.top: parent.top - anchors.topMargin: topMargin - anchors.bottom: parent.bottom - anchors.bottomMargin: bottomMargin - radius: 50 +Item { + property string channelName + property int channelType + property string channelIdenticon + readonly property int defaultFontSize: 21 + property int fontSize: defaultFontSize + id: contactImage + width: 36 + height: 36 - Loader { - sourceComponent: channelType == Constants.chatTypeOneToOne ? imageIdenticon : letterIdenticon - anchors.fill: parent - } + Loader { + sourceComponent: channelType == Constants.chatTypeOneToOne ? imageIdenticon : letterIdenticon + anchors.fill: parent + } - Component { - id: letterIdenticon - Rectangle { - width: contactImage.width ? contactImage.width : 36 - height: contactImage.height ? contactImage.height: 36 - radius: 120 - color: { - const color = chatsModel.getChannelColor(channelName) - if (!color) { - return Style.current.transparent - } - return color - } + Component { + id: letterIdenticon + Rectangle { + width: contactImage.width + height: contactImage.height + radius: 50 + color: { + const color = chatsModel.getChannelColor(channelName) + if (!color) { + return Style.current.transparent + } + return color + } - StyledText { - text: { - if (channelType == Constants.chatTypeOneToOne) { - return channelName; - } else { - return (channelName.charAt(0) == "#" ? channelName.charAt(1) : channelName.charAt(0)).toUpperCase(); - } + StyledText { + text: { + if (channelType == Constants.chatTypeOneToOne) { + return channelName + } else { + return (channelName.charAt(0) == "#" ? channelName.charAt(1) : channelName.charAt(0)).toUpperCase() + } + } + opacity: 0.7 + font.weight: Font.Bold + font.pixelSize: fontSize + color: "white" + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + } } - opacity: 0.7 - font.weight: Font.Bold - font.pixelSize: 21 - color: "white" - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - } } - } - Component { - id: imageIdenticon - Rectangle { - width: contactImage.width ? contactImage.width : 40 - height: contactImage.height ? contactImage.height : 40 - radius: 50 - border.color: "#10000000" - border.width: 1 - color: Style.current.transparent - SVGImage { - width: contactImage.width ? contactImage.width : 40 - height: contactImage.height ? contactImage.height : 40 - fillMode: Image.PreserveAspectFit - source: channelIdenticon - } + Component { + id: imageIdenticon + Rectangle { + width: contactImage.width ? contactImage.width : 40 + height: contactImage.height ? contactImage.height : 40 + radius: 50 + border.color: "#10000000" + border.width: 1 + color: Style.current.transparent + SVGImage { + width: contactImage.width ? contactImage.width : 40 + height: contactImage.height ? contactImage.height : 40 + fillMode: Image.PreserveAspectFit + source: channelIdenticon + } + } } - } }