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(ui): introduce `ChannelIcon` component 

This component renders channel identicons based on the chat type
and channel name and will render a user identicon in case of a one-on-one
chat.
This commit is contained in:
Pascal Precht 2020-06-02 11:54:46 +02:00 committed by Iuri Matias
parent 8332e3ac8a
commit 366d50bb74
4 changed files with 96 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,7 @@ import QtQuick.Layouts 1.3
import Qt.labs.platform 1.1
import "../../../../shared"
import "../../../../imports"
import "../components"
Rectangle {
property string channelNameStr: "#" + chatsModel.activeChannel
@ -16,37 +17,12 @@ Rectangle {
border.color: Theme.grey
border.width: 1
// TODO this should be the Identicon if it's a private chat
Rectangle {
id: channelIcon
width: 36
height: 36
anchors.left: parent.left
anchors.leftMargin: Theme.padding
anchors.top: parent.top
anchors.topMargin: Theme.smallPadding
color: {
if (!chatsModel.activeChannel) {
return Theme.transparent
}
const color = chatsModel.getChannelColor(chatsModel.activeChannel)
if (!color) {
return Theme.transparent
}
return color
}
radius: 50
Text {
id: channelIconText
color: "white"
opacity: 0.7
text: chatTopBarContent.channelNameStr.substring(1, 2).toUpperCase()
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
font.weight: Font.Bold
font.pixelSize: 18
}
ChannelIcon {
id: channelIcon
channelName: chatsModel.activeChannel
/* TODO(pascal): expose chatType from active channel to set it here */
channelType: Constants.chatTypeOneToOne
}
TextEdit {
@ -111,4 +87,4 @@ Rectangle {
}
}
}
}
}

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

@ -4,6 +4,7 @@ import QtQuick.Layouts 1.3
import Qt.labs.platform 1.1
import "../../../../shared"
import "../../../../imports"
import "../components"
Rectangle {
id: wrapper
@ -29,72 +30,14 @@ Rectangle {
}
}
Rectangle {
ChannelIcon {
id: contactImage
width: 40
height: 40
anchors.left: parent.left
anchors.leftMargin: Theme.padding
anchors.top: parent.top
anchors.topMargin: 12
anchors.bottom: parent.bottom
anchors.bottomMargin: 12
radius: 50
Loader {
sourceComponent: chatType == Constants.chatTypeOneToOne ? imageIdenticon : letterIdenticon
anchors.fill: parent
}
Component {
id: letterIdenticon
Rectangle {
width: 40
height: 40
radius: 50
color: {
const color = chatsModel.getChannelColor(name)
if (!color) {
return Theme.transparent
}
return color
}
Text {
text: {
if(chatType == Constants.chatTypeOneToOne){
return name;
} else {
return (name.charAt(0) == "#" ? name.charAt(1) : name.charAt(0)).toUpperCase();
}
}
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: 40
height: 40
radius: 50
border.color: "#10000000"
border.width: 1
color: Theme.transparent
Image {
width: 40
height: 40
fillMode: Image.PreserveAspectFit
source: identicon
}
}
}
width: 40
topMargin: 12
bottomMargin: 12
channelName: name
channelType: chatType
}
Text {

80
ui/app/AppLayouts/Chat/components/ChannelIcon.qml Normal file
View File

@ -0,0 +1,80 @@
import QtQuick 2.3
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import Qt.labs.platform 1.1
import "../../../../imports"
import "../../../../shared"
Rectangle {
property int topMargin: Theme.smallPadding
property int bottomMargin: Theme.smallPadding
property string channelName
property int channelType
property string channelIdenticon
id: contactImage
width: width ? width : 36
height: height ? height: 36
anchors.left: parent.left
anchors.leftMargin: Theme.padding
anchors.top: parent.top
anchors.topMargin: topMargin
anchors.bottom: parent.bottom
anchors.bottomMargin: bottomMargin
radius: 50
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: 50
color: {
const color = chatsModel.getChannelColor(channelName)
if (!color) {
return Theme.transparent
}
return color
}
Text {
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: 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: Theme.transparent
Image {
width: contactImage.width ? contactImage.width : 40
height: contactImage.height ? contactImage.height : 40
fillMode: Image.PreserveAspectFit
source: channelIdenticon
}
}
}
}

3
ui/app/AppLayouts/Chat/components/qmldir
View File

@ -1,3 +1,4 @@
SuggestedChannel 1.0 SuggestedChannel.qml
PublicChatPopup 1.0 PublicChatPopup.qml
PrivateChatPopup 1.0 PrivateChatPopup.qml
PrivateChatPopup 1.0 PrivateChatPopup.qml
ChannelIcon 1.0 ChannelIcon.qml