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: introduce StatusIdenticon components 

This component introduces `StatusLetterIdenticon`, `StatusImageIdenticon`
and `StatusIdenticon`.

- `StatusLetterIdenticon` renders an identicon with a single letter based on a
name.
- `StatusImageIdenticon` renders an actual image based on an identicon URL
- `StatusIdenticon` is a composition of the former both, but with a loading mechanism
  to decide which should be rendered

The commit also ensures all of these components are used respectively throughout
the application.
This commit is contained in:
Pascal Precht 2020-09-22 16:45:09 +02:00 committed by Pascal Precht
parent c347430864
commit fac0e50e37
15 changed files with 132 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui/app/AppLayouts/Chat/ChatColumn/SuggestionBox.qml
View File

@ -22,6 +22,7 @@ import QtQuick.Controls 2.13
import QtGraphicalEffects 1.13
import "../../../../imports"
import "../../../../shared"
import "../../../../shared/status"
Rectangle {
id: container
@ -98,7 +99,7 @@ Rectangle {
width: container.width
color: hovered ? Style.current.blue : "white"
Identicon {
StatusImageIdenticon {
id: accountImage
anchors.left: parent.left
anchors.leftMargin: Style.current.smallPadding

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

@ -2,11 +2,11 @@ import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import "../../../../shared"
import "../../../../shared/status"
import "../../../../imports"
import "../components"
Rectangle {
property string channelNameStr: "#" + chatsModel.activeChannel.id
property int iconSize: 16
id: chatTopBarContent

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

@ -1,6 +1,7 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import "../../../../shared"
import "../../../../shared/status"
import "../../../../imports"
import "../components"
@ -43,14 +44,13 @@ Rectangle {
}
}
ChannelIcon {
StatusIdenticon {
id: contactImage
height: !isCompact ? 40 : 20
width: !isCompact ? 40 : 20
fontSize: !isCompact ? this.defaultFontSize : 14
channelName: wrapper.name
channelType: wrapper.chatType
channelIdenticon: wrapper.identicon
chatName: wrapper.name
chatType: wrapper.chatType
identicon: wrapper.identicon
anchors.left: parent.left
anchors.leftMargin: !isCompact ? Style.current.padding : Style.current.smallPadding
anchors.verticalCenter: parent.verticalCenter

3
ui/app/AppLayouts/Chat/components/Contact.qml
View File

@ -4,6 +4,7 @@ import QtQuick.Layouts 1.3
import Qt.labs.platform 1.1
import "../../../../imports"
import "../../../../shared"
import "../../../../shared/status"
Rectangle {
property string pubKey: "0x123456"
@ -29,7 +30,7 @@ Rectangle {
radius: Style.current.radius
color: Style.current.transparent
Identicon {
StatusImageIdenticon {
id: accountImage
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter

16
ui/app/AppLayouts/Chat/components/GroupInfoPopup.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import "../../../../imports"
import "../../../../shared"
import "../../../../shared/status"
import "./"
ModalPopup {
@ -50,24 +51,15 @@ ModalPopup {
height: children[0].height
width: parent.width
Rectangle {
StatusLetterIdenticon {
id: letterIdenticon
width: 36
height: 36
radius: 50
anchors.top: parent.top
anchors.topMargin: Style.current.padding
color: chatsModel.activeChannel.color
StyledText {
text: chatsModel.activeChannel.name.charAt(0).toUpperCase();
opacity: 0.7
font.weight: Font.Bold
font.pixelSize: 21
color: Style.current.white
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
chatName: chatsModel.activeChannel.name
}
StyledTextEdit {

3
ui/app/AppLayouts/Chat/components/MessageContextMenu.qml
View File

@ -4,6 +4,7 @@ import QtQuick.Layouts 1.3
import QtQml.Models 2.3
import "../../../../imports"
import "../../../../shared"
import "../../../../shared/status"
import "./"
PopupMenu {
@ -48,7 +49,7 @@ PopupMenu {
height: visible ? profileImage.height + username.height + Style.current.padding : 0
color: hovered ? Style.current.secondaryBackground : Style.current.transparent
Identicon {
StatusImageIdenticon {
id: profileImage
source: profilePopup.identicon
anchors.top: parent.top

2
ui/app/AppLayouts/Profile/Sections/Contacts/Contact.qml
View File

@ -27,7 +27,7 @@ Rectangle {
radius: Style.current.radius
color: Style.current.transparent
Identicon {
StatusImageIdenticon {
id: accountImage
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter

5
ui/onboarding/Login.qml
View File

@ -4,6 +4,7 @@ import QtQuick.Layouts 1.13
import QtQuick.Dialogs 1.3
import QtGraphicalEffects 1.13
import "../shared"
import "../shared/status"
import "../imports"
import "./Login"
@ -31,10 +32,8 @@ Item {
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
Identicon {
StatusImageIdenticon {
id: userImage
width: 40
height: 40
anchors.horizontalCenter: parent.horizontalCenter
source: loginModel.currentAccount.identicon
}

3
ui/onboarding/Login/AddressView.qml
View File

@ -2,6 +2,7 @@ import QtQuick 2.13
import QtQuick.Controls 2.13
import "../../imports"
import "../../shared"
import "../../shared/status"
Rectangle {
property string username: "Jotaro Kujo"
@ -22,7 +23,7 @@ Rectangle {
color: selected || isHovered ? Style.current.grey : Style.current.transparent
radius: Style.current.radius
Identicon {
StatusImageIdenticon {
id: accountImage
anchors.left: parent.left
anchors.leftMargin: Style.current.padding

7
ui/shared/ContactSelector.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtGraphicalEffects 1.13
import "../imports"
import "../shared/status"
Item {
id: root
@ -43,7 +44,7 @@ Item {
menuAlignment: Select.MenuAlignment.Left
selectedItemView: Item {
anchors.fill: parent
Identicon {
StatusImageIdenticon {
id: iconImg
anchors.left: parent.left
anchors.leftMargin: 14
@ -92,13 +93,11 @@ Item {
width: parent.width
height: visible ? 72 : 0
Identicon {
StatusImageIdenticon {
id: iconImg
anchors.left: parent.left
anchors.leftMargin: Style.current.padding
anchors.verticalCenter: parent.verticalCenter
width: 40
height: 40
source: identicon
}
Column {

3
ui/shared/TransactionPreview.qml
View File

@ -3,6 +3,7 @@ import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtGraphicalEffects 1.13
import "../imports"
import "../shared/status"
Item {
id: root
@ -197,7 +198,7 @@ Item {
visible: false
source: imgToWallet
}
Identicon {
StatusImageIdenticon {
id: idtToContact
visible: false
anchors.right: parent.right

41
ui/shared/status/StatusIdenticon.qml Normal file
View File

@ -0,0 +1,41 @@
import QtQuick 2.13
import "../../imports"
import "../../shared"
import "../../shared/status"
Item {
id: root
property string chatName
property int chatType
property string identicon
width: 40
height: 40
Loader {
sourceComponent: root.chatType == Constants.chatTypeOneToOne ? imageIdenticon : letterIdenticon
anchors.fill: parent
}
Component {
id: letterIdenticon
StatusLetterIdenticon {
chatName: root.chatName
width: parent.width
height: parent.height
}
}
Component {
id: imageIdenticon
StatusImageIdenticon {
source: root.identicon
width: parent.width
height: parent.height
}
}
}

26
ui/shared/status/StatusImageIdenticon.qml Normal file
View File

@ -0,0 +1,26 @@
import QtQuick 2.13
import "../../imports"
import "../../shared"
Rectangle {
id: root
property url source:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAg0lEQVR4nOzXwQmAMBAFURV7sQybsgybsgyr0QYUlE1g+Mw7ioQMe9lMQwhDaAyhMYTGEJqYkPnrj/t5XE/ft2UdW1yken7MRAyhMYTGEBpDaAyhKe9JbzvSX9WdLWYihtAYQuMLkcYQGkPUScxEDKExhMYQGkNoDKExhMYQmjsAAP//ZfIUZgXTZXQAAAAASUVORK5CYII="
width: 40
height: 40
color: Style.current.background
radius: width / 2
border.width: 1
border.color: Style.current.borderSecondary
Image {
width: parent.width
height: parent.height
fillMode: Image.PreserveAspectFit
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
source: root.source
mipmap: true
smooth: false
antialiasing: true
}
}

31
ui/shared/status/StatusLetterIdenticon.qml Normal file
View File

@ -0,0 +1,31 @@
import QtQuick 2.13
import "../../imports"
import "../../shared"
Rectangle {
id: root
property string chatName
width: 40
height: 40
radius: width / 2
color: {
const color = chatsModel.getChannelColor(root.chatName)
if (!color) {
return Style.current.transparent
}
return color
}
StyledText {
text: (root.chatName.charAt(0) == "#" ? root.chatName.charAt(1) : root.chatName.charAt(0)).toUpperCase()
opacity: 0.7
font.weight: Font.Bold
font.pixelSize: root.isCompact ? 14 : 21
color: "white"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}

2
ui/shared/status/qmldir
View File

@ -1,4 +1,6 @@
StatusButton 1.0 StatusButton.qml
StatusImageIdenticon 1.0 StatusImageIdenticon.qml
StatusLetterIdenticon 1.0 StatusLetterIdenticon.qml
StatusRadioButton 1.0 StatusRadioButton.qml
StatusRoundButton 1.0 StatusRoundButton.qml
StatusSectionHeadline 1.0 StatusSectionHeadline.qml