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: make channel list compact in compact mode

This commit is contained in:
Jonathan Rainville 2020-07-15 12:09:20 -04:00 committed by Iuri Matias
parent 36f230e03d
commit 851eb82026
4 changed files with 124 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/app/AppLayouts/Chat/ChatColumn/Message.qml
View File

@ -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
}
}
}

4
ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml
View File

@ -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 {

55
ui/app/AppLayouts/Chat/ContactsColumn/Channel.qml
View File

@ -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,6 +92,7 @@ Rectangle {
anchors.leftMargin: Style.current.padding
color: Style.current.darkGrey
}
StyledText {
id: contactTime
text: {
@ -99,29 +106,36 @@ Rectangle {
let minutes = messageDate.getMinutes();
let hours = messageDate.getHours();
if (now.toDateString() == messageDate.toDateString()) {
if (now.toDateString() === messageDate.toDateString()) {
return (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes)
} else if (yesterday.toDateString() == messageDate.toDateString()) {
} 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"
let days = [qsTrId("sunday"), qsTrId("monday"), qsTrId("tuesday"), qsTrId("wednesday"), qsTrId("thursday"), qsTrId("friday"), qsTrId("saturday")];
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
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
}
@ -130,10 +144,11 @@ Rectangle {
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
}
}
}

25
ui/app/AppLayouts/Chat/components/ChannelIcon.qml
View File

@ -4,22 +4,15 @@ import QtQuick.Layouts 1.13
import "../../../../imports"
import "../../../../shared"
Rectangle {
property int topMargin: Style.current.smallPadding
property int bottomMargin: Style.current.smallPadding
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
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
Loader {
sourceComponent: channelType == Constants.chatTypeOneToOne ? imageIdenticon : letterIdenticon
@ -29,9 +22,9 @@ Rectangle {
Component {
id: letterIdenticon
Rectangle {
width: contactImage.width ? contactImage.width : 36
height: contactImage.height ? contactImage.height: 36
radius: 120
width: contactImage.width
height: contactImage.height
radius: 50
color: {
const color = chatsModel.getChannelColor(channelName)
if (!color) {
@ -43,14 +36,14 @@ Rectangle {
StyledText {
text: {
if (channelType == Constants.chatTypeOneToOne) {
return channelName;
return channelName
} else {
return (channelName.charAt(0) == "#" ? channelName.charAt(1) : channelName.charAt(0)).toUpperCase();
return (channelName.charAt(0) == "#" ? channelName.charAt(1) : channelName.charAt(0)).toUpperCase()
}
}
opacity: 0.7
font.weight: Font.Bold
font.pixelSize: 21
font.pixelSize: fontSize
color: "white"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter