status-im
/
StatusQ
mirror of https://github.com/status-im/StatusQ.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 GitHub
parent 428b165198
commit a84026d74d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 105 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
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
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
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
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
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
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
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
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
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
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.