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

Add various of changes required by emojiHash and identiconRing integration (#577) 

* chore(StatusIdenticonRing): make ringSpecModel accept array of objects

* chore(StatusLetterIdenticon): add charactersLen and textColor settings
This commit is contained in:
osmaczko 2022-03-13 14:00:55 +01:00 committed by Michał Cieślak
parent 0b4941966e
commit 5d58dc334c
10 changed files with 105 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/StatusQ/sandbox/controls/ListItems.qml
View File

@ -393,7 +393,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
ListElement {colorId: 28; segmentLength: 3}
}
ringSettings.distinctiveColors: Theme.palette.identiconRingColors
ringSettings.totalRingUnits: 25
}
StatusMemberListItem {

1
ui/StatusQ/sandbox/demoapp/StatusAppCommunityView.qml
View File

@ -268,7 +268,6 @@ StatusAppThreePanelLayout {
isOnline: model.isOnline
ringSettings.ringSpecModel: model.ringSpecModel
ringSettings.distinctiveColors: Theme.palette.identiconRingColors
ringSettings.totalRingUnits: model.totalRingUnits
}
}
}

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

@ -903,7 +903,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
isIdenticon: true
totalRingUnits: 25
ringSpecModel: [ ListElement {colorId: 13; segmentLength: 5},
ListElement {colorId: 31; segmentLength: 5},
ListElement {colorId: 10; segmentLength: 1},
@ -932,7 +931,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDK
ExhKZ4a9Uq3TZviZmIITSG0DRvlqcbqVbrlouZiCE0htD4h0hjCI0hNN5aNIbQGKKPxEzEEBpDaAyhMYTmDAAA//+gYCErzmCpCQAAAABJRU5ErkJggg=="
isIdenticon: true
totalRingUnits: 25
ringSpecModel: [ ListElement {colorId: 11; segmentLength: 1},
ListElement {colorId: 23; segmentLength: 5},
ListElement {colorId: 23; segmentLength: 5},
@ -950,7 +948,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
isOnline: false
source: ""
isIdenticon: false
totalRingUnits: 25
ringSpecModel: [ ListElement {colorId: 0; segmentLength: 1},
ListElement {colorId: 28; segmentLength: 1},
ListElement {colorId: 31; segmentLength: 1},

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

@ -30,6 +30,7 @@ Rectangle {
color: Theme.palette.miscColor5
letterSize: emoji ? 14 : 15
emoji: ""
charactersLen: 1
}
property int type: StatusChatListItem.Type.PublicChat
property bool highlighted: false

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

@ -4,13 +4,13 @@ import StatusQ.Core.Theme 0.1
import StatusQ.Core.Utils 0.1
Rectangle {
id: statusLetterIdenticon
id: root
property alias identiconText: identiconText
property string name
property string emoji
property int letterSize: 21
property int charCount: 1
property int charactersLen: 1
color: Theme.palette.miscColor5
width: 40
@ -19,6 +19,17 @@ Rectangle {
StatusBaseText {
id: identiconText
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
anchors.alignWhenCentered: false
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.weight: Font.Bold
font.pixelSize: root.letterSize
color: Qt.rgba(255, 255, 255, 0.7)
text: {
if (emoji) {
if(Utils.isHtml(emoji))
@ -26,20 +37,12 @@ Rectangle {
else
return Emoji.parse(emoji)
}
return (((statusLetterIdenticon.name.charAt(0) === "#")
|| (statusLetterIdenticon.name.charAt(0) === "@") ?
statusLetterIdenticon.name.charAt(1) : statusLetterIdenticon.name.charAt(0)).toUpperCase()
+ ((charCount === 2) ? statusLetterIdenticon.name.charAt(1) : ""))
const shift = (root.name.charAt(0) === "#") ||
(root.name.charAt(0) === "@")
return root.name.substring(shift, shift + charactersLen).toUpperCase()
}
font.weight: Font.Bold
font.pixelSize: statusLetterIdenticon.letterSize
color: Qt.rgba(255, 255, 255, 0.7)
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.alignWhenCentered: false
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
}
}

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

@ -32,6 +32,7 @@ Rectangle {
rotation: 0
isLetterIdenticon: false
letterSize: 21
charactersLen: 1
color: isLetterIdenticon ? background.color : type === StatusListItem.Type.Danger ?
Theme.palette.dangerColor1 : Theme.palette.primaryColor1
background: StatusIconBackgroundSettings {
@ -54,9 +55,9 @@ Rectangle {
isIdenticon: false
}
property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
totalRingUnits: 1
initalAngleRad: 0
ringPxSize: 1.5
distinctiveColors: Theme.palette.identiconRingColors
}
property alias sensor: sensor

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

@ -7,7 +7,6 @@ Loader {
id: statusSmartIdenticon
property string name: ""
property int charCount: 1
property int dZ: 100
// Badge color properties must be set if badgeItem.visible = true
@ -16,6 +15,7 @@ Loader {
property StatusIconSettings icon: StatusIconSettings {
width: 40
height: 40
charactersLen: 1
}
property StatusImageSettings image: StatusImageSettings {
@ -24,9 +24,9 @@ Loader {
}
property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
totalRingUnits: 1
initalAngleRad: 0
ringPxSize: 1.5
distinctiveColors: Theme.palette.identiconRingColors
}
sourceComponent: statusSmartIdenticon.icon.isLetterIdenticon ? letterIdenticon :
@ -86,7 +86,8 @@ Loader {
name: statusSmartIdenticon.name
emoji: statusSmartIdenticon.icon.emoji
letterSize: statusSmartIdenticon.icon.letterSize
charCount: statusSmartIdenticon.charCount
identiconText.color: statusSmartIdenticon.icon.textColor
charactersLen: statusSmartIdenticon.icon.charactersLen
}
}

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

@ -22,7 +22,6 @@ import StatusQ.Core 0.1
StatusIdenticonRing {
anchors.fill: parent
settings: StatusIdenticonRingSettings {
totalRingUnits: 25
initalAngleRad: 0
ringPxSize: 1.5
ringSpecModel: [ ListElement {colorId: 0; segmentLength: 1},
@ -52,55 +51,80 @@ import StatusQ.Core 0.1
For a list of components available see StatusQ.
*/
Item {
id: identiconRing
id: root
/*!
\qmlproperty StatusIdenticonRingSettings StatusIdenticonRing::settings
This property holds a set of settings for building the ring.
*/
property StatusIdenticonRingSettings settings: StatusIdenticonRingSettings {
totalRingUnits: 1
initalAngleRad: 0
ringPxSize: 1.5
}
/*!
\qmlproperty real StatusIdenticonRing::segmentRadLen
This property holds the total ring line length in radians. It depends on totalRingUnits value of settings object.
*/
readonly property real segmentRadLen: 2 * Math.PI / settings.totalRingUnits
visible: settings.ringSpecModel !== undefined
Canvas {
function printArcSegment(context, xPos, yPos, radius, color, startAngle, arcAngleLen, lineWidth) {
context.beginPath()
context.arc(xPos, yPos, radius, startAngle, startAngle + arcAngleLen, false/*anticlockwise*/)
context.strokeStyle = color
context.lineWidth = lineWidth
context.stroke()
}
Loader {
anchors.fill: parent
onPaint: {
const context = getContext("2d")
const radius = (height - settings.ringPxSize) / 2
const xPos = width / 2
const yPos = height / 2
let arcPos = settings.initalAngleRad
context.reset()
if(settings.ringSpecModel) {
for (let i=0; i<settings.ringSpecModel.count; i++) {
const segment = settings.ringSpecModel.get(i)
printArcSegment(context,
xPos,
yPos,
radius,
settings.distinctiveColors[segment.colorId],
arcPos,
segment.segmentLength * identiconRing.segmentRadLen,
settings.ringPxSize)
arcPos += segment.segmentLength * identiconRing.segmentRadLen
active: root.visible
sourceComponent: Canvas {
function printArcSegment(context, xPos, yPos, radius, color, startAngle, arcAngleLen, lineWidth) {
context.beginPath()
context.arc(xPos, yPos, radius, startAngle, startAngle + arcAngleLen, false/*anticlockwise*/)
context.strokeStyle = color
context.lineWidth = lineWidth
context.stroke()
}
function getSegmentsCount() {
if (typeof settings.ringSpecModel.count !== "undefined") {
return settings.ringSpecModel.count
}
return settings.ringSpecModel.length
}
function getSegment(i) {
if (typeof settings.ringSpecModel.count !== "undefined") {
return settings.ringSpecModel.get(i)
}
return settings.ringSpecModel[i]
}
function totalRingUnits() {
var units = 0
for (let i=0; i < getSegmentsCount(); i++) {
const segment = getSegment(i)
units += segment.segmentLength
}
return Math.max(1, units)
}
onPaint: {
const context = getContext("2d")
const radius = (height - settings.ringPxSize) / 2
const xPos = width / 2
const yPos = height / 2
const unitRadLen = 2 * Math.PI / totalRingUnits()
const segmentsCount = getSegmentsCount()
let arcPos = settings.initalAngleRad
context.reset()
if(settings.ringSpecModel) {
for (let i=0; i < segmentsCount; i++) {
const segment = getSegment(i)
printArcSegment(context,
xPos,
yPos,
radius,
settings.distinctiveColors[segment.colorId],
arcPos,
segment.segmentLength * unitRadLen,
settings.ringPxSize)
arcPos += segment.segmentLength * unitRadLen
}
}
}
}

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

@ -8,11 +8,13 @@ QtObject {
property real width
property real height
property color color
property color textColor: Qt.rgba(255, 255, 255, 0.7)
property color disabledColor
property url source
property int rotation
property bool isLetterIdenticon
property int letterSize
property int charactersLen
property string emoji
property StatusIconBackgroundSettings background: StatusIconBackgroundSettings {}
}

46
ui/StatusQ/src/StatusQ/Core/StatusIdenticonRingSettings.qml
View File

@ -14,29 +14,15 @@ import StatusQ.Core 0.1
\qml
StatusIdenticonRingSettings {
totalRingUnits: 25
initalAngleRad: 0
ringPxSize: 1.5
ringSpecModel: [ ListElement {colorId: 0; segmentLength: 1},
ListElement {colorId: 28; segmentLength: 1},
ListElement {colorId: 31; segmentLength: 1},
ListElement {colorId: 22; segmentLength: 4},
ListElement {colorId: 28; segmentLength: 3},
ListElement {colorId: 27; segmentLength: 5},
ListElement {colorId: 7; segmentLength: 5},
ListElement {colorId: 13; segmentLength: 1},
ListElement {colorId: 25; segmentLength: 4}]
ringSpecModel: [ {colorId: 0; segmentLength: 1},
{colorId: 5; segmentLength: 1},
{colorId: 1; segmentLength: 1},
{colorId: 1; segmentLength: 4},
{colorId: 2; segmentLength: 3} ]
distinctiveColors: ["#000000", "#726F6F", "#C4C4C4",
"#E7E7E7", "#FFFFFF", "#00FF00",
"#009800", "#B8FFBB", "#FFC413",
"#9F5947", "#FFFF00", "#A8AC00",
"#FFFFB0", "#FF5733", "#FF0000",
"#9A0000", "#FF9D9D", "#FF0099",
"#C80078", "#FF00FF", "#900090",
"#FFB0FF", "#9E00FF", "#0000FF",
"#000086", "#9B81FF", "#3FAEF9",
"#9A6600", "#00FFFF", "#008694",
"#C2FFFF", "#00F0B6"]
"#E7E7E7", "#FFFFFF", "#00FF00" ]
}
\endqml
@ -47,10 +33,18 @@ QtObject {
/*!
\qmlproperty ListModel StatusIdenticonRingSettings::ringSpecModel
This is a REQUIRED property that contains a ListModel object that describes each ring segment color and length.
Example of use: [ListElement {colorId: 0; segmentLength: 1}, ...]
This is a REQUIRED property that contains a ListModel or array of objects that describes each ring segment color and length.
Examples:
\qml
ringSpecModel: ListModel {ListElement{colorId: 0; segmentLength: 1} ListElement{colorId: 1; segmentLength: 2}}
\endqml
\qml
ringSpecModel: [{colorId: 0, segmentLength: 1}, {colorId: 1, segmentLength: 2}]
\endqml
*/
property ListModel ringSpecModel
property var ringSpecModel
/*!
\qmlproperty var StatusIdenticonRingSettings::distinctiveColors
@ -58,12 +52,6 @@ QtObject {
*/
property var distinctiveColors
/*!
\qmlproperty real StatusIdenticonRingSettings::totalRingUnits
This property provides the total number of units the identicon ring is composed by.
*/
property real totalRingUnits
/*!
\qmlproperty real StatusIdenticonRingSettings::initalAngleRad
This property provides the initial angle, in radians, the identicon ring will start rendering the line.