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

ui/StatusQ/sandbox/controls/ListItems.qml

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

ui/StatusQ/sandbox/demoapp/StatusAppCommunityView.qml

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

ui/StatusQ/sandbox/demoapp/data/Models.qml

@@ -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},

ui/StatusQ/src/StatusQ/Components/StatusChatListItem.qml

@@ -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

ui/StatusQ/src/StatusQ/Components/StatusLetterIdenticon.qml

@@ -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) === "@") ?
+            const shift = (root.name.charAt(0) === "#") ||
-                statusLetterIdenticon.name.charAt(1) : statusLetterIdenticon.name.charAt(0)).toUpperCase()
+                          (root.name.charAt(0) === "@")
-                + ((charCount === 2) ? statusLetterIdenticon.name.charAt(1) : ""))
+
+            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
     }
 }
 
-

ui/StatusQ/src/StatusQ/Components/StatusListItem.qml

@@ -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

ui/StatusQ/src/StatusQ/Components/StatusSmartIdenticon.qml

@@ -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
         }
     }
 

ui/StatusQ/src/StatusQ/Controls/StatusIdenticonRing.qml

@@ -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 {
+    Loader {
-        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()
-        }
-
         anchors.fill: parent
-        onPaint: {
+
-            const context = getContext("2d")
+        active: root.visible
-            const radius = (height  - settings.ringPxSize) / 2
+
-            const xPos = width / 2
+        sourceComponent: Canvas {
-            const yPos = height / 2
+            function printArcSegment(context, xPos, yPos, radius, color, startAngle, arcAngleLen, lineWidth) {
-            let arcPos = settings.initalAngleRad
+                context.beginPath()
-            context.reset()
+                context.arc(xPos, yPos, radius, startAngle, startAngle + arcAngleLen, false/*anticlockwise*/)
-            if(settings.ringSpecModel) {
+                context.strokeStyle = color
-                for (let i=0; i<settings.ringSpecModel.count; i++) {
+                context.lineWidth = lineWidth
-                    const segment = settings.ringSpecModel.get(i)
+                context.stroke()
-                    printArcSegment(context,
+            }
-                                    xPos,
+
-                                    yPos,
+            function getSegmentsCount() {
-                                    radius,
+                if (typeof settings.ringSpecModel.count !== "undefined") {
-                                    settings.distinctiveColors[segment.colorId],
+                    return settings.ringSpecModel.count
-                                    arcPos,
+                }
-                                    segment.segmentLength * identiconRing.segmentRadLen,
+                return settings.ringSpecModel.length
-                                    settings.ringPxSize)
+            }
-                    arcPos += segment.segmentLength * identiconRing.segmentRadLen
+
+            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
+                    }
                 }
             }
         }

ui/StatusQ/src/StatusQ/Core/StatusIconSettings.qml

@@ -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 {}
 }

ui/StatusQ/src/StatusQ/Core/StatusIdenticonRingSettings.qml

@@ -14,29 +14,15 @@ import StatusQ.Core 0.1
 
    \qml
         StatusIdenticonRingSettings {
-            totalRingUnits: 25
             initalAngleRad: 0
             ringPxSize: 1.5
-            ringSpecModel: [ ListElement {colorId: 0; segmentLength: 1},
+            ringSpecModel: [ {colorId: 0; segmentLength: 1},
-                             ListElement {colorId: 28; segmentLength: 1},
+                             {colorId: 5; segmentLength: 1},
-                             ListElement {colorId: 31; segmentLength: 1},
+                             {colorId: 1; segmentLength: 1},
-                             ListElement {colorId: 22; segmentLength: 4},
+                             {colorId: 1; segmentLength: 4},
-                             ListElement {colorId: 28; segmentLength: 3},
+                             {colorId: 2; segmentLength: 3} ]
-                             ListElement {colorId: 27; segmentLength: 5},
-                             ListElement {colorId: 7; segmentLength: 5},
-                             ListElement {colorId: 13; segmentLength: 1},
-                             ListElement {colorId: 25; segmentLength: 4}]
             distinctiveColors: ["#000000", "#726F6F", "#C4C4C4",
-                                "#E7E7E7", "#FFFFFF", "#00FF00",
+                                "#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"]
         }
    \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.
+       This is a REQUIRED property that contains a ListModel or array of objects that describes each ring segment color and length.
-       Example of use: [ListElement {colorId: 0; segmentLength: 1}, ...]
+
+       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.