status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: add various fixes/improvements to identicons

This commit is contained in:
Patryk Osmaczko 2022-04-01 13:51:58 +02:00 committed by Michał Cieślak
parent 4ff66d8fd3
commit 3c855450fb
10 changed files with 80 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
ui/StatusQ/sandbox/demoapp/data/Models.qml
View File

@ -62,7 +62,9 @@ QtObject {
itemId: "x012340000"
name: "#status"
icon: ""
emoji: ""
isIdenticon: false
colorHash: []
color: "blue"
description: ""
type: StatusChatListItem.Type.PublicChat
@ -78,7 +80,9 @@ QtObject {
itemId: "x012340001"
name: "status-desktop"
icon: ""
emoji: ""
isIdenticon: false
colorHash: []
color: "red"
description: ""
type: StatusChatListItem.Type.PublicChat
@ -95,7 +99,9 @@ QtObject {
name: "Amazing Funny Squirrel"
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
emoji: ""
isIdenticon: true
colorHash: []
color: "green"
description: ""
type: StatusChatListItem.Type.OneToOneChat
@ -111,7 +117,9 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
itemId: "x012340003"
name: "Black Ops"
icon: ""
emoji: ""
isIdenticon: false
colorHash: []
color: "purple"
description: ""
type: StatusChatListItem.Type.OneToOneChat
@ -127,7 +135,9 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
itemId: "x012340004"
name: "Spectacular Growing Otter"
icon: ""
emoji: ""
isIdenticon: false
colorHash: []
color: "orange"
description: ""
type: StatusChatListItem.Type.OneToOneChat
@ -143,7 +153,9 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
itemId: "x012340005"
name: "channel-with-a-super-duper-long-name"
icon: ""
emoji: ""
isIdenticon: false
colorHash: []
color: "green"
description: ""
type: StatusChatListItem.Type.PublicChat
@ -397,7 +409,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
imageSource: ""
iconName: "chat"
iconColor: ""
isIdenticon: false
subItems: [
ListElement {
value: "sub_item_1_1"
@ -405,7 +416,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
iconName: ""
iconColor: ""
isIdenticon: false
},
ListElement {
value: "sub_item_1_2"
@ -413,7 +423,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
imageSource: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
iconName: ""
iconColor: ""
isIdenticon: true
}]}
ListElement {
value: "item_2"
@ -421,7 +430,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
iconName: ""
iconColor: ""
isIdenticon: false
subItems: [
ListElement {
value: "sub_item_2_1"
@ -429,7 +437,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
imageSource: ""
iconName: "channel"
iconColor: ""
isIdenticon: false
},
ListElement {
value: "sub_item_2_2"
@ -437,7 +444,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
imageSource: ""
iconName: "channel"
iconColor: ""
isIdenticon: false
},
ListElement {
value: "sub_item_2_3"
@ -445,7 +451,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
imageSource: ""
iconName: "channel"
iconColor: ""
isIdenticon: false
}]}
ListElement {
value: "item_3"
@ -453,7 +458,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
imageSource: "";
iconName: "info"
iconColor: ""
isIdenticon: false
subItems: [
ListElement {
value: "sub_item_3_1"
@ -461,7 +465,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
imageSource: ""
iconName: "channel"
iconColor: ""
isIdenticon: false
}]}
ListElement {
value: "item_4"
@ -469,7 +472,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
imageSource: "";
iconName: ""
iconColor: "red"
isIdenticon: false
subItems: [
ListElement {
value: "sub_item_4_1"
@ -477,7 +479,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
imageSource: ""
iconName: "channel"
iconColor: ""
isIdenticon: false
}]}
}

8
ui/StatusQ/src/StatusQ/Components/StatusChatList.qml
View File

@ -90,23 +90,25 @@ Column {
}
StatusChatListItem {
id: statusChatListItem
opacity: dragSensor.active ? 0.0 : 1.0
originalOrder: model.position
chatId: model.itemId
categoryId: model.parentItemId? model.parentItemId : ""
name: model.name
icon.emoji: model.emoji
type: !!model.type ? model.type : StatusChatListItem.Type.CommunityChat
muted: model.muted
hasUnreadMessages: model.hasUnreadMessages
notificationsCount: model.notificationsCount
highlightWhenCreated: !!model.highlight
selected: model.active
icon.emoji: model.emoji
icon.color: model.color
image.isIdenticon: model.isIdenticon
image.isIdenticon: false
image.source: model.icon
ringSettings.ringSpecModel: model.colorHash
sensor.cursorShape: dragSensor.cursorShape
onClicked: {

67
ui/StatusQ/src/StatusQ/Components/StatusChatListItem.qml
View File

@ -10,7 +10,7 @@ import StatusQ.Components 0.1
import StatusQ.Controls 0.1
Rectangle {
id: statusChatListItem
id: root
objectName: "chatItem"
property int originalOrder: -1
@ -29,11 +29,10 @@ Rectangle {
width: 24
height: 24
color: Theme.palette.miscColor5
letterSize: emoji ? 11 : 15
emoji: ""
emojiSize: Emoji.size.verySmall
charactersLen: 1
charactersLen: root.type === StatusChatListItem.Type.OneToOneChat ? 2 : 1
}
property alias ringSettings: identicon.ringSettings
property int type: StatusChatListItem.Type.PublicChat
property bool highlighted: false
property bool highlightWhenCreated: false
@ -79,16 +78,16 @@ Rectangle {
cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: statusChatListItem.clicked(mouse)
onClicked: root.clicked(mouse)
StatusSmartIdenticon {
id: identicon
anchors.left: parent.left
anchors.leftMargin: 8
anchors.verticalCenter: parent.verticalCenter
image: statusChatListItem.image
icon: statusChatListItem.icon
name: statusChatListItem.name
image: root.image
icon: root.icon
name: root.name
}
StatusIcon {
@ -98,21 +97,21 @@ Rectangle {
anchors.verticalCenter: parent.verticalCenter
width: 14
visible: statusChatListItem.type !== StatusChatListItem.Type.OneToOneChat
visible: root.type !== StatusChatListItem.Type.OneToOneChat
opacity: {
if (statusChatListItem.muted && !hoverHander.hovered && !statusChatListItem.highlighted) {
if (root.muted && !hoverHander.hovered && !root.highlighted) {
return 0.4
}
return statusChatListItem.hasUnreadMessages ||
statusChatListItem.notificationsCount > 0 ||
statusChatListItem.selected ||
statusChatListItem.highlighted ||
return root.hasUnreadMessages ||
root.notificationsCount > 0 ||
root.selected ||
root.highlighted ||
statusBadge.visible ||
hoverHander.hovered ? 1.0 : 0.7
}
icon: {
switch (statusChatListItem.type) {
switch (root.type) {
case StatusChatListItem.Type.PublicCat:
return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
break;
@ -137,27 +136,27 @@ Rectangle {
anchors.rightMargin: 6
anchors.verticalCenter: parent.verticalCenter
text: (statusChatListItem.type === StatusChatListItem.Type.PublicChat &&
!statusChatListItem.name.startsWith("#") ?
"#" + statusChatListItem.name :
statusChatListItem.name)
text: (root.type === StatusChatListItem.Type.PublicChat &&
!root.name.startsWith("#") ?
"#" + root.name :
root.name)
elide: Text.ElideRight
color: {
if (statusChatListItem.muted && !hoverHander.hovered && !statusChatListItem.highlighted) {
if (root.muted && !hoverHander.hovered && !root.highlighted) {
return Theme.palette.directColor5
}
return statusChatListItem.hasUnreadMessages ||
statusChatListItem.notificationsCount > 0 ||
statusChatListItem.selected ||
statusChatListItem.highlighted ||
statusChatListItem.highlightWhenCreated ||
return root.hasUnreadMessages ||
root.notificationsCount > 0 ||
root.selected ||
root.highlighted ||
root.highlightWhenCreated ||
hoverHander.hovered ||
statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
}
font.weight: !statusChatListItem.muted &&
(statusChatListItem.hasUnreadMessages ||
statusChatListItem.notificationsCount > 0 ||
statusChatListItem.highlightWhenCreated ||
font.weight: !root.muted &&
(root.hasUnreadMessages ||
root.notificationsCount > 0 ||
root.highlightWhenCreated ||
statusBadge.visible) ? Font.Bold : Font.Medium
font.pixelSize: 15
}
@ -170,14 +169,14 @@ Rectangle {
width: 14
opacity: mutedIconSensor.containsMouse ? 1.0 : 0.2
icon: Theme.palette.name === "light" ? "tiny/muted" : "tiny/muted-white"
visible: statusChatListItem.muted
visible: root.muted
MouseArea {
id: mutedIconSensor
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onClicked: statusChatListItem.unmute()
onClicked: root.unmute()
}
StatusToolTip {
@ -193,11 +192,11 @@ Rectangle {
anchors.right: parent.right
anchors.rightMargin: 8
color: statusChatListItem.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1
color: root.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1
border.width: 4
border.color: color
value: statusChatListItem.notificationsCount
visible: statusChatListItem.notificationsCount > 0
value: root.notificationsCount
visible: root.notificationsCount > 0
}
}
}

4
ui/StatusQ/src/StatusQ/Components/StatusLetterIdenticon.qml
View File

@ -9,7 +9,7 @@ Rectangle {
property alias identiconText: identiconText
property string name
property string emoji
property string emojiSize
property string emojiSize: Emoji.size.small
property int letterSize: 21
property int charactersLen: 1
@ -36,7 +36,7 @@ Rectangle {
if(Utils.isHtml(emoji))
return emoji
else
return Emoji.parse(emoji, emojiSize || undefined)
return Emoji.parse(root.emoji, emojiSize)
}
const shift = (root.name.charAt(0) === "#") ||

3
ui/StatusQ/src/StatusQ/Components/StatusSmartIdenticon.qml
View File

@ -15,7 +15,6 @@ Loader {
property StatusIconSettings icon: StatusIconSettings {
width: 40
height: 40
charactersLen: 1
}
property StatusImageSettings image: StatusImageSettings {
@ -25,7 +24,7 @@ Loader {
property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
initalAngleRad: 0
ringPxSize: 1.5
ringPxSize: Math.max(1.5, statusSmartIdenticon.image.width / 24.0)
distinctiveColors: Theme.palette.identiconRingColors
}

4
ui/StatusQ/src/StatusQ/Controls/StatusChatInfoButton.qml
View File

@ -25,8 +25,10 @@ Rectangle {
property StatusIconSettings icon: StatusIconSettings {
width: 36
height: 36
letterSize: 20
charactersLen: 2
}
property alias ringSettings: identicon.ringSettings
property int type: StatusChatInfoButton.Type.PublicChat
property alias tooltip: statusToolTip
property alias sensor: sensor

3
ui/StatusQ/src/StatusQ/Controls/StatusIconTabButton.qml
View File

@ -11,6 +11,8 @@ TabButton {
property string name: ""
property bool highlighted: false
property alias identicon: identicon
implicitWidth: 40
implicitHeight: 40
@ -32,7 +34,6 @@ TabButton {
icon.name: statusIconTabButton.icon.name
icon.color: (statusIconTabButton.hovered || highlighted || statusIconTabButton.checked) ? Theme.palette.primaryColor1 : statusIconTabButton.icon.color
icon.isLetterIdenticon: statusIconTabButton.name !== "" && !statusIconTabButton.icon.source.toString()
icon.letterSize: 15
name: statusIconTabButton.name
}
}

14
ui/StatusQ/src/StatusQ/Controls/StatusIdenticonRing.qml
View File

@ -79,6 +79,9 @@ Item {
}
function getSegmentsCount() {
if (typeof settings.ringSpecModel.rowCount !== "undefined") {
return settings.ringSpecModel.rowCount()
}
if (typeof settings.ringSpecModel.count !== "undefined") {
return settings.ringSpecModel.count
}
@ -86,6 +89,9 @@ Item {
}
function getSegment(i) {
if (typeof settings.ringSpecModel.rowCount !== "undefined") {
return abstactItemModelWrapper.itemAt(i)
}
if (typeof settings.ringSpecModel.count !== "undefined") {
return settings.ringSpecModel.get(i)
}
@ -101,6 +107,14 @@ Item {
return Math.max(1, units)
}
Repeater {
id: abstactItemModelWrapper
model: typeof settings.ringSpecModel.rowCount !== "undefined" ? settings.ringSpecModel : null
delegate: Item {
readonly property int segmentLength: model.segmentLength
readonly property int colorId: model.colorId
}
}
onPaint: {
const context = getContext("2d")

11
ui/StatusQ/src/StatusQ/Core/StatusIconSettings.qml
View File

@ -2,7 +2,7 @@ import QtQuick 2.13
import StatusQ.Core 0.1
QtObject {
id: statusIconSettings
id: root
property string name
property real width
@ -13,9 +13,14 @@ QtObject {
property url source
property int rotation
property bool isLetterIdenticon
property int letterSize
property int letterSize: emoji ? 11 : (charactersLen == 1 ? _oneLetterSize : _twoLettersSize)
property int charactersLen: 1
property string emoji
property string emojiSize
property string emojiSize: _emojiSize
property StatusIconBackgroundSettings background: StatusIconBackgroundSettings {}
// can't have QtObject { id: d } inside QtObject, using '_' to indicate private
readonly property int _oneLetterSize: Math.max(15, root.width / 2.0)
readonly property int _twoLettersSize: Math.max(12, root.width / 2.2)
readonly property string _emojiSize: "%1x%1".arg(Math.max(16, root.width * 0.6))
}

2
ui/StatusQ/src/StatusQ/Popups/StatusSearchLocationMenu.qml
View File

@ -36,7 +36,6 @@ StatusPopupMenu {
item.parentIconName = model.iconName;
item.parentImageSource = model.imageSource;
item.parentIdenticonColor = !!model.iconColor ? model.iconColor : Theme.palette.primaryColor1;
item.parentIsIdenticon = model.isIdenticon;
root.subMenuItemIcons.push({
source: model.imageSource,
icon: model.iconName,
@ -103,7 +102,6 @@ StatusPopupMenu {
image.source: model.imageSource
iconSettings.name: model.iconName
iconSettings.color: model.iconColor
image.isIdenticon: model.isIdenticon
onTriggered: {
searchPopup.resetSearchSelection()
if (menuLoader.parentTitleText === "Chat") {